Scribd
Upload
49 views6 pages

Xcreating An Interactive Mathematics Quiz: (For Chapters 12 To 14)

The document describes creating an interactive mathematics quiz using JavaScript. It includes 4 tasks: 1) designing the user interface, 2) completing the number generating function, 3) completing the check answer function, and 4) including a marking function. The quiz generates random math problems with 2 random numbers and an operator, checks the user's answer, and scores their responses over multiple questions until answering incorrectly.

Uploaded by

Wing Yan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
49 views6 pages

Xcreating An Interactive Mathematics Quiz: (For Chapters 12 To 14)

The document describes creating an interactive mathematics quiz using JavaScript. It includes 4 tasks: 1) designing the user interface, 2) completing the number generating function, 3) completing the check answer function, and 4) including a marking function. The quiz generates random math problems with 2 random numbers and an operator, checks the user's answer, and scores their responses over multiple questions until answering incorrectly.

Uploaded by

Wing Yan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

XCreating an Interactive Mathematics Quiz (for

Chapters 12 to 14)

Introduction
In this worksheet, we are going to create an interactive mathematics quiz using JavaScript.
Basic knowledge of JavaScript is required it has been covered in Chapter 12 to 14 of the
Elective C2 textbook. For further details of JavaScript, visit the web site
http://www.w3schools.com/js/default.asp.

Learning Objectives
After completing this activity, you will be able to
⮚ make use of JavaScript to create an interactive mathematics quiz with marking function
⮚ learn the JavaScript methods random(), floor(x) and the parseFloat function

Task 1: Designing a Quiz


A total of four text boxes are used in the quiz with the names ‘num1’, ‘op’, ‘num2’ and ‘ans’.
A ‘Check’ button is included to check the answer inputted by the user. The user interface of
the quiz is shown as follows.
op num2

num1
ans

The functions of the text boxes are shown in the following table:
Text box Function
num1 Store a random integer between 1 and 9 generated by the computer.
op Store one of the operators from ‘+’, ‘-’ and ‘*’ generated by the
computer.
num2 Store a random integer between 1 and 9 generated by the computer.
ans Store the answer inputted by the user.

1 NSS ICT Elective C2 Activity Worksheets


The following shows the body section of the quiz web page. When the web page is loaded, the
JavaScript function gennum will be executed. After the ‘Check’ button has been clicked, the
function checkans is executed.

1. Complete the following HTML codes and input them in a text editor such as Windows
Notepad. Save the file as quiza.html.

<body onload ="gennum()">


Maths Quiz A
<p>
<form name="myform">
<input type="text" name= num1 size="2">
<input type="text" name= op size="2">
<input type="text" name= num2 size="2">
=
<input type="text" name= ans size="2">
<p>
<input type="button" value="Check" onclick
="checkans();">
</form>
</body>

Input the HTML codes in Notepad. Select ‘File’ ⮚ ‘Save As’ and save the file as
quiza.html. Remember to select ‘All Files’ as
the file type.

2. Further modify the following HTML codes such that the user cannot change the generated
contents of the text boxes ‘num1’, ‘op’ and ‘num2’.

<input type="text" name="num1" size="2"


readonly="readonly">
<input type="text" name="op" size="2"
readonly="readonly">
<input type="text" name="num2" size="2"
readonly="readonly">

2 NSS ICT Elective C2 Activity Worksheets


Task 2: Completing the Number Generating Function of the Quiz
In JavaScript, the Math object allows user to perform various mathematics tasks by calling
corresponding methods. The following table shows two of them:

Method Description
random() Return a random number between 0 and 1.
floor(x) Return x, rounded downwards to the nearest integer.

1. Construct an expression such that it returns an integer between 1 and 10 inclusively. This
expression will be used for generating the numbers in the text boxes ‘num1’ and ‘num2’.
Random()*10+1

2. Complete the function gennum() which performs the following tasks:


● Generate two random integers between 1 and 10 in the text boxes ‘num1’ and
‘num2’.
● Store the operator ‘+’, ‘-‘ or ‘*’ in the text box ‘op’.
<script language = "JavaScript">
function gennum() {
myform.num1.value = math.floor(math.random()*10+1
;
myform.num2.value = math.floor(math.random()*10+1
;
switch( math.floor(math.random()*3+1
) {
case 1:
myform.op.value = "+";
break;
case 2:
myform.op.value = "-";
break;
case 3:
myform.op.value = "*";
break;
}
}
</script>

3. Include the above JavaScript codes in the HTML codes in Task 1. Test the web page in a
browser to see whether the random integers and operator can be successfully generated.
Several examples are shown as follows.

3 NSS ICT Elective C2 Activity Worksheets


Example 1 Example 2 Example 3

Task 3: Completing the Check Answer Function of the Quiz


In JavaScript, the parseFloat() function parses a string and returns a floating point
number. Strings stored in text boxes can therefore be converted to numeric values for further
calculations.

1. Complete the following checkans() function which checks the answer inputted by the user.
A message will be displayed in an alert box when the ‘Check’ button is clicked as follows.

Correct answer Wrong answer

function checkans() {
var n1 = parseFloat (myform.num1.value
;
var n2 = parseFloat (myform.num2.value
;
var operator = myform.op.value
;
var answer;
if (operator == "+" ) {
answer = n1+n2 ;
}
else if (operator == "-") {
answer = n1-n2 ;
}
else {
answer = n1*n2 ;
}
if ( answer==myform.ans.value
) {
alert("You are correct!")
}
else {
alert("Oops! You are wrong!")
}
}

2. Include the above JavaScript codes in the HTML codes in Task 2. Test the web page in a
browser to see whether the quiz works.

Task 4: Including a Mark Function for the Quiz


Further modify the HTML codes in Task 3 to include a marking function for the quiz. If the

4 NSS ICT Elective C2 Activity Worksheets


user inputs a correct answer, 1 mark will be awarded; otherwise, no mark will be awarded.
The quiz will be preceeded automatically to another question until the user inputs a wrong
answer. The final score will be displayed in an alert box and the browser window will be then
closed.

Another question is automatically generated


after the user has inputted a correct answer.

1. Write the HTML codes in the following blank.


<html>
<script language = "JavaScript">
function gennum() {
myform.num1.value = math.floor(math.random()*10+1 ;
myform.num2.value = math.floor(math.random()*10+1 ;
switch( math.floor(math.random()*3+1 ) {
case 1:
myform.op.value = "+";
break;
case 2:
myform.op.value = "-";
break;
case 3:
myform.op.value = "*";
break;
}
}
function checkans() {
var n1 = parseFloat (myform.num1.value) ;
var n2 = parseFloat (myform.num2.value) ;
var operator = myform.op.value ;
var answer;

5 NSS ICT Elective C2 Activity Worksheets


if (operator == "+" ) {
answer = n1+n2 ;
}
else if (operator == "-") {
answer = n1-n2 ;
}
else {
answer = n1*n2 ;
}
if ( answer==myform.ans.value) {
alert("You are correct!")
mark = mark +1;
myform.score.value = STRING(mark);
}
else {
alert("Oops! You are wrong!Your finalscore is " + mark);
window.close();
}
}

</script>

<body onload="gennum()">
Maths Quiz B
<p>
<form name="myform">
<input type="text" name= "num1" size="2" readonly="readonly">
<input type="text" name= "op" size="2" readonly="readonly">
<input type="text" name= "num2" size="2" readonly="readonly">
=
<input type="text" name= "ans" size="2">
<p>
Your Score:
<input type="button" value="Check" onclick ="checkans();gennum();">
</form>
</body>

2. Save the file as YourName_quizb.html.

6 NSS ICT Elective C2 Activity Worksheets

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy