如何在 MCQ 測驗中突出顯示不同問題的正確答案？

Question

我正在嘗試開發一個簡單的 Javascript function 如果答案不正確，則將所選答案突出顯示為紅色，如果正確則將其突出顯示為綠色。 如果選擇了另一個錯誤答案，則先前的錯誤答案必須切換到中性背景，並且新的錯誤答案必須為紅色。 此外，我們必須對多個問題具有相同的功能——在我們繼續處理新問題時，之前問題的紅色和綠色必須保持不變。

我在這里有一個例子，但是有人可以幫我添加上述功能嗎？

HTML：

1. A sum of money is to be distributed among P, Q, R, and S in the proportion 5:2:4:3 respectively. If R gets ₹1000 more than S, what is the share of Q (in ₹)?

<div id="item" > </div>
<button id="incorrect" class="btn" name="q1" onClick="click_action();"> 500</button>
<button id="incorrect" class="btn" name="q1" onClick="click_action();"> 1000</button>
<button id="incorrect" class="btn"  name="q1" onClick="click_action();"> 1500</button>
<button id="correct" class="btn" name="q1" onClick="click_action();"> 2000</button>

<br><br>

2. A trapezium has vertices marked as P, Q, R and S (in that order anticlockwise). The side PQ is parallel to side SR. Further, it is given that, PQ = 11 cm, QR = 4 cm, RS = 6 cm and SP = 3 cm. What is the shortest distance between PQ and SR (in cm)?
<br>
<div id="answer-buttons" class="btn-grid">
  <button id="correct" class="btn" name="q2" onClick="click_action();"> 1.80 </button>
  <button id="incorrect" class="btn" name="q2" onClick="click_action();"> 2.40 </button>
  <button  class="btn" id="incorrect" name="q2" onClick="click_action();"> 4.20 </button>
  <button class="btn" id="incorrect" name="q2" onClick="click_action();"> 5.76 </button>
  </div>

CSS

.btn {
  --hue: var(--hue-neutral);
  border: 10px solid hsl(var(--hue), 100%, 30%);
  background-color: blue;
  border-radius: 100px;
  padding: 10px 30px;
  color: white;
  outline: none;
}
.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin: 20px 0;
}

JS

function click_action() {
var incorrect = document.getElementById("incorrect");
var correct = document.getElementById("correct");


if (incorrect.style.background != "red") {
   incorrect.style.background = "red";
}
else if (correct.style.background != "green") {
   correct.style.background = "green";
}

}

Answer 1

雖然這不是最好的方法，但你可以達到類似的效果。 我建議您查看一些有關如何在 javascript 中創建測驗的文章：

 let incorrectarr = []; let correctAnswer = []; //getting all buttons let buttons = document.querySelectorAll('.btn'); //looping through each button and implement the function buttons.forEach(button => { button.addEventListener('click', function() { incorrectarr.push(button) checkFunction(button); showAnswer(); incorrectarr.forEach(e=> e.style.background = 'red') }); }); function checkFunction(a) { //looping through button and keep the background color blue buttons.forEach(button => { button.style.background = "blue"; }); //if you console.log(id) you will get the id and according to the id change its style if(a.id === "correct"){ a.style.background = "green" } if(a.id === "incorrect"){ a.style.background = "red" } } let item = document.querySelectorAll('.item'); function showAnswer(){ item.forEach(i=>{ // console.log(i.children['correct']) i.addEventListener('click',function(){ let correct = i.children['correct']; correctAnswer.push(correct); correctAnswer.forEach(e=>{ e.style.background = 'green' }) }) }) }

 .btn { --hue: var(--hue-neutral); border: 10px solid hsl(var(--hue), 100%, 30%); background-color: blue; border-radius: 100px; padding: 10px 30px; color: white; outline: none; }.btn-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; margin: 20px 0; }

 <body> <div class="questions"> <p> 1. A sum of money is to be distributed among P, Q, R, and S in the proportion 5:2:4:3 respectively. If R gets ₹1000 more than S, what is the share of Q (in ₹)?</p> <div class="item"> <button id="incorrect" class="btn"> 500</button> <button id="incorrect" class="btn"> 1000</button> <button id="incorrect" class="btn"> 1500</button> <button id="correct" class="btn"> 2000</button> </div> </div> <div class="questions" > <p>2. A trapezium has vertices marked as P, Q, R and S (in that order anticlockwise). The side PQ is parallel to side SR. Further, it is given that, PQ = 11 cm, QR = 4 cm, RS = 6 cm and SP = 3 cm. What is the shortest distance between PQ and SR (in cm)? </p> <div class="item"> <button id="correct" class="btn"> 1.80 </button> <button id="incorrect" class="btn"> 2.40 </button> <button class="btn" id="incorrect"> 4.20 </button> <button class="btn" id="incorrect"> 5.76 </button> </div> </div> <script src="src/index.js"> </script> </body>

如果您還沒有理解其中的任何一行，請告訴我。

Answer 2

id 屬性在 html 中必須是唯一的。 您對多個按鈕具有相同的 id。 您可以進行檢查，例如data-correct="1"和data-correct="0" 。 然后您應該將事件 object 移動到您的 javascript function 並根據event.target.getAttribute("data-correct")的等效性更改背景顏色為 equals

更新您的 html：

<button class="btn" data-correct="0" name="q1"> 500</button>
<button class="btn" data-correct="0" name="q1"> 1000</button>
<button class="btn" data-correct="1" name="q1"> 1500</button>
<button class="btn" data-correct="0" name="q1"> 2000</button>

並初始化點擊監聽器：

function init() {
    const buttons = [...document.getElementsByClassName("btn")];
    buttons.forEach(button => {
        button.addEventListener("click", click_action)
    })
}
init()

和 click_action function

function click_action(e) {
    const correctAttribute = e.target.getAttribute("data-correct");
    if(Boolean(+correctAttribute)) {
        e.target.style.background = "green";
    }else {
        e.target.style.background = "red";
    }

}

現在點擊正確答案時為綠色，點擊錯誤答案時為紅色

如何在 MCQ 測驗中突出顯示不同問題的正確答案？

問題描述

2 個解決方案

解決方案1
2 已采納 2022-09-10 13:20:27

解決方案2
1 2022-09-10 11:33:23

如何在 MCQ 測驗中突出顯示不同問題的正確答案？

問題描述

2 個解決方案

解決方案1 2 已采納 2022-09-10 13:20:27

解決方案2 1 2022-09-10 11:33:23

解決方案1
2 已采納 2022-09-10 13:20:27

解決方案2
1 2022-09-10 11:33:23