Fill in the Blanks Quiz

This quiz is a bit different from the others that I have written so far. Instead of being presented with a question and several answers and being asked to choose the right one, this quiz presents a piece of text with a number of words left blank. Each of the omitted words is replaced by a drop down list of words and the person doing the quiz is required to select the correct word that goes in each spot to complete the text correctly.

You can have as many blanks in the text as you want, you just create a separate drop down list for each. Once someone has made all their selections they then press a "Go" button. If they are right then they will be taken to the next page, if not then an alert will popup telling them to "try again". You can of course make the quiz even more extensive by repeating the process on the next page.

The most obvious use for this quiz is where the text is presented in a foreign language where you can text the person's proficiency in that language by seeing if they can select the correct version of a word so as to make the text grammatically correct. Of course it could work equally well for testing English grammar. Another use would be for testing how well the person can remember the wording of a piece of text that they are supposed to have memorized.

Here is a simple example of the "fill in the blanks" quiz using a well known nursery rhyme and just three drop down lists to select answers from. All you need to do is to select the correct word that fits in each spot in the text from the words in each drop down list. I am sure that getting all of the answers right in this wont give you any trouble at all.

Hey diddle diddle, the cat and the ,
The cow jumped over the ,
The little dog laughed to see such fun
and the dish ran away with the .

The following dropdown is in a separate form and demonstrates that the script works even where you have multiple forms on the page with dropdowns in each. Only those in the quiz form will be included in the test.

The first step in adding a single page "fill in the blanks" quiz to your page is to copy the following script and attach it at the bottom of your page just before the </body> tag.


Once you have created your code you just save it to an external JavaScript file. I called mine quizq.js. You then link it into the head of your page using the following code:

<script type="text/javascript" src="quizq.js"></script>

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">
<p><input type="button" value="Go!"
onclick="if (test(this.form)) location.href = 'next.htm'; else location.href = top.location.href;"/></p>

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:

<p>Hey diddle diddle, the cat and the
<select name="q1">
<option value="0"></option>
<option value="0">mouse</option>
<option value="1">fiddle</option>
<option value="0">rat</option>
<option value="0">guitar</option>

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.

To convert this into a multi page fill in the blanks quiz we simply replace the JavaScript above with the following:


Each page of the quiz will load a new page after the quiz is entered and the results from that page as well as overall results so far will be passed to that page where they can be easily displayed. To display the results from the previous page of the quiz you simply add a span tag with an id where you want the results to be displayed - you can then display the result of the previous stage using:

document.getElementById('stagescore').innerHTML = stageResult();

Or yo can display the overall total so far using:

document.getElementById('finalscore').innerHTML =  finalResult();

The actual content of the fill in the blanks entries on each page are defined the same way as for the single page version.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow