JavaScript and Forms

Forms and JavaScript
In this last section we will show the use of form objects and JavaScript to implement a simple question that is marked without the use of CGI, in other words, handled by the client side browser. This example works with any browser that supports JavaScript, such as Internet Explorer or Netscape Navigator. An advantage of implementing questionnaires this way is that a server and Internet connection is not required. The HTML pages are also capable of being placed on CD-ROM.

First off, we will develop a simple single question that is multi-choice. The code which resides in the <HEAD> section looks like,

<head>
<script language="JavaScript">
<!-- start of JavaScript hide
function checkq1( value ) {
	if( value == 1 )
		alert('');
	else if ( value == 2 ) 
		alert('');
	else if ( value == 3 )
		alert('');
	else
		alert('');
return true;
}
// -->
</script>
</head>

You can see from the above that there are four alert() statements, which correspond to one of four choices or answers to a question. The function checkq1() will be called when the user clicks on an answer for question one, and when that happens, a value (from 1 to 4) will be passed to checkq1().

To implement the actual question in HTML, we shall use a FORM statement and radio buttons. This is easy to implement, and allows us a multiple choice selection where only one choice can be selected.

The code for the question, which is placed in the body section, looks like,

<form name="Question1">
<p>1: </p>
<input type="radio" name="Q1" value="1" onclick="checkq1(1);"> <br>
<input type="radio" name="Q1" value="2" onclick="checkq1(2);"> <br>
<input type="radio" name="Q1" value="3" onclick="checkq1(3);"> <br>
<input type="radio" name="Q1" value="4" onclick="checkq1(4);"> <br>
</form>

Each question will have a different form name and a function associated with it. For example, the form Question1 is associated with the function checkq1(), the form Question2 is associated with the function checkq2(), and so on.

It is that easy to implement. Now lets look at an actual example. The code for the header section is as follows,

<head>
<script language="JavaScript">
<!-- start of JavaScript hide
function checkq1( value ) {
	if( value == 1 )
		alert('Correct.');
	else if ( value == 2 ) 
		alert('Incorrect, this is for C, not Pascal.');
	else if ( value == 3 )
		alert('Incorrect.');
	else
		alert('Incorrect. Basic uses REM, not Pascal.');
return true;
}

// -->
</script>
</head>

The code for the actual question, placed in the body section, looks like,

<form name="Question1">
<p>1. Comments are opened and closed with</p>
<input type="radio" name="Q1" value="1" onclick="checkq1(1);"> { }<br>
<input type="radio" name="Q1" value="2" onclick="checkq1(2);"> /* */<br>
<input type="radio" name="Q1" value="3" onclick="checkq1(3);"> ; ;<br>
<input type="radio" name="Q1" value="4" onclick="checkq1(4);"> REM<br>
</p>
</form>

And this is what it looks like, embedded in this page.

In order to add more questions, you simple copy the checkq1() function, and then rename the copy as checkq2(), and copy the HTML code for the form Question1 and rename the copy as Question2. You then change the alert() text strings and the question to reflect the new content. That is how easy it is to add multiple choice questions.

QUESTIONS WHICH HAVE MORE THAN ONE ANSWER

What about questions which have more than one correct answer, such as which TWO of the following. Well, radio buttons are no good. So we can use check boxes. However, in order to mark the question, we must have some way of invoking the function that marks the question, so we use a push button for this. When the user clicks on the button, it will call the function. A push button is necessary because you don't want the function called till all the selections have been made.

Inside the function that marks the question, it needs to access each element of the form (each alternative answer) and use compound relational statements which equate to the correct answer. Consider the following code placed in the head section.

<head>
<script language="JavaScript">
<!-- start of JavaScript hide
function checkq16( q16f ) {
	if( (q16f.Q16a.checked == true ) && ( q16f.Q16b.checked == false ) &&
	( q16f.Q16c.checked == true ) && ( q16f.Q16d.checked == false )) {
		alert('Correct.');
	}
	else
		alert('Incorrect.');
	return false;
}
// -->
</script>
</head>

The question, arranged as a form with checkboxes and the required pushbutton, looks like,

<form name="Question16" onSubmit="return checkq16(Question16)" >
<p>16: </p>
<input type="checkbox" name="Q16a"> <br>
<input type="checkbox" name="Q16b"> <br>
<input type="checkbox" name="Q16c"> <br>
<input type="checkbox" name="Q16d"> <br>
<input type="submit" value="Check answers for Q16">
</form>

The onSubmit code for the form calls the function associated with the question and passes the entire form to it. Inside the function that marks the question, each part of the form (q16a, Q16b and so on) is accessed. Now here is an actual example.

The correct answers are 1 and 3. This means that 2a and 2c are true, and 2b and 2d are false. If a checkbox is ticked, it is true; if it is unchecked, it is false. So we would expect the code inside the function which tests this question to look like,

function checkq2( q2f ) {
	if( (q2f.Q2a.checked == true ) && ( q2f.Q2b.checked == false ) && 
	( q2f.Q2c.checked == true ) && ( q2f.Q2d.checked == false )) {
		alert('Correct.');
	}
	else
		alert('Incorrect.');
return false;
}

And it does. If you view the source of this page, that is exactly what you will see. To implement questions of this type, you only need copy the examples on this page, and change the name of the form (Q2) , the name of the elements in the form (Q2a, Q2b etc.), the function associated with the form (checkq2), and the relational test inside the function to correspond with your choices.