AUDIO GLOSSES IN HOT POTATOES WITHOUT FLASH BUT WITH HTML5

Introduction

Before the advent of H5P for Moodle in 2017, the leading platform for designing interactive exercises for Moodle and other platforms was Hot Potatoes, version 6.0 at that time.

This authoring software tool is comprised of five applications that can create exercises for the web either in elearning platforms or just in normal web pages. The five applications are JQuiz, JCloze, JMix , JCross, and JMatch. All exercises done with these applications were based mainly on HTML, CSS, JavaScript. For adding sound or video the software used Flash Player. With this suite of tools, we could design a lot of exercises in any field of knowledge.

The potentiality of Hot Potatoes was increased with additional hacks or code add-ons carried out by enthusiastic programmers. In 2013, I bought a book written by professor Stan Bogdanov from the New Bulgarian University. The title of this book is “Hacking Hot Potatoes: The Cookbook”.

This book provides modifiable templates based on the original Hot Potatoes exercises that make it possible to increase the professor’s creativity by adding a more beautiful layout, different video and audio players based on the then popular Flash Player, and also some impressive tools for teaching languages such as the image, text and audio glosses. As a language professor, I found text and audio glosses very useful for English language learners.

The text glosses consisted in small pop-up boxes that appear around a word showing any annotation or explanation or meaning that we had previously coded for that specific word. Audio glosses are almost the same but when a student clicks or hovers on a word he can listen to its pronunciation or any audio that has been previously programmed. Image glosses show an image together with text. Recently, I was interested again in audio glosses. I wanted to emphasize the study of vocabulary because my students were having problems in that area. So, I began looking back to some of those add-ons and hacks contained in the book “Hacking Hot Potatoes: The Cookbook”.

The problem

I found that some students do the English learning exercises without noticing or without looking up the meaning or pronunciation of key vocabulary items. So, I wanted to provide an opportunity for rapidly getting to know the meaning of key terms or phrases. Text glosses are the perfect tool for achieving this objective. Whenever a new word appears in an exercise, the student can click over the word and then a pop-up box with the definition or Spanish equivalent appears around the clicked word. In fact, text glosses did not pose any programming problem.

The real problem was faced with the audio glosses. These are very good tools which allow students to listen to the pronunciation just by clicking over a word. However, audio glosses as described in professor Bogdanov’s book can’t be done currently because they are based on Flash Player and this software is not accepted by any browser anymore. The software was deprecated by March 14, 2021 because of security concerns.

I googled for an updated version of professor Bogdanov’s book based on Hot Potatoes 7 but there is not a new version. The tutorial for adding audio glosses has not been updated to HTML5. The available tutorials are still based on Flash.

The solution

Since I could not find an updated tutorial for the audio glosses, I decided to try to somewhat update the code. In order to get to know the architecture of the audio glosses I downloaded the example page provided at http://ewbooks.info/hotpot/assets/taxonomy/audio-glosses/audio-glosses-quiz.htm. Then I opened the audio-glosses-quiz.htm file in Adobe Dreamweaver in order to analyze the code.

In the analysis of the code, I found that the problem was not HTML nor CSS nor Javascript but the embedded code for playing .swf files or Flash Player inside the JavaScript function play (filename):

The old player

As I stated above, the audio glosses explained in Bogdanov’s book do not work currently because they are based on Flash Player or player.swf and this software is not currently supported by the main web browsers. Consequently, my first try in solving this problem was abandoning the old Flash player code, < object>, and adopting the new HTM5 audio element for embedding sound. Basically, the HTML5 code for embedding audio is the following:

Now the challenge for me was embedding the HTML5 audio element into the JavaScript function play(filename) shown above.

The work consisted in deleting the old Flash player audio element and typing the HTML5 audio element inside the “play (filename)” JavaScript function.

Before writing the new code into the function, it is necessary to know if you want a visible player or a hidden one. Note that if you want to see the player, pause and volume controls in the sound player you have to add the controls attribute inside the < audio> element:

But if you want a hidden player then you have add the “autoplay” attribute. In my case, I wanted a hidden player because the sounds to be played are just individual words or phrases. Previously, somewhere in the html page, it is necessary to write the code for a hidden player:

This is related to the last part of play (filename) function.

The new player

The following is my updated to HTML5 version of the audio player:

As you can read in the code, I introduced two mouse events for audio glosses, onclick and onmouseover:

When working on the words you want to be automatically pronounced with a .mp3 sound file, then you can choose the desired event on the part of the user. If the user has to click over the word, then you have to use the onclick event; if you use the onmouseover event then whenever the user places the mouse pointer over the glossed word, it will automatically play the content of its respective .mp3 file.

Suppose you are a language professor and want your students to rapidly listen to the pronunciation of the word “someone” in English by just placing the mouse pointer on that word. The following is the code:

Here, the onmouseover event activates the player and plays the sound contained in the file 1.mp3 whenever the student puts the mouse pointer over the word “someone”.

If you prefer that the students click over the glossed word in order to listen to its pronunciation, then this is the code:

And this is a nice solution to the above explained problem with the audio glosses in Hot Potatoes exercises. Cheers!

Please, explore the audio and text glosses in the following inserted test page in order to have a better understanding of both. Words in bold type contain audio glosses and italicized words contain text glosses:

Conclusion

The original audio glosses designed by professor Bogdanov did not work anymore because they were based on Flash, a software that was deprecated in March 2021.

In this article I explain how to adapt the audio glosses to HTML5 audio element and make them work again.

You can continue to include audio glosses in your Hot Potatoes activities and finally edit the resulting HTML file in order to delete the old Flash audio element and include the new html5 audio element in the JavaScript “play (filename)” function. Audio glosses are of great help and work very well inside the Hot Potatoes activity pages because these pages contain additional JavaScript code to make them work. If you try to paste the code inside a page of a Moodle resource like “Book”, it will not work for security and compatibility reasons.

When trying to show audio glosses in a Moodle page you have insert a Hot Potatoes activity page inside the Moodle page with the help of the iframe tags. For exploring the different kinds of glosses, you can explore Bogdanov’s Add-ons page.

Cheers! My audio glosses work again, now.

References

Arneil, S. and Holmes, M. (2021). Hot Potatoes version 7.0.3.0. Canada: Half Baked Software Inc. Retrieved from http://hotpot.uvic.ca

Bogdanov, S. (2013). Hacking Hot Potatoes: The cookbook. New Bulgarian University.

Bogdanov, S. (2013). Glosses v2. Retrieved from: http://ewbooks.info/hotpot/assets/files/Glosses_v2.zip

Cárcamo, O. (2021). Cursos virtuales de Orlando Cárcamo. Online: https://elearning.orlandocarcamo.com

H5P.org (2016). About the project. Retrieved from: https://h5p.org/about-the-project

Richards, J.C and others (2012). Interchange 4th Edition Book 2. Cambridge University Press.