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 KompoZer, click on the Source tab and paste the SCRIPT somewhere between the <head> and </head> tags towards the top of your page. You can use the Source or 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."
As Woody Guthrie said, Let's go drivin' in the
!
Romeo and Juliette was written by
!
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). 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.