|Jean LeLoup & Bob Ponterio
Feedback for drop-down boxes
In the following activity, you select the name of the pastry from the drop-down box. If the selected name is correct, the word "Bien!" appears in the textbox next to the item; if the answer is wrong, the word "Non" appears.
The two keys to making this activity work are first to use the Value of the Select items ("Non", "Bien!") to fill a Textbox associated with that particular Select object (i.e. drop-down box). Of course, as with all form elements, we must put all of the items (form fields) in this activity inside of a form for the activity. For simplicity, a single form can cover the entire web page. This ensures that all names used are unique within the form and can be referenced in relation to this form. This is also useful if you later collect several different activities in a single web page. Some people might prefer a separate form for each activity. (This could be useful if you have several activities with objects that happen to have the same name.)
So the first thing to do is insert the form, then put any elements within that form. We will number the items to help us keep track of them, though numbering that is visible to the end-user is not necessary if you prefer no numbering. For instance, you might prefer to set up your activity in paragraph format for better contextualization. In other words, the numbering is for the computer, not necessarily for the student.
(Note that some web page editors make this a bit easier to do, but KompoZer has a bug than makes it safer to work with the code as we explain below - though this may change with updates.)
Here is some HTML code that would create item number 7:
<SELECT name="pastry7" onChange="form.feedback7.value = options[selectedIndex].value">
<OPTION VALUE="">? ? ?
<OPTION VALUE='Non'>un pain au chocolat
<OPTION VALUE='Bien!'>un pain aux raisins
<OPTION VALUE='Non'>un baba au rhum
<OPTION VALUE='Non'>un millefeuille
<OPTION VALUE='Non'>un Paris-Brest
<OPTION VALUE='Non'>un croissant
<OPTION VALUE='Non'>une religieuse
<INPUT NAME="feedback7" SIZE=6 VALUE=" ">
There are two associated objects for each item: the first is the Select object with its Option Values (drop-down box) and the second is a Text Box (Input Object). The display names for the elements in the drop-down list (e.g. "un pain au chocolat") follow their associated OptionValue (Bien!, Non).
<OPTION VALUE='Non'>un baba au rhum
The Option Values of the drop-down box are all either 'Non' or 'Bien!' indicating that the particular answer is wrong or right. The computer can then use this value for the feedback. Remember that each item in a Select Object appears two ways: what the user sees and what the computer sees. The Option Value is what the computer stores internally as the value of the Select Object after a selection, but the page will display the words following each Option Value tag, and that is what the student sees. To recap, the computer sees "Non" when the student sees "un pain au chocolat." Note that the first Option in our example is the default which appears in the box when the page is first loaded ("" / ???). Compare the working item 7 above with the HTML code above to see how this works.
onChange="form.feedback7.value = options[selectedIndex].value"
Why are we doing this?
Examples for other Form Elements
Let's look at the same examples of form elements that we examined in our previous lessons on Forms in Web Pages and Feedback to Student Response in a Table.
DHTML video tutorial
Return to Syllabus