Make user check all answers on form - php

Question

Is there a way to modify my database-powered quiz so that, if a user doesn't answer one or more questions, clicking the Submit button will trigger an alert? In other words, I want to force users to answer all the questions, even if they just guess. The scoring mechanism doesn't work correctly unless all the questions have a response.
Note that some questions (the last one in this example) may have multiple correct answers. I think all that matters is that at least one checkbox is selected.
<form action="" method="post" id="quiz">
<li id="q9">
<div class="Question">Scientists believe the universe is:</div>
<div class="Answer">
<label class="Wide" for="q9-A"><div class="Radio"><input type="radio" name="q9[]" id="q9-A" value="A" style="display: none;"> A. disappearing</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-B"><div class="Radio"><input type="radio" name="q9[]" id="q9-B" value="B" style="display: none;"> B. expanding</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-C"><div class="Radio"><input type="radio" name="q9[]" id="q9-C" value="C" style="display: none;"> C. contracting</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-D"><div class="Radio"><input type="radio" name="q9[]" id="q9-D" value="D" style="display: none;"> D. becoming bipolar</div></label></div>
</li>
<li id="q10">
<div class="Question">Check each item that can be found in our solar system.</div>
<div class="Answer" style="margin-top: 5px; background: #000; color: #fff; text-align: center;">
<label for="q10-A"><input type="checkbox" name="q10[]" id="q10-A" value="A">planet</label>
<label for="q10-B"><input type="checkbox" name="q10[]" id="q10-B" value="B">asteroid</label>
<label for="q10-C"><input type="checkbox" name="q10[]" id="q10-C" value="C">comet</label>
<label for="q10-D"><input type="checkbox" name="q10[]" id="q10-D" value="D">black hole</label>
<label for="q10-E"><input type="checkbox" name="q10[]" id="q10-E" value="E">neutrino star</label>
<label for="q10-F"><input type="checkbox" name="q10[]" id="q10-F" value="F">quasar</label>
</div>
</li>
</ol>
<input type="hidden" name="PreviousURL" id="url" />
<input type="hidden" name="user_token" value="54f3f5438292e" />
<input type="submit" value="Submit Quiz" />
</form>

Answer 1

Please check the complete solution to your question as below:
<form action="" method="post" id="quiz" onsubmit="return formValidate();">
<li id="q9">
<div class="Question">Scientists believe the universe is:</div>
<div class="Answer">
<label class="Wide" for="q9-A"><div class="Radio"><input type="radio" name="q9[]" id="q9-A" value="A"> A. disappearing</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-B"><div class="Radio"><input type="radio" name="q9[]" id="q9-B" value="B"> B. expanding</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-C"><div class="Radio"><input type="radio" name="q9[]" id="q9-C" value="C"> C. contracting</div></label></div>
<div class="Answer">
<label class="Wide" for="q9-D"><div class="Radio"><input type="radio" name="q9[]" id="q9-D" value="D"> D. becoming bipolar</div></label></div>
</li>
<li id="q10">
<div class="Question">Check each item that can be found in our solar system.</div>
<div class="Answer" style="margin-top: 5px; background: #000; color: #fff; text-align: center;">
<label for="q10-A"><input type="checkbox" name="q10[]" id="q10-A" value="A">planet</label>
<label for="q10-B"><input type="checkbox" name="q10[]" id="q10-B" value="B">asteroid</label>
<label for="q10-C"><input type="checkbox" name="q10[]" id="q10-C" value="C">comet</label>
<label for="q10-D"><input type="checkbox" name="q10[]" id="q10-D" value="D">black hole</label>
<label for="q10-E"><input type="checkbox" name="q10[]" id="q10-E" value="E">neutrino star</label>
<label for="q10-F"><input type="checkbox" name="q10[]" id="q10-F" value="F">quasar</label>
</div>
</li>
</ol>
<input type="hidden" name="PreviousURL" id="url" />
<input type="hidden" name="user_token" value="54f3f5438292e" />
<input type="submit" value="Submit Quiz" />
</form>
<script type="text/javascript">
function formValidate(){
var qno = 2; // Total Questions, say. in your example it's 2 (9 and 10)
var i = 9; // Question No to start with, say. in your example it's 9
var qcount = (i+qno)-1;
for(i; i <= qcount; i++){
qid = 'q'+i+'[]';
var qidElement = document.getElementsByName(qid);
var checkcount = 0;
for(var j=0; j < qidElement.length; ++j){
if(qidElement[j].checked){
++checkcount;
}
}
if(checkcount == 0){
alert("Please select at least one Answer for Question no. "+i);
return false;
}
}
document.getElementById('quiz').submit();
}
</script>
Input values for qno & i in javascript function as per your requirement, as guided by me in the relevant comments beside them.
Let me know if there is any issue. Thanks! :)

Answer 2

If you need to force users to fill all fields you have to use one off those validation methods :
1- Client side: via java script , but user can bypass it by disable java script "not recommended".
2- Server side: user can't disable it , and the code related to your programming language .
3- Mix type: Via Ajax and that is the best choice
Example
A-Check request in server side and return results in JSON type .
B-Process returned data via JavaScript and display results in the form
Check this links will help you so much:
http://www.formget.com/form-validation-using-ajax/
http://www.w3schools.com/php/php_form_validation.asp