This quiz works great except that I can't get it to return all of the incorrect answer feedback - only the last incorrect answer feedback. For example, if I input answer "c" for both #1 and #2, it's supposed to say both "Question 1 - Answer: a" and "Question 2 - Answer: b" at the bottom of the page. However, it only returns "Question 2 - Answer: b" since it's the last incorrect answer, so for some reason it's not returning all the feedback.
<!DOCTYPE HTML>
<html>
<head>
<title>Quiz Questions And Answers</title>
</head>
<body>
<center><h1>Quiz Questions</h1></center>
<p>
<form name="quiz">
<p>
<b>Question 1.
<br>What is the 1st letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q1" value="a">A<br>
<input type="radio" name="q1" value="b">B<br>
<input type="radio" name="q1" value="c">C<br>
</blockquote>
<p><b>
<hr>
Question 2.
<br>What is the 2nd letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q2" value="a">A<br>
<input type="radio" name="q2" value="b">B<br>
<input type="radio" name="q2" value="c">C<br>
</blockquote>
<p><b>
<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>
</form>
<p>
<form method="post" name="Form" onsubmit="" action="">
</form>
<script>
var numQues = 2;
var numChoi = 3;
var answers = new Array(2);
answers[0] = "a";
answers[1] = "b";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
answered=false;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
answered=true;
if (currSelection.value == answers[i]) {
score++;
break;
} else if (currSelection.value != answers[i]) {
qreturn = "Question " + (i+1) + " - Answer: " + answers[i];
document.getElementById("qreturn").innerHTML = qreturn;
//this is the incorrect answer feedback
break;
}
}
}
if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
}
var scoreper = Math.round(score/numQues*100);
form.percentage.value = scoreper + "%";
form.mark.value=score;
}
</script>
<p id="qreturn"></p>
You use innerHTML = ..., which means element will be replaced every iteration. So use must use += operator or appendChild() function to display all answer.
Fixed code
<html>
<head>
<title>Quiz Questions And Answers</title>
</head>
<body>
<center><h1>Quiz Questions</h1></center>
<p>
<form name="quiz">
<p>
<b>Question 1.
<br>What is the 1st letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q1" value="a">A<br>
<input type="radio" name="q1" value="b">B<br>
<input type="radio" name="q1" value="c">C<br>
</blockquote>
<p><b>
<hr>
Question 2.
<br>What is the 2nd letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q2" value="a">A<br>
<input type="radio" name="q2" value="b">B<br>
<input type="radio" name="q2" value="c">C<br>
</blockquote>
<p><b>
<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>
</form>
<p>
<form method="post" name="Form" onsubmit="" action="">
</form>
<script>
var numQues = 2;
var numChoi = 3;
var answers = new Array(2);
answers[0] = "a";
answers[1] = "b";
function getScore(form) {
document.getElementById("qreturn").innerHTML =''
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
answered=false;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
answered=true;
if (currSelection.value == answers[i]) {
score++;
break;
} else if (currSelection.value != answers[i]) {
qreturn = "Question " + (i+1) + " - Answer: " + answers[i];
document.getElementById("qreturn").innerHTML += '<div>'+qreturn+'</div>';
//this is the incorrect answer feedback
break;
}
}
}
if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
}
var scoreper = Math.round(score/numQues*100);
form.percentage.value = scoreper + "%";
form.mark.value=score;
}
</script>
<p id="qreturn"></p>