Multiple Choice Exercises with Hints

Multiple Choice Questions with Hints

What you need to know: Basic HTML, Basic Forms
Difficulty level: 2

If this is your first time working with HTML forms you should first read the Basic Forms tutorial.

Multiple choice exercises, which includes True/False exercises, are the easiest type of self-test exercise you can create with HTML forms. You can use them in tutorials when you want your readers to test themselves on how well they grasp instructional content. You can intersperse the questions anywhere in a tutorial, you can group them together at the end of a tutorial, or you can write the exercises into a separate file. The last option is preferable because it makes your content modular and reusable. You can put a link to the exercise from anywhere in any tutorial. In this tutorial we will create a test with three questions. For each question we will also have an empty text input field where we will put hints for each option that the user clicks on.

First, lets look at the finished form with the questions, and then I will explain how it was created. You may want to download and print the text file for this form so that you can look at the HTML codes more conveniently.

Multiple Choice Questions

1.Where does the Pope live?
HINT:
Washington
Moscow
Rome
2. Which pair of words do NOT refer to clothing?
HINT:
T-shirt, skirt
textbook, refrigerator
sweater, coat
3. This was an easy quiz.
HINT:
True
False

Now let's see how the quiz was created. First, not that each questions consist of three parts: a) the prompt, or question; b) the hint field; and c) the set of possible choices. All three work together; that is, each hint box and each set of radio buttons is associated with the question in which they are grouped. This is important to remember when we begin to name these items.

Let's look at the first question.

1.Where does the Pope live?<BR>

After the text of the question we put the <BR> tag because we want the hint box to be positioned under the question:

HINT: <INPUT NAME="hints1" TYPE="TEXT" SIZE="50"><BR>

We name the hint box "hints1". Although we can name it anything we want, we want to associate the name of the box with the number of the question that it is grouped in. The size of our box is 50 characters long. You can make it any length, but it shouldn't be longer than about 70 characters; otherwise the box goes off the screen to the right. We use this box to place some text when the user clicks on a button. More on this below

Next we create each of the radio buttons followed by the text of each of the choices. Here is the code for the first button and the accompanying text:

<INPUT TYPE="RADIO" NAME="q1"

        onClick="(form.hints1.value='No. That\'s the home of the US

        President.')"> Washington<BR>

We name the button "q1" because we want to associate it with the first question. Notice that the content of the INPUT tag starts with a left bracket lt;, and ends with a right bracket >. The word Washington is outside of the INPUT tag. To this button we attach a short JavaScript script that is activated when a user clicks on it. That's what the onClick means.

Now let's look at the content of the onClick command. Notice that the content of the onClick command is enclosed with double quotations. The open quotation is followed by a (, which encloses some JavaScript code.

Now look at the string form.hints1.value=. First, notice that there is a period between each word in the string. Each word in the string makes a reference to something on the page. The word form makes a reference to the form in which the button is located. The word hints1 makes a reference to the text field at the top of the form, which is inside the form and which we created earlier and named hints1. The word value refers to the content that should be put inside the text box. The part that follows the = sign is the actual content we want placed in the box when the user clicks on the button. The content should be enclosed inside single quotations. It's the only way the script can recognize the text as content to be palced in the box, and not as part of the script. JavaScript knows that the stuff inside the single quotations should be treated as content.

Now look at the word That\'s. Notice that it has a backslash in front of the single quote. The backslash tells JavaScript to treat the following character, the single quote, as a literal, that is, as nothing more than a quotation mark, and not to treat it as a closing quote. If we didn't put the backslash there, JavaScript will think that the content consists of this part 'No. That', the part that is enclosed in single quotes, and it wouldn't know what to do with the text that follows. It will think that it's a JavaScript program, it will try to interpret it, and it will give you an error.

The most common error you will make in this type of exercise is the misplacing of parentheses and quotation marks. When I get an error, this is the first place I look for errors. I make sure that the first part of the script always looks like this onClick="(, and the last part looks like this ')">. It's also a good idea to avoid using quotations or parentheses inside the content string. If you absolutely need to, always make sure to precede these characters with a backslash.

Now let's look at the next two buttons that go with the first question.

<INPUT TYPE="RADIO" NAME="q1"

        onClick="(form.hints1.value='No. The Russian President

        lives there.')"> Moscow<BR>

<IINPUT TYPE="RADIO" NAME="q1"

        onClick="(form.hints1.value='Correct!')"> Rome<BR>

Notice that all three radio buttons will share the same name, "q1". That's because we want them grouped together. Also notice that the value for each onClick command will be different. You can vary the content depending on what kind of response you want the student to get when he/she clicks on a particular button.

Now lets look at the HTML code for the second question.

2. Which pair of words do NOT refer to clothing?<BR>

HINT: <INPUT NAME="hints2" TYPE="TEXT" SIZE="50"><BR>

<INPUT TYPE="RADIO" NAME="q2"

        onClick="(form.hints2.value='These are things you wear.')">

         T-shirt, skirt<BR>

<INPUT TYPE="RADIO" NAME="q2"

        onClick="(form.hints2.value='Correct!')"> textbook,

        refrigerator<BR>

<INPUT TYPE="RADIO" NAME="q2"

        onClick="(form.hints2.value='You wear these when it is cold.')">

        sweater, coat<BR>

Looking from the top, you should notice that the name for this textbox is now "hints2", and that's because we want to associate it with the second question. Similarly, the name of each of the buttons is now "q2". You should also notice that in the onClick command we indicate that the response to the onClick should be placed in the box named hints2.

As you can see, we can expand this quiz to as many questions as we want by simply giving a unique name to each text field and each set of radio buttons.

You may want to take a look at this Spanish page, which takes a different approach to multiple choice exercises and decide which a simpler way to write them.

What next?

Download the text file for this exercise
Create your own sample exercise with five multiple choice questions
Create real exercises for use by your students
Learn how to combine a variety of exercise types in a reading exercise

| Home |

Last Updated: February 04, 1998. Access: 21,268