CODEWITHSUNDEEP
javascript
Anne
Anne

Reputation: 39

How to display/indicate the right and wrong answers at the end of javascript quiz

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

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 <= 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 < 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 < 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 < 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 >= 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 +
    "<br />" +
    "you used " +
    (29 - Math.floor(total_seconds)) +
    " seconds";

  return false;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body bgcolor="lightblue">
  <div id="quiz-time-left"></div>
  <form name="form" id="questions" onsubmit="return false;">
    <h3>1. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q1" value="a" />a. 1<br />
    <input type="radio" name="q1" value="b" />b. 2<br />
    <input type="radio" name="q1" value="c" />c. 3<br />
    <input type="radio" name="q1" value="d" />d. 4<br />

    <h3>2. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q2" value="a" />a. 1<br />
    <input type="radio" name="q2" value="b" />b. 2<br />
    <input type="radio" name="q2" value="c" />c. 3<br />
    <input type="radio" name="q2" value="d" />d. 4<br />

    <h3>3. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q3" value="a" />a. 1<br />
    <input type="radio" name="q3" value="b" />b. 2<br />
    <input type="radio" name="q3" value="c" />c. 3<br />
    <input type="radio" name="q3" value="d" />d. 4<br />

    <h3>4. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q4" value="a" />a. 1<br />
    <input type="radio" name="q4" value="b" />b. 2<br />
    <input type="radio" name="q4" value="c" />c. 3<br />
    <input type="radio" name="q4" value="d" />d. 4<br />

    <h3>5. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q5" value="a" />a. 1<br />
    <input type="radio" name="q5" value="b" />b. 2<br />
    <input type="radio" name="q5" value="c" />c. 3<br />
    <input type="radio" name="q5" value="d" />d. 4<br />

    <h3>6. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q6" value="a" />a. 1<br />
    <input type="radio" name="q6" value="b" />b. 2<br />
    <input type="radio" name="q6" value="c" />c. 3<br />
    <input type="radio" name="q6" value="d" />d. 4<br />

    <br />
    <input type="submit" id="sendA" value="Submit" onclick="score();" />
    <br />
    <p id="p"></p>
  </form>

</body>

</html>

Upvotes: 1

Views: 2659

Answers (3)

Barmar
Barmar

Reputation: 781068

Your indexing in answers in highlightAnswerWithClass is not correct. answers is an array of all the inputs in the form, it's not grouped by question. Since there are 4 possible answers to each question, the indexes of the answers for a particular question are question*4 through question*4+3.

I'm not sure why you were adding 2 to the question number when calling that function.

I changed your HTML to put a span around the text of each answer. Then I use CSS to change the background of the color.

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 <= 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;
  for (var index = question*4; index < question*4 + 4; 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 < 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 < total; i++) {
    
    if (questions[i] == answers[i]) {
      points = points + 2; //Increment the score by 2 for every correct answer given
      highlightAnswerWithClass(i, questions[i], "correct");
    } else {
      points = points - 1;
      highlightAnswerWithClass(i, questions[i], "incorrect");
      highlightAnswerWithClass(i, answers[i], "correct");
    }
  }

  //CSS for questions

  if (points >= 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 +
    "<br />" +
    "you used " +
    (29 - Math.floor(total_seconds)) +
    " seconds";

  return false;
}
.correct + span {
  background-color: green;
}

.incorrect + span {
  background-color: red;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body bgcolor="lightblue">
  <div id="quiz-time-left"></div>
  <form name="form" id="questions" onsubmit="return false;">
    <h3>1. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q1" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q1" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q1" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q1" value="d" /><span>d. 4</span><br />

    <h3>2. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q2" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q2" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q2" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q2" value="d" /><span>d. 4</span><br />

    <h3>3. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q3" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q3" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q3" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q3" value="d" /><span>d. 4</span><br />

    <h3>4. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q4" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q4" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q4" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q4" value="d" /><span>d. 4</span><br />

    <h3>5. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q5" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q5" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q5" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q5" value="d" /><span>d. 4</span><br />

    <h3>6. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q6" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q6" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q6" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q6" value="d" /><span>d. 4</span><br />

<span>    </span><br />
    <input type="submit" id="sendA" value="Submit" onclick="score();" />
    <br />
    <p id="p"></p>
  </form>

</body>

</html>

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

You should wrap value to label value, and use nextSiblingto set color for label.

I updated for high light all correct answer.

answers[index].nextSibling.style.backgroundColor = "red";


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 <= 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['q'+question];
		if(answers == undefined) return;
        for (var index = 0; index < answers.length; index++) {
          if (answers[index] != null && answers[index].value === answer) {
            answers[index].classList.add(className);
			if(answers[index].nextSibling.style != undefined) answers[index].nextSibling.style.backgroundColor = "red";
          }
        }
      }

      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 < 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 < total; i++) {
          if (questions[i] == answers[i]) {
            points = points + 2; //Increment the score by 2 for every correct answer given
			//alert(points);
            highlightAnswerWithClass(i + 1, questions[i], "correct");
          } else {
		  points = points - 1;
		  //alert(points);
            highlightAnswerWithClass(i + 1, questions[i], "incorrect");
            highlightAnswerWithClass(i + 1, answers[i], "correct");
          }
        }

        //CSS for questions

        if (points >= 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 +
          "<br />" +
          "you used " +
          (29 - Math.floor(total_seconds)) +
          " seconds";

        return false;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
	<style>
	.correct{
		border: 1px solid red;
		background-color:red;
	}
	</style>
  </head>
  <body bgcolor="lightblue">
    <div id="quiz-time-left"></div>
    <form name="form" id="questions" onsubmit="return false;">
      <h3>1. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q1" value="a" />a. 1<br />
      <input type="radio" name="q1" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q1" value="c" />c. 3<br />
      <input type="radio" name="q1" value="d" />d. 4<br />

      <h3>2. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q2" value="a" />a. 1<br />
      <input type="radio" name="q2" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q2" value="c" />c. 3<br />
      <input type="radio" name="q2" value="d" />d. 4<br />

      <h3>3. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q3" value="a" />a. 1<br />
      <input type="radio" name="q3" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q3" value="c" />c. 3<br />
      <input type="radio" name="q3" value="d" />d. 4<br />

      <h3>4. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q4" value="a" />a. 1<br />
      <input type="radio" name="q4" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q4" value="c" />c. 3<br />
      <input type="radio" name="q4" value="d" />d. 4<br />

      <h3>5. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q5" value="a" />a. 1<br />
      <input type="radio" name="q5" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q5" value="c" />c. 3<br />
      <input type="radio" name="q5" value="d" />d. 4<br />

      <h3>6. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q6" value="a" />a. 1<br />
      <input type="radio" name="q6" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q6" value="c" />c. 3<br />
      <input type="radio" name="q6" value="d" />d. 4<br />

      <br />
      <input type="submit" id="sendA" value="Submit" onclick="score();" />
      <br />
      <p id="p"></p>
    </form>

  </body>
</html>

Upvotes: 0

xfoz
xfoz

Reputation: 56

Ok, so I ran the snippet and here is the error in the console: 

Error: {
  "message": "Uncaught ReferenceError: Invalid left-hand side expression in prefix operation",
  "filename": "https://stacksnippets.net/js",
  "lineno": 132,
  "colno": 25
}

The error was in line 132 and column 25.

So I think you should check your code before asking stack overflow and you shouldn't just paste your entire code here. Take out the part you think has a problem and then ask us.

Here I took out the code I believe has an error. Good Luck!

if (points >= 4) {
          document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
        } else { 
          document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
        }

Upvotes: 0

Related Questions