JSFiddle - React, Tailwind, and code Playground
HTML
<form action="cmsc126lab7-Dispe.html" name="myForm">
<h1>QUESTIONS<h1>
<h3>Question No. 1.) </h3> What is the world's number 1 shampoo?<br />
<input name="one" type="radio" value="yes"/>A. Mp</br>
<input name="one" type="radio" value="no"/>B. Hello</br>
<input name="one" type="radio" value="no"/>C. Ahh</br>
<input name="one" type="radio" value="no"/>D. Kitkat</br>
<span name="msg"></span>
<br />
<h3>Question No. 2.) </h3> What is the world's number 1 shampoo?<br />
<input name="two" type="radio" value="no"/>A. Hi</br>
<input name="two" type="radio" value="yes"/>B. Hello</br>
<input name="two" type="radio" value="no"/>C. Ahh</br>
<input name="two" type="radio" value="no"/>D. Kitkat</br>
<span name="msg"></span>
<input type="button" id="submit" name='submit' value="Submit">
<br />
<span id="score"></span><br />
</form>
JavaScript
document.getElementById('submit').addEventListener('click', checkAnswers);
function checkAnswers() {
var retval;
var listRadio = document.querySelectorAll('input[type="radio"]');
var listNameRadioGroup = new Array();
for (var i = 0; i < listRadio.length; i++) {
if (listNameRadioGroup.indexOf(listRadio[i].name) === -1)
listNameRadioGroup.push(listRadio[i].name);
}
for (i = 0; i < listNameRadioGroup.length; i++) {
if (document.myForm[listNameRadioGroup[i]].value == "yes") {
retval = true;
document.getElementsByName("msg")[i].innerHTML = "Correct Answer!";
}
else {
retval = false;
document.getElementsByName("msg")[i].innerHTML = "Wrong Answer!";
}
}
return retval;
}