Ensuring that at least one radio button for each question in my quiz is checked before allowing a user to submit was achieved by using a for loop within an if statement. Below is the code snippet:
HTML:
<form name="quizform">
<div id="quizpart1">
<h2>Title</h2>
<br>
<div id="notfinished1">
</div>
<br>
<!---Question 1: --->
<div class="row">
<div class="col-xs-8">
<label>1) Have you ever ...?</label>
</div>
<div class="col-xs-4">
<input type="radio" name="heartAttack?" value="true">Yes</input>
<br>
<input type="radio" name="heartAttack?" value="false">No</input>
</div>
</div>
The HTML structure for other questions in the form follows a similar format as above.
Javascript:
//Variables
var quizpart1names = ["heartAttack?", "familyHeartDisease?", "congenitalHeartDisease?", "lungDisease?", "currentHeartThyroidDisease?"];
//For Loop With If Statement as a Conditional
if (
for (i=0; i < quizpart1names.length; i++){
$('input[name=quizpart1names[i]]:checked').length > 0;
}
){ //Used the jQuery Function :checked, with the logic behind .length > 0 indicating that both "true" and "false" options have length > 0.
$("#quizpart1").hide();
//... The remaining code functions correctly when not checking if all quiz questions were answered.
However, I encountered an issue where none of the JavaScript functionalities, including this example, work on Firefox browser after running the webpage. Any help in understanding and resolving this problem would be appreciated.