HotPotatoes Tutorials and How-to's

You are here: Home » Tutorials » for HotPotatoes » Audio Crossword Tutorial - The Beginner's Way

Audio Crossword Tutorial - The Beginner's Way

Posted by Stan Bogdanov on 13 April 2006 - 07:00
Last updated 23 October 2008 - 20:29

Making an Audio Crossword - The Beginner's Way

This tutorial is for HotPotatoes users who are not very familiar with, or feel uncomfortable editing xHTML, CSS and Javascript. It will require downloading a few files from this page and some copying and pasting.

In the Audio Crosword, each clue will display an image of a sound icon which acts as a button. When pressed, this button will play an .mp3 file through a hidden flashmp3player.

Prerequisite

You only need to understand very little xHTML to make this exercises, namely, what links are, and how an image is made into a link. However, you will not need to create these yourself.

Preparation

Make a folder and put all the files below in it. To get the files, Right Click->Save Target As/Save Link As.

We need a javascript file - download player.js
a Flash mp3 Player (I'll use P.Y.G.'s player) - get it here player.swf
a chunk of code for the glosses (will come later in the tutorial)
an image file to act as a button (I'll use this image audio.gif, you may have your own)
and all the sound .mp3 files you want to use

Step 1: Starting out

Launch HotPotatoes and open JCross. Give a title to your crossword. Then, click on the grid maker and input all the words. Generate the crossword.

Step 2: Adding the clues

We'll now add the clues. In an ordinary crossword the clues are textual, while we're making an audio crossword. Therefore, our clue is a sound file. We also need to have something to act as a button, so that, when clicked, the sound can be heard.

For each clue, add this code, where sound.mp3 is the name of the .mp3 file for the clue of the word.
And the image audio.gif is the name of the image you want to use as a button.

<a href="javascript:void(0);" onclick="readtrack('sound.mp3');">
<img src="audio.gif" style="border: 0px;" alt="click to listen" />
</a>

Step 3: Putting and Hiding the player

We'll use the "Subtitles" text field to put our player.

Go to "Configuartion" -> Instructions. In the Subtitles text box type this code.

<!-- Start Javascript for player in the Subtitles,
not in the Title or the InstructionsDiv, because the instructions
are rewritten by the Feedback-->
<script type="text/javascript" src="player.js"></script>
<!-- End Javascript for player -->
<!-- Hiding the flash mp3 player  -->
<span id="hiddenPlayer" style="height:0px;"></span>
<!-- End hiding player -->

I chose the Subtitles text field because I rarely use it for exercises. And we don't want the player to be visible, so we hide it by styling it "height:0px;"

Tips from experience

Mind that!

1: The javascript file (player.js) must always be before the "hiddenPlayer" span element.

2: Don't be tempted to just copy-paste the code above. Or if you do, make sure it has no carriage returns. Carriage returns are converted into <br /> by HotPotatoes. So when you put the code into an exercise, it must run as a single line! Otherwise the code of the exercise gets broken and your exercise may not work!

Step 4: Finishing

Write clear instructions for the students so that they know how to play the sound.

Well, that's it. Now Save your file, output as a web page, and view it in your browser. Test ALL the clues. And don't forget to have ALL the files in the folder along with the exercise when you upload it to the server.