JavaScript Programming for Kids – A Maths Quiz

Now that we have started our very first JavaScript program, we can start trying out a real game. This program is a very basic game that introduces interaction between your program and the person playing the game. It takes in some input from the person evaluates the input and determine if the answer is correct or not.

You start the game by asking a question, for example:

quiz

The player will type an answer and click “OK”. If the answer is not correct, a message “Try again!” will show and the player clicks “Close” to try again.

quiz-tryagain

if the answer is correct, a message showing “Correct!” will show and the game ends.

quiz-correct

Here’s the complete code

  var answer= prompt(“what is 8+8?”);

  if(answer==16)

    alert(“Correct!”);

  else {

    alert (“Try again!”);

    location.reload();

  }

prompt() is a standard javascript function which will pop up a display, with 2 buttons Cancel and OK. If you clicked Cancel, the pop-up will close and do nothing. If you clicked OK, the JavaScript will be able to get whatever you typed inside the box or just a blank if you did not type anything.

When we write
var answer = prompt(….);

We are trying to get whatever the player typed in the pop-up box and store in a variable answer. So we can use the variable to check whether the player has entered the answer you are looking for, in this case, 16.

If(answer == 16)

We use 2 equal signs (==) to do a comparison, of the value on the right side is equal to the value on the left side.

We use 1 equal sign (=) to assign the value on the right side to the variable on the left side.

Then finally, we have

Location.reload();

If the player did not get the correct answer so that we can refresh the page and let the player try again. If the player gets the correct answer, we do not need to refresh the page.

If(…) and else are very commonly used functions in any programming language. It’s like in real life situations, we always have options such that if we do this, we will get this, else, if we do that, we will get that. So during programming, we need to tell the computer exactly what to do in different situations. In this case, if the player gets the wrong answer, prompt a message and refresh the page. Else, if the player gets the correct answer, show a message.

If we have more than 2 types of possible outcomes, we can even do a if(….) else if(…) else

Type or copy the above code in Visual Studio Code and save the file as quiz.html. Open the file and enjoy your game!

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: