Question

I am using PHP MYSQL to generate a small multi page quiz. I am able to display the questions and the multiple choice answers as radio button choices(thanks to help from Stackoverflow). The problem I am running into is – is there a way to trigger an action as soon as a user clicks on a radio button? If the user has selected a wrong answer, I want to give immediate feedback and say the answer is wrong and why it is wrong. If the user has selected a correct answer, I want to display correct answer.

I have looked at $_GET,$_POST and $_REQUEST but all require the answers to be “Submit”ted for the process to begin in PHP. I want the action to begin (using PHP source code) as soon as the user clicks a radio button.

Note: I have looked at several questions here that seem to utilize jQuery for the above. Is it possible to do without jQuery or Javascript?

Thanks for your help.

Answer 1

Yes it is possible and to use jQuery is the best solution.

http://api.jquery.com/jQuery.ajax/

<?PHP
if (!empty($_GET['action']) && $_GET['action'] == 'ajax_check') {
  // I a final solution you should load here the answer of the question from database by name
  $answers = array(
    'foo' => 1,
    'baa' => 3,
  );    

  // Prepare and default answer in error case
  $return = array(
    'message' => 'Invalud choise',
  );

  if (isset($answers[$_GET['name']])) {
    // If question/answer was found in database, check if users chouse is correct
    if ($answers[$_GET['name']] == $_GET['value']) {
      $return['message'] = 'Correct answer'; 
    } else {
      $return['message'] = 'Wrong answer'; 
    }
  }

  // Return answer to java script
  header('Content-type: text/json');
  echo json_encode($return);
  die();
}
?>

Question 1
<input type="radio" name="foo" value="1" class="question_radio" />
<input type="radio" name="foo" value="2" class="question_radio" />
<input type="radio" name="foo" value="3" class="question_radio" />
<input type="radio" name="foo" value="4" class="question_radio" />
<br />

Question 2
<input type="radio" name="baa" value="1" class="question_radio" />
<input type="radio" name="baa" value="2" class="question_radio" />
<input type="radio" name="baa" value="3" class="question_radio" />
<input type="radio" name="baa" value="4" class="question_radio" />

<!-- Load jquery framework from google, dont need to host it by your self -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () { 
    // When document was loadet succesfull

    $(".question_radio").click(function () {
      // Listen on all click events of all objects with class="question_radio"
      // It is also possible to listen and input[type=radio] but this can produce false possitives.

      // Start communication to PHP
      $.ajax({
        url: "test.php", // Name of PHP script
        type: "GET",
        dataType: "json",  // Enconding of return values ²see json_encode()
        data: { // Payload of request
          action: 'ajax_check', // Tel PHP what action we like to process
          name: $(this).attr('name'),
          value: $(this).val(), 
        }
      }).done(function(data) {
        // Procces the answer from PHP
        alert( data.message );
      });
    });
  });
</script>