AUDIO GLOSSES IN HOT POTATOES WITHOUT FLASH BUT WITH HTML5
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.
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”.
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.
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.
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:
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:
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.
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.
Arneil, S. and Holmes, M. (2021). Hot Potatoes version 220.127.116.11. 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.