Question

我正在使用JavaScript和jQuery创建一个测验。这几乎是我想要的地方，但得分计数器似乎不起作用。我相信它可能是执行代码的顺序的问题。我只想在'value'变量（检查哪个单选按钮被检查）等于当前问题对象的答案值时，在'score'变量中添加一个。

$(document).ready(function() {
    var i = -1;
    var qNum = 0;
    var score = 0;
    $(".radbut").hide();
    $("br").hide();

//display value upon radio button checked change - for debugging purposes
$('.radbut').change(function() {
    var value = ($('input[name="Q"]:checked').val());
    alert(value);
});     

    $("#next").click(function(){
        var value = ($('input[name="Q"]:checked').val()); //checks which radio button is checked and sets it to value
        i += 1;
        qNum += 1;
        $(".radbut").show();
        $("br").show();

        //display questions and variables
        $("#questionLoc").text(allQuestions[i].question);
        $("#R1").text(allQuestions[i].choices[0]);
        $("#R2").text(allQuestions[i].choices[1]);
        $("#R3").text(allQuestions[i].choices[2]);
        $("#R4").text(allQuestions[i].choices[3]);
        $("#qNum").text(qNum);
        $("#score").text(score);
        $("#value").text(value);
        $("#quesVal").text(allQuestions[i].answer);

        //add +1 to score if choice matches answer
        if (value == allQuestions[i].answer) {
            score++;
            };
        });
});

var allQuestions = [];

function question(question, choices, answer) {
                this.question = question;
                this.choices = choices;
                this.answer = answer;
};

var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3);
var question2 = new question("Where are the Starks from?", ["Winterfell", "King's Landing", "Valyria", "Dorne"], 1);
var question3 = new question("Who is the biggest asshole in this group?", ["Eddard", "Khaleesi", "Bran", "Geoffrey"], 4);
var endSent = new question("End");

allQuestions.push(question1, question2, question3, endSent);

HTML

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <title>Game of Thrones Trivia Quiz</title>
</head>

</header>

<h3>"Please choose the correct answer for the question given. Do so promptly - winter is coming.</h3>

<p id="questionLoc">Click "Next" to begin</p>

    <input type="radio" name="Q" value= 1 class="radbut" /><span id="R1"></span>
    <br />
    <input type="radio" name="Q" value= 2 class="radbut" /><span id="R2"></span>
    <br />
    <input type="radio" name="Q" value= 3 class="radbut" /><span id="R3"></span>
    <br />
    <input type="radio" name="Q" value= 4 class="radbut" /><span id="R4"></span>
    <br />
    <br />
    <div id="next">Next</div>
    <p id="qNum"></p><span>Question</span>
    <p id="score"></p><span>score</span>
    <p id="value"></p><span>value</span>
    <p id="quesVal"></p><span>quesval</span>
</form>

Answer 1

它确实与您的代码顺序有关。当您检查正确答案时，您已经增加了i值，因此您检查了当前/新问题而不是前一个问题。

我还添加了隐藏答案和其他一些检查，以防止在到达现在已经回答选择的最后一个问题时出现JS错误。（顺便说一句，在设计方面，我不会将＆＃34; End＆＃34;文本作为自己的问题......问题应该是答案选择的问题，句号。）

＆＃13;

$(document).ready(function() {
    var i = -1;
    var qNum = 0;
    var score = 0;
    var toggleElements = $(".radbut, br, #next, #R1, #R2, #R3, #R4");
    $(".radbut").hide();
    $("br").hide();

    $("#next").click(function(){
        var value = ($('input[name="Q"]:checked').prop('checked', false).val()); //checks which radio button is checked and sets it to value
				if (i >= 0) {
          //add +1 to score if choice matches answer
          if (value == allQuestions[i].answer) {
              score++;
              };
        }
        
        i += 1;
        qNum += 1;
        
        toggleElements[allQuestions[i].choices ? 'show' : 'hide']();

        //display questions and variables
        $("#questionLoc").text(allQuestions[i].question);
        
        if (allQuestions[i].choices) {
          $("#R1").text(allQuestions[i].choices[0]);
          $("#R2").text(allQuestions[i].choices[1]);
          $("#R3").text(allQuestions[i].choices[2]);
          $("#R4").text(allQuestions[i].choices[3]);
        }
        
        $("#qNum").text(qNum);       
        $("#score").text(score);
        $("#value").text(value);
        $("#quesVal").text(allQuestions[i].answer);
    });
});

var allQuestions = [];

function question(question, choices, answer) {
                this.question = question;
                this.choices = choices;
                this.answer = answer;
};

var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3);
var question2 = new question("Where are the Starks from?", ["Winterfell", "King's Landing", "Valyria", "Dorne"], 1);
var question3 = new question("Who is the biggest asshole in this group?", ["Eddard", "Khaleesi", "Bran", "Geoffrey"], 4);
var endSent = new question("End");

allQuestions.push(question1, question2, question3, endSent);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="questionLoc">Click "Next" to begin</p>

    <input type="radio" name="Q" value= 1 class="radbut" /><span id="R1"></span>
    <br />
    <input type="radio" name="Q" value= 2 class="radbut" /><span id="R2"></span>
    <br />
    <input type="radio" name="Q" value= 3 class="radbut" /><span id="R3"></span>
    <br />
    <input type="radio" name="Q" value= 4 class="radbut" /><span id="R4"></span>
    <br />
    <br />
    <div id="next">Next</div>
    <p id="qNum"></p><span>Question</span>
    <p id="score"></p><span>score</span>
    <p id="value"></p><span>value</span>
    <p id="quesVal"></p><span>quesval</span>

＆＃13;

Answer 2

我不是百分百肯定，我只是想给出最好的答案，但会创造出来的分数＆＃39;变量作为常数可能有帮助吗？而不是在＆$ 39; $（文件）.ready（function（）＆＃39;里面声明它，把它放在外面？

动态更新JavaScript测验分数

2 个答案: