| Jean LeLoup & Bob Ponterio SUNY Cortland © 2015 |
Using Javascript to program complex functions is far beyond the scope of this course. However, a single JavaScript expression can perform a useful, simple function that will make your lesson far more interactive. A form field with a bit if code embedded can allow students to do something (for instance answer a question) and get immediate feedback. In this lesson, we will look at a very basic JavaScript command that can be built into a drop-down box, check box or radio button. Because we are using a simple, single JavaScript command, these techniques can be quite easily integrated into your own web pages with no knowledge of programming on your part, just by following the instructions given below. This can be done by copying and pasting a small amount of code (following these instructions) and making minor tweaks to get the object to do what you wish.
A group of Javascript commands can be placed into a web page as a function that performs a complex task. In this lesson, we will use a single Javascript command within an object on a page to make that object do something more than just sit there looking pretty ;-) The drop-down boxes that we will use here are form fields like the ones that we looked at in a previous lesson on Forms in Web Pages.
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.
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 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