| Jean LeLoup & Bob Ponterio SUNY Cortland © 2008 |
Using Javascript to program complex functions is beyond the scope of this course, but a single JavaScript expression can perform a useful function that will make your lesson far more interactive, allowing students to do something (for instance answer a question) and get immediate feedback. In this lesson, we will look at a basic JavaScript command built into a drop-down box, check box or radio button. Because we are using asimple, single JavaScript command, these techniques can be quite easily integrated into your own web pages following the instructions given below.
A group of Javascript commands can be placed into a web page as a function that performs a complex task, but 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 that we looked at in a previous lesson on Forms in Web Pages.
Feedback for drop-down boxes
We can use a single association between a Text Box and a Select object or drop-down box to profide feedback for those types of answers. In this case the JavaScript is a single command that we can build it right into the Select tag instead of putting it into a separate function. 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 into a form for the activity. 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. 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.
(Note that some web page editors make this a bit easier to do, but Nvu 1.0 has a bug than makes it safer to work with the code as we explain below.)
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.
<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 uing 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.
A drop-down box web page menu
You can do all sorts of things with this basic feature of the Select Object and a little JavaScript. For example, if your Option Values are web page URLs, you could use the following JavaScript line to replace the current web page (aka window.location) with a new page:
onChange="window.location=options[selectedIndex].value"
<form name="menuform" method="post" action="">
<select name="jump1" onChange="window.location=options[selectedIndex].value">
<OPTION VALUE="">? ? ?
<OPTION VALUE='http://web.cortland.edu/ponterior/'>My home page
<OPTION VALUE='http://www.cortland.edu/flteach/'>FLTEACH
<OPTION VALUE='http://www.cortland.edu/icc/'>ICC
<OPTION VALUE='http://www.cortland.edu/'>SUNY Cortland
<OPTION VALUE='http://www.cortland.edu/flteach/mm-course/mm-syl.html'>Tech course syllabus
</select>This turns the drop-down box into a menu that jumps to those pages. A line of Javascript can allow you to interactively change almost anything in a web page. Everything on a web page is an object that has properties, and you can use JavaScript to change many of those properties. Once you know some objects and their properties and values, you are only limited by your imagination.
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 passivly. 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.
Using
JavaScript and Forms
JavaScript
DHTML Tutorial
Beginning
JavaScript