I am making a trivia game that uses an array of objects.
const questions = [
{
question: 'What year did the United State become independent?',
answers: [
{ text: '1776', correct: true },
{ text: '1676', correct: false },
{ text: '1576', correct: false },
{ text: '1876', correct: false }
]
},
I think the correct way is to get the index of the correct answer by using .find, getting the the index of the selected answer, then use an if statement to compare the two. If they match then the console will log "correct" or "incorrect" otherwise. I am having trouble getting the index of corretAnswer and also selectedAnswer.
When I use this code and console log it, both variables return undefined.
const answerButtons = document.querySelectorAll('.answers-btn');
function checkAnswer() {
let correctAnswer = randomQuestion.answers.find((answer, index) => {
return answer[index] === true;
})
answerButtons.forEach((answerButton, index) => {
answerButton.addEventListener('click', () => {
let selectedAnswer = answerButton[index];
return selectedAnswer;
})
})
}
<button id="answers-btn-1" onclick="checkAnswer()" class="answers-btn"></button>
<button id="answers-btn-2" onclick="checkAnswer()" class="answers-btn"></button>
<button id="answers-btn-3" onclick="checkAnswer()" class="answers-btn"></button>
<button id="answers-btn-4" onclick="checkAnswer()" class="answers-btn"></button>
I tried to create a solution with as least code possible. First, you don't need to add an event listener to each button, you could just make each call a specific index from HTML. Secondly, since you are creating your answers list with a correct property, you don't need to iterate it. Just get the one the user selected and check the property.
Hope it helps.
const currentQuestion = 0;
const questions = [{
question: 'What year did the United State become independent?',
answers: [{
text: '1776',
correct: true
},
{
text: '1676',
correct: false
},
{
text: '1576',
correct: false
},
{
text: '1876',
correct: false
}
]
}]
function checkAnswer(bntIndex) {
let answer = questions[currentQuestion].answers[bntIndex];
console.log(answer.correct)
}<button id="answers-btn-1" onclick="checkAnswer(0)" class="answers-btn">1</button>
<button id="answers-btn-2" onclick="checkAnswer(1)" class="answers-btn">2</button>
<button id="answers-btn-3" onclick="checkAnswer(2)" class="answers-btn">3</button>
<button id="answers-btn-4" onclick="checkAnswer(3)" class="answers-btn">4</button>when you call .find((answer, index), answer will be an object, e.g. { text: '1776', correct: true }, so when you do return answer[index] === true it is checking if, e.g., { text: '1776', correct: true }[1] === true, but since { text: '1776', correct: true } doesn't have a property 1 that will always return false, so .find will return undefined.
To get the correct answer, you would instead just do
let correctAnswer = randomQuestion.answers.find((answer) => answer.correct);
Same idea for your forEach, answerButton is already the answer, so when you do let selectedAnswer = answerButton[index]; it will return undefined.
try
const questions = [
{
question: 'What year did the United State become independent?',
answers: [
{ text: '1776', correct: true },
{ text: '1676', correct: false },
{ text: '1576', correct: false },
{ text: '1876', correct: false },
],
},
];
const correctAnswerIndex = questions[0].answers.findIndex((answer) => (answer.correct === true))
const correctAnswer = questions[0].answers[correctAnswerIndex];
console.log('correctAnswer', correctAnswer);
const guess = '1776';
const userAnswerIndex = questions[0].answers.findIndex((answer) => (answer.text === guess))
const userAnswer = questions[0].answers[userAnswerIndex];
console.log('userAnswer', userAnswer);
if (correctAnswer.text === userAnswer.text) {
console.log('You win');
}
Array.prototype.findIndex() returns the index position of the first matching item, as opposed to Array.prototype.find() which returns the first matching item.
findIndex parameter is a function that returns true or false. If it evaluates to true, it returns the index position of the matching element.
There's other ways you could do it too, like for example:
const guess = '1776';
const answer = questions[0].answers.find((answer) => (answer.text === guess))
if (answer.correct === true) {
console.log('You win');
}