Question

我按照本指南操作：http://javascriptissexy.com/how-to-learn-javascript-properly/我正在尝试构建第6周详细的javascript测验应用。

这是指令：

这是一个简单的测验，有单选按钮选项，它会显示完成后测验者的分数。
测验可以显示任意数量的问题和任意数量的选择。
统计用户的分数并在最后一页显示最终分数。最后一页仅显示分数，因此请删除最后一个问题。
使用数组存储所有问题。每个问题，以及它的选择和正确答案应该存储在一个对象中。
动态地（使用document.getElementById或jQuery）删除当前问题并在用户点击时添加下一个问题 “下一步”按钮。 “下一步”按钮将是唯一导航按钮这个版本的测验。
您可以在下面的评论中寻求帮助，或者最好在Stack上寻求帮助溢出。您可能会得到及时准确的答案 Stack Overflow。

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

我发现＆＃39; qi＆＃39;变量导致了问题，所以我更换了

    allQuestions[qi].answer

到

    allQuestions[qi+1].answer

然后我的最后一个问题没有显示出来。

PS：对不起我的英语......我尽我所能

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

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

2 个答案: