xHTML5 audio and video in HotPotatoes

Stan's picture
Submitted by Stan on Tue, 07/30/2013 - 22:12

Section 2.

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.

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 outlink 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 source folder.

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   with  .

Then in jcloze6.ht_, and jmatch6.ht_ search for the <form tag and change action="" to 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:

Original XHTML1.1 HotPotatoes source 
<?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" />
Changes 
<?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 <?xml version="1.0"encoding="utf-8"?>
- Remove the DTD form the DOCTYPE
- Add lang="en"
- Remove the http-equiv="Content-Type" content="text/html;
(the .xhtml pages are served as application/xhtml+xml)
and the charset=iso-8859-1" (all (x)html5 is utf-8 by default)
- self-close (all) the meta tag(s) <meta .... />

Resulting XHTML5 source code 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
[strDublinCoreMetadata]
<meta charset="utf-8" />

Self-closing tags

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" />

Images

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" />

Input boxes

The other self-closing tag that you'll find in HotPotatoes source code is the <input> tag.
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/xhtml+xml or 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 outlink. 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. Share your success stories!

Tags:

Discuss

Tweets Collection