title: How to display/indicate the right and wrong answers at the end of javascript quiz
body: <p>as the title suggests I need help with how to display the right and wrong answers at the end of my javascript quiz. I've tried various ways and none seem to work. I've tried highlighting, writing next to and displaying underneath the score however nothing I try seems to work. Any guidance is greatly appreciated thanks x</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var total_seconds = 30 * 1;
  var c_minutes = parseInt(total_seconds / 60);
  var c_seconds = parseInt(total_seconds % 60);
  var timer;
  
  function CheckTime() {
    document.getElementById("quiz-time-left").innerHTML =
      "Time Left: " + c_minutes + " minutes " + c_seconds + " seconds ";
  
    if (total_seconds &lt;= 0) {
      score();
    } else {
      total_seconds = total_seconds - 1;
      c_minutes = parseInt(total_seconds / 60);
      c_seconds = parseInt(total_seconds % 60);
      timer = setTimeout(CheckTime, 1000);
    }
  }
  timer = setTimeout(CheckTime, 1000);
  
  function highlightAnswerWithClass(question, answer, className) {
    var answers = document.forms.form[question];
  
    for (var index = 0; index &lt; answers.length; index++) {
      if (answers[index].value === answer) {
        answers[index].classList.add(className);
      }
    }
  }
  
  function score() {
    // stop timer
    clearInterval(timer);
  
    //Referencing the value of the questions
    var q1 = document.forms.form.q1.value;
    var q2 = document.forms.form.q2.value;
    var q3 = document.forms.form.q3.value;
    var q4 = document.forms.form.q4.value;
    var q5 = document.forms.form.q5.value;
    var q6 = document.forms.form.q6.value;
  
    // disable form
    var elements = document.getElementById("questions").elements;
    for (var i = 0, len = elements.length; i &lt; len; ++i) {
      elements[i].disabled = true;
    }
  
    //Array for the questions
    var questions = [q1, q2, q3, q4, q5, q6];
  
    //Answers for each question
    var answers = ["b", "b", "b", "b", "b", "b"];
  
    //variable to keep track of the points
    var points = 0;
    var total = 6;
    //max score
  
    //Making use of a for loop to iterate over the questions and answers arrays
    for (var i = 0; i &lt; total; i++) {
      if (questions[i] == answers[i]) {
        points = points + 2; //Increment the score by 2 for every correct answer given
        alert(points);
        highlightAnswerWithClass(i + 2, questions[i], "correct");
      } else {
        points = points - 1;
        alert(points);
        highlightAnswerWithClass(i + 2, questions[i], "incorrect");
        highlightAnswerWithClass(i + 2, answers[i], "correct");
      }
    }
  
    //CSS for questions
  
    if (points &gt;= 4) {
      document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
    } else {
      document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
    }
  
    var q = document.getElementById("p");
  
    q.style.fontSize = "40px";
    q.style.textAlign = "center";
    q.innerHTML =
      "You got " +
      points +
      " out of " +
      total +
      "&lt;br /&gt;" +
      "you used " +
      (29 - Math.floor(total_seconds)) +
      " seconds";
  
    return false;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body bgcolor="lightblue"&gt;
    &lt;div id="quiz-time-left"&gt;&lt;/div&gt;
    &lt;form name="form" id="questions" onsubmit="return false;"&gt;
      &lt;h3&gt;1. How many yellow cards equal a red card in football?&lt;/h3&gt;
      &lt;input type="radio" name="q1" value="a" /&gt;a. 1&lt;br /&gt;
      &lt;input type="radio" name="q1" value="b" /&gt;b. 2&lt;br /&gt;
      &lt;input type="radio" name="q1" value="c" /&gt;c. 3&lt;br /&gt;
      &lt;input type="radio" name="q1" value="d" /&gt;d. 4&lt;br /&gt;
  
      &lt;h3&gt;2. How many yellow cards equal a red card in football?&lt;/h3&gt;
      &lt;input type="radio" name="q2" value="a" /&gt;a. 1&lt;br /&gt;
      &lt;input type="radio" name="q2" value="b" /&gt;b. 2&lt;br /&gt;
      &lt;input type="radio" name="q2" value="c" /&gt;c. 3&lt;br /&gt;
      &lt;input type="radio" name="q2" value="d" /&gt;d. 4&lt;br /&gt;
  
      &lt;h3&gt;3. How many yellow cards equal a red card in football?&lt;/h3&gt;
      &lt;input type="radio" name="q3" value="a" /&gt;a. 1&lt;br /&gt;
      &lt;input type="radio" name="q3" value="b" /&gt;b. 2&lt;br /&gt;
      &lt;input type="radio" name="q3" value="c" /&gt;c. 3&lt;br /&gt;
      &lt;input type="radio" name="q3" value="d" /&gt;d. 4&lt;br /&gt;
  
      &lt;h3&gt;4. How many yellow cards equal a red card in football?&lt;/h3&gt;
      &lt;input type="radio" name="q4" value="a" /&gt;a. 1&lt;br /&gt;
      &lt;input type="radio" name="q4" value="b" /&gt;b. 2&lt;br /&gt;
      &lt;input type="radio" name="q4" value="c" /&gt;c. 3&lt;br /&gt;
      &lt;input type="radio" name="q4" value="d" /&gt;d. 4&lt;br /&gt;
  
      &lt;h3&gt;5. How many yellow cards equal a red card in football?&lt;/h3&gt;
      &lt;input type="radio" name="q5" value="a" /&gt;a. 1&lt;br /&gt;
      &lt;input type="radio" name="q5" value="b" /&gt;b. 2&lt;br /&gt;
      &lt;input type="radio" name="q5" value="c" /&gt;c. 3&lt;br /&gt;
      &lt;input type="radio" name="q5" value="d" /&gt;d. 4&lt;br /&gt;
  
      &lt;h3&gt;6. How many yellow cards equal a red card in football?&lt;/h3&gt;
      &lt;input type="radio" name="q6" value="a" /&gt;a. 1&lt;br /&gt;
      &lt;input type="radio" name="q6" value="b" /&gt;b. 2&lt;br /&gt;
      &lt;input type="radio" name="q6" value="c" /&gt;c. 3&lt;br /&gt;
      &lt;input type="radio" name="q6" value="d" /&gt;d. 4&lt;br /&gt;
  
      &lt;br /&gt;
      &lt;input type="submit" id="sendA" value="Submit" onclick="score();" /&gt;
      &lt;br /&gt;
      &lt;p id="p"&gt;&lt;/p&gt;
    &lt;/form&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>