如何在 MCQ 测验中突出显示不同问题的正确答案？
[英]How to highlight correct answers for different questions in a MCQ quiz?
问题描述
I am trying to develop a simple Javascript function which highlights the chosen answer to red if the answer is incorrect, and green if correct.
我正在尝试开发一个简单的 Javascript function 如果答案不正确，则将所选答案突出显示为红色，如果正确则将其突出显示为绿色。 If another incorrect answer is chosen, the previous incorrect answer must switch to neutral background and the new incorrect answer must be in red.如果选择了另一个错误答案，则先前的错误答案必须切换到中性背景，并且新的错误答案必须为红色。 Also we must have the same functionality for multiple questions - the red and green for previous questions must remain as we move on to new questions.此外，我们必须对多个问题具有相同的功能——在我们继续处理新问题时，之前问题的红色和绿色必须保持不变。
I have an example here , but can someone help me add the above functionality?我在这里有一个例子，但是有人可以帮我添加上述功能吗？
HTML: 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 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 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";
}
}
2 个解决方案
解决方案1
2 已采纳 2022-09-10 13:20:27
Though this not not the best way to do but you can achive something similar like this.虽然这不是最好的方法，但你可以达到类似的效果。 And I will recommend you to view some articles regarding how to create quiz in javascript:我建议您查看一些有关如何在 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>
If you haven't understand any single line of it let me know.如果您还没有理解其中的任何一行，请告诉我。
解决方案2
1 2022-09-10 11:33:23
id attribute must be unique in html. id 属性在 html 中必须是唯一的。 You have the same id to more than one button.您对多个按钮具有相同的 id。 You can make a check like data-correct="1" and data-correct="0" .您可以进行检查，例如data-correct="1"和data-correct="0" 。 Then you should move the event object to your javascript function and change the background color according to the equivalence of event.target.getAttribute("data-correct") to equals "1"然后您应该将事件 object 移动到您的 javascript function 并根据event.target.getAttribute("data-correct")的等效性更改背景颜色为 equals
update your html:更新您的 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>
and init click listeners:并初始化点击监听器：
function init() {
const buttons = [...document.getElementsByClassName("btn")];
buttons.forEach(button => {
button.addEventListener("click", click_action)
})
}
init()
and click_action function和 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";
}
} }
now green when clicking on correct answers and red when clicking on wrong answers现在点击正确答案时为绿色，点击错误答案时为红色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.