Question

所以我正在开展一个学校项目。向用户呈现具有一个主图像（几何形状）并且在一行其他图像（几何形状）下的图像识别游戏。游戏的目的是在下面的形状列表中选择与主图像相同的形状。我之前用过一个简单的javascript-quiz的测验脚本，只是用图像替换了答案和问题。

该任务还要求我计算错误答案的数量，并且在当前页面注册了正确答案之前不要继续下一个问题。这是我正在努力的事情，我在代码本身对此进行了评论。

var allQuestions = [{
    question: 'https://image.ibb.co/gXSwen/kvadrat.png',
    choices: ['https://image.ibb.co/g4zben/sirkel.png', 'https://image.ibb.co/gXSwen/kvadrat.png', 'https://image.ibb.co/mCrpzn/rtrekant.png', 'https://image.ibb.co/mVHJs7/lstrekant.png'],
    correctAnswer: 1
  },
  {
    question: 'https://image.ibb.co/g4zben/sirkel.png',
    choices: ['https://image.ibb.co/g4zben/sirkel.png', 'https://image.ibb.co/gXSwen/kvadrat.png', 'https://image.ibb.co/mCrpzn/rtrekant.png', 'https://image.ibb.co/mVHJs7/lstrekant.png'],
    correctAnswer: 0
  },
  {
    question: 'https://image.ibb.co/mVHJs7/lstrekant.png',
    choices: ['https://image.ibb.co/g4zben/sirkel.png', 'https://image.ibb.co/gXSwen/kvadrat.png', 'https://image.ibb.co/mCrpzn/rtrekant.png', 'https://image.ibb.co/mVHJs7/lstrekant.png'],
    correctAnswer: 3
  },
  {
    question: 'https://image.ibb.co/mCrpzn/rtrekant.png',
    choices: ['https://image.ibb.co/g4zben/sirkel.png', 'https://image.ibb.co/gXSwen/kvadrat.png', 'https://image.ibb.co/mCrpzn/rtrekant.png', 'https://image.ibb.co/mVHJs7/lstrekant.png'],
    correctAnswer: 2
  }
];

var correct = 0;
var incorrect = 0;
var selected = [];
var position = 0;
var next = document.getElementById("next");
var start = document.getElementById("start");
var answers = document.getElementById("answers");
var question = document.getElementById("question");
var startcontainer = document.getElementById("startcontainer");
var scorecontainer = document.getElementById("scorecontainer");
var quizcontainer = document.getElementById("quizcontainer");


window.onload = (function() {

  // Display startpage
  quizcontainer.style.display = 'none';
  scorecontainer.style.display = 'none';

  // Display the first question on the click of the start-button
  start.onclick = (function() {
    position = 0;
    correct = 0;
    incorrect = 0;
    selected = [];
    startcontainer.style.display = 'none';
    scorecontainer.style.display = 'none';
    quizcontainer.style.display = 'inline';
    showQuestion();

  });

  //Check the answer: if an answer is selected, execute functions checkAnswer. If an answer is not chosen, alert the user that they need to select an answer. Note that the function checkAnswer is supposed to decide whether or not to display the next question, which depends on the correctness of the answer.
  next.onclick = (function() {
    if ($("#answers input").is(":checked")) {
      checkAnswer();

    } else {
      alert("You need to select an answer.");
    }

  });


  // Creates HTML for the current question
  function showQuestion() {
    document.getElementById("question").innerHTML = null;
    document.getElementById("answers").innerHTML = null;

    //Loops through the questions from the allQuestions-array and displays them seperately
    if (position < allQuestions.length) {
      question.src = allQuestions[position].question;
      for (var i = 0; i < allQuestions[position].choices.length; i++) {
        document.getElementById("answers").innerHTML += "<div><label><input type='radio' name='radio' value='" + allQuestions[position].choices[i] + "'><img src=" + allQuestions[position].choices[i] + "><label></div><br>"
      }
    }
    //When the for-loop has went through the questions, show the amount of right answers.
    else {
      document.getElementById("quizcontainer").style.display = 'none';
      $("#scorecontainer").append("<h1>You got " + correct + " questions correct!</h1>").fadeIn("slow");
    }
  }

  // Function that checks if the answer is correct. Increase the correct-value and continue to the next question if the answer is correct 
  function checkAnswer() {
    selected.push($("#answers input:checked").val());
    var correctAnswer = allQuestions[position].choices[allQuestions[position].correctAnswer];
    if (selected[position] === correctAnswer) {
      correct++;
      position++;
      showQuestion();
    }
    //Counts the number of incorrect answers. I want it to count each wrong answer and not continue (hence why I didn't include position++ here) to the next question until the right answer is chosen. 
    else if (selected[position] !== correctAnswer) {
      incorrect++

    }
  }

});

jsfiddle here (with the html)

这里的问题是功能checkAnswer。我还在代码中对该问题做了详尽的评论。因此，简而言之，该功能的任务是检查答案是否正确或不正确。如果它是正确的，它会将正确位置（当前问题） - 值递增1.最后它执行showQuestion函数，该函数显示下一个问题（此函数可能存在问题，但我不确定）。如果答案不正确，则将错误值增加1。因此，如果您尝试游戏并仅选择正确的替代方案，它将按预期工作，并且您被告知正确答案的数量是4中的4个。但如果您在任何问题中选择不正确的答案它将不会通过。如果您在选择了错误的答案后选择了正确的答案，那么即使这样也不会。这有什么问题？

Answer 1

这是一个简单的疏忽，我一直在做的那种。您需要将checkAnswer功能修改为以下内容：

function checkAnswer() {
    selected.push($("#answers input:checked").val());
    var correctAnswer = allQuestions[position].choices[allQuestions[position].correctAnswer];
    if (selected[position] === correctAnswer) {
      correct++;
      position++;
      showQuestion();
    }
    //Counts the number of incorrect answers. I want it to count each wrong answer and not continue (hence why I didn't include position++ here) to the next question until the right answer is chosen. 
    else if (selected[position] !== correctAnswer) {
      incorrect++
      selected.pop();
    }
}

您必须从答案数组中删除不正确的答案，否则您将永远无法判断更改后的答案是否正确。仅供参考，我不确定为什么你需要一个名为不正确的变量，除非你计划在将来添加一些功能

Javascript图像识别游戏

1 个答案: