Javascript圖像識別游戲

Question

所以我正在做一個學校項目。 向用戶展示一種圖像識別游戲，該游戲具有一個主圖像（幾何形狀），並位於其他圖像（幾何形狀）的一行下。 游戲的目的是在基本形狀列表中選擇與主圖像相同的形狀。 我使用以前的測驗腳本進行了簡單的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++

    }
  }

});

jsfiddle在這里（帶有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();
    }
}

您必須從答案數組中刪除錯誤的答案，否則您將永遠無法說出更改后的答案是正確的。 僅供參考，我不確定為什么您根本不需要一個不正確的變量，除非您計划在將來添加一些功能