Math Drill

This is a live web-based math drill program created using JavaScript.

We created the following JavaScript and save it as kidmath2.js or whatever name you like.

function myFunction() {
var number1;
var number2;
var answer;
var message

    number1=document.getElementById('num1').innerHTML ;
	number2=document.getElementById('num2').innerHTML;
	answer=document.getElementById('ans1').value;
var sum=parseInt(number1)+parseInt(number2);

if (answer==sum)
{message="Correct";}

else 
{message="Incorrect";}
	
document.getElementById('ans').textContent=message;

}

Next, we add the following line in this web page to launch the JavaScript when this web page is loaded in the browser.

<script type="text/javascript" src="kidmath2.js"></script>

We also add the following HTML to place two buttons, a textbox and a container for the message on the web page.

<b id="num1">x</b>+<b id="num2">y</b>=&nbsp;&nbsp;<input type="text" size="5" id="ans1"><br><br>

<input type="button" value="Start" onclick="RandomFn()"><br><br>
<input type="button" value="Check Answer" onclick="myFunction()"><br><br>
<input type="button" value="Next Question" onclick="RandomFn()">

<h3 id="ans"><h3>

Besides that, we also add the following function RandomFn to generate the random numbers.

<script>
function Nextq() {
location.reload();
}
</script>
<script>
function RandomFn() {
document.getElementById("num1").innerHTML = parseInt(Math.random()*100);
document.getElementById("num2").innerHTML = parseInt(Math.random()*100);
document.getElementById("ans1").value = " ";

}
</script>

Click the start button to start the drill then enter your answer in the box. Next, check the answer whether it is correct or incorrect.