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

Question

我正在编写一个使用单选按钮的多项选择测验脚本。 I wanted to add a feature where when the radio button is selected it checks that if correct answer is chosen then the chose radio button is highlighted green.如果选择了错误答案，则所选单选按钮突出显示为红色，并且正确答案突出显示为绿色。然后启用提交按钮。

当我单击提交按钮时，它会转到下一个问题并重复该过程，直到测验结束。问题是突出显示仅在单击提交按钮后才起作用。并且测验从第二个问题停止工作。我该如何解决？我在下面包含了 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>

Answer 2

由于您将 checkAnswer() 绑定到 onclick 事件，因此在动态创建元素时它不会绑定。所以最好使用类似的东西

$("document").ready(function () {

    renderQuestion();
    var choiceClicked = false;

    $(document).on("click","#choiceSubmit",function(){
        checkAnswer();
    })

    $(document).on("click","input[type=radio][name=choices]",function(){

      $("#choiceSubmit").removeAttr("disabled");
    })    
});

checkAnswer()方法应该修改为

 function checkAnswer() {
    debugger;
    if ($("#test input:checked").val() == questions[pos][4]) {
        // correct question clicked

        console.log($("#test input:checked").val())
       $("#test input:checked+label").addClass('green-background')
        $("#test input:checked").addClass('green-background')
        correct++;
    }
    else {
        // wrong question clicked
        $("#test input:checked+label").addClass('red-background')
        $("#test input:checked").addClass('red-background')
    }
    setTimeout(function () {
        pos++;
        renderQuestion();
    }, 1000);
}

最后的 css 如下：

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

input[type='radio']:checked:before {
  background:red;
}


input[type='radio'] {
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:1px solid darkgray;
  border-radius:50%;   
  outline:none;    
  box-shadow:0 0 5px 0px gray inset;
}

input[type='radio']:hover {
  box-shadow:0 0 5px 0px orange inset;
}

input[type='radio']:before {
  content:'';
  display:block;
  width:60%;
  height:60%;
  margin: 20% auto;    
  border-radius:50%;    
}
.green-background{
  background-color: green;
}
.red-background{
  background-color: red;
}

这里是小提琴链接https://jsfiddle.net/g8ycw0gw/2/ 希望这可以帮助！干杯！！