asked on

display equations

Hi,

I am wondering how to display some simple mathematical equations either 1 at a time using php.

I was thinking of using php and what I will do is create the sums like 5 + 8 = using random numbers and store the answer in a variable. if the answer is correct then I will go to the next question.

My confusion is this appears a basic request but clicking on a button to check means I cant check the answer variable made in php as I need to use JS somehow .

Something like this where I click a button and a new equation appears.
https://www.khanacademy.org/math/arithmetic/addition-subtraction/basic_addition/e/addition_1

Ray Paseur

5 + 8 = 13

The Khan Academy page is almost 1,000 lines long, not counting any of the JS and CSS resources that are brought in by links. What you are looking at is mostly driven by JavaScript.

Khan Academy is one of the best financed new-era learning resources on earth. Have you considered asking them how they do this? You can download all of their JS files and deconstruct them, or you can consider taking classes from Khan Academy. Either way you will find a good learning experience!

jagguy

ASKER

I dont want to create khan academy.

I just want to display a simple question and be able to save the results in a db.

I have already created this in asp.net

The only way I can think of doing it is in JS and save the results in a db via php on completion.

Julian Hansen

Something like this ?

<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 $('#checkanswer').click(function(){
  if ($('input[name="answer"]').val() == $('#sum').data('a') + $('#sum').data('b')) {
   $('#result').html('Correct');
  }
  else {
   $('#result').html('Incorrect');
  }
 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<?php
$numa = rand(10,20);
$numb = rand(10,20);
$ans = $numa + $numb;
echo "<div id=\"sum\" data-a=\"$numa\" data-b=\"$numb\">$numa + $numb = ?  Answer <input type=\"text\" name=\"answer\" /><br /><input type=\"button\" value=\"Check Answer\" id=\"checkanswer\"/></div>";
?>
<div id="result">
</div>
</body>
</html>

Open in new window

jagguy

ASKER

Hi,

Yes this is great as i was just doing such a solution.
The thing I need though is to check the answer from the php calculated earlier as some equations will be awkward to work out.

if ($('input[name="answer"]').val() == php variable $ans

could I assign a hidden html variable the ans and get the ans from this?

Also it might be easier to do the whole thing in Jquery and simply use php to interact with a db.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Chris Stanyon

You could store the answer in the HTML and then just check that against user input. Based on Julian's code, change the HTML part to:

<?php
$numa = rand(10,20);
$numb = rand(10,20);
$ans = $numa + $numb;
echo "<div id=\"sum\" data-ans=\"$ans\">$numa + $numb = ?  Answer <input type=\"text\" name=\"answer\" /><br /><input type=\"button\" value=\"Check Answer\" id=\"checkanswer\"/></div>";
?>

Open in new window

And change the jQuery to:

if ($('input[name="answer"]').val() == $('#sum').data('ans') {

Open in new window

Of course, a user could just look at the HTML source to see the answer, but it's your decision whether or not that's a problem.

A more robust solution would be to add an AJAX request in. Your code would then call a PHP script to generate the formula and store the answer in a SESSION. The user input would then be passed back to the script to check against the SESSION variable.

Chris Stanyon

@julian - thinking along the same lines :)

Julian Hansen

Whether to use attribute or hidden field - I would go with the latter if you need to post data back and check - then it is useful - otherwise storing it in a data attribute would save some markup in which case if no server side checking is required I would go with Chris' modification.

You could also go the ajax route
In the on click event handler

$('#result'.load('checkanswer.php', {id: someidtoidentifytheanswer, answer: $('#answer').val());

Open in new window

Checkanswer.php then uses the ID to check a previously saved equation, checks the answer and returns Correct / Incorrect.
You would need to save the expression in the session - but that should be pretty straight forward.