我的javascript问答应用程序;工作不正常

My javascript quiz app doesn't work properly

本文关键字：工作 不正常 应用程序 javascript 问答 我的      更新时间：2024-05-01

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

以下是说明：

  • 这是一个简单的测验，有单选按钮可供选择，它会显示测验者完成测验后的分数
  • 测验可以显示任意数量的问题和任意数量的选择
  • 统计用户的分数，并在最后一页显示最终分数。最后一页只显示分数，所以删除最后一个问题
  • 使用数组存储所有问题。每个问题，以及它的选择和正确答案应该存储在一个对象中
  • 动态（使用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>

处理当前问题（如果有），然后递增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>

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

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>");
            }
        }
    });
相关文章：