Dynamic Test: Check results with both PHP and jQuery

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.

1 Like

reason being that you can disable JavaScript and then the form will submit no matter what (except when you have required fields that are not filled in). that also means that there is no way to prevent empty checkbox sets without JavaScript.

So I need to do both. I’ve thought about just inserting “required” before the closing tags and letting it go at that. That would work with all questions except multiple-choice checkboxes (which use account for one or two questions out of ten). But one problem is that if someone doesn’t answer a regular question (input type = radio), there’s no message to indicate why the Submit button doesn’t work.

It’s really turning into a can of worms. The other possibility I’m considering is just scrapping the verification process altogether. People could then answer just one question and get a score of 10%.

A compromise might be some sort of verification performed on the page the submit button is linked to. If there are ten questions, and they answer just nine, then click the submit button, they would then see a message “Are you aware that you only answered nine questions? If you want to improve your score, please go back, refresh the page, and answer all the questions.”

Get the server side validation working first and then add the client side validation afterwards.

1 Like

Thanks. Is there a name for this kind of script or process so I can Google for a tutorial or an example?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.