How to target boolean value in array object. JavaScript

javascript

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");
    }
  });
})

How to target boolean value in array object. JavaScript

Related

Recent Posts