Integrating Technology in the Second Language Classroom

  
Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2015
Interactive Utilities

Feedback for drop-down boxes

We can use a line of code to make an association between a Text Box and a Select object or drop-down box so that making a selection has an effect on the text box. This lets us provide feedback for those answers. In this case the JavaScript is a single command that we can build right into the Select tag.

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.

 

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

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
</SELECT>
<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.

The JavaScript part, that makes it all work by connecting the drop-down box to the text box, is a single line of code within the drop-down box Select tag:

onChange="form.feedback7.value = options[selectedIndex].value"

This says that for this Select object, if the contents of the drop-down box change, then copy the new Select Value ("Non" or "Bien!") into the value of the associated Text Box (that happens to be named "feedback7" in this case). Of course, the name that you give to the Text Box has to match the name that you use in the Javascript command. In our example we standardize the names of the drop-down boxes and the textboxes by using a different number for each set. This makes it easier for us to check that they all match. In this case pastry7 goes with feedback7, pastry8 goes with feedback8, etc.


Why are we doing this?

By building actions into the objects on your web pages, you can make them interactive. This is important because we know that students learn better when they manipulate information rather than just observing it passively. In these examples, we have seen that one can incorporate a single, simple JavaScript command right into an object using an onChange event. Some other useful JavaScript Events are onClick, onLoad, onMouseOver, onMouseOut, onSelect, onSubmit.

 


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.

Here is our French verb conjugation activity using a drop-down box:

Nous  à l'école.

Nous
<select name="verb1" onChange="form.feedback1.value = options[selectedIndex].value" size="1">
<option selected value="non">aller
<option value="non">vais
<option value="non">vas
<option value="non">va
<option value="Bien!">allons
<option value="non">allez
<option value="non">vont
</select>
à l'école.
<INPUT NAME="feedback1" SIZE=6 VALUE=" ">

In this case, we have given the Select Object the name: "verb1". The onChange event uses JavaScript to put the selected value of the drop-down box into the feedback1 Text Box whenever the value of the drop-down box is changed. This works just like our French pastry example above.

And here is a similar question item, but this time we are using radio buttons instead:

Ils _________ à l'école.

vais vas va allons allez vont

Ils_________ à l'école.
<INPUT NAME="feedback2" SIZE=6 VALUE=" ">
<p>
<input name="verb2" type="radio" value="non" onClick="form.feedback2.value = value">vais
<input name="verb2" type="radio" value="non" onClick="form.feedback2.value = value">vas
<input name="verb2" type="radio" value="non" onClick="form.feedback2.value = value">va
<input name="verb2" type="radio" value="non" onClick="form.feedback2.value = value">allons
<input name="verb2" type="radio" value="non" onClick="form.feedback2.value = value">allez
<input name="verb2" type="radio" value="Bien!" onClick="form.feedback2.value = value">vont

Radio buttons work differently than drop-down boxes. The value of each radio button never changes; what does change is whether or not it has been clicked. We can use the onClick event of each individual radio button to copy that button's value ("non or "Bien!") into the feedback2 Text Box whenever someone clicks on that particular radio button.
Note that all of the radio buttons in a group have the same name, and only one of them can be selected at a time.

Processing checkboxes can be more complicated because more than one of them may be checked, so we won't get into them here.

 


Here are some sites that could help if you wish to learn more about Javascript.

Using JavaScript and Forms
DHTML goodies
DHTML video tutorial
Beginning JavaScript
Javascript Kit



Return to Syllabus