The first quiz, a fill in quiz, is a reworking of the quiz given in part 3 of this tutorial. But now is given in a more interesting manner. And allows for generalization. The quiz requires the user to supply definitions.
1: <html>
2: <head>
3: <title>js12lb</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: var correct=0, i;
8: var ans=new Array("1492","Washington", "Canada", "Antartica", "Pythagores","4");
9: function mark1()
10: {
11: for(i=0; i<6; i++)
12: {
13: if( ans[i].toUpperCase()==document.jack.answer[i].value.toUpperCase() )
14: {
15: correct++;
16: document.jack.mark[i].value="Correct";
17: }
18: else
19: document.jack.mark[i].value="Correct answer is " +ans[i];
20:
21: }
22:
23: document.jack.score.value=correct +" correct";
24: }
25: </script>
26: <body bgcolor=yellow text=black>
27: <h4>
28: Enter the correct answer in the spaces provided. When all answers have been supplied click on the "mark" button below to check on the correctness of your answers.<p>
29: <form name=jack>
30: <table>
31: <tr>
32: <td width="300" valign=top><h4>Q1: In what year did Columbus discover America?"
33: <td valign=top><input type=text name=answer value="" size=10>
34: <td valign=top><input type=text name=mark value="" size=30>
35:
36: <tr>
37: <td width="300" valign=top><h4>Q2: Who was the first president of the U.S.A.?
38: <td valign=top><input type=text name=answer value="" size=10>
39: <td valign=top><input type=text name=mark value="" size=30>
40:
41: <tr>
42: <td width="300" valign=top><h4>Q3: What is the country immediately north of the U.S.A.?
43: <td valign=top><input type=text name=answer value="" size=10>
44: <td valign=top><input type=text name=mark value="" size=30>
45:
46: <tr>
47: <td width="300" valign=top><h4>Q4: What is the region at the south pole called ?
48: <td valign=top><input type=text name=answer value="" size=10>
49: <td valign=top><input type=text name=mark value="" size=30>
50:
51: <tr>
52: <td width="300" valign=top><h4>Q5: The 3-4-5 triangle is associated with what Greek mathematician?
53: <td valign=top><input type=text name=answer value="" size=10>
54: <td valign=top><input type=text name=mark value="" size=30>
55:
56: <tr>
57: <td width="300" valign=top><h4>Q6: How many strings does a violin have ( use a number )?
58: <td valign=top><input type=text name=answer value="" size=10>
59: <td valign=top><input type=text name=mark value="" size=30>
60:
61: </table>
62:
63: <input type=reset value=reset>
64: <input type=button value=mark onClick="mark1()">
65: score:<input type=text value="" name=score size=20>
66: </form>
67: </h4>
68: </body>
69: </html>
Click here to see the run of the program
The next quiz is an example of a multiple choice quiz. The reader can easely modify this format to allow for a quiz in other disciplines.
1: <html>
2: <head>
3: <title> multiple choice mc1 </title>
4: <script language=javascript>
5:
6: function mark1()
7: {
8: if(document.jack.q1[1].checked)
9: document.jack.mark[0].value="Correct";
10: else
11: document.jack.mark[0].value="Correct answer is item 2";
12:
13: if(document.jack.q2[2].checked)
14: document.jack.mark[1].value="Correct";
15: else
16: document.jack.mark[1].value="Correct answer is item 3";
17:
18: if(document.jack.q3[4].checked)
19: document.jack.mark[2].value="Correct";
20: else
21: document.jack.mark[2].value="Correct answer is item 5";
22:
23: if(document.jack.q4[2].checked)
24: document.jack.mark[3].value="Correct";
25: else
26: document.jack.mark[3].value="Correct answer is item 3";
27:
28: if(document.jack.q5[1].checked)
29: document.jack.mark[4].value="Correct";
30: else
31: document.jack.mark[4].value="Correct answer is item 2";
32: }
33: </script>
34: </head>
35: <body bgcolor=yellow text=black>
36: <h4>
37: Choose the correct answers and when test is completed click on the "mark" button below to check on the correctness of your answers.<p>
38: <form name=jack>
39: <table>
40: <tr>
41: <td><h4>Q1: 3+2=?
42: <input type=radio name=q1 value="">2
43: <input type=radio name=q1 value="">5
44: <input type=radio name=q1 value="">-1
45: <input type=radio name=q1 value="">7
46: <input type=radio name=q1 value="">-5
47: <td><input type=text name=mark value="" size=30><p>
48: <tr>
49: <td><h4>Q2: 5*3=?
50: <input type=radio name=q2 value="">8
51: <input type=radio name=q2 value="">2
52: <input type=radio name=q2 value="">15
53: <input type=radio name=q2 value="">-15
54: <input type=radio name=q2 value="">53
55: <td><input type=text name=mark value="" size=30><p>
56:
57: <tr>
58: <td><h4>Q3: 5-3=?
59: <input type=radio name=q3 value="">8
60: <input type=radio name=q3 value="">15
61: <input type=radio name=q3 value="">53
62: <input type=radio name=q3 value="">-2
63: <input type=radio name=q3 value="">2
64: <td><input type=text name=mark value="" size=30><p>
65: <tr>
66: <td><h4>Q4: 6/2=?
67: <input type=radio name=q4 value="">8
68: <input type=radio name=q4 value="">4
69: <input type=radio name=q4 value="">3
70: <input type=radio name=q4 value="">0
71: <input type=radio name=q4 value="">12
72: <td><input type=text name=mark value="" size=30><p>
73: <tr>
74: <td><h4>Q5: 2+3*3=?
75: <input type=radio name=q5 value="">15
76: <input type=radio name=q5 value="">11
77: <input type=radio name=q5 value="">8
78: <input type=radio name=q5 value="">23
79: <input type=radio name=q5 value="">0
80: <td><input type=text name=mark value="" size=30><p>
81: </table>
82:
83:
84: <input type=reset value=reset>
85: <input type=button value=mark name=mark onClick="mark1()">
86: </form>
87: </h3>
88: </body>
89: </html>
Click here to see the run of the program
We recast the previous quiz into a more pleasing format by embedding it in a table.
1: <html>
2: <head>
3: <title> multiple choice mc2 </title>
4: <script language=javascript>
5:
6: function mark1()
7: {
8: if(document.jack.q1[1].checked)
9: document.jack.mark[0].value="Correct";
10: else
11: document.jack.mark[0].value="Correct answer is item 2";
12:
13: if(document.jack.q2[2].checked)
14: document.jack.mark[1].value="Correct";
15: else
16: document.jack.mark[1].value="Correct answer is item 3";
17:
18: if(document.jack.q3[4].checked)
19: document.jack.mark[2].value="Correct";
20: else
21: document.jack.mark[2].value="Correct answer is item 5";
22:
23: if(document.jack.q4[2].checked)
24: document.jack.mark[3].value="Correct";
25: else
26: document.jack.mark[3].value="Correct answer is item 3";
27:
28: if(document.jack.q5[1].checked)
29: document.jack.mark[4].value="Correct";
30: else
31: document.jack.mark[4].value="Correct answer is item 2";
32: }
33: </script>
34: </head>
35: <body bgcolor=yellow text=black>
36: <h4>
37: Choose the correct answers and when test is completed click on the "mark" button below to check on the correctness of your answers.<p>
38: <form name=jack>
39: <table>
40: <tr>
41: <td><h4>Q1: 3+2=?
42: <td><h4><input type=radio name=q1 value="">2
43: <input type=radio name=q1 value="">5
44: <input type=radio name=q1 value="">-1
45: <input type=radio name=q1 value="">7
46: <input type=radio name=q1 value="">-5
47: <td><input type=text name=mark value="" size=30><p>
48: <tr>
49: <td><h4>Q2: 5*3=?
50: <td><h4><input type=radio name=q2 value="">8
51: <input type=radio name=q2 value="">2
52: <input type=radio name=q2 value="">15
53: <input type=radio name=q2 value="">-15
54: <input type=radio name=q2 value="">53
55: <td><input type=text name=mark value="" size=30><p>
56:
57: <tr>
58: <td><h4>Q3: 5-3=?
59: <td><h4><input type=radio name=q3 value="">8
60: <input type=radio name=q3 value="">15
61: <input type=radio name=q3 value="">53
62: <input type=radio name=q3 value="">-2
63: <input type=radio name=q3 value="">2
64: <td><input type=text name=mark value="" size=30><p>
65: <tr>
66: <td><h4>Q4: 6/2=?
67: <td><h4><input type=radio name=q4 value="">8
68: <input type=radio name=q4 value="">4
69: <input type=radio name=q4 value="">3
70: <input type=radio name=q4 value="">0
71: <input type=radio name=q4 value="">12
72: <td><input type=text name=mark value="" size=30><p>
73: <tr>
74: <td><h4>Q5: 2+3*3=?
75: <td><h4><input type=radio name=q5 value="">15
76: <input type=radio name=q5 value="">11
77: <input type=radio name=q5 value="">8
78: <input type=radio name=q5 value="">23
79: <input type=radio name=q5 value="">0
80: <td><input type=text name=mark value="" size=30><p>
81: </table>
82:
83:
84: <input type=reset value=reset>
85: <input type=button value=mark name=mark onClick="mark1()">
86: </form>
87: </h3>
88: </body>
89: </html>
Click here to see the run of the program
The next quiz is an example of a matching quiz. It can be expanded in several directions. The user first chooses the category of questions from "phrases", "names", or "dates", and then tries to match the entries in the two columns.
1: <html>
2: <head>
3: <title>match3e</title>
4: <script language=javascript>
5: var i, j, qqq, l, count;
6: function getvalue(i)
7: {
8: qqq=i;
9: }
10:
11: function putvalue(j)
12: {
13: document.jack.a[j].value=qqq;
14: }
15:
16: function d_elete()
17: {
18: for(var k=0; k<5; k++)
19: document.jack.a[k].value="";
20: }
21:
22: function mark()
23: {
24: count=0;
25: for(l=0; l<5; l++)
26: {
27: if(ans[l]==document.jack.a[l].value)
28: {
29: count++;
30: document.jack.mark1[l].value="Correct";
31: }
32: else
33: document.jack.mark1[l].value="Correct answer is: "+ans[l];
34: }
35: document.jack.score.value=count;
36: }
37:
38: function phrases()
39: {
40: ans=new Array(5, 1, 4, 3, 2);
41:
42:
43: document.jack.question[0].value="good";
44: document.jack.question[1].value="take";
45: document.jack.question[2].value="so";
46: document.jack.question[3].value="to your";
47: document.jack.question[4].value="my";
48:
49: document.jack.answer[0].value="love";
50: document.jack.answer[1].value="morning";
51: document.jack.answer[2].value="health";
52: document.jack.answer[3].value="long";
53: document.jack.answer[4].value="care";
54: }
55:
56: function names()
57: {
58: ans=new Array(5, 4, 1, 2, 3);
59:
60: document.jack.question[0].value="George";
61: document.jack.question[1].value="Alexander";
62: document.jack.question[2].value="Martin";
63: document.jack.question[3].value="Benjamin";
64: document.jack.question[4].value="John";
65:
66: document.jack.answer[0].value="Hancock";
67: document.jack.answer[1].value="Franklin";
68: document.jack.answer[2].value="Washington";
69: document.jack.answer[3].value="Hamilton";
70: document.jack.answer[4].value="King";
71: }
72:
73: function dates()
74: {
75: ans=new Array(2, 3, 5, 4, 1);
76:
77: document.jack.question[0].value="1492";
78: document.jack.question[1].value="1914-1918";
79: document.jack.question[2].value="1861-1865";
80: document.jack.question[3].value="1898";
81: document.jack.question[4].value="1609";
82:
83: document.jack.answer[0].value="WW I";
84: document.jack.answer[1].value="Civil War";
85: document.jack.answer[2].value="Pilgrims";
86: document.jack.answer[3].value="Cuba";
87: document.jack.answer[4].value="Columbus";
88: }
89:
90: </script>
91: </head>
92: <body bgcolor=yellow text=black>
93: <h4>
94: <center>Choose the category below for your quiz. Then match the items of column A with those of column B. This is done by clicking on the number in column A and then clicking on the appropriate button in column B. After all the questions have been answered click "mark" to check answers.</center>
95: <form name=jack>
96: <table border=1>
97: <tr>
98: <td align=center><h4>Column A
99: <td align=center><h4>Column B
100: <td align=center><h4>Answers
101:
102: <tr>
103: <td>
104: <input type=text name=question value="" size=15>
105: <input type=button name=q value=" 1 " size=15 onClick="getvalue(1)"><br>
106: <input type=text name=question value="" size=15>
107: <input type=button name=q value=" 2 " size=15 onClick="getvalue(2)"><br>
108: <input type=text name=question value="" size=15>
109: <input type=button name=q value=" 3 " size=15 onClick="getvalue(3)"><br>
110: <input type=text name=question value="" size=15>
111: <input type=button name=q value=" 4 " size=15 onClick="getvalue(4)"><br>
112: <input type=text name=question value="" size=15>
113: <input type=button name=q value=" 5 " size=15 onClick="getvalue(5)">
114: <td>
115: <input type=text name=answer value="" size=15>
116: <input type=button name=a value="" size=" " onClick="putvalue(0)"><br>
117: <input type=text name=answer value="" size=15>
118: <input type=button name=a value="" size=" " onClick="putvalue(1)"><br>
119: <input type=text name=answer value="" size=15>
120: <input type=button name=a value="" size=" " onClick="putvalue(2)"><br>
121: <input type=text name=answer value="" size=15>
122: <input type=button name=a value="" size=" " onClick="putvalue(3)"><br>
123: <input type=text name=answer value="" size=15>
124: <input type=button name=a value="" size=" " onClick="putvalue(4)">
125:
126: <td>
127: <input type=text size=20 name=mark1 value=""><br>
128: <input type=text size=20 name=mark1 value=""><br>
129: <input type=text size=20 name=mark1 value=""><br>
130: <input type=text size=20 name=mark1 value=""><br>
131: <input type=text size=20 name=mark1 value="">
132:
133: <tr >
134: <td colspan=3>
135: <input type=button value=phrases onClick="phrases()">
136: <input type=button value=names onClick="names()">
137: <input type=button value=dates onClick="dates()">
138: <tr><td colspan=3><h4>
139:
140: <input type=reset value=reset onClick="mark()">
141: <input type=button value=mark onClick="mark()">
142: <input type=button value="reset answers" onClick="d_elete()">
143:
144: score: <input type=text value="" name=score size=10>
145: </table>
146: </form>
147: </h4>
148: </body>
149: </html>
Click here to see the run of the program