Hot potatoes – using digital media
Here we introduce Hot Potatoes, a tool that allows you to create interactive quizzes with digital media (images, video, audio and Adobe flash content) which can be embedded into a range of teaching and learning contexts. We take a look at the technical considerations and then show you how to add your own digital media to a quiz.
The Hot Potatoes tool facilitates the building of a chosen quiz type, and creates the relevant files for you without you requiring technical knowledge. The quizzes can be built without the use of digital media, however we focus on using digital media to support the quiz process.
Digital media can be used in two ways within a quiz: either to provide context for a question, such as "what type of device is shown in the supporting video?" and "watch the video and then answer the question below" or as part of the question itself for example, "match all of the images correctly".
The Hot Potatoes suite of applications enables you to create the following types of quiz, all of which support the inclusion of digital media:
- Interactive multiple-choice
- Short-answer
- Jumbled-sentence
- Crossword
- Matching/ordering
- Gap-fill exercises
EXAMPLE
An example of a Hot Potatoes quiz with images and embedded video.
Considerations
General considerations
Hot Potatoes has no facility for editing media and as such all media must be prepared outside of Hot Potatoes.
Hot Potatoes allows inclusion through the use of embedding of external content such as Youtube videos. It is worth noting that any content hosted by a third party and embedded within Hot Potatoes carries an element of risk associated with reliability - it is outside of your control. It may be that the content is temporarily unavailable or completely removed. You need to manage this risk and have a contingency plan should this occur. Using the example of a Youtube video, managing the risk may mean that you need to keep a version of the video stored locally (copyright permitting) which can be used as a fallback, or a text-based replacement.
In addition to images, video and audio, Hot Potatoes allows the inclusion of content that uses the Adobe Flash file format. Adobe Flash supports any combination of images/video/audio so for the sake of simplicity, we will assume any Flash content includes all three media types.
Compatible file formats
Hot Potatoes acts as a container for inserted media and as such has no restriction on your choice of file format and neither does it offer controls for playback - it simply treats inserted media as a piece of content contained within the quiz. It is the user's computer that determines if it is able to display/playback the media.
Images
Hot Potatoes will accept the following image file format types:
- JPEG - best suited for photographic type images
- GIF/PNG - best suited for graphic type images
Video and audio
Audio
For the typical quiz where audio will be delivered over the web, the MP3 file type will give you the widest compatibility with users, combined with significant file-size savings. A suitable ballpark setting for non-critical audio material is 128kbps MP3, whose file size is less than 10% of an equivalent CD quality uncompressed file.
Video
As mentioned above, Hot Potatoes is a container and therefore does not control display/playback of video. The user's computer and its software will determine if it is able to display/playback the media.
The official Hot Potatoes guide suggests the Windows Media Video (WMV), Adobe Flash or QuickTime file formats. Windows Media player, which can playback the WMV file type, is widely available in educational institutions and may be the safest choice if your institution does not have a policy - check with IT services or your audiovisual department.
The freely available VLC player is a versatile open source video player that handles a wide range of video file types and may be a suitable player if anybody is unable to use the above.
Delivery considerations
Hot Potatoes will produce a standard HTML file which contains the quiz and layout. The use of HTML offers flexibility regarding delivery of the quiz. HTML can be used in a range of delivery platforms including the Virtual Learning Environment (VLE) or when publishing directly to the web.
By default the quiz will adapt to the width of the page in which you place the file - however, your images and video will remain at a fixed width and height. This makes choosing the file size dimensions for images and video a case of using your judgement, based on the most likely screen resolution and need of your users. For example, at the University of Bristol, where JISC Digital Media is based, the screen resolution is set to 1024x768 by default, so we would target the images and video to work within these constraints. This will ensure that the majority of users will enjoy the optimum experience - we would also check what happens at various smaller and larger screen resolutions.
As HTML is flexible, you can customise the quiz layout to suit your delivery platform. For example, when designing for a VLE you will know roughly what the maximum viewable area is, and can produce images and video which fit this comfortably.
Note: Hot Potatoes uses ‘relative linking' to locate all media that is inserted into a quiz. In essence this means that the multimedia should be located within the same folder location as the quiz itself to ensure that the media will be correctly embedded.
Customising the default design
The use of HTML has the additional benefit that it is possible to customise the quiz design and behaviours (interaction e.g. clicking a link changes the colour), if you are comfortable editing HTML and CSS. As an additional note for advanced users, it is in fact possible to turn fixed size media (images, video and objects) to fluid adaptable ones that would be ideal for Hot Potatoes by following the guidance of Ethan Marcotte in 'Fluid images'. Here Marcotte describes how to get around the problem of fixed dimensions by using some HTML and CSS customisation to allow fixed-size media to adapt their size to the layout.
Why not just use fixed size images?
Fixed-size media is fine when structural elements (containing boxes for content) use fixed size 'widths', as you will know the widths of all elements . However, as many websites and HTML pages are now being designed to adapt to the browser window size using fluid and adaptive structuring techniques, the standard use of fixed-size media is not always ideal as it is unable to adjust. Therefore using Ethan Marcotte's technique will resolve this issue and is certainly worth considering for many projects and resources.
Summing up Hot Potatoes
Images, video and audio can all be used flexibility in Hot Potatoes. Once you decide on appropriate file formats and a template for sizing, the use of digital media should open up even more opportunities for you to produce new and engaging quizzes to support teaching and learning.
