Audio Crossword Tutorial - Advanced

In this Audio Crosword, unlike in the "Beginner's Way", nothing will display as a clue, only an input box. When pressed, each number in the grid will play an .mp3 file through a hidden flashmp3player.

This tutorial is for HotPotatoes users who are familiar with the structure of the HotPotatoes output files (the web pages) and feel comfortable editing xHTML, CSS and some Javascript.

It will require downloading a few files from this page and some copying and pasting.
The approach is very similar to the approach in the Audio Crossword Tutorial - The Beginner's Way, so make sure you read that first. You'll notice it goes the same way in the beginning. Depending on the crossword you have, you are very likely to use the "Beginner's Way" approach.

However, in this Audio Crosword, unlike in the "Beginner's Way", nothing will display as a clue, only an input box. When pressed, each number in the grid will play an .mp3 file through a hidden flashmp3player.

See the demo Audio Crossword - Animal Sounds

Prerequisite

You need to understand and know xHTML to make this exercise work. You'll need to do some heavy editing, so be very careful.

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.

Note if you have words that start - Across AND Down - with the same number in the grid, because we'll apply the Beginner's approach for their clues. (Can you guess why?)

Step 2: 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! Mind that!

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

2: A reminder. If you copy-paste the code above, 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 3-A: Adding Clues for words with overlapping first letter

From Step 1, you noted which words have the same grid number in the crossword. Use the "Beginner's Way" to add the clues. For the clue for a word in a pair, 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>

If you haven't guessed why we're doing this, here's the explanation.

In the grid of the crossword, each number is a link. For this audio crossword, we use this same link (the number) to actually play the sounds (the .mp3 files). Where there are two words in the grid beginning with the same letter, there is only one link (one number - Across AND Down). So it is impossible to tell the player exactly which of two sounds to play. Instead, we use an image link acting as a button (displayed as a clue) to offer the 'click-to-play' functionality (image links to sounds - The Beginner's Way).

Should you make no use of the above technique (accidentally or not), let's move on.

Step 3-B: Adding Clues for words without overlapping first letter

For all the words that have no overlapping first letters, just type a space.

Note: Write clear instructions for the students so that they know how to play the sounds, especially if you have those sounds play both ways.

Save your file and output as a web page. Close JCross as we are done with it. We now come to editing the output file (the web page).

Editing the output file (the web page)

Open the exercise .htm file in a text editor (like Notepad), or better in an HTML Editor (like Notepad++). We're going to work directly with code, so be very careful. Scroll down, near the end of the document, and find this line:

<table class="CrosswordGrid">

Quite inderstandably, the crossword is laid out in the grid of a table. Blank cells are:

<td class="BlankCell">&nbsp;</td>

A cell where a word starts, looks something like this (in part):

<td class="NumLetterCell">
<a href="javascript:void(0);" class="GridNum" onclick="ShowClue(1,0,5)">1</a>

Each number in the grid will play a sound file. It is already a link:

<a href="javascript:void(0);"

and we have one "onclick" event

onclick="ShowClue(1,0,5)"

Here's the place to tell you about a javascript trick: how to make two things happen on one click. onclick="Do(A);Do(B);"

I'm telling you this because we have to add one more "onclick" event to play the sound file, i.e. readtrack('sound-1.mp3'); where sound-1.mp3 is the name of the file for that word.

The whole thing will look like this:

<td class="NumLetterCell">
<a href="javascript:void(0);" class="GridNum" onclick="ShowClue(1,0,5);readtrack('sound-1.mp3');">1</a>

In more human terms, what's happening is the following.
When you click on the number-link in the grid (here it's #1), the javascript will not refresh the page ("javascript:void(0);"); the mouse click a) will display the clue for #1 (ShowClue(1,0,5);) (in our case the clue is empty) AND b) will play the sound for #1 (readtrack('sound-1.mp3');).

Finishing

Repeat the above for every number in the grid. In other words, you'll only be adding

readtrack('sound-2.mp3');
readtrack('sound-3.mp3');
readtrack('sound-4.mp3');
... etc.

to the "onclick" part until you do all the numbers in the crossword.

Save the file and you're done. Test ALL numbers in the crossword. If there are no errors, each number will play the allocated sound.

Good luck! Comments are more than welcome!

Related tutorials:

By the time I polished and published this tutorial, Erik Michiels figured out for himself how to make such a crossword by looking at the demo Audio Crossword - Animal Sounds and he wrote his own How-to (not very different from this one, but visually enhanced with screenshots) and uploaded it to the Files section (0) of the !Yahoo hotpotatoesusers support group. See, it means it's not very difficult to make and audio crossword!