你如何用javascript編寫多項選擇？

Question

我有一個選擇題考試。 現在，我正在考慮使用 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 項考試。

代碼的過程是，

• 當用戶選擇一個答案並單擊下一步按鈕時，將顯示一個對話框，詢問用戶是否對他的答案做出了最終決定。
• 如果用戶選擇正確答案並單擊下一步，則將顯示下一個問題
• 如果用戶選擇了錯誤的答案，正確的答案將通過突出顯示或將答案塗成綠色來顯示。

提前致謝...

我知道上面的代碼不對，但我只是舉個例子。

Answer 1

不，沒有很多方法可以優化這一點。 關於所有您可以優化的是這些事件如何附加到答案選項。 例如，在所有<ol>標記上放置相同的 class 屬性，然后將事件處理程序應用於具有該特定 class 的每個元素的所有子元素。 這是微優化，很多人認為沒有必要。

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

我認為您可以使用單選按鈕來構建您的考試，並在 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/