Tutorial 2: Feedback Using Radio Buttons

Tutorial 2: Feedback Using Radio Buttons

The following tutorial presupposes that you have some familiarity with HTML authoring.
This is an example of an exercise that provides immediate feedback to the user's answer in a textarea box next to the radio buttons showing the options.
This template can be adapted for different grammatical or communicational goals.
Click here to see the finished product: template2.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 JavaScript functions 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 by clicking one of the radio button; 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 textarea box next to the sentence with the radio button options and/or the "unknown word."
The naming of the functions is pretty much arbitrary: choiceA is the name for the first set of radio buttons; choiceB is for the second set, etc.
Copy in your scrip the first function that corresponds to the first set of radio buttons:

function choiceA(form) {
for (var i = 0;i < form.one.length; i++) {
if (form.one[i].checked) {
break
}
}
document.forms[1].first.value = document.forms[0].one[i].value
}

What this function does is to to write into a textarea box named "first" the value (or feedback that you wrote in the HTML for each of the three different radio buttons) of the option selected (the radio button clicked, named "one"). When the user clicks on any of the three radio buttons of question 1, the feedback corresponding to that selection immediately appears in the textarea box.
Let's now see how this function is called from the HTML of the first set of radio buttons:

<INPUT TYPE = "radio" NAME = "one" VALUE = "Feedback for First Option." onClick = "choiceA(this.form)">First option<BR>
<INPUT TYPE = "radio" NAME = "one" VALUE = "Feedback for Second Option." onClick = "choiceA(this.form)">Second Option.<BR>
<INPUT TYPE = "radio" NAME = "one" VALUE = "Feedback for Third Option." onClick = "choiceA(this.form)">Third Option.

As you can see here, the three radio buttons are named "one". The function choiceA is present in the onClick event: when the user makes a selection by clicking on a radio button, its function is triggered. For each one of the radio buttons there is a value attribute: this is where you write the feedback for each radio button. These different values are the the feedback that the user will see in the textarea box.
The textarea box. Further down in the HTML source, you can see the HTML for the textarea box:

<TEXTAREA = "first" ROWS = "5" COLS = "25" WRAP = "on">Feedback</TEXTAREA>

The name of this textarea is "first." This is the name that we saw at the beginning of the scripting. Between the textarea tags <TEXTAREA></TEXTAREA> we place the word "Feedback," which appears inside the textarea box when the web page is loaded. This text will be substituted by the value of the radio buttons: in our script, "Feedback to First Option," "Feedback to Second Option," etc.
This, then, takes care of the first function, the one that implements the feedback. You can create as many radio buttons sets 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].second.value = msg
document.forms[0].second.focus()
document.forms[0].second.select()
}

The function is called getExplanation, but you can call it any other way. Two important things to consider here:
- second corresponds to the second textarea box. That is, the message (translation, explanation, etc.) of this function will be shown in the textarea box next to the second set of radio buttons.
- focus and select select (highlight) the content of textarea box 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 forms in the HTML document. The index number of forms in a HTML document starts with "0". In our script we only have one pair of <FORM></FORM> tags, at the beginning and at the end of the <TABLE></TABLE> tags. If we had more <FORM></FORM> tags, each one should be referred to with its number: [0], [1], [2]. etc.
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 second set of radio buttons. The word is just named "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>