Tutorial 1: Feedback Using Pull-Down Menus

Tutorial 1: Feedback Using Pull-Down Menus

The following tutorial presupposes that you have some familiarity with HTML authoring.
This an example of an exercise that provides immediate feedback to the user's answer in an input text field ("blank") next to the pull-down menu storing the options.
This exercise presents a dialogue, but it can be adapted for other grammatical or communicational goals.
Click here to see the finished product: template1.html

Some points to remember:

The JavaScript in this tutorial is optimized for Netscape Navigator 2 and higher. Performance using other browsers may vary.
JavaScript is case sensitive, so you will have to be consistent using lower case or capital letter when naming your functions or calling values from forms. That applies also to accented words.
Do not repeat names for functions or forms; if you do, you will get JavaScript alerts or just plain confusion in your feedback.
Although we haven't covered it here, it's always good practice to comment your scripts by inserting two slashes // next to your lines of coding.
Test often, as you create your functions, rather that waiting until you have written all of them. That way you can control better the debugging process.
If you are nesting JavaScript into HTML, you have to alternate between single quotes and double quotes. Like in step 10: onClick = "getExplanation('Explanation')"

Remember that all the functions of the JavaScript code must be placed between the <HEAD></HEAD> tags of your HTML document.
Like any other JavaScript coding, start by inserting these two lines right after the <HEAD> tag:

<SCRIPT LANGUAGE = "JavaScript">
<!--
This script has two different functions: one implements the feedback for each one of the options selected by the user from the pull-down menu; the second function gives the translation or explanation of an "unknown word" that appears in the HTML document as a link. Both feedback messages will show in the text field next to the sentence with the pull-down menu and/or the "unknown word."
The naming of the functions is pretty much arbitrary: choiceA is the name for the first pull-down menu; choiceB is for the second pull-down menu, etc.
Copy the first function that corresponds to the first pull-down menu in your script:

function choiceA(form) {
form.first_value.value = form.one.options[form.one.selectedIndex].value
}

What this function does is to write into a text field named "first_value" (the blank next to the pull-down menu) the value (or feedback that you wrote in the HTML for each of the possible options) of any selected option from a form (in this case, a pull-down menu) named "one." Again, all these names are arbitrary. So, when the user selects an item for the first pull-down menu, its feedback automatically appears in the blank next to it.
Let's now see the HTML of the first pull-down menu to see how the function is called from there:

<SELECT VALUE = "one" onChange="choiceA(this.form)">
<OPTION VALUE = "Choose an option.">--Choose an option--
<OPTION VALUE = "Feedback to First Option.">--First Option.
<OPTION VALUE = "Feedback to Second Option.">--Second option.
<OPTION VALUE = "Feedback to Third Option.">--Third option.
</SELECT>

As you can see here, "one" is the name of this form (pull-down menu). The function choiceA is present in the onChange event: what triggers the function when the user selects (changes) an option. For each one of the options you have a value attribute: this is where you write the feedback for each option. These different values are the feedback messages the user will see in the text filed.
The text field ("blank"). Further down in the HTML source, you can see the HTML for the text field:

<INPUT NAME = "first_value" SIZE = "35" VALUE = "Feedback.">

The name of this form element is "first_value." This is the name that we saw at the beginning of the scripting. The value attribute, that is, what appears in the "blank" when the web page is loaded, is the word "Feedback" (remember that you can change these names to something more significant to you). This content will change once the user selects an option form the pull-down menu.
This, then, takes care of the first function, the one that implements the feedback. You can create as many pull-down menus with their respective functions as you like.
Let's see now how we can add some extra vocabulary help to the exercise by creating a function that gives a translation, definition, or explanation of a word or concept. This function appears in the JavaScript coding after the two feedback functions:
function getExplanation(msg) {
document.forms[0].first_value.value = msg
document.forms[0].first_value.focus()
document.forms[0].first_value.select()
}

The function is called getExplanation, but you can call it any other way. Two important things to consider here:
- first_value corresponds to the first text field. That is, the message (translation, explanation, etc.) of this function will be shown in that field.
- focus and select selects (highlights) the content of the blank with its new feedback. This is useful to direct the attention of the user to the explanation.
- document.forms[0] indicates the order of the form in the HTML document. The index number of forms in a HTML document starts with "0". So, let's say that you want to include a link in a hypothetical fourth question: its form number would be 3, not 4. Following the naming order of the forms, you would have something like this:
  
  function getExplanation3(msg) {
  document.forms[3].fourth_value.value = msg
  document.forms[3].fourth_value.focus()
  document.forms[3].fourth_value.select()
  }
  
  You will have to change the name of the function itself (in this case, it could be getExplanation3 if this is the third link to which you are assigning this type of function), since functions cannot have identical names in JavaScript.
Finally, let's go back again into the HTML to see how we created the link for the "unknown _word". In our web page, that word appears in the first question or statement of the dialogue. The word is just name "unknown_word." This is the HTML for this link:
<A HREF = "#" onClick = "getExplanation('Explanation')">unknown_word</A>
- By adding the # sign to the <A HREF> tag, we are directing the link to the word itself.
- Then we add the JavaScript event onClick followed by the = sign and the function getExplanation. In the parentheses we write our explanation, translation, etc. for this particular word ("unknown_word"). When the user clicks on this link, the function getExplanation gets implemented, writing into the text field "first_value" the message "Explanation."
Now you can close your script with the lines:

// -->
</SCRIPT>
</HEAD>