Integrating Technology in the Second Language Classroom

   Answer

TEST

Dynamic HTML for controlling pop-ups within a window

We have seen how to use popup windows for glossing a text or providing feedback for student responses. These worked by opening up a new browser window for the new information. By using Dynamic HTML, we can create a controllable area within a page that can become visible or invisible, can be moved to any position, can accept new content, and generally can be dynamically modified as we wish.

The JavaScript needed to control the layer can be set inline with any element.
Annie ate a <a href="javascript:void(null)" onmouseover="document.getElementById('myLayer1').style.visibility = 'visible';" onmouseout="document.getElementById('myLayer1').style.visibility = 'hidden';">millefeuille</a>.


Annie ate a millefeuille.



Here the layer is defined by a <span> tag and contains an image (Note that doing it this way we would use a different layer with different content for each popup.):
<span id="myLayer1" STYLE="position: absolute; left: 301px; top: 388px; visibility: hidden;"><img src="glossing-popup-mille1.jpg" /></span>

We could also use the same layer to display varying content by changing the innerHTML property of the layer onmouseover. Using this technique, a single layer would be used for all of the popups on a page. (Note that we still haven't changed the position of the layer on the page in this example, so it will always appear inthe same place.)

onmouseover="document.getElementById('myLayer1').innerHTML = '<img src=\'glossing-popup-rel1.jpg\' />';"

Annie ate a religieuse.

A free JavaScript utility from DynamicDrive makes it possible to position a tooltip popup relative to the cursor. Utilities like this can be modified for style. http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

I won't include any details here. You need to follow the instructions provided by the company to include some code in the Head area, some in the Body area and some in any object that will be glossed. The initial setup is a bit complicated, but the instructions are clear and the utility works very well.

Tom a mangé une religieuse.

Tom a mang&eacute; <a onMouseover="ddrivetip('<img src=\'glossing-popup-rel1.jpg\' />','yellow', 245);"; onMouseout="hideddrivetip();" href="javascript:void(null)"> une religieuse. </a>

Note the way the image needs to be coded. Also note the background color and width of the popup (both of which are optional). Be very careful to follow the pattern of double & single quotes as well as /' (back-slash quote) within text strings.

And we can use the same tool to display text feedback.

What did Annie eat?

<a onMouseover="ddrivetip('Elle a mangé un millefeuille.' />','yellow', 245);"; onMouseout="hideddrivetip();" href="javascript:void(null)">What did Annie eat? </a>

 

As we have seen before, these popups can be attached to images. Here is an example that displays text:

And here displaying an image:

Sample gloss without text markups:

I prefer croissant for breakfast. A une religieuse is a great snack. My friends love a Paris-Brest for desert. We always get a bûche de noël for Christmas eve dinner.

Other options

A powerful utility for all sorts of popups is Tooltips, well worth its cost of about $35. More flexible for shapes, easier to combine images & text. : http://www.dyn-web.com/code/tooltips/

Many additional tooltip scripts are available.

http://jennifermadden.com/javascript/dhtml/dynamicLayerContent.html

A bit of free code by Will Bontrager: http://www.willmaster.com/blog/css/floating-layer-at-cursor-position.php

http://www.irt.org/articles/js088/

http://www.irt.org/articles/js202/

http://www.irt.org/articles/js116/

http://designshack.net/articles/javascript/25-useful-resources-for-creating-tooltips-with-javascript-or-css/