2 years ago 2 years ago Javascript Share

Learning JavaScript and HTML Forms – Make a Simple Quiz

This page demonstrates a simple quiz written in JavaScript and HTML forms, made for a TAFE course in web and database development/design in 2001.

This kind of quiz makes a good project to practice on when learning the basics of JavaScript and HTML form handling.

I'll add more info about the quiz and how the code works to this page soon...

Embedded Website — Nature and the Environment Quiz

The website is embedded in an iframe, to emulate the low screen resolutions of 2001.


Because the sites from that era (this one was made from 30 March — 5 April, 2001) were made for much smaller screen resolutions, they look wrong on modern screens. I've embedded this one inside an iframe, so that it displays more like the proportions that it was meant to look like originally.

HTML and JavaScript Code for the Quiz

Below is the HTML and JavaScript code as used in the quiz above.

There are six separate landing pages — which one out of the six that you end up on depends on your score. This is an extremely inefficient way to write the code, and shows that it must have been one of the first things I ever did in JavaScript and HTML forms. It would be much more compact to make one landing page, and have it display selective messages depending on the score — which could be passed in a GET variable, or a cookie, to the landing page. I probably made this quiz before I'd learned how to do this. Also, the language features to pass variables from one page to another were a lot more primitive in 2001 than they are now (so it's easier to do now than it was in 2001).

There is some invisible text at the very bottom of the page. You can see it in the source code (it's coded to show up as the same colour as the page background), and you can see it in the live version of the page above if you highlight with the mouse over the very bottom section of the web pages. I have no idea now what this was for (lol) though I've left it in this version, since it was there in the original from 2001.

<HTML>
<HEAD>
<TITLE>Javascript Quiz</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function gradeTest() {
	var outString = "";
	var numberRight = 0;

	for (var i = 0; i < document.forms.length; i++) {		
		var ans = document.forms[i].answer.value;		
		if (document.forms[i].elements[ans].checked) {
			numberRight++;
		}
	}	

	switch (numberRight) {
	case 0: window.location="correct0.htm";
	break;
	case 1: window.location="correct1.htm";
	break;
	case 2: window.location="correct2.htm";
	break;
	case 3: window.location="correct3.htm";
	break;
	case 4: window.location="correct4.htm";
	break;
	case 5: window.location="correct5.htm";
	break;
	}

	//outString += "<BR>You got " + numberRight + " correct!";
	//document.writeln(outString);
}

function clearForms() {
	for (var i = 0; i < document.forms.length; i++) {
	document.forms[i].reset();	
	} 
}
</SCRIPT>
</HEAD>

<BODY BGCOLOR="d4a355" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="15%" BGCOLOR="#93ef87">

&nbsp;
<img src="spacer.gif" width="80" height="1">

</TD>
<TD>
<BLOCKQUOTE><BR>
<CENTER><H1><FONT COLOR="93ef87">Nature and the Environment</FONT></H1></CENTER>
<CENTER><H2><FONT COLOR="643305">Test your knowledge</FONT></H2></CENTER>

<CENTER><IMG SRC="DSCN5498_312.jpg" WIDTH="312" HEIGHT="218"></CENTER>

<BR>

<FORM>

<P>The only reserve with World Heritage status close to a major city is:</P>

<P><INPUT TYPE="radio" NAME="heritage">
A. The Sahara Desert.</P>

<P><INPUT TYPE="radio" NAME="heritage">
B. The Blue Mountains.</P> 

<P><INPUT TYPE="radio" NAME="heritage">
C. Jellystone National Park.</P> 

<P><INPUT TYPE="radio" NAME="heritage">
D. Palm Springs, California.</P> 

<INPUT TYPE="hidden" NAME="answer" VALUE="1">
</FORM>

<FORM>
<HR>
<BR>
<CENTER><IMG SRC="komodoA.jpg"></CENTER>
<P>The Komodo Dragon is the world's largest lizard. One in every five meals a Komodo Dragon eats is:</P>

<P><INPUT TYPE="radio" NAME="komodo">
A. An Indonesian River-Otter.</P>

<P><INPUT TYPE="radio" NAME="komodo">
B. A Big Mac left by a tourist.</P> 

<P><INPUT TYPE="radio" NAME="komodo">
C. A tourist.</P> 

<P><INPUT TYPE="radio" NAME="komodo">
D. Another Komodo Dragon.</P> 

<INPUT TYPE="hidden" NAME="answer" VALUE="3">
</FORM>

<FORM>
<HR>
<BR>
<CENTER><IMG SRC="sunset.jpg"></CENTER>
<P>The Republic of the Maldives is facing which environmental crisis?

<P><INPUT TYPE="radio" NAME="maldives">
A. Erosion caused by massive deforestation.</P>

<P><INPUT TYPE="radio" NAME="maldives">
B. Build up of DDT levels is causing spontaneous sex changes in natives.</P> 

<P><INPUT TYPE="radio" NAME="maldives">
C. The land is sinking into the ocean.</P> 

<P><INPUT TYPE="radio" NAME="maldives">
D. Heavy industry is killing many native species.</P> 

<INPUT TYPE="hidden" NAME="answer" VALUE="2">
</FORM>

<FORM>
<HR>
<BR>
<CENTER><IMG SRC="london.jpg"></CENTER>
<P>A study of trends in transportation and population growth in turn-of-the-century London showed that by the year 2000: </P>

<P><INPUT TYPE="radio" NAME="london">
A. The average person would spend nine hours per day commuting.</P>

<P><INPUT TYPE="radio" NAME="london">
B. The entire city would be buried under 100 metres of horse manure.</P> 

<P><INPUT TYPE="radio" NAME="london">
C. Main roads would subside to 2 metres lower than the sidewalk.</P> 

<P><INPUT TYPE="radio" NAME="london">
D. The impending end of the Earth would create a mass exodus to country regions.</P> 

<INPUT TYPE="hidden" NAME="answer" VALUE="1">
</FORM>

<FORM>
<HR>
<BR>
<CENTER><IMG SRC="sloth3to.jpg" WIDTH="312" HEIGHT="218"></CENTER>
<P>The Three-Toed Sloth of South America is considered lazy because:

<P><INPUT TYPE="radio" NAME="sloth">
A. It sleeps for 18 hours per day.</P>

<P><INPUT TYPE="radio" NAME="sloth">
B. The sloths.org web site is so damn slow.</P> 

<P><INPUT TYPE="radio" NAME="sloth">
C. It never moves from its tree.</P> 

<P><INPUT TYPE="radio" NAME="sloth">
D. All of the above.</P> 

<INPUT TYPE="hidden" NAME="answer" VALUE="0">

<HR>
<BR>

<CENTER><INPUT TYPE="button" VALUE="Grade the test" ONCLICK="gradeTest()">
<INPUT TYPE="reset" value="Clear" onClick="clearForms()"></CENTER>

</FORM>

<p><font color="#d4a355"> sdf sdsdj sd sdfsdklhjf dskfjsh fsdjkfh sdjklfh sdkfljhsd 
   fjklsdh fklsdjhf sdjklfh sdjkfh sdjkfsh dfksdjh fsdjkfh sdjkfh sdjkflh 
   sdkljfhsd f</font></p>
</BLOCKQUOTE>
</TD></TABLE>
</BODY></HTML>

A major flaw with this style of quiz is that it's possible to look at the source code of the page and figure out what the answers are. Which means this quiz "engine" couldn't be used for a real examination/assessment — which would require more complicated handling of the answers so that they can't be seen in the question page source code.

Note that there's no CSS at all, and a lot of now-deprecated (meaning that it's officially recommended not to use them) tags (like <CENTER>) are used. Most of these tags still work in modern browsers — if they didn't, then a lot of older websites would look completely broken. So it's generally fine to use them when learning HTML, even if only for the reason that it simplifies the amount of things you have to learn all at once just to get a basic web page online.

Note also that there are plenty of other things about the code which could be rightly regarded as "slack", e.g. the sometimes-there-sometimes-not hash marks before the colour codes.

The good thing about HTML when learning it is that web browsers are generally extremely forgiving of mistakes. Browsers will usually do everything they can to try to render the page how they think the writer of the code wanted it to look, despite bad coding practices and even some outright errors.

Here is the code of one of the landing pages — correct3.htm. The others are basically the same, but with a different message.

<HTML>
<HEAD><TITLE>Javascript Quiz</TITLE>
</HEAD>

<BODY link="#643305" alink="#643305" vlink="#643305" BGCOLOR="d4a355" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="15%" BGCOLOR="93ef87">
&nbsp;
<img src="spacer.gif" width="80" height="1">

</TD>
<TD>
<BLOCKQUOTE><BR>
<CENTER><H1><FONT COLOR="93ef87">Nature and the Environment</FONT></H1></CENTER>
<CENTER><H2><FONT COLOR="643305">Test your knowledge</FONT></H2></CENTER>

<hr>
<BR>

<center>
<p>You got <h1> <FONT COLOR="643305">three</font></h1> questions correct. Your rating is <p></p>

<H2><center><FONT COLOR="93ef87">Average</font></center></h2>

<p><center>You are one of those ordinary people you hear about on TV.</center></p>

<p><center>Click <a href="index.htm">here</a> to try again.</center>

<p><font color="#d4a355"> sdf sdsdj sd sdfsdklhjf dskfjsh fsdjkfh sdjklfh sdkfljhsd 
fjklsdh fklsdjhf sdjklfh sdjkfh sdjkfsh dfksdjh fsdjkfh sdjkfh
 sdjkflh sdkljfhsd f</font></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</center></BLOCKQUOTE>
</TD></TABLE>
</BODY></HTML>

Coming Soon

Many more live examples of coding, web and database development, and security work to be added to this website soon...

I'll also write about some of the technology used then, and now — and how things have changed over the 20 years from 2001 to 2021.

Cover image by Shutterstock.

Categories Javascript,Coding
Codewiz.au Homepage - Australian Cyber Security Web Magazine

Share This Page

If you liked this page, please share it with others! You can use the links to share on Facebook, Twitter, LinkedIn, Pinterest, and Email. Ther is also an RSS feed to get updates for the website.

Related articles

How to Make a 'Load More' Button in jQuery and AJAX - Codewiz.au

How to Make a 'Load More' Button in jQuery and AJAX

My First Ever Computer Program — You Can Try It Too - Codewiz.au

My First Ever Computer Program — You Can Try It Too

Running Python In Your Browser with Pyodide (Widescreen) - Codewiz.au

Running Python In Your Browser with Pyodide (Widescreen)