JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

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 ;
var sum=parseInt(number1)+parseInt(number2);

if (answer==sum)



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.

function Nextq() {
function RandomFn() {
document.getElementById("num1").innerHTML = parseInt(Math.random()*100);
document.getElementById("num2").innerHTML = parseInt(Math.random()*100);
document.getElementById("ans1").value = " ";


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.


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy