Question

再一次，我需要你对我现在遇到的问题的意见我正在创建一个MCQ琐事，我遇到了逻辑问题。

虽然对于这个例子，我故意设置答案是B，C或D，结果div将始终显示结果是正确的 - 虽然我只在按钮 A上设置一个事件监听器但没有答案。

根据下面的代码，我是否正确地将元素值与数组答案值进行比较？

var exam=[{
  "question": "Q1?",
  "option": ["A","B","C","D"],
  "answer": "B"
},{
  "question": "Q2?",
  "option": ["A","B","C","D"],
  "answer": "C"
},{
  "question": "Q3?",
  "option": ["A","B","C","D"],
  "answer": "D"
},{
  "question": "Q4?",
  "option": ["A","B","C","D"],
  "answer": "B"
},{
  "question": "Q5?",
  "option": ["A","B","C","D"],
  "answer": "C"
}]

//dom selector
var container = document.getElementById('container');
var questionEl = document.getElementById('question');
//for the answer display
var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');
var opt4 = document.getElementById('opt4');
//for the input button click
var opta = document.getElementById('opta');
var optb = document.getElementById('optb');
var optc = document.getElementById('optc');
var optd = document.getElementById('optd');
//
var button = document.querySelectorAll('button');
var nextButton = document.getElementById('help1Button');
var resultCont = document.getElementById('result');
//display question and answer
function displayQues() {
  //select one question randomly from the quiz array
  var i = Math.floor(Math.random() * exam.length);
  questionEl.textContent=exam[i].question;
  opt1.textContent = exam[i].option[0];
  opt2.textContent = exam[i].option[1];
  opt3.textContent = exam[i].option[2];
  opt4.textContent = exam[i].option[3];
};
//load this when page load
displayQues();
opta.addEventListener("click", function() {
  if (opt1.value === exam.answer) {
    displayQues();
    resultCont.textContent = "Correct!";	
  } else {
    resultCont.textContent = "Incorrect!";	
  }
});

<div id="container">
  <div class="title"> Alan Koh Exam Question</div>
    <div id="question"> </div>
    <button id="opta"> A: <span id="opt1"></span>  </button>
    <button id="optb"> B: <span id="opt2"></span>  </button>
    <button id="optc"> C: <span id="opt3"></span>  </button>
    <button id="optd"> D: <span id="opt4"></span>  </button>
    <div id="result"></div>

Answer 1

您当前代码的问题是opt1.value === exam.answer。这两个属性都是undefined。 opt1.value，因为它未设置（我相信您需要opt1.textContent）和exam.answer，因为exam是一个数组。你得到正确！，因为undefined === undefined是true

您可以通过返回当前显示的问题并将其用于比较来解决您的问题。

var exam = [{
  "question": "Q1?",
  "option": ["A", "B", "C", "D"],
  "answer": "B"
}, {
  "question": "Q2?",
  "option": ["A", "B", "C", "D"],
  "answer": "C"
}, {
  "question": "Q3?",
  "option": ["A", "B", "C", "D"],
  "answer": "D"
}, {
  "question": "Q4?",
  "option": ["A", "B", "C", "D"],
  "answer": "B"
}, {
  "question": "Q5?",
  "option": ["A", "B", "C", "D"],
  "answer": "C"
}]
//

//dom selector
var container = document.getElementById('container');
var questionEl = document.getElementById('question');
//for the answer display
var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');
var opt4 = document.getElementById('opt4');
//for the input button click
var opta = document.getElementById('opta');
var optb = document.getElementById('optb');
var optc = document.getElementById('optc');
var optd = document.getElementById('optd');
//
var button = document.querySelectorAll('button');
//

var nextButton = document.getElementById('help1Button');
var resultCont = document.getElementById('result');

//display question and answer
function displayQues() {

  //select one question randomly from the quiz array
  var i = Math.floor(Math.random() * exam.length);

  questionEl.textContent = exam[i].question;
  opt1.textContent = exam[i].option[0];
  opt2.textContent = exam[i].option[1];
  opt3.textContent = exam[i].option[2];
  opt4.textContent = exam[i].option[3];
  return exam[i]; // Return the chosen exam variable
};

//load this when page load
var currentExam = displayQues(); // Store the chosen exam

opta.addEventListener("click", function() {
  if (opt1.textContent === currentExam.answer) {
    currentExam = displayQues(); // Store the new question
    resultCont.textContent = "Correct!";
  } else {
    resultCont.textContent = "Incorrect!";
  }

});

<div id="container">
  <div class="title"> Alan Koh Exam Question</div>
  <div id="question"> </div>
  <button id="opta"> A: <span id="opt1"></span>  </button>
  <button id="optb"> B: <span id="opt2"></span>  </button>
  <button id="optc"> C: <span id="opt3"></span>  </button>
  <button id="optd"> D: <span id="opt4"></span>  </button>
  <div id="result"></div>

Answer 2

Here是带有更正代码的jsfiddle链接。

您必须循环浏览exam并比较正确的问题和答案。

Javascript - 如何将事件侦听器中的元素值与数组元素进行比较？

2 个答案: