We introduce the basic form that will be amplified in the succeeding programs.
1: <html>
2: <head>
3: <title>js16a</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4>
7: <form name=label>
8: <input type=text value=Problem size=10 name=label>
9: </form>
10: <p>
11: <form name=jack>
12:
13: <input type=text value="" size=10 name=problem><br>
14: <input type=text value="" size=10 name=problem><br>
15: <input type=text value="" size=10 name=problem><br>
16: <input type=text value="" size=10 name=problem><br>
17: <input type=text value="" size=10 name=problem><p>
18:
19: <input type=reset value=reset>
20:
21: </form>
22: </h4>
23: </body>
24: </html>
We explained previously how the value or content of a text data box can be accessed and how to assign values to it by using its unique name. But in the above program we labeled each of the text boxes with the same name, "problem" (lines 13 - 17). We now describe how we distinguish between them by using the index notation.
We refer to the value of the first text box by using the notation
document.jack.problem[0].value
We refer to the value of the second text box by using the notation
document.jack.problem[1].value
We refer to the value of the third text box by using the notation
document.jack.problem[2].value
We refer to the value of the fourth text box by using the notation
document.jack.problem[3].value
And we refer to the value of the fifth and last text box by using the notation
document.jack.problem[4].value
The quantities inside the brackets are called indices. Please note that the first index is 0, and the fifth and last is 4.
We can now assign values to the text data boxes by the series of commands:
document.jack.first[0].value=0;
document.jack.first[1].value=1;
document.jack.first[2].value=2;
document.jack.first[3].value=3;
document.jack.first[4].value=4;
These commands can easely be written with a "for loop":
for(var i=0; i<5; i++)
document.jack.first[i].value=i;
Any other values can be assigned to the text data boxes. We will shortly assign random numbers as values to the text data fields.
In the next program we write a form to a page and then assign values to each of the text data boxes using a "for loop".
1: <html>
2: <head>
3: <title>js16b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4>
7: <center>A basic form with integers assigned to its text data boxes</center>
8: <form name=label>
9: <input type=text value=Problem size=10 name=label>
10: </form>
11: <p>
12: <form name=jack>
13:
14: <input type=text value=0 size=10 name=problem><br>
15: <input type=text value=0 size=10 name=problem><br>
16: <input type=text value=0 size=10 name=problem><br>
17: <input type=text value=0 size=10 name=problem><br>
18: <input type=text value=0 size=10 name=problem><p>
19:
20: <input type=reset value=reset>
21: </form>
22:
23: <script language=javascript>
24:
25: for(var i=0; i<5; i++)
26: document.jack.problem[i].value=i;
27:
28: </script>
29: </h4>
30: </body>
31: </html>
Lines 25 and 26 assign values to the text data boxes.
The previous program is now modified so that the form is written to the screen when the program is loaded, but the values are not. They are assigned when the user clicks on the "Click to fill" button which activates the function "fill()" that does that.
1: <html>
2: <head>
3: <title>js16c</title>
4: <script language=javascript>
5:
6: function fill()
7: {
8: for(var i=0; i<5; i++)
9: document.jack.problem[i].value=i;
10: }
11:
12: </script>
13: </head>
14: <body bgcolor=yellow text=black>
15: <h4><center>
16: Click on the "Click to fill" button to assign values to the text data boxes.</center><p>
17:
18: <form name=label>
19: <input type=text value=Problem size=10 name=label>
20: </form>
21: <p>
22: <form name=jack>
23:
24: <input type=text value="" size=10 name=problem><br>
25: <input type=text value="" size=10 name=problem><br>
26: <input type=text value="" size=10 name=problem><br>
27: <input type=text value="" size=10 name=problem><br>
28: <input type=text value="" size=10 name=problem><br>
29: <p>
30: <input type=reset value=reset>
31: <input type=button value="Click to fill" onClick="fill()">
32: </form>
33: </h4>
34: </body>
35: </html>
Clicking the "Click to fill" button, created by line 31, calls the function "fill()" in lines 6-10 which assigns values to the text data boxes.
We now modify the last program so that the values assigned to the text data fields are random integers.
1: <html>
2: <head>
3: <title>js16c2</title>
4: <script language=javascript>
5: function fill()
6: {
7: for(var i=0; i<5; i++)
8: document.jack.problem[i].value = Math.floor(Math.random()*50+1);
9: }
10: </script>
11:
12: </head>
13: <body bgcolor=yellow text=black>
14: <h4><center>
15: Click on the "Click to fill" button to assign random integers to the text data boxes.
16: </center><br>
17:
18: <form name=label>
19: <input type=text value=Problem size=10 name=label>
20: </form>
21: <p>
22:
23: <form name=jack>
24:
25: <input type=text value="" size=10 name=problem><br>
26: <input type=text value="" size=10 name=problem><br>
27: <input type=text value="" size=10 name=problem><br>
28: <input type=text value="" size=10 name=problem><br>
29: <input type=text value="" size=10 name=problem><br>
30: <p>
31: <input type=reset value=reset>
32: <input type=button value="Click to fill" onClick="fill()">
33: </form>
34: </h4>
35: </body>
36: </html>
The only modification necessary is to replace line 9 in the previous program with line 9 in this program. The right side of line 9 generates random integers and assigns them to the text data boxes represented by the left side.
In the next program we assign expression "a+b" to the text data boxes where a and b are integers randomly generated.
1: <html>
2: <head>
3: <title>js16c3</title>
4: <script language=javascript>
5: var a, b, i;
6: function fill()
7: {
8: for(i=0; i<5; i++)
9: {
10: a=Math.floor(Math.random()*50+1);
11: b=Math.floor(Math.random()*50+1);
12:
13: document.jack.problem[i].value=a+"+"+b;
14: }
15: }
16: </script>
17:
18: </head>
19: <body bgcolor=yellow text=black>
20: <h4><center>
21: Click on the "Click to fill" button to assign expressions a+b to the text data boxes.
22: </center><br>
23:
24: <form name=label>
25: <input type=text value=Problem size=10 name=label>
26: </form>
27: <p>
28:
29: <form name=jack>
30:
31: <input type=text value="" size=10 name=problem><br>
32: <input type=text value="" size=10 name=problem><br>
33: <input type=text value="" size=10 name=problem><br>
34: <input type=text value="" size=10 name=problem><br>
35: <input type=text value="" size=10 name=problem><p>
36:
37: <input type=reset value=reset>
38: <input type=button value="Click to fill" onClick="fill()">
39: </form>
40: </h4>
41: </body>
42: </html>
When the user clicks on the button created by line 38, the function, defined by lines 6-15, is activated. Lines 10 and 11 generate two random integers which are assigned to a and b. Line 13 then assigns the expression "a+b", not their sum, to the "problem" text data boxes.
We modify the previous program by introducing a second text data box "answer" alongside each of the text data boxes "problem". We then assign expressions of the form "a+b" where a and are integers randomly generated to the "problem" text data boxes and then assign the numerical value (sum) of a+b to the corresponding text data box, "answer".
1: <html>
2: <head>
3: <title>js16i</title>
4: <script language=javascript>
5: var a, b, i;
6: function fill()
7: {
8: for(i=0; i<5; i++)
9: {
10: a=Math.floor( Math.random()*50+1 );
11: b=Math.floor( Math.random()*50+1 );
12:
13: document.jack.problem[i].value=a+"+"+b;
14:
15: document.jack.answer[i].value=a+b;
16: }
17: }
18: </script>
19:
20: </head>
21: <body bgcolor=yellow text=black>
22: <h4>
23: Click on the "Click to fill" button to assign expressions a+b to the first text data boxes and the sum of a+b to the corresponding text data box.<br>
24:
25: <form name=label>
26: <input type=text value=Problem size=10 name=label>
27: <input type=text value=Answer size=10 name=label>
28: </form>
29: <p>
30:
31: <form name=jack>
32:
33: <input type=text value="" size=10 name=problem>
34: <input type=text value="" size=10 name=answer><br>
35:
36: <input type=text value="" size=10 name=problem>
37: <input type=text value="" size=10 name=answer><br>
38:
39: <input type=text value="" size=10 name=problem>
40: <input type=text value="" size=10 name=answer><br>
41:
42: <input type=text value="" size=10 name=problem>
43: <input type=text value="" size=10 name=answer><br>
44:
45: <input type=text value="" size=10 name=problem>
46: <input type=text value="" size=10 name=answer><p>
47:
48: <input type=reset value=reset>
49: <input type=button value="Click to fill" onClick="fill()">
50: </form>
51: </h4>
52: </body>
53: </html>
Lines 34, 37, 40, 43, and 46 construct the "answe" text data boxes alongside each of the "problem" text data boxes. Note that the form "label" has been modified accordingly (lines 25-28). When the user clicks the "Click to fill" button (line 49) the function "fill()" is called. Lines 10 and 11 assign random integers to the variables a and b. Line 13 assigns the expressions "a+b" to the "problem" text data boxes, and line 15 assigns the value (sum) of the expression a+b to the "Answer" text box alongside it. Please note the different use of the + symbol in lines 13 and 15. In line 13 the + symbol is enclosed in quotation marks making the + symbol a character. In line 15 it is used as the ususal numerical operator of addition.
We now introduce a third text data field alongside the "Problem" and "Answer" text data fields and call it "Mark". But now the user assigns expressions "a+b" to the "Problem" column of text data boxes by clicking on the "Click to fill" button. The user then enters the value (sum) of the expressions a+b in the corresponding "Answer" boxes. Then by clicking the "mark" button the proposed answers are checked and the word "Correct" or "Incorrect" is entered into the corresponding "Mark" text data boxes.
1: <html>
2: <head>
3: <title>js16jx</title>
4: <script language=javascript>
5: var a, b, i, c;
6: function fill()
7: {
8: for(i=0; i<5; i++)
9: {
10:
a=Math.floor( Math.random()*50+1 );
11:
b=Math.floor( Math.random()*50+1 );
12:
13:
document.jack.problem[i].value=a+"+"+b;
14: }
15: }
16:
17: function mark1()
18: {
19: for(i=0; i<5; i++)
20: {
21:
c=eval(document.jack.problem[i].value)
22:
23:
if(document.jack.answer[i].value==c)
24:
document.jack.mark[i].value="Correct";
25: else
26:
document.jack.mark[i].value="Incorrect";
27: }
28: }
29:
30: </script>
31: </head>
32: <body bgcolor=yellow text=black>
33: <h4>
34: Click the "Click to fill" button to assign expressions a+b to the text data boxes labeled "problem", enter their sum in the corresponding text data boxes labeled "answer", then click on the "Click to mark" button to find if your answer is correct or incorrect.<br>
35:
36: <form name=label>
37: <input type=text value=Problem size=10 name=label>
38: <input type=text value=Answer size=10 name=label>
39: <input type=text value=Mark size=10 name=label>
40: </form>
41: <p>
42:
43: <form name=jack>
44:
45: <input type=text value="" size=10 name=problem>
46: <input type=text value="" size=10 name=answer>
47: <input type=text value="" size=10 name=mark><br>
48:
49: <input type=text value="" size=10 name=problem>
50: <input type=text value="" size=10 name=answer>
51: <input type=text value="" size=10 name=mark><br>
52:
53: <input type=text value="" size=10 name=problem>
54: <input type=text value="" size=10 name=answer>
55: <input type=text value="" size=10 name=mark><br>
56:
57: <input type=text value="" size=10 name=problem>
58: <input type=text value="" size=10 name=answer>
59: <input type=text value="" size=10 name=mark><br>
60:
61: <input type=text value="" size=10 name=problem>
62: <input type=text value="" size=10 name=answer>
63: <input type=text value="" size=10 name=mark><p>
64:
65: <input type=reset value=reset>
66:
67: <input type=button value="Click to fill" onClick="fill()">
68: <input type=button value="Click to mark" onClick="mark1()">
69:
70: </form>
71: </h4>
72: </body>
73: </html>
Line 67 allows the user to assign an expression a+"+"+b to each of the "problem" text data boxes. This is done by the function fill1() defined by lines 6-15. After the user has entered the proposed solutions in the corresponding "answer" text data boxes, he/she clicks on the "Click to mark" button (line 68) which calls the function mark1()defined by lines 17-28. Line 21 calculates the correct answer for each problem which is compared in line 23 with the proposed answer. If they match, in other words, the proposed answer is correct, then line 24 prints "Correct" in the "mark" text data box. If the answer is not correct then line 26 prints "Incorrect" in the "mark" text data box.
Taking the previous program one step further we introduce a counter called "count" that will count the number of problems correctly answered.
1: <html>
2: <head>
3: <title>js16k</title>
4:
5: <script language=javascript>
6: var a, b, i, c, count;
7:
8: function fill()
9: {
10: for(i=0; i<5; i++)
11: {
12: a=Math.floor( Math.random()*50+1 );
13: b=Math.floor( Math.random()*50+1 );
14:
15: document.jack.problem[i].value=a+"+"+b;
16: }
17: document.jack.score.value="";
18: }
19:
20: function mark1()
21: {
22: count=0;
23:
24: for(i=0; i<5; i++)
25: {
26: c=eval(document.jack.problem[i].value)
27:
28: if(document.jack.answer[i].value==c)
29: {
30: document.jack.mark[i].value="correct";
31: count++;
32: }
33: else
34: document.jack.mark[i].value="incorrect";
35: }
36: document.jack.score.value=count;
37: }
38:
39: </script>
40:
41: </head>
42: <body bgcolor=yellow text=black>
43: <h4>
44: Click the "click to fill" button to assign expressions a+b to the first text data boxes, enter their sum in the corresponding second text data boxes, then click on the "mark" button to find if your answer is correct or incorrect. Your score will appear in the "score" text data box.
46: <form name=label>
47: <input type=text value=problem size=10 name=label>
48: <input type=text value=answer size=10 name=label>
49: <input type=text value=mark size=10 name=label>
50: </form>
51: <p>
52:
53: <form name=jack>
54: <input type=text value="" size=10 name=problem>
55: <input type=text value="" size=10 name=answer>
56: <input type=text value="" size=10 name=mark><br>
57:
58: <input type=text value="" size=10 name=problem>
59: <input type=text value="" size=10 name=answer>
60: <input type=text value="" size=10 name=mark><br>
61:
62: <input type=text value="" size=10 name=problem>
63: <input type=text value="" size=10 name=answer>
64: <input type=text value="" size=10 name=mark><br>
65:
66: <input type=text value="" size=10 name=problem>
67: <input type=text value="" size=10 name=answer>
68: <input type=text value="" size=10 name=mark><br>
69:
70: <input type=text value="" size=10 name=problem>
71: <input type=text value="" size=10 name=answer>
72: <input type=text value="" size=10 name=mark><p>
73:
74: <input type=reset value=reset>
75: <input type=button value="click to fill" onClick="fill()">
76: <input type=button value="click to mark" onClick="mark1()"><p>
77: score:<input type=text value="" size=15 name=score>
78:
79: </form>
80: </h4>
81: </body>
82: </html>
The variable "count", declared in line 6, will be initialized to zero everytime the "mark1()" function is called. Then whenever a solution is correct, "count" is incremented by one (line 31). So that when the quiz is marked, "count" will be equal to the number of correct answers. To display this variable we introduce into the form "jack" a text data field called "score". Then when the quiz has been marked the value of "count" is entered into the score box.
We can allow greater flexibility in the last program by allowing for the multiplication and subtraction, in addition to the addition of two integers. We do this by the method used in program cal3d.htm of the last part.
1: <html>
2: <head>
3: <title>js16l</title>
4:
5: <script language=javascript>
6: var a, b, i, c, count, t, bop;
7:
8: function fill()
9: {
10: for(i=0; i<5; i++)
11: {
12: a=Math.floor( Math.random()*50+1 );
13: b=Math.floor( Math.random()*50+1 );
14:
15: t=Math.floor( Math.random()*3+1 );
16:
17: if(t==1)
18: bop="+";
19: else if(t==2)
20: bop="*";
21: else if(t==3)
22: bop="-";
23:
24: document.jack.problem[i].value=a+bop+b;
25:
26: document.jack.mark[i].value="";
27: }
28: document.jack.score.value="";
29: }
30:
31: function mark1()
32: {
33: count=0;
34:
35: for(i=0; i<5; i++)
36: {
37: c=eval(document.jack.problem[i].value)
38:
39: if(document.jack.answer[i].value==c)
40: {
41: document.jack.mark[i].value="correct";
42: count++;
43: }
44: else
45: document.jack.mark[i].value="incorrect";
46: }
47: document.jack.score.value=count+" correct";
48: }
49:
50: </script>
51:
52: </head>
53: <body bgcolor=yellow text=black>
54: <h4>
55: Click the "click to fill" button to assign expressions a+b, a*b, or a-b, to the first text data boxes, enter their result in the corresponding second text data boxes, then click on the "mark" button to find if your answer is correct or incorrect. Your score will appear in the score text data box.
56:
57: <form name=label>
58: <input type=text value=Problem size=10 name=label>
59: <input type=text value=Answer size=10 name=label>
60: <input type=text value=Mark size=10 name=label>
61: </form>
62: <p>
63:
64: <form name=jack>
65: <input type=text value="" size=10 name=problem>
66: <input type=text value="" size=10 name=answer>
67: <input type=text value="" size=10 name=mark><br>
68:
69: <input type=text value="" size=10 name=problem>
70: <input type=text value="" size=10 name=answer>
71: <input type=text value="" size=10 name=mark><br>
72:
73: <input type=text value="" size=10 name=problem>
74: <input type=text value="" size=10 name=answer>
75: <input type=text value="" size=10 name=mark><br>
76:
77: <input type=text value="" size=10 name=problem>
78: <input type=text value="" size=10 name=answer>
79: <input type=text value="" size=10 name=mark><br>
80:
81: <input type=text value="" size=10 name=problem>
82: <input type=text value="" size=10 name=answer>
83: <input type=text value="" size=10 name=mark><p>
84:
85: <input type=reset value=reset>
86: <input type=button value="click to fill" onClick="fill()">
87: <input type=button value="click to mark" onClick="mark1()"><p>
88: score:<input type=text value="" size=12 name=score>
89:
90: </form>
91: </h4>
92: </body>
93: </html>
We employ in this program the Math.random(); function to determine the operation between the two integers. We wish to generate the three operations, +, -, or *, are to be inserted between the two integers, a and b, representing addition, subtraction and multiplication respectively.
Every time the "fill1()" function (lines 8-28) is called it accomplishes the following:
Math.floor(Math.random()*3+1)
function generates the integers 1, 2, and 3, randomly, and assigns these values to the variable t. In lines 17-22 we use the value of t to choose one of these binary operations. In line 6 the variable bop (binary operator) is declared. If t==1 we set bop="+". If t==2 we set bop="-". And if t==3 we set bop="*". Then in line 24 we form the string
a+bop+b
which is either a+"+"+b, or a+"-"+b, or a+"*"+b, and assigns it to the "problem" text data box (line 24). What then appears in the "problem" text data box is either a+b, or a-b, or a*b.