I’m developing a series of dynamic tests and quizzes powered by PHP and jQuery. I want to modify my code so that users are required to answer every question before they can submit the answers. However, I’ve had to jump through a surprising number of hoops and still haven’t figured out a good solution.
The simplest solution is to simply insert “required” before the questions’ closing tags. Unfortunately, that doesn’t work on questions featuring series of checkboxes; visitors are forced to select every choice before they can submit the results.
I’ve seen many suggestions that answer selection should be verified TWICE, using both PHP and JavaScript. So I wondered if anyone can either show me how to do that or point me towards an example or tutorial that explains it.
I’ve posted the relevant code below, followed by a couple jQuery scripts I’ve been playing with.
This is the default code for answers:
<div class="Answer">
<label class="Wide" for="q'.$QID.'-'.$Value.'"><div class="Radio"><input type="radio" name="q'.$QID.'[]" id="q'.$QID.'-'.$Value.'" value="'.$Value.'" style="display: none;"> '.$Value.'. '.$QA.'</div></label></div>This is the code for answers that require users to type a response:
<div class="Answer">
<label for="q'.$QID.'-'.$Value.'"><div class="Multiple-Choice"><input type="text" name="q'.$QID.'[]" id="q'.$QID.'-'.$Value.'" value=""></div></label></div>And this is the code for answers featuring a series of checkboxes:
<label for="q'.$QID.'-'.$Value.'"><input type="checkbox" name="q'.$QID.'[]" id="q'.$QID.'-'.$Value.'" value="'.$Value.'"> '.$QA.'</label>Here’s an example of the HTML display:
<li id="q5">
<div class="Question">Surtsey is a(n)...</div>
<div class="Answer">
<label class="Wide" for="q5-A">
<div class="Radio">
<input type="radio" name="q5[]" id="q5-A" value="A" style="display: none;">
A. country</div>
</label>
</div>
<div class="Answer">
<label class="Wide" for="q5-B">
<div class="Radio">
<input type="radio" name="q5[]" id="q5-B" value="B" style="display: none;">
B. state</div>
</label>
</div>
<div class="Answer">
<label class="Wide" for="q5-C">
<div class="Radio">
<input type="radio" name="q5[]" id="q5-C" value="C" style="display: none;">
C. river</div>
</label>
</div>
<div class="Answer">
<label class="Wide" for="q5-D">
<div class="Radio">
<input type="radio" name="q5[]" id="q5-D" value="D" style="display: none;">
D. island</div>
</label>
</div>
</li>
<li id="q8">
<div class="Question">Select each animal that lives in Africa.</div>
<div class="Answer">
<label for="q6-A">
<input type="checkbox" name="q6[]" id="q6-A" value="A">
tiger</label>
<label for="q6-B">
<input type="checkbox" name="q6[]" id="q6-B" value="B">
giraffe</label>
<label for="q6-C">
<input type="checkbox" name="q6[]" id="q6-C" value="C">
pronghorn</label>
<label for="q6-D">
<input type="checkbox" name="q6[]" id="q6-D" value="D">
chimpanzee</label>
<label for="q6-E">
<input type="checkbox" name="q6[]" id="q6-E" value="E">
gorilla</label>
<label for="q6-F">
<input type="checkbox" name="q6[]" id="q6-F" value="F">
aardvark</label>
</div>
</li>Here’s the code for the submission form:
<div id="quiz2" rel="key" style="margin-top: 50px;">
<form action="grade.php" method="post" id="quiz">
<ol>
<li style="display: none;">
<?php
echo join ($Base, '');
?>
</li>
</ol>
<input type="hidden" name="PreviousURL" value="<?php echo $MyURL; ?>" id="url" />
<input type="hidden" name="user_token" value="<?php echo isset($_POST['user_token']) ? $_POST['user_token'] : '' ; ?>" />
<input type="submit" value="Submit Quiz" />
</form>
</div><!-- quiz-container -->And here are a couple jQuery scripts I’ve scrounged up and been experimenting with. The first one looks simple, but I can’t get it to work. I changed the ID to #quiz, matching my form. But I don’t know what “index” means, and I’m not sure what value I’m supposed to replace $(value) with.
<script>
var inputs = $('#quiz :input');
inputs.each(function(index, value) {
if ($(value).val() == '') { //check if the input is empty
//return the error
echo 'ERROR!';
}
});
</script>I don’t understand how to associate this other script with my form.
<script>
function checkInput() {
var inputs = $("input");
check = 0;
for (var i = 0; i < inputs.size(); i++) {
var iVal = $(inputs[i]).val();
if (iVal !== '' && iVal !== null) {
$(inputs[i]).removeClass('input-error');
} else {
$(inputs[i]).addClass('input-error');
$(inputs[i]).focus(function() {
$("input").removeClass('input-error');
$(inputs[i]).off('focus');
});
check++;
}
}
if (check > 0) {
return false;
} else {
return true;
}
}
checkInput()
</script>Again, it would be really helpful if I could see an example of a dynamic test that utilizes dual PHP-JavaScript answer checking. Thanks for any tips.