It's a simple Vue Quiz App, I don't know why it's happening this:
At the first question I choose the answer 'a', then click next, and in the next question I CAN'T choose 'a' once again. So I choose 'b' and at the third question the only answer I can choose is 'c'.
Everything is working right except this thing, and I want to fix it.
Also how can I show random questions each time? So every time someone play the quiz, questions are shown always in a different order.
Why this is happening?
The Vue template
<template>
<div id="app">
<div class="flex">
<h2 class="title">Simple Quiz</h2>
<div class="quiz">
<div v-if="domandaCorrente < domande.length" class="question">
<h2>{{ domande[domandaCorrente].domanda }}</h2>
<label
class="answer"
:for="index"
v-for="(risposta, index) in domande[domandaCorrente].risposte"
:key="index"
:class="{
'hover border-grey': domandaScelta == '',
'bg-red': domandaScelta == index,
'bg-green':
index == domande[domandaCorrente].rispostaCorretta &&
domandaScelta != '',
}"
>
<input
type="radio"
:name="index"
:id="index"
class="hidden"
:value="index"
@change="select($event)"
/>
{{ risposta }}
</label>
</div>
<div v-else>
Results
<div>
<h2>
Correct Answers: <span class="t-green">{{ correct }}</span>
</h2>
<h2>
Wrong Answers: <span class="t-red">{{ wrong }}</span>
</h2>
</div>
<button @click="reload()">Reload</button>
</div>
<div
v-show="domandaScelta != '' && domandaCorrente < domande.length - 1"
class="button"
>
<button @click="nextQuestion()">Next</button>
</div>
<div
v-show="domandaScelta != '' && domandaCorrente == domande.length - 1"
class="button"
>
<button @click="showResult()">Finish</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
domandaCorrente: 0,
correct: 0,
wrong: 0,
domandaScelta: "",
domande: [
{
domanda: "Quante champions ha vinto il Milan?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "c",
},
{
domanda: "Quante champions ha vinto l'Inter?",
risposte: { a: "1", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
{
domanda: "Quante champions ha vinto la Juve?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
],
};
},
methods: {
select(e) {
this.domandaScelta = e.target.value;
console.log(this.domandaScelta)
console.log(this.domandaCorrente)
if(this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
this.correct
} else {
this.wrong
}
},
nextQuestion() {
this.domandaScelta = ""
this.domandaCorrente
},
showResult() {
this.domandaCorrente
},
reload() {
this.domandaCorrente = 0
this.domandaScelta = ""
this.wrong = 0
this.correct = 0
}
},
components: {},
};
</script>
CodePudding user response：
1- Add a selected variable to store selected input.
Set it as false when the user clicks on nextQuestion.
selected: false,
Set its value on select function:
this.selected = e.target.value
2- In your html code check the checked attribute with selected. Also correct name attribute to be equal for all of the inputs.
<input type="radio" :checked="index === selected" :name="`ans-${domandaCorrente}`" :id="`ans-${index}`" class="hidden" :value="index" @change="select($event)" />
var app = new Vue({
el: '#app',
name: "App",
data() {
return {
domandaCorrente: 0,
correct: 0,
selected: false,
wrong: 0,
domandaScelta: "",
domande: [{
domanda: "Quante champions ha vinto il Milan?",
risposte: {
a: "2",
b: "5",
c: "7",
d: "10"
},
rispostaCorretta: "c",
},
{
domanda: "Quante champions ha vinto l'Inter?",
risposte: {
a: "1",
b: "5",
c: "7",
d: "10"
},
rispostaCorretta: "a",
},
{
domanda: "Quante champions ha vinto la Juve?",
risposte: {
a: "2",
b: "5",
c: "7",
d: "10"
},
rispostaCorretta: "a",
},
],
};
},
methods: {
select(e) {
this.selected = e.target.value
this.domandaScelta = e.target.value;
console.log(this.domandaScelta)
console.log(this.domandaCorrente)
if (this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
this.correct
} else {
this.wrong
}
},
nextQuestion() {
this.selected = false;
this.domandaScelta = ""
this.domandaCorrente
},
showResult() {
this.domandaCorrente
},
reload() {
this.domandaCorrente = 0
this.domandaScelta = ""
this.wrong = 0
this.correct = 0
}
},
components: {},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="flex">
<h2 class="title">Simple Quiz</h2>
<div class="quiz">
<div v-if="domandaCorrente < domande.length" class="question">
<h2>{{ domande[domandaCorrente].domanda }} </h2>
<label class="answer" :for="index" v-for="(risposta, index) in domande[domandaCorrente].risposte" :key="index" :class="{
'hover border-grey': domandaScelta == '',
'bg-red': domandaScelta == index,
'bg-green':
index == domande[domandaCorrente].rispostaCorretta &&
domandaScelta != '',
}">
<input type="radio" :checked="index === selected" :name="`ans-${domandaCorrente}`" :id="`ans-${index}`" class="hidden" :value="index" @change="select($event)" />
{{ risposta }}
</label>
</div>
<div v-else>
Results
<div>
<h2>
Correct Answers: <span class="t-green">{{ correct }}</span>
</h2>
<h2>
Wrong Answers: <span class="t-red">{{ wrong }}</span>
</h2>
</div>
<button @click="reload()">Reload</button>
</div>
<div v-show="domandaScelta != '' && domandaCorrente < domande.length - 1" class="button">
<button @click="nextQuestion()">Next</button>
</div>
<div v-show="domandaScelta != '' && domandaCorrente == domande.length - 1" class="button">
<button @click="showResult()">Finish</button>
</div>
</div>
</div>
</div>CodePudding user response：
Try to add v-model="domandaScelta" to input radio:
new Vue({
el: '#demo',
data() {
return {
domandaCorrente: 0,
correct: 0,
wrong: 0,
domandaScelta: "",
domande: [
{
domanda: "Quante champions ha vinto il Milan?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "c",
},
{
domanda: "Quante champions ha vinto l'Inter?",
risposte: { a: "1", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
{
domanda: "Quante champions ha vinto la Juve?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
],
};
},
methods: {
select(e) {
console.log(e.target)
this.domandaScelta = e.target.value;
console.log(this.domandaScelta)
console.log(this.domandaCorrente)
if(this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
this.correct
} else {
this.wrong
}
},
nextQuestion() {
this.domandaScelta = ""
this.domandaCorrente
},
showResult() {
this.domandaCorrente
},
reload() {
this.domandaCorrente = 0
this.domandaScelta = ""
this.wrong = 0
this.correct = 0
}
},
components: {},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="flex">
<h2 class="title">Simple Quiz</h2>
<div class="quiz">
<div v-if="domandaCorrente < domande.length" class="question">
<h2>{{ domande[domandaCorrente].domanda }}</h2>
<label
class="answer"
:for="index"
v-for="(risposta, index) in domande[domandaCorrente].risposte"
:key="index"
:class="{
'hover border-grey': domandaScelta == '',
'bg-red': domandaScelta == index,
'bg-green':
index == domande[domandaCorrente].rispostaCorretta &&
domandaScelta != '',
}"
>
<input
type="radio"
:name="index"
:id="index"
class="hidden"
:value="index"
@change="select($event)"
v-model="domandaScelta"
/>
{{ risposta }}
</label>
</div>
<div v-else>
Results
<div>
<h2>
Correct Answers: <span class="t-green">{{ correct }}</span>
</h2>
<h2>
Wrong Answers: <span class="t-red">{{ wrong }}</span>
</h2>
</div>
<button @click="reload()">Reload</button>
</div>
<div
v-show="domandaScelta != '' && domandaCorrente < domande.length - 1"
class="button"
>
<button @click="nextQuestion()">Next</button>
</div>
<div
v-show="domandaScelta != '' && domandaCorrente == domande.length - 1"
class="button"
>
<button @click="showResult()">Finish</button>
</div>
</div>
</div>
</div>