I'm looking to add an online quiz feature to my blog. Currently, the code I have displays the result score in a popup when the user clicks on "View Results."
However, I would like to show the result as text within the form itself, similar to the image below.
https://i.sstatic.net/EFJCg.png
var answers = ["A","C","B"],
tot = answers.length;
function getCheckedValue( radioName ){
var radios = document.getElementsByName( radioName ); // Get radio group by-name
for(var y=0; y<radios.length; y++)
if(radios[y].checked) return radios[y].value; // return the checked value
}
function getScore(){
var score = 0;
for (var i=0; i<tot; i++)
if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only
return score;
}
function returnScore(){
alert("Your score is "+ getScore() +"/"+ tot);
}<ul>
<li>
<h3>How many letters are there in "ZZ"?</h3>
<input type="radio" name="question0" value="A">2<br>
<input type="radio" name="question0" value="B">1<br>
<input type="radio" name="question0" value="C">3<br>
<input type="radio" name="question0" value="D">4<br>
</li>
<li>
<h3>How many letters are there in "ZZX"?</h3>
<input type="radio" name="question1" value="A">2<br>
<input type="radio" name="question1" value="B">1<br>
<input type="radio" name="question1" value="C">3<br>
<input type="radio" name="question1" value="D">4<br>
</li>
<li>
<h3>How many letters are there in "V"?</h3>
<input type="radio" name="question2" value="A">2<br>
<input type="radio" name="question2" value="B">1<br>
<input type="radio" name="question2" value="C">3<br>
<input type="radio" name="question2" value="D">4<br>
</li>
</ul>
<button onclick="returnScore()">View Results</button>