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

userCJR5 0
Viewed 70

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

}
javascript
2 Answers

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:

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.

debugger0

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

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

Sami Salih İbrahimbaş0
Related