| Jean LeLoup & Bob Ponterio
SUNY Cortland © 2008 |
Getting the JavaScript function into your page
To use a JavaScript function you must first get the JavaScript code into your own web page. It is possible to do this by pasting the code into the HTML code on your page or by keeping it in a separate file in your web site (much as you would a sound or image file) and telling your web page to point to it. We recommend putting the function into a .JS file, then telling your web page where to find this JavaScript source (SRC). The reason is that the same JS file can be used in many web pages and if it needs to be changed, the change can then be made in only one location instead of in all of your web pages. Take the example of Barbara Nelson's MODO function.
// JavaScript Document - Barbara Nelson - see credits function modo(Student, Correct) { var studentAnswer = Student.value; var correctAnswer = Correct; result = "" for (var c = 0; c< correctAnswer.length; c ++) { var CorrectX = correctAnswer.charAt(c); var StudentX = studentAnswer.charAt(c); if (CorrectX == StudentX) { result = result + CorrectX; } else { result = result + "="; } } Student.value = result; } |
This is a simple and elegant function, but if you are not a programmer, it probably doesn't mean anything to you. Don't worry about that; you don't have to understand it to use it. First we make a text file containing only the text of the MODO function. I will call the file modo.js and make a copy available so it can be downloaded and saved in your own web page folder. Note that it is freely available for your use, but if you use it, you must include a copy of professor Nelson's copyright notice in the modo.js file (as we have done here) and recognize the author in your web page.
| <!--UNLESS OTHERWISE INDICATED, THE EXERCISES ON THE SPANISH GRAMMAR SITE ARE COPYRIGHTED BY Barbara Kuczun Nelson © 1997-2001(bknelson@colby.edu), AND MAY NOT BE REPRODUCED, ALTERED, OR REDIRECTED WITHOUT THE EXPLICIT WRITTEN PERMISSION OF THE AUTHOR. IT CAN ONLY BE USED FOR NON-COMERCIAL EDUCATIONAL PURPOSES PROVIDED THAT THIS ORIGINAL NOTICE IS KEPT IN THE SCRIPT AND PROPER RECOGNITION IS GIVEN IN A VISIBLE PART OF THE WEB PAGE. --> |
In order to tell your web page where the modo.js file is located, you need to include a SCRIPT tag in your page header code. In Nvu, click on the Source tab and paste the SCRIPT somewhere between the <head> and </head> tags. In Dreamweaver, you can use the Code view or Split view to access the page header area and place the SCRIPT for the name name of the JavaScript Source code.
<script src="modo.js">
</script>
Here is an example of the use of this function. What does this do? You can type the answer in the textbox. When you click anywhere outside the textbox. the student response is compared to the correct answer, and any letters that are different from those of the correct answer are replaced by an equal sign "=". Clicking the button gives you the correct answer. Capital letters do matter. For non-Woody Guthrie fans, the answer is "car."
Let's see how to make this work in your web page. As we already said, the Script tag has told our web page where to find the source for the modo command. Now when we use modo, our browser knows what to do, even if you don't.
<form>
As Woody Guthrie said, Let's go drivin' in the
<INPUT NAME=item1 TYPE=text onchange="modo(this,
'car')" VALUE="" SIZE="9">
<INPUT NAME=Button1 TYPE=button onclick="(form.item1.value = 'car')"
VALUE="1">
!
</form>
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). 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 them all 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 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 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.
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.