xHTML5 audio and video in HotPotatoes
We now continue from Section 1. HTML5 audio and video with:
- XHTML5 audio and video in HotPotatoes
- XHTML5 HotPotatoes in Moodle with the HotPot and QuizPort modules
xHTML5 audio and video in HotPotatoes
After I validated HotPotatoes output with HTML5 audio and video as Polyglot markup* (both HTML5 and XHTML5), and after the discovery of how to validate Dublin Core meta data (see the two demo files below from the Taxonomy), Martin has decided to start porting HotPotatoes so the suite we all love could be given another 5 to 10 years of life. In the meantime, here are some things to consider if you'd like to get your HotPotatoes exercises ready for HTML5 audio and video.
- M XHTML5 Video Quiz served as xml - Validate as XHTML5 | Validate as HTML5
- M HTML5 Audio Note-taking served as xml - Validate as XHTML5 | Validate as HTML5
These are valid at the time of publication. (X)HTML5 is still in active development and changes are very likely to be made before it becomes Recommendation (scheduled for 2014). Changes are also very likely to happen to the Validators, W3C and Nu Validator.
* Polyglot markup is the overlap language of documents that are both valid HTML and well-formed XML.
Migrating the source code
There are some things that you need to change in the source files of your HotPotatoes
First, make a copy of your source folder and rename it to xhtml5-source. You'll need to manually change some code in the .ht_ files, so open the following ten files in an editor like Notepad++:
djmatch6.ht_ djmix6.ht_ fjmatch6.ht_ jmatch6.ht_ jmix6.ht_ jcross6.ht_ jcross6print.ht_ jcloze6.ht_ jquiz6.ht_ and masher.ht_
Some characters are reserved in HTML5. For example, you cannot use the greater than and less than signs or angle brackets within your text because the browser could mistake them for markup.
Do a global Search-Replace to replace all
jmatch6.ht_ search for the
<form tag and change
action="U+0020", the Unicode for 'space'. This is necessary because action cannot be empty in HTML5, and we use the XML compliant Unicode for a space. Just a small trick.
Next, go through all ten files and make the changes from xhtml1.1 to xhtml5 as shown below:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> [strDublinCoreMetadata] <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> [strDublinCoreMetadata] <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
- Remove the prolog
- Remove the DTD form the DOCTYPE
- Remove the
(the .xhtml pages are served as
charset=iso-8859-1" (all (x)html5 is utf-8 by default)
- self-close (all) the meta tag(s)
<meta .... />
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> [strDublinCoreMetadata] <meta charset="utf-8" />
In HTML5 void elements must self-close. In the HotPotatoes source code these are the
<input and the
<img tags. Logical! An image or an input box doesn't wrap any content but itself.
Dublin Core metadata
You've probably noticed the placeholder [strDublinCore]. At the time of exporting the web page from HotPotatoes this string is replaced by two more meta tags
<meta name="author" content="Created with Hot Potatoes by Half-Baked Software, registered to [Your Name]."></meta> <meta name="keywords" content="Hot Potatoes, Hot Potatoes, Half-Baked Software, Windows, University of Victoria"></meta>
As you can see these two meta tags are not HTML5 markup. Once again, after you've created your web page, edit the file and self-close the meta tags like this.
<meta name="author" content="Created with Hot Potatoes by Half-Baked Software, registered to [Your name]." /> <meta name="keywords" content="Hot Potatoes, Hot Potatoes, Half-Baked Software, Windows, University of Victoria" />
If you insert images from the interface, you have to edit the image code from this
<img src="image.png" with="250" height="250" alt="Alt text"></img>
to look like this:
<img src="image.png" with="250" height="250" alt="Alt text" />
The other self-closing tag that you'll find in HotPotatoes source code is the
So once more go through your source files and change all input tags from
<input ....></input> to
<input .... />.
Making the exercises
You're now ready to create your first XHTML5 exercise - open any of the potatoes, input all the data and the html5 code for audio or video (running as a single line so no extra <br /> tags break the code). To make HotPotatoes use the xhtml5 source files, press Ctrl+Alt+Shiht+S and choose the xhtml5-source folder, the one where the migrated source files live. Save and export. At that point, give the exercise the extension .xhtml! Why is that? Read on.
Serving the files
One last thing, XHTML5 files must be parsed as XML. Therefore, you have to serve these files as
application/xml. To do this, check your MIME Types once again, and if the MIME type isn't declared, add it to your server so that it can serve the
.xhtml pages as
application/xhtml+xml. In your
.htaccess file add this line
AddType application/xhtml+xml .xhtml
Upload and visit your new exercise to check it's working.
xHTML5 HotPotatoes in Moodle with the HotPot and QuizPort modules
Gordon Bateson, upon request, made HotPot & QuizPort in Moodle aware of XHTML5 audio and video . The only thing you need to do is create your xhtml5 exercise and upload it the usual way through the HotPot or QuizPort modules in Moodle. The modules will rewrite the URLs and your students will be able to enjoy the xhtml5 audio and video in your HotPotatoes exercises in their browsers (mobile ones too). And don't forget to upload all your media files along with the exercise.
Well that's all for now. Enjoy making your new XHTML5 HotPotatoes exercises. Looking forward to your comments or questions below. Share your success stories!