UseHotPotatoes Michael
UseHotPotatoes Michael
The purpose of the Hot Potatoes is to enable you to create interactive Web-based
teaching exercises which can be delivered to any Internet-connected computer
equipped with a browser, developing in this way a virtual learning environment. The
exercises use HTML and JavaScript to implement their interactivity, but you do NOT
need to know anything about these languages in order to use the programs. All you
need to do is enter the data for your exercises (questions, answers, responses etc.),
and press a button. The program will create the Web pages for you, and you can then
upload them to your server.
The JCloze program creates gap-fill exercises. Unlimited correct answers can be
specified for each gap, and the student can ask for a hint and see a letter of the
correct answer. A specific clue can also be included for each gap. Automatic scoring
is also included. The program allows gapping of selected words, or the automatic
gapping of every nth word in a text.
The JCross program creates crossword puzzles which can be completed online. You
can use a grid of virtually any size. As in JQuiz and JCloze, a hint button allows the
student to request a free letter if help is needed.
The JMix program creates jumbled-sentence exercises. You can specify as many
different correct answers as you want, based on the words and punctuation in the
base sentence, and a hint button prompts the student with the next correct word or
segment of the sentence if needed.
-2-
The JMatch program creates matching or ordering exercises. A list of fixed items
appears on the left (these can be pictures or text), with jumbled items on the right.
This can be used for matching vocabulary to pictures or translations, or for ordering
sentences to form a sequence or a conversation.
In addition, there is a sixth program called the Masher. This is designed to create
complete units of material in one simple operation. If you are creating sequences of
exercises and other pages that should form a unit, you may find the Masher useful.
The Masher can also be used to upload Web pages not created with Hot Potatoes to
the www.hotpotatoes.net server.
Hot Potatoes version 6.3 is the first freeware release. This release is open for
anyone to use for any purpose, but the enterprise does not provide technical support
for it.
-3-
A Step-by-Step Guide to getting started with Hot Potatoes
Hot Potatoes Software: http://web.uvic.ca/hrd/hotpot/
Michael Smith.
Objectives.
To put together a short cycle of exercises linked together based on the topic of
animals. You can create the activities in any language you decide!.
Instructions.
Before you begin work you will need to create a Folder called Animals into which you
can save your work. When creating a cycle of Hot Potatoes exercises it is important
that all exercises and any associated pictures, sounds or videos making up a unit are
contained in one folder. I suggest that the folder should be on the hard drive of your
computer. You are now ready to start work.
Create a gap-fill
exercise
Create a short-
answer or multi-
choice Quiz
Create a match-
up exercise
-4-
A. Creating a drag and drop Match-up Exercise with pictures and target
language words.
From the Hot Potatoes front page open the JMatch application by double clicking the
icon. The screen will look like this:
1. First, insert the title of your first exercise into the title box. Next, you need
to SAVE your first exercise into your Animals folder. To do this click the red
disk icon indicated above, and then save this first exercise as Animals1. It is
helpful for you to call all exercises in a series by the same name with a
different number at the end.
-5-
Now you are ready to create the exercise. We want to have animal pictures on the
left of the screen, and the target language words jumbled on the right.
2. Place the cursor in the left hand box next to number 1. From the menu bar at
the top of the JMatch screen, select Insert, then Picture, then Picture from
local file, as shown below.
Since you have already saved your exercise in the correct folder, the Hot Potatoes
programme should automatically look in the same folder for any pictures. You should
therefore see the picture files you saved into the folder earlier. If not you will need
to find the Animals folder on your hard disk.
Select the file you wish to have as your first picture. You will then be able to preview
the picture and change its size if you wish to.
-6-
Use this if you wish to make the picture
bigger or smaller. Practice will teach you
how big to make pictures. In this case,
decrease the 100 (height here) to 75. If
the “Maintain Aspect ratio” box is ticked,
the picture will simply get smaller, with the
same ratios. For this exercise, decrease
the 100 value to 75 each time (height or
width), so that all the pictures are a little
smaller and the same size as each other.
Link URL: In this box you should simply see the name of the picture file. This tells the
computer to look for the picture called bird-vt.gif in the same folder as the exercise,
and insert it into the exercise. If there is anything before the filename, such as the
name of the folder (e.g. animals/bird-vt.gif), delete the extra bit!
-7-
Once you are happy with the picture, click OK. You will now see what is called “html
code” in the JMatch box. This tells the computer what to do, so don’t worry!. You
won’t see the picture of the animal until you create the exercise page later. Now
insert the target language word into the box on the right. This is what the pupil will
have to match to the picture.
HTML Code
3. Repeat step 2 above for the other 4 animals in this first exercise.
4. The next important stage is to configure the exercise, deciding how it will look to
the pupil. Click the Configuration button shown in the image below.
There are several parts to the configuration section. Follow each of the instructions
on the next pages to complete them. Work through each “tab”, and then press OK at
the END.
-8-
Titles / Instructions
Prompts / Feedback
-9-
Buttons
Next Exercise URL: This bit is Index: It is useful to The Back Button
important. It tells the computer have an index page for does what it
the name of the next exercise in each unit. It is easiest suggests – allows
the cycle. You’ll need to decide what to call this Index.htm the pupil to go
this is going to be at this point. For for each unit. Fill in back to the last
this cycle it will be Animals2.htm the boxes as shown exercise. Check
The “.htm” must be added each here each time, and the box if you
time to the file name. It tells the we’ll create an Index want this to be
computer to look for a .htm file, page later, once we’ve possible.
which is the Internet format the finished the cycle.
exercises are saved in, as opposed
to a Word file (.doc) or a PowerPoint
file (.ppt), for example.
- 10 -
Appearance
The remaining three “tabs” do not apply to this exercise so you can ignore them. Click
“OK” to complete your configuration.
5. You are now ready to create your first exercise. You now need to SAVE the
exercise twice. The first save will save the JMatch file with all the information
you’ve entered. You will need this in case you want to make any alterations later. The
second save will create and save the web page that the pupil will see and use.
- 11 -
Check that the file is
being saved into your
Animals folder
Hot Potatoes will tell you that it has created the file. Tell it OK, then select “View
the exercise in my browser” to see your exercise.
- 12 -
So now you’ve created your very first interactive exercise using the Hot Potatoes
Programme. The process may have seemed quite long, but the good news is that you
have now covered most of the basics needed across all the “Potatoes”.
You can go back into the JMatch screen to make any amendments if you need to. For
example if the pictures are too big, delete the html code where you inserted it in the
box and re-insert the picture, changing the size. Should you spot a smelling pistake
you can simply amend it, and then resave the page – Jmatch file first, then web page.
The left hand “spider’s web”, mentioned above, will create the same exercise but
looking like this:
This can be useful if you have too many pictures to fit on one drag and drop page. It
also has many other useful applications in different languages exercises. It’s all about
imagination – how can you use the application to suit your task.
Our web site - www.languagesonline.org.uk has all sorts of exercises using all the Hot
Potatoes applications.
- 13 -
B. Creating a Multi-choice exercise using JBC
Now let’s move on to exercise two in our cycle. This is going to be a multi-choice
exercise where the pupil will have to identify and click the correct word from a list
of four to identify the animal in the picture.
From the Hot Potatoes Front Page, click the JBC Potato.
- 14 -
Next input the four
possible answers, one right,
three wrong.
Once you’ve entered the exercise, you need to configure it, in the same way as
before. Check back to section 4 above if you need a reminder of how to do this. The
screens to work through are essentially the same as in JMatch. Don’t forget that the
next exercise in your cycle will be called Animals3.htm. The one extra screen you
need to look at is the “Other” tab:
- 15 -
Now you are ready to save the second exercise in your cycle.
Once you’ve saved it you can view it. It should look something like this:
- 16 -
It is a good idea at this point to open up Exercise 1 in the cycle and check that by
clicking the “Next Exercise” button, you do actually move onto the next exercise. If
not, check that you have correctly written the name of the Next Exercise file, with
.htm in the box in the buttons configuration screen.
Next, let’s have a look at the JMix potato. This allows us to create jumbled
sentences, where the pupil has to put the parts of the sentence back into the correct
order. Keeping it simple and remaining with your animals, you can use this potato to
produce an exercise where the pupil has to put 5 animals into alphabetical order.
From the Hot Potatoes front page, open the JMix potato.
- 17 -
In the main Sentence
box, type the list of
animals in the correct
order, each one
separated by a line.
The next stage is the configuration. The screens are the same as before. Don’t
forget that the Next Exercise will be called Animals4.htm. The only exception is
shown below:
Once completed you are ready to save both the JMix file and the Web page in the
normal way.
- 18 -
There are two spider’s
webs again. (Ignore any
with a 5 on them) The
right hand one will
create a drag and drop,
the left hand one a
“click the word” style
exercise.
The completed exercise is shown below, drag and drop on the left, “click the word” on
the right.
- 19 -
Firstly, type in the title
of your exercise, e.g.
C’est quel animal?
- 20 -
Next you’ll need to configure the exercise in the usual way, checking also the “Other”
tab, as with the JBC earlier. The next exercise will be called Animals5.htm.
Once you are complete, save the exercise as Animals4.htm and it should look
something like this:
The next exercise in the cycle is going to be a gap fill exercise where the pupil will be
required to type the animal word into a gap in a sentence.
From the Hot Potatoes front page open the JCloze potato.
- 21 -
In the main box, type in your
text, or cut and paste it from
another application. Choose the
words you want the pupil to have
to insert and highlight it. Click
the gap button at the bottom of
the screen.
www.georgetown.edu/faculty/ballc/animals/
- 22 -
Configuration time again. The next and final exercise will be called Animals6.htm. The
main exception to the screens is shown below:
To make the page a bit brighter, we can insert a picture. Alternatively if you want to
include a pictorial clue, you can add a picture at the beginning of each line. Place the
cursor at the beginning of the first line of the text. Now insert a picture in the usual
way.
Now you can save the exercise in the usual way, remembering to save twice.
- 23 -
The finished product should look something like this:
And now for the final exercise in this cycle. Let’s create an interactive crossword to
practise the words we’ve used in the cycle.
From the Hot Potatoes front page, open the JCross potato. This is a wonderful
feature that allows you to produce a crossword in a matter of minutes, and also gives
you the opportunity to produce a printable version too!
- 24 -
Enter a list of the
words here, one per
line, checking spelling
very carefully!
The programme will now attempt to fit as many words into the grid as possible.
- 25 -
Select a word, and then enter
the clue for that word in the
box at the bottom of the
section. Then click “OK”.
Repeat for all the words.
Next, you need to configure you exercise in the usual way. Since this is the last in
our cycle, it is a good idea to link it back to the first one to create a full cycle. To do
this, in the next exercise link section on the buttons page, write Animals1.htm.
Finally, save your exercise, remembering to save the JCross file and the web page.
- 26 -
The finished page should look like this:
And there you have a cycle of six exercises. Hopefully, by clicking the Next Exercise
button you should be able to go through all six.
I have only demonstrated very simple versions of what can be done with each Hot
Potato application. The programme has so much more potential, and in my experience
is limited only by the imagination and creativity of the user. Practice and
experimentation are the best ways to find out just what you can do.
I find that it is useful to include an Index page with each unit that I write. If a pupil
does not finish a cycle in one session they can easily begin where they left off next
time. It also allows users to see what is in a cycle.
Microsoft Word can be used to create an online index page, in the absence of a more
powerful web editor, such as FrontPage or Dreamweaver for example.
The idea of an Index page is to have one page with links to all the exercises so that
any can be accessed – just like the index at the beginning or end of a book tells you
which page to go to for what you are looking for.
- 27 -
In Word, create a list of the exercises in your cycle:
- 28 -
Now you need to create the hyperlinks which will make your index page work.
Back on the page, highlight the first exercise name. (Animals1) If your Insert
Hyperlink dialogue box does not show the animals folder, you will need to locate it on
your hard drive. Use this button.
Word should
automatically look
in the Animals
folder, since that
is where the Index
file is saved too.
When you return to the word page, you should find that the text you selected has
changes to blue and is now underlined. This indicates that it is a hyperlink. Repeat
the above with the other 5 links.
Now re-save your page. If you now have a look at one of your Animals exercises, you
should find that by clicking the Index button at the top of the screen, you can view
the index and jump straight to another exercise, and navigate around your unit.
- 29 -
If you wish to make your index page look more interesting you can do all sorts of
things to it, such as change the background colour:
Click Format.
Click Background.
Select a colour.
The Hot Potatoes programme is really not complicated. It does require the
understanding of a few basic principles and ideas, but once you’ve got them, you are
free to use the programme to create all manner of exercises with unending variety
and diversity. It’s all about experimenting and playing around to see what you can
create, or how you can achieve what you have in your mind’s eye.
For more ideas, please visit our website – www.languagesonline.org.uk to see how we
use the Hot Potatoes Programme. There is very little on the entire website that has
not been created using one of the six programmes outlined above.
I hope you’ll feel inspired to have a go at using the Hot Potatoes programme with your
own pupils. I really do believe, based on our experience, that the effort put in is well
worth it.
Good luck!
Andrew Balaam
- 30 -
http://www.frenchrevision.co.uk/hot_potatoes_tutorial/
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.
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:
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
- 31 -
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.
- 32 -
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.
- 33 -
http://www.ewbooks.info/hotpot/tutorials/hotpotatoes-tutorials/flashvideo.html
http://www.ewbooks.info/hotpot/tutorials.html
http://www.ashcombe.surrey.sch.uk/dv/dvextras.htm
http://www.cyberteacher.it/esercizi_eng.htm
http://www.cyberteacher.it/istruzioni_eng.htm
<html>
<head>
<title>French Video-on-Demand</title>
function MM_openBrWindow(theURL,winName,features)
{window.open(theURL,winName,features);}
</script>
</head>
<body>
</body>
</html>
- 34 -
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</embed>
</body>
</html>
- 35 -
- 36 -