How do I get the index of two variables, compare them, and return true or false-CodePudding

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()" ></button>
<button id="answers-btn-2" onclick="checkAnswer()" ></button>
<button id="answers-btn-3" onclick="checkAnswer()" ></button>
<button id="answers-btn-4" onclick="checkAnswer()" ></button>

CodePudding user response：

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.

CodePudding user response：

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)" >1</button>
<button id="answers-btn-2" onclick="checkAnswer(1)" >2</button>
<button id="answers-btn-3" onclick="checkAnswer(2)" >3</button>
<button id="answers-btn-4" onclick="checkAnswer(3)" >4</button>

CodePudding user response：

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

CodePudding user response：

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 checkAnswer = function(index) {
  const answer = questions[0].answers[index];
  const correctAnswer = questions[0].answers.find((a) => a.correct === true);
  if (answer.text === correctAnswer.text) {
    alert('guessed correct');
  } else {
    alert('guess again');
  }
};

const answersButtons = document.querySelectorAll('.answers-btn');

for (let i = 0; i < answersButtons.length; i  ) {
  answersButtons[i].innerText = questions[0].answers[i].text;
  answersButtons[i].onclick = function() {
    checkAnswer(i);
  };
}

<button id="answers-btn-1" ></button>
<button id="answers-btn-2" ></button>
<button id="answers-btn-3" ></button>
<button id="answers-btn-4" ></button>

CodePudding user response：

This is based on Pelicer's answer, but with perhaps some more concepts that you might use:

Delegation
Leveraging built in features like the value of input elements.
Separation of code and presentation layers
Removal of unused elements/attributes

The getCurrentQuestion function is a stub. You could perhaps embed the index of the question being answered in an ancestor element of the buttons (e.g their parent). This would be similar to the way the index of the answer is embedded in the value of the buttons.

const questions =
[ { question: 'What year did the United State become independent?'
  , answers: [ { text: '1576' }
             , { text: '1676' }
             , { text: '1776', correct: true }
             , { text: '1876' }
             ]
  }
]

const getCurrentQuestion = () => questions[0]

function checkAnswer(event) {
  if (event.target.classList.contains('answers-btn')) {
    const question = getCurrentQuestion()
    const correct = question.answers.findIndex( answer => answer.correct )
    const selected = parseInt(event.target.value)
    console.log(`For the question "${question.question}", the answer "${question.answers[selected].text}" is ${ (selected == correct)?"correct":"incorrect" }`)
  }
}

document.addEventListener('click', checkAnswer)

<button value="0" >A</button>
<button value="1" >B</button>
<button value="2" >C</button>
<button value="3" >D</button>

CodePudding user response：

Here's a different approach, although a little simplistic. It assumes order of questions equal to order of buttons.

const randomQuestion = [{
  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 answerButtons = document.querySelectorAll('.answers-btn');

function checkAnswer(elem) {
  var chosen = elem.innerText // <-- or using a better way see comments

  var selectAnswer = randomQuestion[0].answers[ chosen - 1]

  var result = selectAnswer.correct ? "correct" : "wrong";
  console.log(result);
  return result; // <-- return where exactly?
}

<button id="answers-btn-1" onclick="checkAnswer(this)" >1</button>
<button id="answers-btn-2" onclick="checkAnswer(this)" >2</button>
<button id="answers-btn-3" onclick="checkAnswer(this)" >3</button>
<button id="answers-btn-4" onclick="checkAnswer(this)" >4</button>