You are here: Home » Tutorials » for HotPotatoes » Pop-up Glosses

Glosses in HotPotatoes exercises (text and image)

Posted by Stan Bogdanov on 01 November 2007 - 16:44
Last updated 17 May 2009 - 08:49

See a demo exercise Watch a demo

Many of us teachers will love glosses in HotPotatoes exercises. Here's one way.

Preparation

First, create a folder and call it glosses. Then, download this popup.js file and save it in the folder you just created. (Right-click -> Save Target As/Save Link As)

The CSS for the gloss pop-up

Launch HotPotatoes and input your data as usual. Open the Custom tab in the Configuartion dialogue box. Find the text field "Code for insertion into the <head> tag" and paste the following CSS code. Then save and create your HotPotato exercise.htm in the folder glosses. 

<style type="text/css">
#dhtmltooltip{
 position: absolute;
 width: 150px;
 border-left: 5px solid green;     /* To change the colours  */
 border-right: 1px solid #565656;  /* to match your style,   */
 border-top:   1px solid #565656;  /* reassign your custom   */
 border-bottom: 1px solid #565656; /*  colour values here.   */
 padding: 5px;
 background-color: #e0ffde;
 visibility: hidden;
 z-index: 100;
 /* The line below gives rounded edges in Firefox ...*/
 -moz-border-radius:6px;
 /* ... and transparency ...*/
 opacity:0.7;
 -khtml-opacity: 0.7;
 -moz-opacity: 0.7;
 
 /* The lines below should always appear last within this CSS*/
  filter:alpha(opacity=70); /* transparency in IE */
 /* Remove the lines below to remove the shadow, */
 /* which is only visible in Internet Explorer. */
 filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
 }
</style>

The colors of the background of the pop up and the borders should match those of the exercise, so change them to your taste. You don't want pink background with a green colour scheme of the exercise. Or you do?

Save and output your exercise as a web page (.htm) in the glosses folder.

The Javascript file

This is the file that does the magic when you mouse over a glossed item. Now, open your exercise (.htm) - the web page activity - in Notepad or a HTML Editor. We need to link to the Javascript popup.js below the <body> tag like this: 
<script type="text/javascript" src="popup.js"></script>

Putting it to work

Next, place this line immediately below the <body> tag: <div id="dhtmltooltip"></div>

Having in mind all the previous steps, you should have the following:

...
</head>
<body onload="StartUp();" id="TheBody">
<div id="dhtmltooltip"></div>
<script type="text/javascript" src="popup.js"></script>
...

That was easy, but it's not the end yet. Now we need to gloss the word(s) and/or phrase(s). Here's how to do it.

The glosses

Still with the htm file open in the Text or HTML editor, find the word(s) you want to gloss and make an empty link like this:

<a href="#">word to gloss</a>

Let's now add the "onmouseover" and "onmouseout" event handlers:

<a href="#" onmouseover="ddrivetip('text to display;',
 'optional background color','optional popup width')"
onmouseout="hideddrivetip()">word to gloss</a>

Change text to display with the explanation of the glossed item. The semicolon (;) must stay!

As written, the background color and popup width values are optional and you can leave them blank - the default values will be used. An example with red background colour and custom width of 300px is:

<a href="#" onmouseover="ddrivetip('text to display;','#ff0000','300')"
onmouseout="hideddrivetip()">word to gloss</a>

Repeat these steps for every item you want to gloss.

Notes

If the text in the popup contains apostrophes ('), be sure to backslash them first, like this ("John\'s Site"), or an error will occur.

If you want to validate your page and be fully XHML compliant, make sure you 'escape' certain characters in the gloss description, like angle brackets, e.g.:
 <  becomes  &lt; 
 >  becomes  &gt; 
double escape the & with & a m p ;

Related articles:





Rate this:

  • Currently3.00243902439/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Votes: 410

Share it:

Windows Live

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
Stan
Posts: 1
Comment
OH!! and glossing text with images and text
Reply #3 on : Sun December 30, 2007, 21:17:14
Thank you both Natasa and Erik! I definitely need to rework the tutorial (and review the others) to make it/them clearer - a lock-step approach will be more suitable. Your comments will surely help me improve these pages for the others that will be coming here.

Congratulations, Erik, on making your first 'glossed' exercise, though! :-)
The css insertion part is fixed.
Stan
Last Edit: January 06, 2008, 13:44:02 by admin  
Erik Michiels
Posts: 1
Comment
glossing text with images and text
Reply #2 on : Sun December 30, 2007, 13:35:32
Stan,

however much I liked the explanation of the audio glosses, I've cursed the explanation on the "Glossing text with images and text"-section. Don't get me wrong; I greatly appreciate your willingness and time of sharing your knowledge/tricks to create splendid things, but as I've mentioned before, some (a lot of?) people need very-very-very detailed explanation. As I tried to make such a "Glossing text with images and text"-exercise, I immediately ran into a problem inserting the CSS code. After two hours(!!!) of searching, I discovered that in the CSS for the gloss pop-up on your site the <style type="text/css"> and </style> are missing. Now you could say that this is basicknowledge, but for nitwits like me this is soooo crucial. I can basically read codes and gradually I'm getting to understand them), so you may understand that the slightest things that allow more than one interpretation, drive me nuts. In the "Putting it to work"-section, you describe where the script must be placed; but can this be done in a particular place in a hotpot or does one need an html-editor (in which case it should be done after the hotpot-exercise is generated) ? And finally, in the "The Glosses" section, I can't find a way to make an image pop up....
I hope I don't come across as a nag, but being a teacher myself, I sometimes forget too, that not all of my students are at the same level, and therefor I risk to omit things that seem evident for everybody, except for the weakest ones...
Nevertheless, you're doing a great job (on the newsgroup as well) and I wish you all the best 2008 can offer

Kind regards

Erik
tamutka
Posts: 1
Comment
OH!!
Reply #1 on : Sat December 29, 2007, 18:34:53
Please, Stan, I am an ignorant tipe.
I simply do not know where to start. I made The CSS for the gloss pop-up, but all after is so unknown.
Where is this?
below the <body> tag like this:

Where I find this?
Next, place this line immediately below the <body> tag: <div id="dhtmltooltip"></div>

Having in mind all the previous steps, you should have the following:
And so on and so on.
Please ... and do not be angry with me!
Regards, Natasa

Feedback Form
Feedback Analytics