let myQuestions = [
{
question: "What's 2+2?",
answers: [
{ text: "4", correct: true },
{ text: "2", correct: false },
{ text: "10", correct: false },
{ text: "1", correct: false },
],
},
{
question: "What's 10+10?",
answers: [
{ text: "20", correct: true },
{ text: "2", correct: false },
{ text: "18", correct: false },
{ text: "0", correct: false },
],
},
];
function showQuestion(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((correctAnswer) => {
correctAnswer.addEventListener("click", (event) => {
if (myQuestions.answers == true) {
console.log("s");
}
});
})Basically, I have my questions in an array with the answers in an object too, the question get put on the screen with the answers shuffled. What I need help with is the last block of code below, how can I check if the value clicked is true(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>Add an attribute to the answer tags indicating whether it's the correct answer. Then you can check that in the event listener.
let myQuestions = [
{
question: "What's 2+2?",
answers: [
{ text: "4", correct: true },
{ text: "2", correct: false },
{ text: "10", correct: false },
{ text: "1", correct: false },
],
},
{
question: "What's 10+10?",
answers: [
{ text: "20", correct: true },
{ text: "2", correct: false },
{ text: "18", correct: false },
{ text: "0", correct: false },
],
},
];
function showQuestion(questionAndAnswers) {
const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
questionTag.innerText = questionAndAnswers.question;
shuffledAnswers.forEach(({text, correct}, i) => {
answerTag[i].innerText = text;
answerTag[i].dataset.correct = correct;
};
}
document.querySelectorAll(".answer").forEach((answer) => {
answer.addEventListener("click", (event) => {
if (event.target.dataset.correct == 'true') {
console.log("s");
}
});
})