Integrating Technology in the Second Language Classroom

Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2009

Interactive Feedback from an Array

At times you may wish to provide must more detailed feedback to the student than simply saying if the response is right or wrong.

Here is one approach to this. We will store all of the feedback for all of the possible responses in an Array that one could think of as a Lookup Table. We can then use a very simple Javascript routine built-into our web page to look up the feedback and display it in a Textbox or Text Area. No matter how the student selects a response (buttons, hypertext link, etc.), the selection can activate the appropriate feedback.

Programming in JavaScript is beyond the scope of this course, but by copying a few small pieces of JavaScript code, we can add a significant interactive component to an activity. In this lesson, will will examine a very useful bit of JavaScript code that employs a common programming structure called a lookup table. A good example of this can be found in a Spanish lesson by Barbara Nelson at Colby College ( Spanish Grammar Exercises). Professor Nelson has graciously encouraged other teachers to use her code in their own lessons, so please be sure to acknoledge the source. http://www.colby.edu/~bknelson/SLC/ricitos1.php

Getting the JavaScript function into your page

To use this JavaScript function, we will get the basic code into our web page by pasting it into the <Head> portion of the page. The actual content of the feedback will need to be edited for any activity or when an activity is changed, so keeping the data in the web page instead of putting it in a separate file will make editing simpler.

<SCRIPT Language="JavaScript">
<!-- //

var FBText = new Array();

//----------DATA STARTS--------
FBText[1] = "Yes. He does this often, not just now.";
FBText[2] = "No. He does this often, not just now.";
FBText[3] = "Yes. He does this often, not just now.";
FBText[4] = "No. He does this often, not just now.";
FBText[5] = "Yes. He does this often, not just now.";
FBText[6] = "No. He does this often, not just now.";
FBText[7] = "Yes. He does this often, not just now.";
FBText[8] = "No. He does this often, not just now.";
FBText[9] = "No. This is what he is doing this time.";
FBText[10] = "Yes. This is what he is doing this time.";
FBText[11] = "No. This is what he is doing this morning.";
FBText[12] = "Yes. This is what he is doing this morning.";
FBText[13] = "Yes. 'Need' is not an action verb.";
FBText[14] = "No. 'Need' is not an action verb. It's not something that is happening.";
FBText[15] = "No. This is hapening at the present moment, not at some other time.";
FBText[16] = "Yes. This is hapening at the present moment.";
FBText[17] = "Yes. This is what happens habitually.";
FBText[18] = "No. This is what happens habitually, not just right now.";
FBText[19] = "Yes. This is something that is generally true about her.";
FBText[20] = "No. 'Like' is not an action verb. It is generally true.";
FBText[21] = "No. This is hapening at the present moment, not at some other time.";
FBText[22] = "Yes. This is hapening at the present moment.";
FBText[23] = "No. This is something they will do in the near future.";
FBText[24] = "Yes. This is something they will do in the near future.";
FBText[25] = "No. This is something they are doing now.";
FBText[26] = "Yes. This is something they are doing now.";

function Lookup(X,which) {
var definition = FBText[X];
document.feedback.elements[which].value=definition
}

//-->
</script>

This uses an Array called FBText to store the feedback. An Array is just a storage area that can hold many items. Each item can be refererence by a number. FBText[1] will hold the feedback for the firstresponse, FBText[2] will hold the feedback for another response, FBText[3], FBText[4], etc. Just follow the format in the Data Starts area above (equals sign, spaces, quotation marks and semi-colons) and create as many items as needed by copying, pasting, and changing the item numbers. Make sure that they are numbered sequentially.

The code also includes a Lookup function that shows the selected feedback text in a particular textbox.

To display feedback from the Array, we will use a little JavaScript embedded in a link. Here is one for item #11. displaying in textbox #0:

<a href='javascript:Lookup(11,0)'>click here</a>

This uses the Lookup function to grab the appropriate feedback item from the Array (1, 2, 3, 4, etc.) and then display it in the appropriate textbox (numbered beginning with 0). To display the feedback, we need at least one textbox or text area. Don't forget that Form Fields must be located inside a Form. In this case, we are naming the Form feedback in order to reference the text boxes. Again, the details aren't important, just copy the code:

<form name="feedback">

click here
<a href='javascript:Lookup(11,0)'>click here</a>


<input type="text" name="feedback" size="70">

click here to put feedback #24 in the second textbox (1)
<a href='javascript:Lookup(24,1)'>click here</a>


<input type="text" name="feedback" size="70">

Press button to put feedback 5 into textbox 1
<a href='javascript:Lookup(5,1)'><img src="redbutton1.jpg" width="15" height="15" border="0"></a>

</form>


<input value="Clear" type="reset">

Finally, this Clear button may be used to clear the textboxes.

One final note. Now that we can see the various pieces of the puzzle, we can understand the key line of code in the JavaScript:

document.feedback.elements[which].value=definition

This means something like: "Look in this web page, in the Form named feedback, count the form elements (or form fields) up the the number represented by "which" (0, 1, 2, etc. Here we are counting the text boxes.), and replace this textbox's value with the expression that we just got from the Array.

Here is a sample page.


Return to Syllabus