JavaScript 13: Radio Buttons

First a Radio button test:

The JavaScript code is as follows:

<SCRIPT LANGUAGE="JavaScript">
function BoatTest() {
  if (document.testform2.boat[0].checked )  {alert("Correct");} 
  else { alert("Wrong");}
}
</SCRIPT>

Here we see a fairly standard if...else statement as in the previous lesson.

• The if word is followed by the condition in brackets. Here the condition is whether the state of the first radio button element on the FORM called 'Testform2' is set to 'checked'.
• The statement to be executed if the condition is true is in braces - {alert("Correct")}.
• The statement to be executed if the condition is false is also in braces - {alert("Wrong")}

This code is called from a FORM as follows:

<FORM NAME="testform2" onSubmit="BoatTest()">
Check the French word for 'boat'<P>
<INPUT TYPE="radio" NAME="boat" VALUE="">bateau
<INPUT TYPE="radio" NAME="boat" VALUE="">gateau
<INPUT TYPE="submit"><P>
</FORM>

The radio buttons are grouped by giving them the same name. There are in this case two objects of the same type and the same name distinguishable only by an index in square brackets - []. The technical name for such a structure is 'array'. The JavaScript function BoatTest() uses this to test whether the first button is checked and if so produces the message of 'correct'. The code testform2.boat[0].checked refers to the first element of the array of objects with the name 'boat' and which are found on the FORM called 'testform2'. As in C the indexing of arrays begins at element zero. The element testform2.boat[0] is not used in this example.

The Multiple Choice Vocabulary Tester

Choose the option you think is correct by clicking a radio button.

The Multiple Choice Picture Test

Choose the option you think is correct from the choices shown.

	Schiele Van Gogh Klimt
	Rothko Pollock Warhol
	Manet Monet Pissaro
	Tintoretto Bellini Poussin
	Van Gogh Dégas Braque
	Rothko Pollock Hofmann
	Tintoretto Botticelli Michelangelo
	Mondrian Kandinsky Arp
	Sisley Picasso Cézanne
	Picasso Dali De Chirico

The multiple choice format using radio buttons has been carried over from the previous example into a picture quiz. The answers this time are supplied in separate windows by clicking on the pictures themselves, a feature which provides you with the option of adding extra text and pictures to provide extra information about the pictures and artists in the test. This picture format could be used for a sequence of pictures from other subjects, for example Geography, History or Biology.

You have a number of techniques now which you can use to construct on-screen tests and these may be combined in a number of ways to provide an assortment of tests.

Return to Javascript Menu