Fill in the Blanks Quiz

4. Add the Dropdowns

All that remains to be done now is to add the form into your page that contains the dropdown lists and the "Go" button.

Let's start by coding the form itself with the button at the bottom of the form. The code for this follows simply substitute the appropriate next page to display when all of the answers are correct for 'next.htm'.

<form name="quiz" action="">
...
<p align="center"><input type="button" value="Go!"
onclick="if (test(this.form)) location.href = 'next.htm';
else location.href = top.location.href;" /></p>
</form>

The actual text of the quiz complete with the dropdowns goes in place of the ... in the code shown above. You can include all of the usual HTML to determine how you want the text laid out in paragraphs etc. you just replace the words that you want to test for with select boxes. For example the first line of the sample text was coded like this:

The important part of this code is the values that are assigned to each of the options in the list. The correct answer should have a value of "1" while all of the other options should have a value of "0". This will provide the script with sufficient information to be able to work out if all of the blanks have been filled out correctly.