Annotating Text with Javascript
By Dennie Hoopingarner
It is possible to implement a sophisticated and robust annotation system using just a few lines of Javascript code
and standard HTML links. Words which are to be annotated are linked to the code, passing the reference to the annotation.
The annotation lies in the Javascript code, within an array.
The advantage to this approach is that the annotation can be expanded "on the fly" by adding annotations
to the array dynamically as the author desires. The text and the annotations are all within one file.
The output is to a neutral frame containing just a form field which serves as the landing point for the annotation
script's output. the minor disadvantage to this approach is using frames. Frames could be avoided at the expense
of losing the form field in long texts which must be scrolled.
The Javascript code looks like this:
<SCRIPT Language="Javascript">
function glossit(x) {
var glosses = new Array(
"search soul: to examine one's life",
"papacy: being pope, cf 'reign'",
"usher in: greet ceremoniously"
)
parent.Frame3.document.glossform.gloss.value = glosses[x];
}
</SCRIPT>
The lone function in the script, called "glossit," takes a value (x) from the link that calls the script.
The value of x in the hyperlink is a number corresponding to the position in the array that contains the gloss
for the word. Numbers in Javascript arrays begin with 0.
The array, which is called "glosses," contains three lines separated by commas. Using separate lines
is a courtesy to users of the code, who must edit the array to make new entries to the array as they customize
the script for their own use.
The script is called within the HTML file by using a standard hyperlink tag. An example looks like this:
<A HREF="javascript:glossit(1)">Papacy</A>
The <A HREF> and <A> tags are standard. Usually these tags
link to other HTML pages, but in this case, the tag links to the script, ("javascript:glossit(1)")
which causes the script to be run. The (1) tells the script to use the second item in the array (remember that
numbers in the array begin with 0, so number 1 is the second number in the array).
Users can create new annotation entries by doing two things. First, the annotation entry must be entered into the
array. Second, a link is added to a word or phrase in the text, making note of the position in the array of the
new annotation entry.
The system requirements for using this type of annotated text are low. Users must use a web browser which supports
frames (1996 technology) and Javascript (1995 technology). These low barriers to entry ensure that this method
can serve a wide audience of learners.
See Examples of the Script in Action: