Issue
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.
Solution
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>
Answered By - GreenRover
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.