Reputation: 23
I am currently creating a basic maths website where it would ask the user to solve a multiply question.
I'm planning to have the HTML layed out like:
1*8 = <input type="number" maxlength="3" name="answer1"><br>
2*9 = <input type="number" maxlength="3" name="answer2"><br>
4*4 = <input type="number" maxlength="3" name="answer3"><br>
<button type="button">Check Answers</button>
<p></p>
This HTML code is generated by some PHP code:
<?php
$t = 0;
for ($n = 1; $n <= 10; $n++) {
$a = rand(1, 10);
$b = rand(1, 10);
echo $a . "*" . $b . " = <input type=\"number\" maxlength=\"3\" name=\"answer" . $n . "\"><br>";
$t = $a * $b;
}
?>
Now that is generated, I worked out what the total would be of the $a and $b (random numbers):
$t = $a * $b;
For the HTML button I wanted it so when the user clicks it, it would check all the input boxs and see if what they inputted = $t Forgetting all validation, all I want to get working for now is the very basics.
I've got further with this using ajax to create a on-click event:
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'POST',
url: 'calcc.php',
success: function(data) {
$("p").text(data);
}
});
});
});
I've been messing around with it for a while now. I worked out that I would need to use $_SESSION or something similar to save the value of $t from before, but I can't seem to work out how it would all work, I keep getting errors of long repeated arrays and I have little idea how I would extract the information I want.
Another problem I am having is retrieving the users input upon the on-click, I have used POST and GET before but when I click the submit button it will act in a way where the page would reload and change all of the random numbers.
I preferably wanted to solve this in PHP. This has been bothering me for a while I just wanted to see if any of you had any great ideas of how I could make this work.
Thank you in advance.
Upvotes: 0
Views: 76
Reputation: 99
There are 2 possible solutions for your problem.
The second solution ( the one that you are using here ) is to use AJAX. I looked at your code and have some adjustements.
$(document).ready(function( e ){
//Add an preventDefault on your event in order to not do the submit of the form.
e.preventDefault();
$("button").click(function(){
//Get all the data from your form
var data = $(form).serialize();
$.ajax({
type: 'POST',
//send the data with the ajax.
// You can retrieve it in your php through $_POST['name of form field']
data: data,
url: 'calcc.php',
success: function(data) {
$("p").text(data);
}
});
});
});
I hope this helps you :) Comment if you would like some more explanations.
Upvotes: 1
Reputation: 327
I would put $a and $b in input fields too. They could be readonly, or even hidden. In this case your php script gets your random $a and $b and the result from the user. Your php script can now validate the result. Tell me if you need some code.
Upvotes: 0