Javascript图像识别游戏

所以我在做一个学校项目。 用户将看到一个图像识别游戏，其中有一个主图像（几何形状）和一行其他图像（几何形状）。游戏的目的是在基本形状列表中选择与主图像相同的形状。我使用以前的测试脚本进行了一个简单的javascript测试，并用图像替换了答案和问题

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

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++

    }
  }

});

var-allQuestions=[{
问题:'https://image.ibb.co/gXSwen/kvadrat.png',
选择：['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'],
正确答案:1
},
{
问题:'https://image.ibb.co/g4zben/sirkel.png',
选择：['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'],
正确答案：0
},
{
问题:'https://image.ibb.co/mVHJs7/lstrekant.png',
选择：['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'],
正确答案：3
},
{
问题:'https://image.ibb.co/mCrpzn/rtrekant.png',
选择：['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'],
正确答案：2
}
];
var=0；
var=0；
所选var=[]；
var位置=0；
var next=document.getElementById（“next”）；
var start=document.getElementById（“start”）；
var answers=document.getElementById（“answers”）；
var question=document.getElementById（“问题”）；
var startcontainer=document.getElementById（“startcontainer”）；
var scorecontainer=document.getElementById（“scorecontainer”）；
var quizcontainer=document.getElementById（“quizcontainer”）；
window.onload=（函数（）{
//显示起始页
quizcontainer.style.display='none'；
scorecontainer.style.display='none'；
//单击开始按钮显示第一个问题
start.onclick=（函数（）{
位置=0；
正确=0；
不正确=0；
选定=[]；
startcontainer.style.display='none'；
scorecontainer.style.display='none'；
quizcontainer.style.display='inline'；
showQuestion（）；
});
//检查答案：如果选择了答案，则执行函数checkAnswer。如果未选择答案，则提醒用户需要选择答案。请注意，函数checkAnswer应该决定是否显示下一个问题，这取决于答案的正确性。
next.onclick=（函数（）{
如果（$（“#答案输入”）为（“：选中”））{
检查答案（）；
}否则{
提醒（“您需要选择答案”）；
}
});
//为当前问题创建HTML
函数showQuestion（）{
document.getElementById（“问题”）.innerHTML=null；
document.getElementById（“answers”）.innerHTML=null；
//循环浏览allQuestions数组中的问题，并分别显示它们
如果（位置”
}
}
//当for循环完成问题后，显示正确答案的数量。
否则{
document.getElementById（“quizcontainer”）.style.display='none'；
$（“#scorecontainer”）.append（“你得到了”+correct+“问题正确！”）.fadeIn（“慢”）；
}
}
//检查答案是否正确的函数。增加正确值，如果答案正确，则继续下一个问题
函数checkAnswer（）{
选中。推送（$（“#答案输入：选中”）.val（）；
var correctAnswer=allQuestions[position]。选项[allQuestions[position]。correctAnswer]；
如果（所选[位置]==正确答案）{
正确的++；
位置++；
showQuestion（）；
}
//统计错误答案的数量。我希望它统计每个错误答案，并在选择正确答案之前不继续（因此我在这里没有包括position++的原因）下一个问题。
else if（选择的[位置]！==正确答案）{
不正确++
}
}
});

---

这里的问题是函数检查答案。我也在守则中对这个问题作了详细的评论。因此，简而言之，函数的任务是检查答案是否正确。如果正确，则将正确-和位置（当前问题）-值增加1。最后，它执行showQuestion函数，该函数显示下一个问题（此函数可能有问题，但我不确定）。如果答案不正确，则将错误值增加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();
    }
}

您必须从答案数组中删除不正确的答案，否则您将永远无法判断更改后的答案是否正确。仅供参考，我不知道为什么你需要一个名为“不正确”的变量，除非有一些f