javascript - 我的 javascript 测验应用程序无法正常运行

Question

我正在遵循本指南:http://javascriptissexy.com/how-to-learn-javascript-properly/我正在尝试构建一个在第 6 周详细介绍的 javascript 测验应用程序。

这是指令:

• 这是一个简单的测验，有单选按钮选项，它会显示测验者在完成后获得他或她的分数。
• 测验可以显示任意数量的问题和任意数量的选择。
• 计算用户的分数并在最后一页显示最终分数。最后一页只会显示分数，所以去掉最后一个问题。
• 使用一个数组来存储所有的问题。每个问题，连同它的选择和正确答案应该存储在一个对象中。
• 动态地(使用 document.getElementById 或 jQuery)删除当前问题并添加下一个问题，当用户单击“下一步”按钮。下一步按钮将是唯一的导航按钮这个版本的测验。
• 您可以在下面的评论中或最好在 Stack 上寻求帮助溢出。您很可能会得到及时准确的答复堆栈溢出。

我想出了如何显示测验和单选按钮选项。但是，当我在测验中选择正确答案时，它不会计算用户的分数，而当我选择错误答案时，它会计算用户的分数。例如，第一题的正确答案是“首尔”，但只有选择柏林才算分数。

我发现是“qi”变量导致了问题，所以我更换了

    allQuestions[qi].answer

到

    allQuestions[qi+1].answer

但是我的最后一个问题没有显示。

PS:对不起我的英语...我尽力了

这是我的代码:https://jsfiddle.net/METROSTILE/0f3aev1u/1/

var allQuestions = [{
    question: "What is capital of Korea?",
    choices: ["Seoul", "Tokyo", "Hanyang", "Berlin"],
    answer: 0
}, {
    question: "What is 5 + 7 * 11?",
    choices: [132, 121, 77, 82, 0],
    answer: 3
}, {
    question: "When was hani born?",
    choices: ["5/1", "2/3", "11/5", "2/26"],
    answer: 0
}];

$(function() {
    var qi = 0;
    var userScore = 0;
    var $questionArea = $("#question");
    var $choiceArea = $("form");

    $("#next").on("click", function() {
        if (qi < allQuestions.length) {
            //If choice is correct, 
        	if ($("input:checked").val() == allQuestions[qi].answer) {
                userScore++;
            }



            showNextQuestion();

            qi++;

            
        } else {
            $("form").remove();
            $questionArea.text(userScore);
        }
    });

    //Shows next question
    function showNextQuestion() {
        var $question = allQuestions[qi].question; //store new question
        //get how many choice

        $questionArea.text(""); //Delete current question if any
        $questionArea.text($question); //add new question

        $choiceArea.find(".choice").remove();
        for (var i = 0; i < allQuestions[qi].choices.length; i++) { //add choices
            var choice = allQuestions[qi].choices[i];
            $choiceArea.append("<li class='choice'><input type='radio' name='choices' value='" + i + "'>" + choice + "</input></li>");
        }
    }
});

h1 {
	text-align: center;
}

h3 {
	text-align: center;
}

form {
	text-align: center;
}


.wrapper {
	text-align: center;
	margin-top: 30px;
}

li {
	list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>QUIZ!!!</h1>
		<h3 id="question"></h3>
		<form>
			<ul class='choiceList'></ul>	
		</form>
		<div class="wrapper">
			<input type="button" name="next" value="Next Question" id="next" />
		</div>

Answer 1

处理当前问题(如果有的话)，然后递增qi。 然后检查我们是否用完了问题:

var qi = -1;
// ...

$("#next").on("click", function() {
  if (qi >= 0)    
    if ($("input:checked").val() == allQuestions[qi].answer) {
      userScore++;
    }

  ++qi;

  if (qi < allQuestions.length) {
    showNextQuestion();
  } 
  else {
    $("form, #next").remove();
    $questionArea.text(userScore);
  }
});

var allQuestions = [{
  question: "What is capital of Korea?",
  choices: ["Seoul", "Tokyo", "Hanyang", "Berlin"],
  answer: 0
}, {
  question: "What is 5 + 7 * 11?",
  choices: [132, 121, 77, 82, 0],
  answer: 3
}, {
  question: "When was hani born?",
  choices: ["5/1", "2/3", "11/5", "2/26"],
  answer: 0
}];

$(function() {
  var qi = -1;
  var userScore = 0;
  var $questionArea = $("#question");
  var $choiceArea = $("form");

  $("#next").on("click", function() {
    if (qi >= 0)
      if ($("input:checked").val() == allQuestions[qi].answer) {
        userScore++;
      }

      ++qi;

    if (qi < allQuestions.length) {
      showNextQuestion();
    } else {
      $("form, #next").remove();
      $questionArea.text(userScore);
    }
  });

  //Shows next question
  function showNextQuestion() {
    var $question = allQuestions[qi].question; //store new question
    //get how many choice

    $questionArea.text(""); //Delete current question if any
    $questionArea.text($question); //add new question

    $choiceArea.find(".choice").remove();
    for (var i = 0; i < allQuestions[qi].choices.length; i++) { //add choices
      var choice = allQuestions[qi].choices[i];
      $choiceArea.append("<li class='choice'><input type='radio' name='choices' value='" + i + "'>" + choice + "</input></li>");
    }
  }
});

h1 {
  text-align: center;
}
h3 {
  text-align: center;
}
form {
  text-align: center;
}
.wrapper {
  text-align: center;
  margin-top: 30px;
}
li {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>QUIZ!!!</h1>
<h3 id="question"></h3>
<form>
  <ul class='choiceList'></ul>
</form>
<div class="wrapper">
  <input type="button" name="next" value="Next Question" id="next" />
</div>