HTML5 audio and video with the Custom reading hack

Once you've learnt how to do HTML5 audio and video [Section 1] and [Section2], this tutorial will be really easy. Besides, the Custom reading hack will add much greater value to your range of exercises with HotPotatoes and will allow for unlimited possibilities to mix text, imagery, audio and video per question. The Custom reading works fine with text and images, but for some reason it doesn't load flash audio and video. This is no longer a problem with XHTML5! See a demo.

Introduction

The Custom reading hack is one of the undocumented features of HotPotatoes. It works with JQuiz. You can find the instructions for the hack in a file in your HotPotatoes installed folder called undoc.txt. The last several lines say:

Pressing Control+Shift+Z will insert the following code into the current textbox:
<div style="display: none;" class="HiddenReading"></div>
If any text is selected at the time of pressing the keys, it will be enclosed in the div. This is only useful in the Question field of JQuiz. Anything enclosed within this div will be shown in the reading text div when the question is displayed, enabling you to provide individual reading texts for each question. If you are using this, please note that the Show All Questions button will be hidden as soon as such a reading text is displayed, to avoid confusion, and don't forget to check the checkbox on the Reading Text screen to include a reading, otherwise there will be no reading text box in which to show the text.

I assume you've encoded all necessary audio (m4a, mp4, ogg, oga) and video (mp4, webm, ogv) files, so let's do!

Step 1

Open JQuiz, go to File->Add Reading text (or Ctrl+R) and check the box Include a reading text. Close the dialogue box.

Now add the questions and the answers (Multiple choice, Multi select, Short answer, Hybrid); input appropriate and informative feedback too.

In the Question box, below the question text, write (or Copy-Paste) the following code for audio or video:

HTML5 code for audio

<audio controls="controls" preload="auto"><source src="audio-file.m4a" type='audio/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="audio-file.oga" type='audio/ogg; codecs="vorbis"' />This is HTML5 audio! No audio playback capabilities! Flash fall back is NOT provided.></audio>

HTML5 code for video

<video controls="controls" width="320" height="240" preload="auto"><source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="video-file.webm" type='video/webm; codecs="vp8.0, vorbis"'/><source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />No HTML5 video playback capabilities. No Flash fallback either! Get a decent browser!</video>

Warning: Make sure all this code runs on a single line without carriage returns!

Here comes the hack. Select only the audio/video code and press simultaneously Control+Shift+Z, the html5 audio/video tag will be wrapped in a div so you'll get this:

<div style="display: none;" class="HiddenReading"><audio controls="controls" preload="auto"><source src="audio-file.m4a" type='audio/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="audio-file.oga" type='audio/ogg; codecs="vorbis"' />This is HTML5 audio! No audio playback capabilities! Flash fall back is NOT provided</audio></div>

Repeat this for all questions.

Step 2

Export the file and save it giving it the file extension .xhtml. Upload all dependent audio and video files along with the .xhtml exercise to you server and test the exercise.

Good luck, post your questions and drop a comment.