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.
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
You need to understand and know xHTML to make this exercise work. You'll need to do some heavy editing, so be very careful.
Make a folder and put all the files below in it. To get the files, Right Click->Save Target As/Save Link As.
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?)
We'll use the "Subtitles" text field to put our player. Go to "Configuartion" -> Instructions. In the Subtitles text box type this code.
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;"
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!
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.
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.
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).
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:
Quite inderstandably, the crossword is laid out in the grid of a table. Blank cells are:
<td class="BlankCell"> </td>
A cell where a word starts, looks something like this (in part):
Each number in the grid will play a sound file. It is already a link:
and we have one "onclick" event
I'm telling you this because we have to add one more "onclick" event to play the sound file, i.e.
sound-1.mp3 is the name of the file for that word.
The whole thing will look like this:
In more human terms, what's happening is the following.
ShowClue(1,0,5);) (in our case the clue is empty) AND b) will play the sound for #1 (
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!
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!