I am currently facing three small issues in my Vue app. The first problem involves class binding. I have a bootstrap card that displays a question and its related answers. When a user clicks on a radio input, their answer is saved and the other options are disabled.
I am dynamically checking if the user's answer is correct, but I am struggling to change the class of the card border accordingly. I want the border to be black before the answer is revealed, and then change to border-success if the answer is correct, or border-danger if it is wrong. However, my attempts with the code provided have not been successful as the border is always given the border-danger class even if no answer has been chosen.
<div class="card text-dark bg-light border-secondary shadow mt-3 mb-3" :class="[userAnswers[qindex] === correctAnswers[qindex] && answered[qindex] ? 'border-success' : 'border-danger']">
Another issue I encountered is with the card footer in the app's UI. I added a card footer that is initially hidden until the question is answered. It is supposed to display the correct answer, but I noticed a graphical glitch where it briefly appears and then disappears when a correct answer is given.
<div class="card-footer bg-transparent border-success fw-bold" v-show="userAnswers[qindex] !== correctAnswers[qindex]">The correct answer is: {{ correctAnswers[qindex] }}</div>
In an attempt to fix this, I have experimented with both v-if and the current v-show methods, as well as adding a CSS transition to the element, but none seem to resolve the issue.
.card-footer {
transition: ease-in .3s;
}
The final and most critical problem involves a conditional check. I want to display a modal when the user has answered all available questions. I have tried adding an if() statement in the mounted hook of Vue, but it never triggers. I have also attempted to call the method inside the .then() callback of the axios call that checks each question's answer, but again without success.
export default {
name: 'App',
data(){
return {
isLoading: true,
showResult: false,
elaspedTime: null,
questions: [],
answered: {},
userAnswers: [],
correctAnswers: []
}
},
mounted(){
this.init();
// This statement will never be evaluated
if( this.answered.length === this.questions.length ){
this.quizResults();
}
},
methods: {
init(){
axios({
method: 'GET',
url: 'http://localhost:8990/init'
}).then( (res) => {
this.questions = [];
this.questions = res.data;
console.log(this.questions);
this.isLoading = false;
});
},
checkAnswer(qindex, index, value){
// console.log(qindex, index, value);
this.answered[qindex] = true;
this.userAnswers.push(value);
axios({
method: 'POST',
url: 'http://localhost:8990/answercheck',
data: {
questionIndex: index,
choice: value
}
}).then( (res) => {
console.log(res.data);
this.correctAnswers.push(res.data.correctAnswer);
});
},
quizResults(){
// Implement further logic after all questions are answered
console.log('Results');
}
}
}
If anyone can provide assistance in resolving these issues, I would greatly appreciate it. Thank you.