如何使用javascript编写多选代码

How do you code a multiple choice with javascript?

本文关键字：代码 何使用 javascript      更新时间：2023-09-26

我有一个多选考试。现在，我正在考虑使用if-else条件。下方的示例

<li>Gabriel belongs to an <u>affluent</u> family.</li>
    <ol type="A">
        <li id="x">A</li>
        <li id="y">B</li>
        <li id="y">C</li>
    </ol>
</li>

JS代码

var x = document.getElementById("x");
if (x.checked){
    document.getElementById('q2').style.display = 'block'; /*this is a next question*/
} else {
    document.getElementById('x').style.backgroundColor = "green";
}

我想知道，是否有其他方法可以以更简单/容易的方式执行此代码。因为这是每个科目50项的考试。

代码的过程是，

  • 当用户选择一个答案并单击"下一步"按钮时，会出现一个对话框框将显示询问用户是否最终给出了答案
  • 如果用户选择了正确的答案并单击"下一步"，则下一步问题会显示
  • 如果用户选择了错误的答案，正确的答案将显示为将答案高亮显示或涂成绿色

提前感谢。。。

我知道上面的代码是不对的，但我只是举个例子。

不，没有很多方法可以优化它。你所能优化的就是如何将这些事件附加到答案选项中。例如，在所有<ol>标记上放置相同的类属性，然后将事件处理程序应用于具有该特定类的每个元素的所有子元素。这是微观优化，许多人认为这是不必要的。

HTML:

<div id="q2" style="display: none;">
    Is that your final answer?
</div>
<li>Gabriel belongs to an <u>affluent</u> family.</li>
    <ol type="A" class="answerswer-group">
        <li id="x" class="correct">A</li>
        <li id="y">B</li>
        <li id="z">C</li>
    </ol>
</li>
<li>Daniel is taken into <u>captivity</u> by Nebuchadnezzar.</li>
    <ol type="A" class="answerswer-group">
        <li id="x">A</li>
        <li id="y">B</li>
        <li id="z" class="correct">C</li>
    </ol>
</li>

JavaScript:

var answerGroups = document.getElementsByClassName ('answer-group');
var q2 = document.getElementById ('q2');
var answers;
function answerOnclick (answer)
{
    answer.onclick = function (event) {
        var correct;
        if (this.classList.contains ('correct') === true) {
            q2.style.display = 'block';
        } else {
            correct = answer.parentNode.getElementsByClassName ('correct');
            correct[0].style.backgroundColor = 'green';
        }
    };
}
for (var g = 0, gl = answerGroups.length; g < gl; g++) {
    answers = answerGroups[g].children;
    for (var a = 0, al = answers.length; a < al; a++) {
        answerOnclick (answers[a]);
    }
}

我认为您可以使用单选按钮来构建考试，并在JavaScript对象中使用单个函数将所有答案与用户输入相匹配。

这是一个例子：

HTML

<form action="">
    <p>Choose the correct color:</p>
    <input type="radio" name="color" value="red"> Red<br>
    <input type="radio" name="color" value="green" > Green<br>
    <input type="radio" name="color" value="blue" checked=true> Blue
</form>
<div class="result"></div>

JavaScript

var answerList = {
  color: "green",
  ...
}
var resultBox = document.querySelector('.result');
function checkAnswer(name, answers) {
  var checked = document.querySelector('input[name=' + name + ']:checked');
  return answers[name] === checked.value;
}
resultBox.innerHTML = checkAnswer('color', answerList) ? 'Correct' : 'Wrong';

检查小提琴：https://jsfiddle.net/davegomez/4y56rzL9/

相关文章：