How to highlight correct answers for different questions in a MCQ quiz?-CodePudding

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. 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:

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"  name="q1" onClick="click_action();"> 500</button>
<button id="incorrect"  name="q1" onClick="click_action();"> 1000</button>
<button id="incorrect"   name="q1" onClick="click_action();"> 1500</button>
<button id="correct"  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" >
  <button id="correct"  name="q2" onClick="click_action();"> 1.80 </button>
  <button id="incorrect"  name="q2" onClick="click_action();"> 2.40 </button>
  <button   id="incorrect" name="q2" onClick="click_action();"> 4.20 </button>
  <button  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;
}

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

}

CodePudding user response：

id attribute must be unique in html. You have the same id to more than one button. You can make a check like data-correct="1" and 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"

update your html:

<button  data-correct="0" name="q1"> 500</button>
<button  data-correct="0" name="q1"> 1000</button>
<button  data-correct="1" name="q1"> 1500</button>
<button  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

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

CodePudding user response：

You can actually minimize the code like this :

//getting all buttons
let buttons = document.querySelectorAll('.btn');
//looping through each button and implement the function
buttons.forEach(button => {
  button.addEventListener('click', function() {
    checkFunction(button)
  });
});

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

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

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" > 500</button>
<button id="incorrect" > 1000</button>
<button id="incorrect" > 1500</button>
<button id="correct" > 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" >
  <button id="correct" > 1.80 </button>
  <button id="incorrect" > 2.40 </button>
  <button   id="incorrect"> 4.20 </button>
  <button  id="incorrect"> 5.76 </button>
  </div>

If you haven't understand any single line of it let me know.