Question

我正在尝试为在线训练营创建一个测验。我正在尝试这样做，以便当用户单击一个真或假的单选按钮，然后单击“下一步”按钮时，分数会更新，并显示下一个问题。我正在尝试使用Javascript的第30-32行来执行此操作，但我不太确定如何实现它。目前它正在阻止我的应用程序在未注释掉时运行。

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="quiz.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="quiz.js"></script>
    <title>Pokemon Quiz</title>
</head>
<body>
    <h1>Pokemon Quiz! Test your skill!</h1>
    <button id="reset" type="button">Reset Quiz</button>
    <form>
      <h3 class="anchor"></h3><br>
      <input type="radio" name="T/F" id="true">True<br>
      <input type="radio" name="T/F" id="false">False
      <br><button type="button" id="next">Next/Start</button><br>
    </form>
    <p>Score: <span id="score">0</span></p>
    <p>Question No. <span id="questionnum">0</span></p>
</body>
</html>

CSS：

body {
    color: #00CCFF;
    background-image: url(http://i.ytimg.com/vi/vyY0jRjrTy4/maxresdefault.jpg);
    margin-left: 500px;
    margin-top: 300px;
}
form {
    margin-left: 45px;
}
input {
    color: red;
    margin-left: 100px;
}
P {
    color: yellow;
    margin-left: 150px;
}
#next {
    margin-left: 100px;
    color: red;
}
#reset {
    margin-left: 135px;
    color: red;
}

使用Javascript：

$( document ).ready(function() {
    //game();
    questionNumber = 0;
    score = 0;
    if (questionNumber < questions.length) {
        $('#next').click(function(){
        game();
        questionNumber ++;
        });
    };

    $('#reset').click(function(){
        neu();
        game();
    });

});

function neu() {
    questionNumber = 0;
    score = 0;
}

function game() {
    console.log(questionNumber);
    $("h3.anchor").html(questions[questionNumber]);

    //if radiobutton value == answers[questionNumber]

    if ((document.getElementById("true").checked && answers[questionNumber] == true) || (document.getElementById("false").checked && answers[questionNumber] == false) {
        score ++;
    }

/*
    if(document.getElementById("next").clicked == true) {
        if(document.getElementById("true").checked) {
            score++;
            console.log(score);
        }
        console.log(score);
        $(".anchor").html("There are 9 certified Pokemon League badges?");
    }
    */
}

//Use use question number to access array values (questions)
//consider using object instead of array to allow for boolean values
//var questions = [];
questions = ["Caterpie evolves into Metapod?",
"There are 9 certified Pokemon League badges?",
"Poliwag evolves 3 times?",
"Are thunder moves effective against ground-type Pokemon?",
"Pokemon of the same kind and level are not identical?",
"TM28 contains Tombstony?"];

answers = [true, false, false, false, true, false];

单选按钮+单击非单选按钮

0 个答案: