0 

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>

Improve this question
5
  • 1
    Do you really have the showQuestion function inside the myQuestions array? You're missing the ] at the end of the array. Commented Jan 21, 2022 at 23:53
  • sorry about that, It didn't copy. Commented Jan 21, 2022 at 23:54
  • Where is the shuffle method -- it's not defined here. Commented Jan 22, 2022 at 0:00
  • It is the first line of the showQuestion function. Commented Jan 22, 2022 at 0:02
  • @Toby They're getting it from lodash. Commented Jan 22, 2022 at 0:02

1 Answer 1

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

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

2 Comments

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?
Sorry, the loop should be over shuffledAnswers, not questionAndAnswers.answers.