How to target boolean value in array object. JavaScript

Question

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>

Do you really have the showQuestion function inside the myQuestions array? You're missing the ] at the end of the array. — Barmar
– Barmar, Commented Jan 21, 2022 at 23:53

Barmar · Accepted Answer · 2022-01-22 01:26:40Z

1

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

edited Jan 22, 2022 at 1:26

answered Jan 22, 2022 at 0:02

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user16569672 Over a year ago

I appreciate this, but this eliminates the shuffle method as the program read that the first option is always right. How can I fix this?

Barmar Over a year ago

Sorry, the loop should be over shuffledAnswers, not questionAndAnswers.answers.

Collectives™ on Stack Overflow

How to target boolean value in array object. JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related