You are here: Home » Tutorials » for HotPotatoes » Audio Glosses

Glosses in HotPotatoes exercises - audio

Posted by Stan Bogdanov on 11 December 2007 - 21:38
Last updated 23 October 2008 - 21:29

We've looked at glossing text with images and text. Now let's see how to gloss text with audio. See a demo exercise and an audio crossword first.

Acknowledgments

Based on Yvan Baptiste's Test de DewPlayer Invisible with some improvements.
Original script from Alsacréations
The afAMP Flashmp3player by Pierre-Yves Gosset a.k.a.(P.Y.G).

Preparation

  • We need a javascript file - download player.js (Right Click->Save Target As/Save Link As)
  • a Flash mp3 Player (I'll use P.Y.G.'s player) - get it here player.swf
  • a chunk of CSS code for the glosses (will come later in the tutorial)
  • and all the sound .mp3 files

Making the exercise

Open any potato as you usually do and enter your data as usual.

Adding the javascript for the player.

Let's put the script for the player. A good place is in the 'Exercises Subtitle:' text box, not the 'Instructions'. The instructions are rewritten by the 'Feedback' when the exercise is checked. So, put this code in the 'Subtitle' box: 

<!-- Start Javascript for player 
in the SubtitlesDiv, not in the InstructionsDiv,
because the instructions are rewritten by the Feedback-->
<script type="text/javascript" src="player.js"></script>
<!-- End Javascript for player -->

Hiding the player

Since we're glossing text, I'll have a separate text and will put the player as the very first thing in the 'Reading'. And we want the player hidden, so we set it to 0px by style="height:0px;"

<!-- Hiding the flash mp3 player  -->
<div id="hiddenPlayer" style="height:0px;"></div>
<!-- End hiding player -->

Adding the CSS. Styling the glosses

You need to signal to the student the presence of a gloss. Choose CSS declarations for 'colour', 'background colour' and 'hover', etc. which suit the colour scheme of your exercises so that the glosses are easily identifiable.

Now open the Custom tab in the Configuration dialogue box. Find the text field "Code for insertion into the <head> tag" and paste the following CSS code. 

<style type="text/css">
/* The CSS for Glosses*/
a:link.gloss , a:visited.gloss , a:active.gloss {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 border-bottom: 1px dashed orange;
 background-color: transparent;
 cursor: pointer;
 text-decoration: none;
 color: #aa0000;
 }
 
a:hover.gloss {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 border-bottom: 1px dashed #aa0000;
 background-color: white;
 cursor: pointer;
 text-decoration: none;
 color: orange;
 }
</style>

Making the glosses

No doubt you will want glosses of only one kind: either 'onclick' or 'onmouseover'. I suggest the onclick, since this gives the student the choice to click or not, eliminating at the same time incidentally mousing over glosses which the student didn't intend to trigger. Such unwanted 'mouseovers' can be very annoying, you can imagine.

Find the words or phrases you want to gloss and make them empty links like this: 
Text ...
 <a href="javascript:void(0);" onclick="readtrack('gloss_sound_1.mp3');" 
 class="gloss">glossed phrase</a> and glossed 
 <a href="javascript:void(0);" onclick="readtrack('gloss_sound_2.mp3');" 
 class="gloss">word</a> ... more text

If you want the sound to be heard when mousing over the gloss, just replace 'onclick' with 'onmouseover'. However, you should include 'Instructions' for the student how to trigger the gloss.

Last, save the exercise and output to a web page; preview it in the browser and test the glosses.
When you upload to the server, make sure you have ALL the files - mp3's, player.swf and player.js script.

Well, that's it. If you are successful or you have problems, drop a line here. Good luck and come back soon.

Related articles:





Rate this:

  • Currently3.10075566751/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Votes: 397

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:
 
siteadmin
Posts: 1
Comment
re: just did this gloss match
Reply #3 on : Sat April 19, 2008, 21:09:03
Good job, Joan! That's great! And thanks for the feedback.
joan ripoll
Posts: 2
Comment
just did this gloss match
Reply #2 on : Sat April 19, 2008, 13:16:29
it really worked, thank you. I'm including this link and hope you like it.
http://baladre.info/english/sedaviwebfront/conversationmatch1.htm
Erik Michiels
Posts: 2
Comment
audio glosses
Reply #1 on : Sun December 30, 2007, 12:37:52
Stan,
this is a truly remarkable exercise; what I (newbie) particularly like is the detail and accuracy of the explanation of the audio glosses exercise on your site. People like me often find things quite complicated, and if not well explained step by step, they often screw things up. But not in this case; all works well the way you've explained: I've tried several Hotpots and aQuandary; no problemo, except in JMIX (but honestly I don't see the use of audio glosses in this kind of exercise). However I can't reconstruct a crosswords with audioglosses since JCROSS hasn't got that many places where the required codes need to be inserted (or does one need a html-editor?) Could you please explain more detailed how it's done, or even post the JCROSS data-file & exercise on the hotpotatoesusers newsgroup (or mail them to me)?

Kind regards

Erik

Feedback Form
Feedback Analytics