Javascript Quiz

Creating An Online Quiz
Displaying The Questions
In the body of the page we first have to tell the browser that we are about to give it some JavaScript. This is done with the following line;

<script language="JavaScript" type="text/javascript">

Though most web browsers now support JavaScript there are some which do not, so that these browsers do not show all the code to the viewer we use the standard HTML hide tag with a line to describe why it's there;

<!-- Hide from non-JS browsers

The next two sections of code create functions for checking which answer has been chosen and displaying the results. These have to be read in first so that the 'Submit' button knows what to do but we will address the details of the code later in the document.

The next section we are interested in starts with a line to write the form tag to the page;

document.write('<form name="formwun">');

This could have been done outside of the JavaScript code but I have kept it in here so that if a non JS browser reads the page it ignores everything and does not leave form tags open. Later versions of the code may have better handling for non JS browsers.
The next line, as with the above, simply writes a regular HTML tag, in this case it is the TABLE tag;

document.write('<table border=1>');

The next section is a loop which repeats for each of the questions, since we do not want to start a new table for each question the above line is not within the loop;

for (var i=1; i<qnum+1; i++)

This says, set the value of the variable 'i' to be 1, keep looping while the value of 'i' is less than the amount of questions we have add one, add one to the value of 'i'. This applies to the code which follows and is contained in '{ }';

ansselect="selected"+i
document.write('<tr><td>'+quz[i]+'<\/td>');
document.write('<td>'+ansA[i]+' <input 
type="radio" name="'+ansselect+'" value=ansA[i]><\/td>');
document.write('<td>'+ansB[i]+' <input 
type="radio" name="'+ansselect+'" value=ansB[i]><\/td>');
document.write('<\/tr>');

The first line of the above code creates a variable to tie the two radio buttons together. Initially this variable will be 'selected1', on the second pass it will be 'seleced2'.

Line two writes the TR and TD tags for the first cell in the table and populates the cell with the variable quz[i]. Looking back at quiz1.js we see that quz[1] is the first question, quz[2] the second and so on.

Line three writes the TD tag for the second cell and populates the cell with a 'radio button'. Because we are using 'document.write' we are able to build the line dynamically. This cell displays 'ansA[i]' which is the first choice of answer for the question.

Line four writes the TD tag for the thir cell and populates the cell with a 'radio button'. Because we are using 'document.write' we are able to build the line dynamically. This cell displays 'ansB[i]' which is the second choice of answer for the question.

Line five writes the close tag for the TR. The '}' after this line signifies that this is the last line in the code which is contained within the 'for' loop. Once this line is done, go back to the first line in the block unless the 'for' loop is completed.

The above code writes the table which contains each question and the subsequent answers, the next line writes the HTML tag to close the table;

document.write('<\/table>');

With the questions and radio buttons set out we now need a button to submit the answers;

document.write('<input type="button" name="comp" 
value="Submit Answers" onclick="ansdisplay()">');

The button runs the script 'ansdisplay' which will be described later.
The next line of code writes the FORM close tag;

document.write('<\/form>');

Notice that when writing close tags from JavaScript you have to add an '\' before the '/', this is so that JavaScript does not mistake the '/' for the end of the script. You'll soon get used to this and will end up messing up all your HTML code too.
The next line is the end tag for the hiding for non JS browers;

// End Hiding Here -->

Finally to close the script;

</script>