SEMA Conference, September, 2000
John Kundert-Gibbs, Director
Digital Production Arts
Clemson University
Creating Interactive Glosses and Sounds:
Chaucer’s The Canterbury Tales:
General Introduction to The Wife of Bath
A few years ago, creating the page seen above would have taken a great deal of programming knowledge, as well as a good deal of time. Thanks to new automating software, however, the process today is much more streamlined, and even those of us who are unfamiliar with computer programming can create effective learning tools such as this very rapidly. The following is an outline of how I created the page (the real version of which you can see here). While I don’t go into every detail, you should be able to follow along, using this work as a guide to help you create your own electronic texts. Note that I have utilized several different interactive methods for glossing. You might well prefer to stick to one method only for a given page. There is also a list of the tools needed to create these pages, along with approximate academic pricing for said tools.
Gather your source material, including original text, glosses, images and sounds. I prefer to type all text into a separate text editor, but you can enter the text directly into Macromedia’s Dreamweaver when the time comes as well. You can also capture electronic texts from web pages, but be sure you’re not violating any copyright rules.
For images, use Photoshop to import online or scanned images (see the Wilton Diptych tutorial for more on how to do this).
To import sounds, you can either get the sounds online (again, check for copyright), or record/import them yourself. I used Macromedia’s SoundEdit 16 to digitize the sounds for this page, using a tape deck and the audio-in jack on my Macintosh. You can also import tracks from a CD (click the CD button on SoundEdit 16’s tool bar to import a CD track), or even record your own voice as you read the text. In the case of recording, set your sound input to the Microphone input (or the line-in for a tape player), and, while speaking or playing the reading, press record on the audio controls palette.
When you press stop, you will have a recording of your text that you can then cut, copy and paste into smaller chunks to use as your sound files.
To copy pieces of the sound file into another document, just click-drag a blue selection around the portion of the sound you wish to copy, then use Edit>Copy to copy that piece, create a new sound document (File>New) and paste into this new document. Repeat this procedure for all your sound bites.
In order to save disk space, you should compress your sound files heavily (using Modify>Sound Format). I recommend the following settings: set the sample rate to 11.025 KHz, the sample size keep at 16 bits, and use the IMA/ADPCM compressor at 4:1 to precompress the sound.
Save all the sound files in a Sounds folder (and all the images files in an Images folder) for later use.
Open Dreamweaver and create a new document. At the top, type in any general information about the page (e.g., a title).
If you wish to use menu drop-down items (the bars you can pull down to reveal a word’s gloss), you must first create a form for your document (if not, then don’t worry about this step). To create a form, simply choose Insert>Form and a red outline will appear in your document. All your text will fall within this form, so be sure the bottom of the red box stays below what you’re typing.
Create a table to hold all your text. Set the rows to 3 and columns to 4, width to around 700 pixels (not percent!), and border to 0.
This will create a blank table that looks as follows:
Note: if at any time you wish to add or remove rows or columns to you table, just go to Modify>Table> then choose the action you wish to perform (e.g., removing a column).
Fill in the top row of the table with general information about what will be in each column (in this case, the Middle English, Play a sound, the line number, and notes about the text). Then drag the first column over a bit so you have more space
and either type in or copy-paste your text into the left most column.
Save your work--it’s a good habit to do this from time to time!
Place your line numbers
in the third column, then place a small icon in the second column wherever a
separate sound clip is to denote playing the text. If you cannot find one yourself,
just use this one (hold down the mouse button (Mac) or right click (Windows),
and choose “Save Image As...” to save this image to your disk): 
Leave the fourth column blank for now--we will use layers to fill it later.
In the third row, enter other features, like “play all” and “translate passage” (which will translate the passage into modern English). In the end, your document should appear as follows:
We now need to add our interactive glosses. We will begin with the simplest (but, in my mind, least attractive) method: adding a menu form element to allow a reader to see a new word’s definition. This particular method works best when the translation of a word is also a single word.
For our example, let’s translate the word scathe (in the second line) into unfortunate. Place your cursor before the word scathe, and choose Insert>Form Object>List/Menu. A blank text box will appear. In the properties palette, choose a the menu type, and click on List Values... to enter first the word scathe (the original text) and then unfortunate--then click Done. Finally, in the palette, highlight scathe as the “Initially Selected” option, as this image shows.
Finally, erase the original instance of the word scathe, which you have now replaced.
Repeat this step for all words you wish to translate in this fashion.
At any time you can preview your work in the default web browser simply by pressing the F12 key.
Let us now add a pop-up dialogue that will appear when a reader clicks on a highlighted word. In our example, let’s create a message that appears when the reader clicks the words “offrynge bifore” that states, “precedence in church was apparently important in this time period”.
The first step is to make these words (offrynge bifore) into a hyperlink, to define them as “different” from the standard text. To do this, highlight the words, then, in the inspector palette, type in a hyperlink in the URL field (here I just made a link back to the page itself, as I don’t want the reader linking to a different page).
Now that the link has been set up (with the words still highlighted), go to the behaviors palette (Window>Behaviors) and click the + button, then choose pop-up message from the list of optional behaviors. In the message dialogue that appears, type in the note you wish to make on the text. Click OK when you’re finished, then click on the new behavior in the behaviors palette, and (using the arrow in the middle of the line) choose “On Click” to select when the pop-up message will appear (in this case, when the reader clicks on the words).
Repeat this step for all instances where you wish to use a pop-up message.
At any time you can preview your work in the default web browser simply by pressing the F12 key.
Now we get to the most complex--yet elegant-- method of glossing text: using layers and a timeline to make notes appear and disappear as one drags the mouse over highlighted words. This method is best suited for longer notes (or for translating the entire passage, as the “translate passage” text will do). First, choose the word(s) you wish to add a note to--in our case “biside BATHE,” and make them a hyperlink (see step 6 above for how to do this).
With the words still selected, choose Insert>Layer, then, in the inspector palette, choose LAYER from the Tag menu (this is an important step--don’t forget it!):
Next, move the layer into position, resize it to whatever size you need, and type in whatever text you wish for the note.
Now open the timeline (Window>Timeline), then drag the layer into the timeline:
Grab the last frame of the new layer in the timeline (the empty circle) and drag in left until the layer only takes up 3 frames.
What we will do next is render the this layer invisible on frame one (the default state) and frame 3 (this is to ensure the layer is invisible if other layers later in the timeline are shown), and visible in frame 2. Click on the first frame in your layer (the blue bar--be sure the first keyframe in this layer is highlighted dark blue), then, in the inspector palette, change the Vis option to hidden.
Click the third frame of the layer, and set the Vis to hidden as well. Finally, click the second frame in the layer, and set the Vis option to Show.
Repeat this process for all layers you wish to have appear when text is rolled over. Not that you will need to place your second layer in the timeline at frames 4-6 (not 1-3), so the two frames won’t overlap, causing both pieces of text to appear simultaneously.
The final step in this process is actually fairly easy. First, highlight the words that will trigger the note to appear (the ones you previously made into a hyperlink). Then open the behaviors palette (Window>Behaviors), click the + sign, and choose Timeline>Goto Timeline Frame. In the dialogue box, choose frame 2 (or whichever frame is visible for the appropriate layer). Click OK, then choose the behavior you just created, and choose On MouseOver from the triangle menu (if OnMouseOver doesn’t appear, be sure that “Events For” is set to “4.0 and later Browsers” in the Behaviors palette.
This behavior will make the text appear, but we need it to disappear as well as the mouse moves away. Thus we need a second behavior (Timeline>Goto Timeline Frame; then choose frame 1), and we need to attach this behavior to the On MouseOut event via the triangle menu. When you are finished, your behavior palette should look as follows:
Preview this behavior by pressing the F12 key to see your work in an internet browser.
Repeat for all other layers, bearing in mind that you need to go to different frames (whichever frame is defined as visible) for the OnMouseOver event, but always back to frame 1 on the OnMouseOut event.
Now let’s add sound to our files. Highlight any of the speaker images in your document, and, in the inspector palette, click the folder icon next to the URL text field. Find the sound you wish to play at this point, and click Open.
Note: be sure your sounds are in the same position relative to the main (html) document they will be in when you upload them to your server. For example, if you are working on myDoc.html within your documents folder, and the sounds will be in a sounds folder when they’re uploaded to your server, the sounds need to be in the folder sounds, contained in the folder documents before you link them to the speaker graphic. If you don’t do this, when you upload your files to the web, the browser won’t be able to find the sound files, and will return an error instead.
Next, twirl down the extras triangle in the inspector palette (far right bottom corner) and set the Target to blank (this causes the sound to play in a new browser window, so you can move it over and still see the text that’s being read).
Repeat this procedure for all your sounds, and preview in a web browser as needed.
Save your work and upload it to your web server via ftp or filesharing. If you don’t know how to do this for your campus, get help from your computer center the first time. Generally speaking, it is quite easy to upload files once you know how.
As the Dreamweaver document is already an html file, you don’t need to do anything but upload the file. However, if you use any sound or image files on the page, you will need to upload them as well (and in the correct sub-folder related to the html file--e.g. Sounds in a sounds folder, and images in an images folder).
When you finish with these steps, you should have an attractive, useful resource to help your students better understand middle or old English text passages.