动态更新JavaScript测验分数_Javascript_Jquery_Html_Dynamic

动态更新JavaScript测验分数

javascript jquery html dynamic

动态更新JavaScript测验分数,javascript,jquery,html,dynamic,Javascript,Jquery,Html,Dynamic,我正在用JavaScript和jQuery创建一个测验。它几乎达到了我想要的位置，但是计分器似乎不起作用。我相信这可能是代码执行顺序的问题。我只想在“value”vaiable（检查选中的单选按钮）等于当前问题对象的答案值时，向“score”变量添加一个 $(document).ready(function() { var i = -1; var qNum = 0; var score = 0; $(".radbut").hide(); $("br").h

我正在用JavaScript和jQuery创建一个测验。它几乎达到了我想要的位置，但是计分器似乎不起作用。我相信这可能是代码执行顺序的问题。我只想在“value”vaiable（检查选中的单选按钮）等于当前问题对象的答案值时，向“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


权力游戏小测验


“请为所给的问题选择正确答案。请立即选择，因为冬天即将来临。
单击“下一步”开始










下一个
问题
得分
值
quesVal

我不是100%确定，我只是想给出最好的答案，但是创建“score”变量作为常量可能会有帮助吗？而不是在“$（document）.ready（function（）中声明它“，把它放在外面？

这确实与代码的顺序有关。当您检查正确答案时，您已经增加了

值，因此您检查了当前/新问题，而不是前一个问题

我还添加了隐藏答案和一些其他检查，以防止在得出最后一个现在有答案选择的问题时出现JS错误。（顺便说一下，在设计方面，我不会将“结束”文本作为自己的问题放进去…一个问题应该是一个有答案选择的问题，句号。）

$（文档）.ready（函数（）{
var i=-1；
var qNum=0；
var得分=0；
var-toggleElements=$（“.radbut，br，#next，#R1，#R2，#R3，#R4”）；
$（“.radbut”）.hide（）；
$（“br”）.hide（）；
$（“#下一步”）。单击（函数（）{
var value=（$（'input[name=“Q”]：checked'）.prop（'checked'，false）.val（））；//检查选中的单选按钮并将其设置为value
如果（i>=0）{
//如果选项与答案匹配，则得分加+1
如果（值==所有问题[i]。答案）{
分数++；
};
}
i+=1；
qNum+=1；
toggleElements[allQuestions[i]。选项？'show'：'hide']（）；
//显示问题和变量
$（“#questionLoc”）.text（所有问题[i].question）；
如果（所有问题[i].选项）{
$（“#R1”）.text（所有问题[i]。选项[0]）；
$（“#R2”）.text（所有问题[i]。选项[1]）；
$（“#R3”）.text（所有问题[i]。选项[2]）；
$（“#R4”）.text（所有问题[i]。选项[3]）；
}
$（“#qNum”）.text（qNum）；
$（“#分数”）。文本（分数）；
$（“#值”）。文本（值）；
$（“#quesVal”）.text（所有问题[i]。答案）；
});
});
var-allQuestions=[]；
功能问题（问题、选项、答案）{
这个问题=问题；
这个。选择=选择；
这个答案=答案；
};
变量问题1=新问题（“谁是桑萨的母亲？”，[“塞尔西”、“马乔里”、“卡特林”、“丽萨”]，3）；
var问题2=新问题（“斯塔克一家从哪里来？”，[“冬城”、“国王登陆”、“瓦莱里亚”、“多恩”]，1）；
var question3=新问题（“谁是这个群体中最大的混蛋？”，[“Eddard”、“Khaleesi”、“Bran”、“Geoffrey”]，4）；
var endSent=新问题（“结束”）；
所有问题。推送（问题1、问题2、问题3、结束发送）；


单击“下一步”开始










下一个
问题
得分
值
quesval

由于访问分数变量的所有代码都在ready处理程序中，这不可能是问题所在，那么为什么要污染全局范围呢？我不确定。我对编码比较陌生，只是想帮忙。如果你能解释我建议的答案不正确的原因，我将不胜感激；我正在努力学习。最好给出答案一个答案，如果你确定你的建议；-，正如我解释的，变量也在正确的范围内。除非必要，否则用各种各样的东西污染全球范围是不好的做法。对不起，我只是想尽我最大的努力来贡献。谢谢你的解释，我理解。学习新东西很好！在继续下一个问题时，您可能还希望取消选中当前答案，我现在已将其编辑到我的答案中。再次更新以添加一些优化。我想这只是一个用于演示的原型，但如果不是，您应该将jQuery集合（=通过jQuery选择的元素）保存到变量中，而不是在每次调用click handler函数时重新收集它们。

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