你如何用javascript编写多项选择？

Question

I have a multple choice exam. Now, I'm thinking of using the if else conditon. example below

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

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";
} 

I would like to know, if there are alternative ways to execute this code in a simpler/easy way. Because this is a 50item exam per subject.

The process of the code is,

• when the user chooses an answer and click the next button, a dialog box will show asking if the user is final with his answer.
• if the user chooses the correct answer and clicks next, the next question will show
• if the user chooses the wrong answer, the correct answer will show by highlighting or coloring the answer green.

Thanks in advance...

I know that the code above is not right, but I just show it for an example.

Answer 1

No, there aren't many ways to optimize this. About all you can optimize is how these events are attached to the answer options. For example, placing the same class attribute on all <ol> tags, and then applying the event handler to all of the child elements of each element with that specific class. This is micro-optimization, and many people view it as unnecessary.

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="answer-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="answer-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]);
    }
}

Answer 2

I think you could use radio buttons to build your exam an have all the answers in a JavaScript object to match with the user inputs using a single function.

This is an example:

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';

Check the fiddle: https://jsfiddle.net/davegomez/4y56rzL9/