我的 javascript 测验应用程序无法正常工作答案

【问题标题】：My javascript quiz app doesn't work properly我的 javascript 测验应用程序无法正常工作
【发布时间】：2015-02-24 22:37:03
【问题描述】：

我正在关注本指南：http://javascriptissexy.com/how-to-learn-javascript-properly/，并且我正在尝试构建第 6 周详细介绍的 JavaScript 测验应用程序。

说明如下：

这是一个带有单选按钮选项的简单测验，它会显示测验者完成后的分数。
测验可以显示任意数量的问题和任意数量的选项。
统计用户的分数并在最后一页显示最终分数。最后一页只会显示分数，所以删除最后一个问题。
使用数组存储所有问题。每个问题，连同它的选择和正确答案应该存储在一个对象中。
动态（使用 document.getElementById 或 jQuery）删除当前问题并添加下一个问题，当用户单击 “下一步”按钮。下一步按钮将是唯一的导航按钮这个版本的测验。
您可以在下面的 cmets 中寻求帮助，或者最好在 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>

【问题讨论】：

考虑这个：stackoverflow.com/help/how-to-ask写一个总结具体问题的标题，ex Bad: "C# Math Confusion", Good: "Why does using float instead of int give me different resu..."

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

经过一番调试，我发现在单击下一个按钮时，您甚至在测验开始之前就尝试接收单选按钮的值；

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");


        var quiz_started = false; // flag , to see if the quiz has started or not

        $("#next").on("click", function() {

            if(!quiz_started)
            {
            quiz_started = true;
            showNextQuestion();

            }

            if (qi < allQuestions.length) {
                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>");
            }
        }
    });

【讨论】：