let quizQuestions = [
{
question: "What is the capital of France?",
answers: [
{ text: "Paris", correct: true },
{ text: "Rome", correct: false },
{ text: "Berlin", correct: false },
{ text: "London", correct: false },
],
},
{
question: "How many continents are there on Earth?",
answers: [
{ text: "7", correct: true },
{ text: "5", correct: false },
{ text: "9", correct: false },
{ text: "3", correct: false },
],
},
];
function displayQuestion(questionAndAnswers) {
const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
questionTag.innerText = questionAndAnswers.question;
answerTag[0].innerText = shuffledAnswers[0].text;
answerTag[1].innerText = shuffledAnswers[1].text;
answerTag[2].innerText = shuffledAnswers[2].text;
answerTag[3].innerText = shuffledAnswers[3].text;
}
document.querySelectorAll(".answer").forEach((chosenAnswer) => {
chosenAnswer.addEventListener("click", (event) => {
if (quizQuestions.answers.correct == true) {
console.log("Correct answer selected!");
}
});
})Essentially, I have a set of quiz questions stored in an array with corresponding answers. When the questions are displayed on the screen, the answers are shuffled. The challenge lies in the last section of code below; how can I verify if the clicked value is the correct answer?
<h3 id="question"></h3>
<div class="answers">
<button id="answer1" class="answer"></button>
<button id="answer2" class="answer"></button>
<button id="answer3" class="answer"></button>
<button id="answer4" class="answer"></button>
</div>