Simple math quiz

klutzy · March 4, 2012

Hi guys, I started leaning php a couple of days ago and so far I've really been enjoying it!

I might of gotten way ahead of myself (I love throwing myself in the deep end), but I'm trying to write a simple math quiz.

It has a single question, using a form entry to submit the answer. The only problem I'm having is that apon submitting an answer, it actually always says it's the wrong answer because it's calculating a new equation!

It might be easier to understand my problem by looking at or trying out the script:

<html>
<head>
<title>php practice</title>
<style type="text/css">
#body { background-color: rgb(50,50,50); text-align:center; color:#fff; }
#wrapper { padding:5px; border:1px solid #000; border-radius:6px; width:305px; margin:10px auto; }
.value { background-color: rgb(50,50,50); text-align:center; border:1px dotted #fff; border-radius:6px; width:50px; display:inline; float:left; margin-right:10px; }
.equa { width:50px; display:inline; float:left; margin-right:10px; }
.submit { background-color: rgb(50,50,50); text-align:center; border:1px dotted #fff; border-radius:6px; width:150px; display:inline; margin-right:10px; }
</style>
</head>

<body id="body">
<div id="wrapper">

<?php
$value1 = rand (0,100);
$value2 = rand (0,100);
?>

<div class="value">
<?php print($value1); ?>
</div>

<div class="equa">
x
</div>

<div class="value">
<?php print($value2); ?>
</div>

<div class="equa">
=
</div>

<form action="mathquiz.php" method="post">
<input type="text" name="answer" value="?" class="value" onblur="if(this.value=='') this.value='?'" onFocus="if(this.value =='?' ) this.value=''" /><br /><br />
<input type="submit" value="Submit answer" class="submit">
</form>

<?php
if ($answer != '')
{
if ($answer == $value1 * $value2)
{
print('<div class="submit">Correct!</div>');
}
else if ($answer == '?')
{
print('');
}
else
{
print('Wrong! The correct answer is ' . $value1 * $value2);
}
}
?>

</div>
</body>
</html>

I'm not looking for comments on how this could be done better etc, just a simple answer to what I'm doing wrong according to my question!

Thanks in advance!

S3cr3t · March 4, 2012

Try to use the $_POST variables to compare your result.

Store the other variables in hidden inputs.

klutzy · March 4, 2012

Thanks, I haven't reached this part of my php lessons yet. Like I said, I'm getting ahead of myself!

Would you mind giving an example of how to compare using $_POST, and how to store a variable as hidden input?

I will get there eventually!

S3cr3t · March 4, 2012

<?php
if(isset($_POST['submit']))
{
	$message = '';
	$numberOne = htmlentities($_POST['numberOne']);
	$numberTwo = htmlentities($_POST['numberTwo']);
	$doMath = htmlentities($_POST['doMath']);
	$result = htmlentities($_POST['result']);

	if($doMath == '+')
	{
		$compare = $numberOne + $numberTwo;
	}
	else if($doMath == '-')
	{
		$compare = $numberOne - $numberTwo;
	}
	else if($doMath == '*')
	{
		$compare = $numberOne * $numberTwo;
	}
	else if($doMath == '/')
	{
		$compare = $numberOne / $numberTwo;
	}
	else
	{
		$compare = 0;
	}

	if($compare == $result)
	{
		$message = 'Yes you are !';
	}
	else
	{
		$message = 'Unfortunately you are not...';
	}
}
else
{
	$message = '';
}

$numberOne = rand(0, 10);
$numberTwo = rand(0, 10);
?>
<!DOCTYPE html>
<html lang='de'>
<head>	
	<meta charset='utf-8' />
	<title>Math</title>
</head>
<body>
	<form action='?' method='post'>
		<input type='text' name='numberOne' readonly='readonly' value='<?php echo $numberOne; ?>' />
		<select name='doMath'>
			<option value='+'>+</option>
			<option value='-'>-</option>
			<option value='*'>*</option>
			<option value='/'>/</option>
		</select>
		<input type='text' name='numberTwo' readonly='readonly' value='<?php echo $numberTwo; ?>' />
		<span>=</span>
		<input type='text' name='result' />
		<input type='submit' name='submit' value='Am I correct ?' />
		<p><?php echo $message; ?></p>
	</form>
</body>
</html>

klutzy · March 4, 2012

Hi again. Thanks! I read your reply but none of it made any sense to me! I realized I need to keep studying so I read 2 more pages from my course and now I understand it a bit better!

So I fixed my script from earlier, try it out!:

<html>
<head>
<title>Simple math quiz</title>
<style type="text/css">
#body { background-color: rgb(50,50,50); text-align:center; color:#ffffff; font-family: Verdana, Geneva, sans-serif; }
#wrapper { width:302px; margin:10px auto; }
#header { font-size:x-large; color:#ffffff; margin-bottom:10px; }
#quizbox { padding:5px; border:1px solid #000000; border-radius:6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; }
.value { color:#ffffff; background-color: rgb(50,50,50); text-align:center; border:1px dotted #fff; border-radius:6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; width:50px; display:inline; float:left; margin-right:10px; }
.equa { color:#ffffff; width:50px; display:inline; float:left; margin-right:10px; text-align:center; border:none; background-color: rgb(50,50,50); }
.submit { color:#ffffff; background-color: rgb(50,50,50); text-align:center; border:1px dotted #fff; border-radius:6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; width:150px; display:inline; margin-right:10px; }
.answer { color:#ffffff; background-color: rgb(50,50,50); text-align:center; border:1px dotted #fff; border-radius:6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; width:50px; display:inline; float:left; }
.correct { color:#33dd33; }
.incorrect { color:red; }
a, a:visited { color:#33dd33; text-decoration:none; margin-bottom:10px; }
a:hover { border:1px dotted #ffffff; border-radius:6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; padding:1px; }
</style>
<!--[if lte IE 8]>
<style type="text/css">
#wrapper { width:319px; height:500px; margin:10px auto; }
</style>
<![endif]-->
<script type="text/javascript">
   function formfocus() {
      document.getElementById('answer').focus();
   }
   window.onload = formfocus;
</script>
</head>
<body id="body">
<div id="wrapper">
<div id="header">Simple math quiz</div>
<div id="quizbox">
<?php
$value1 = rand (1,10);
$value2 = rand (1,20);
?>
<form action="mathsquiz.php" method="post">
<input type="text" name="value1a" value="<?php echo $value1; ?>" class="value" />
<input type="text" value="x" class="equa" />
<input type="text" name="value1b" value="<?php echo $value2; ?>" class="value" />
<input type="text" value="=" class="equa" />
<input id="answer" type="text" name="answer" value="" class="answer" /><br /><br />
<input type="submit" value="Submit answer" class="submit">
</form>
<?php
$result = $_POST['answer'];
$value1a = $_POST['value1a'];
$value1b = $_POST['value1b'];
if ($answer == '')
{
	print('Type your answer in the empty box.');
}
else if ($result == $value1a * $value1b)
{
	print($value1a . ' x ' . $value1b . ' = ' . '<span class="correct">' . $result . '</span>' . '<br />Correct!');
}
else
{
	print($value1a . ' x ' . $value1b . ' = ' . '<span class="incorrect">' . $result . '</span>' . '<br />Wrong!<br /> The correct answer was: ' . '<span class="correct">' . $value1a * $value1b . '</span>');
}
?>
</div>
</div>
</body>
</html>

Sign In

Simple math quiz

Recommended Posts

klutzy

Link to comment

Share on other sites

S3cr3t

Link to comment

Share on other sites

klutzy

Link to comment

Share on other sites

S3cr3t

Link to comment

Share on other sites

klutzy

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information