Integrating Technology in the Second Language Classroom

Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2015
Interactive Text Box Utility
Getting the JavaScript function into your page

Input tags (text box and button) are form objects. As usual, we must first set up the form (Insert/Form) and then make sure that all of our items are located within the form. Each item is composed of two Input Objects: the text box for the student response and the button for checking the answer.

The first Input tag is a text box. It must have a name to distinguish it from other text boxes in the same form. Having a name is also important because both the MODO function and the Button action need to refer to this specific text box by name in order to change it's contents or Value (the value of a text box is the text that appears in the box). The name can be almost anything, but we are using the name "item1" to remind us that this is the first item. OnChange= is a JavaScript command that says what to do when the focus changes from the text box to somewhere else (this means when we click on anything outside the box). Some versions of Internet Explorer can have trouble with OnChange= in some situations. In this case, you could also use OnBlur= instead. The result should be the same.

The command performed is Nelson's MODO function that does the magic we need to provide the feedback to the student. It compares what was typed in the textbox ("this") to the right answer ("car"). You can use Value= to place any initial text in the box if you wish, for instance to give the student the first letter, but we are leaving the box initially blank in this example. Size= controls how many letters wide the textbox will be; you should allow for more than enough to write the answer. I like to make all my boxes the same so students aren't using the size as an aid in figuring out the answer.

The second Input tag is a Button. We give it the name "button1" to remind ourselves that "button1" goes with "item1", and we give it the Value "1", which is what we see written on the button, for the same reason. The key action of the button is that when the button is clicked, a JavaScript command changes the value of the textbox called item1 (remember that we named the first textbox "item1"). In other words, this shows the student the correct answer if the student is lost. The value or text in the box will change from whatever it is to "car" (the same value that we already passed to the modo command). form.item1.value = 'car'

Don't change any of the quotation marks, single or double, in these commands. They must be exactly the way they are or the commands won't work. The reason is that quotation marks come in pairs, so we use singles within doubles to allow the computer to keep them straight.

For additional items in this form, we can copy and paste the textbox and button pair, but remember to change the names to "item2", "button2", Value="2", "item3", "button3", Value="3", etc. Otherwise it won't work!

<INPUT NAME=item2 TYPE=text onchange="modo(this, 'Shakespeare')" VALUE="" SIZE="15">
<INPUT NAME=Button2 TYPE=button onclick="(form.item2.value = 'Shakespeare')" VALUE="2">

If you have more than one set of questions on a page, you can use additional, separate forms to track those item numbers. IOW You can have several sets of questions 1 to 10 by placing each question set within its own form.

Note that it is possible to activate MODO when the student presses the ENTER key instead of when the student clicks outside the textbox.

<INPUT NAME=item3 TYPE=text onkeydown="if (event.keyCode == 13) modo(this, 'car')" VALUE="" SIZE="9">
<INPUT NAME=Button3 TYPE=button onclick="(form.item3.value = 'car')" VALUE="3">

As Woody Guthrie said, Let's go drivin' in the !


This is a simple yet very powerful function because it allows us to easily provide appropriate feedback to text input. Interaction is fairly easy when the student is simply clicking on an answer. Here the student is actually producing real language forms and checking the answer. This is pedagogically much more interesting because the student is producing language instead of just recognizing an answer.

Here is an example of an elementary French fill-in the blank activity using modo.

Return to Syllabus