javascript - 在测验中选择单选按钮时突出显示正确和错误的答案

Question

我正在编写一个使用单选按钮的多项选择测验脚本。我想添加一个功能，当选择单选按钮时，它会检查是否选择了正确的答案，然后所选的单选按钮会突出显示为绿色。如果选择了错误的答案，则所选单选按钮将突出显示为红色，正确的答案也会突出显示为绿色。然后提交按钮被启用。

当我单击“提交”按钮时，它会转到下一个问题并重复该过程，直到测验结束。问题是突出显示仅在单击提交按钮后才起作用。而且测验从第二个问题开始就停止了。我该如何解决？我已经在下面包含了 jsfiddle 和代码。有人可以帮忙解决这个问题吗？

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
    ["What is 10 + 4?", "12", "14", "16", "B"],
    ["What is 20 - 9?", "7", "13", "11", "C"],
    ["What is 7 x 3?", "21", "24", "25", "A"],
    ["What is 8 / 2?", "10", "2", "4", "C"]
];
function _(x) {
    return document.getElementById(x);
}
function renderQuestion() {
    test = _("test");
    if (pos >= questions.length) {
        test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
        _("test_status").innerHTML = "Test Completed";
        pos = 0;
        correct = 0;
        return false;
    }
    _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;
    question = questions[pos][0];
    chA = questions[pos][1];
    chB = questions[pos][2];
    chC = questions[pos][3];
    test.innerHTML = "<h3>" + question + "</h3>";
    test.innerHTML += "<input type='radio' class='choice' name='choices' value='A'id='choA'> <label for='choA'>" + chA + "</label><br>";
    test.innerHTML += "<input type='radio' class='choice' name='choices' value='B'id='choB'> <label for='choB'>" + chB + "</label><br>";
    test.innerHTML += "<input type='radio' class='choice' name='choices' value='C'id='choC'> <label for='choC'>" + chC + "</label><br>";
    test.innerHTML += "<button onclick='checkAnswer()' disabled='disabled' id='choiceSubmit'>Submit Answer</button>";
}

function checkAnswer() {
    debugger;
    if ($("#test input:checked").val() == questions[pos][4]) {
        // correct question clicked
        $("#test input:checked+label").css("background-color", "green");
        correct++;
    }
    else {
        // wrong question clicked
        $("#test input:checked+label").css("background-color", "red");
    }
    setTimeout(function () {
        pos++;
        renderQuestion();
    }, 1000);
}

$("document").ready(function () {
    renderQuestion();
    var choiceClicked = false;

    if (!choiceClicked) {
        $("#test input").change(function () {
            choiceClicked = true;
            $("#choiceSubmit").removeAttr("disabled");

        });
    }


});

https://jsfiddle.net/diviseed/n59y2qaa/1/

Answer 1

我想就是这样https://jsfiddle.net/n59y2qaa/12/

• 突出显示仅在单击提交按钮后才起作用

这是因为当您单击/更改单选按钮时，不会调用执行突出显示的 checkAnswer() 。

• 测验从第二个任务开始就停止了

这是因为按下提交后，您会将新的单选按钮添加到文档中，因此您也必须为它们设置 $("#test input").change(function () {}) 。

div#test {
            border: #000 1px solid;
            padding: 10px 40px 40px 40px;
        }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2 id="test_status"></h2>
<div id="test"></div>
<script>
    var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
    var questions = [
        ["What is 10 + 4?", "12", "14", "16", "B"],
        ["What is 20 - 9?", "7", "13", "11", "C"],
        ["What is 7 x 3?", "21", "24", "25", "A"],
        ["What is 8 / 2?", "10", "2", "4", "C"]
    ];
    function _(x) {
        return document.getElementById(x);
    }
    function renderQuestion() {
        test = _("test");
        if (pos >= questions.length) {
            test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
            _("test_status").innerHTML = "Test Completed";
            pos = 0;
            correct = 0;
            return false;
        }
        _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;
        question = questions[pos][0];
        chA = questions[pos][1];
        chB = questions[pos][2];
        chC = questions[pos][3];
        test.innerHTML = "<h3>" + question + "</h3>";
        test.innerHTML += "<input  onclick='checkAnswer()'  type='radio' class='choice' name='choices' value='A'id='choA'> <label for='choA'>" + chA + "</label><br>";
        test.innerHTML += "<input  onclick='checkAnswer()'  type='radio' class='choice' name='choices' value='B'id='choB'> <label for='choB'>" + chB + "</label><br>";
        test.innerHTML += "<input  onclick='checkAnswer()'  type='radio' class='choice' name='choices' value='C'id='choC'> <label for='choC'>" + chC + "</label><br>";
        test.innerHTML += "<button  onclick='nextAnswer()' disabled='disabled' id='choiceSubmit'>Submit Answer</button>";
    }

    function checkAnswer() {
        choiceClicked = true;
        $("#choiceSubmit").removeAttr("disabled");
        $("#test label").css("background-color", "transparent");
        if ($("#test input:checked").val() == questions[pos][4]) {
            // correct question clicked
            $("#test input:checked+label").css("background-color", "green");
            correct++;
        }
        else {
            // wrong question clicked
            $("#test input:checked+label").css("background-color", "red");
        }
    }
    function nextAnswer(){
        setTimeout(function () {
            pos++;
            renderQuestion();
        }, 1000);    
    }
    $("document").ready(function () {
        renderQuestion();
    });
</script>
</html>