Author: Liew Voon Kiong

Creating a math drill application for kids

We can create a math drill function for kids using JavaScript.

In this example, the function  generates two integers and add them together. After that, it comparesits result to the answer entered by the user. If the answer is correct, it will show the message ‘Correct’. On the other hand, if the answer is wrong, it will show the message ‘ Incorrect’.

In order to generate a random number, we use the built-in function, as follows:

Math.random()

In order to statement generates an integer that is less than or equal to 100, we use the parseInt function.

parseInt(Math.random()*100);

The following is the JavaScript code created by us:

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;

}

Check it out here,

 

Creating a Simple Calculator

We can create a simple calculator that adds two numbers.

First we create a function that generates two random numbers that are less than 100 and converts them into integers , as follows:

<script>
function RandomFn() {
document.getElementById(“num1”).innerHTML = parseInt(Math.random()*100);
document.getElementById(“num2”).innerHTML = parseInt(Math.random()*100);

}

The innerHTML property is to specify the HTML content of an element. The parseInt function is to convert a number into interger so that it can be manipulated mathematically.

The function to add two numbers is shown as follows:

function myFunction() {
var number1;
var number2;
number1=document.getElementById(‘num1’).innerHTML ;
number2=document.getElementById(‘num2’).innerHTML;
var sum=parseInt(number1)+parseInt(number2);
document.getElementById(‘ans’).textContent=”The sum of two numbers= “+sum;
}

textContent method is to display the output within a HTML element.

The complete HTML code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Simple JS Calculator></title>
<meta name=viewport content=”width=device-width, initial-scale=1″>
</head>
<body onload=”RandomFn()”>
<script type=”text/javascript” src=”kidmath.js”></script>
<h3>Addition of Two Numbers</h3>
<p>Please calculate the sum of two numbers.</p>
<form id=”Myform”>
Number 1: <b id=”num1″></b><br><br>
Number 2: <b id=”num2″></b>
<p id=”ans”>Calculate the sum of two numbers</p><br>
<input type=”button” value=”Calculate” onclick=”myFunction()”><br><br>
<input type=”button” value=”Next Question” onclick=”Nextq()”>
</form>
<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);

}
</script>

</body>
</html>

Click Simple Calculator to see the output.

Displaying greeting according to time

You can create a JavaScript to display greeting according to time. What you need to do is to create a new date object and use the getHours() method to fetch the time. Then use the if keyword to decide what greeting to display according to time. The script is a follows:

CurDate=new Date();
timeNow=CurDate.getHours();
var greeting;

if (timeNow>18) {
greeting=’Good Evening’;
greeting=greeting.fontcolor(“red”);
} else if(timeNow>12){
greeting=’Good Afternoon’;
greeting=greeting.fontcolor(“blue”);

} else if(timeNow>0) {
greeting=’Good Morning’;
greeting=greeting.fontcolor(“green”);
} else {
greeting=’Good Day’;
greeting=greeting.fontcolor(“cyn”);
}
greeting=greeting.bold();
greeting=greeting.fontsize(“10”);
greeting=greeting.italics();
document.write(greeting);

Click Here to view the output

Dealing with Checkboxes

Checkboxes are differently from radio buttons. While radio buttons only allow the user to select one option at a time, checkboxes allow the users to select multiple options. We can write a JavaScript function to verify which checkbox or boxes is/are checked, as follows:

function checkstatus()

{var msg=” “;
for(count=0;count<4;count++)
{if (MyForm.MyCheckbox[count].checked)
msg=msg+” “+MyForm.MyCheckbox[count].value;}
document.write(msg+” selected”);
}

we shall call this function in an html document as follows:

<!doctype html>
<html>
<head>
<title>Checkbox in JavaScript</title>
</head>
<body>
<script type=”text/javascript” src=”chkbox.js”></script>
<form name=”MyForm”>
<input type=”button” value=”Click” onclick=”value=”Click” onclick=”checkstatus()”>
<input type=”checkbox” Name=”MyCheckbox” Value=”Item1″>Item1<br>
<input type=”checkbox” Name=”MyCheckbox” Value=”Item2″>Item2<br>
<input type=”checkbox” Name=”MyCheckbox” Value=”Item3″>Item3<br>
<input type=”checkbox” Name=”MyCheckbox” Value=”Item4″>Item4<br>

</form>
</script>
</body>
</html>

Click on Checkbox to try it out.

Formatting text in JavaScript

We can format text in JavaScript using the following methods:

  1. bold () – makes text bold
  2. italics () – italicizes text
  3. fontcolor () – changes the color of the text to the specified color as an argument.
  4. fontsize () – changes the size of the text to the specified size as an argument.
  5. toLowerCase () – changes text to all lowercase letters.
  6. toUpperCase () – changes text to all upper case letters.

For example;

We create a variable greeting and format it accordingly:

<script language=”javascript”>

Var greeting=”Welcome to JavaScript Tutorial”
greeting=greeting.fontcolor(“red”);
greeting=greeting.bold();
greeting=greeting.fontsize(“10”);
greeting=greeting.italics();
document.write(greeting);

</script>

The Output