Integrating Technology in the Second Language Classroom

  
Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2014
Glossing with Layers (DHTML)

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.


Sample answer feedback using onClick & onMouseout (along with the modo function for interactive text boxes)

In many cases a click can be better pedagogically than a mouseover. We don't want the right answer popping up accidentally. Because the answer disappears when the mouse moves, the student needs to remember the answer to type it into the response textbox.
Here is the code for one of these answer buttons using the DynamicDrive Tooltips:
<input name="Button1" type="button" onclick="ddrivetip('un baba au rhum','gold')" onmouseout="hideddrivetip()" value="1" />

Type the name of the pastry. Don't forget the article (un/une).

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.


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/

 



Return to Syllabus