Untitled

<!DOCTYPE HTML>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Math Exercise</title>
		<style>
			input {
				width:40px;
				margin-right:5px;
				margin-bottom:10px;
			}
			button {
				margin-bottom:10px;
			}
		</style>
		<script type="text/javascript">
			/* Defining Table
			 * Input: two numbers
			 * Processing:find the absolute difference between the two numbers
			 * Output: The result as a positive number
			 */
			function checkAns() {
				var numberOne = document.getElementById("numberOne").value;
				var operator = document.getElementById("operator").value;
				var numberTwo = document.getElementById("numberTwo").value;
				var numberThree = parseFloat(document.getElementById("numberThree").value);
				var toEvaluate = numberOne + operator + numberTwo;
				var calculation = eval(toEvaluate);

				if (calculation == numberThree) {
					document.getElementById("resultDiv").innerHTML = "Correct! Good job!";
				}
				else {
					document.getElementById("resultDiv").innerHTML = "Incorrect. Try again!";
				}
			}
		</script>
	</head>

	<body>
		<div>
			<h1>Test Your Math Skills!</h1>
			<p>Enter two numbers, an operator (+ - * /), and enter your answer.  Then click the
			"Check Answer" button to see if you were right.</p>
			<input id="numberOne" type="number" placeholder="5"/>
			<input id="operator" type="text" placeholder="+"/>
			<input id="numberTwo" type="number" placeholder="5"/>
			=
			<input id="numberThree" type="number" placeholder="10"/>
		</div>
		<div>
			<button type="button" onclick="checkAns()">Check Answer</button>
		</div>
		<div id="resultDiv"></div>
	</body>
</html>