Web Development Project: Math Quiz

49 Projects
You are not logged in
Web
Development
Project
Project: Math Quiz
Creator:	Graphix
Project type:	Games
Created on:	2010-11-09 18:07:48
Last edit:	2010-11-17 22:12:54
Download:	Start download now
Introduction

This is a really simple project in which the users needs to calculate the answer of a equation and then needs to enter that into a textfield and click the Check Answer button.
Interface

The interface is simple and consists out of few elements:

A span element with the first number

A mathmetical symbol, the + in this case

A span element with the second number

A textbox in which the user fills in the answer

A button that checks the user's answer

Programming

Let's  first start off with the interface:
Code Snippet (Syntax highlighted) - Toggle Wrap

<form action="" method='post' onsubmit="return false">
 <span id='Number1'></span> + 
 <span id='Number2'></span> = 
 <input size='3' maxlength='3' type='text' id='Player_Answer' />
 <input type='button' onclick='CheckAnswer()' value='Check answer' />
</form>

First we have to create two global variables that keep count of the wins and losses of the user:

Code Snippet (Syntax highlighted) - Toggle Wrap

var PlayerWins = 0; 
var PlayerLosses = 0;

And now the function that calculates a random number between 0 and 100:

Code Snippet (Syntax highlighted) - Toggle Wrap

function CreateRandomNumber() {
 
 /* Calculating and returning random number between 0 and 100 */
 return Math.floor(Math.random() * (100 + 1));

}

Then the function that creates a new question by retrieving two random numbers and loading them into the elements:

Code Snippet (Syntax highlighted) - Toggle Wrap

function CreateNewQuestion() {

 /* Retrieving new numbers: */
 var New_Number1 = CreateRandomNumber();
 var New_Number2 = CreateRandomNumber();
 
 /* Loading the new numbers into the elements: */
 document.getElementById('Number1').innerHTML = New_Number1;
 document.getElementById('Number2').innerHTML = New_Number2;
 
} 

And now the main function which combines all functions together:

Code Snippet (Syntax highlighted) - Toggle Wrap

function CheckAnswer() {

 /* Retrieving the two numbers and the player's answer: */
 var Number1 = parseInt(document.getElementById('Number1').innerHTML);
 var Number2 = parseInt(document.getElementById('Number2').innerHTML);
 var Player_Answer = parseInt(document.getElementById('Player_Answer').value);
 
 if (Player_Answer == (Number1 + Number2)) {
 
  /* If the player's answer is correct: */
  
  /* Increasing wins: */
  PlayerWins++;
  
  /* Showing status: */
  alert('Correct answer!\nWins:' + PlayerWins + '\nLosses:' + PlayerLosses);
  
  /* Creating new question: */
  CreateNewQuestion();
  
 } else if (Player_Answer != (Number1 + Number2)) {
 
  /* If the player's answer is incorrect: */
  
  /* Increasing wins: */
  PlayerLosses++;
  
  /* Showing status: */
  alert('Wrong answer!\nWins:' + PlayerWins + '\nLosses:' + PlayerLosses);
  
  /* Creating new question: */
  CreateNewQuestion();
  
 }
 
}

Also, you can think about expanding this code by adding more difficult equations (- / % * ^ etc...)
This code in action

You can download the code using the link below:
http://www.webdevproject.com/zips/MathQuiz.zip
Comments
Options