Technologies
Hot Potatoes
How to create interactive exercises using Hot Potatoes.
Introduction
Hot Potatoes is a freely available software package which enables you to create several types of interactive online exercises. The software can be downloaded from the Hot Potatoes website where you can also find tutorials and further information.
There are many ways the Hot Potatoes templates can be used to create interactive online exercises and how those can be presented to the students. The simplest way is to create a stand-alone exercises to serve a specific function, for example, to practise a grammar point. The exercises can be also linked together to form a sequence (more on this below), or they can be incorporated into a web-based course, as you can see in these two examples:
This section will guide you through the process of creating several types of exercises. The examples used here are very simple in order to provide you with a foundation. As you become more familiar with the software you will be able to explore many other functions and ways to use it.
Getting started
We will learn how to use Hot Potatoes by making a short set of exercises linked together to teach the numbers 1 to 5. Examples here are in English, but feel free to choose your own language!
Before you begin work you will need to create a folder somewhere on your computer called Numbers-exercises into which you will save your work. When creating a set 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.
JMatch: Create a match-up exercise.
JQuiz: Create a short-answer or multi-answer quiz
JCloze: Create a gap-fill exercise
JMix: Create a jumbled-sentence exercise.
JCross: Create an interactive crossword.
The Masher: Create a set from your exercises.
The instructions in the following sections will guide you through creating four different exercises using the templates above and subsequently make them into a set using the Masher template.
JMatch: Creating a drag and drop exercise
In this exercise the students will need to match the numbers 1 to 5 and their corresponding names or words in the source and the target languages.
From the Hot Potatoes front page, open the JMatch application by double clicking the icon. That brings you to the JMatch front page.
Insert the title of your page here: Numbers - matching.
Save using the red disk icon.
First, insert the title of your first exercise into the title box. Next, you need to save your first exercise into your Numbers-exercises folder.
To do this click the red disk icon indicated above, and then save this first exercise as numbers1-match. It is helpful to call all exercises in a series by the same name with a different number or the type of exercise at the end.
Locate the Numbers-exercises folder.
Enter the filename numbers-match.
Now you are ready to create the exercise. We want to have the numbers on the left and the target language words jumbled on the right.
The next important stage is to configure the exercise, deciding how it will look to the student. Click the Configuration button shown in the image below.
There are several parts to the configuration section. Follow each set of instructions on the next pages to complete them. Work through each ‘tab’, and then press OK at the end.
Titles/Instructions tab:
Enter a subtitle in the ‘Subtitle’ field if you want one. Often, this is unnecessary.
Insert your instructions in the ‘Instructions’ field. This should be aimed towards the students, eg Match the items in the right column with those in the left one by dragging them across.
Prompts/Feedback tab:
In the ‘Guess correct’ field, insert what you want the students to see when the exercise is correctly completed.
In the ‘Guess incorrect’ field, insert what you want the student to read if there are mistakes when the exercise is checked.
Only use the setting on the following two pictures if you are creating a stand-alone exercise or linking them to other exercises outside Hot Potatoes. You can change the captions for the buttons, but leave the next exercise blank.
Buttons tab:
Insert the wording for the ‘Check Answer’ button in the ‘Caption for the “Check Answer” button’ field.
Insert the wording for the ‘Next exercise’ button in the ‘Caption for flashcard “Next” button’ field. The student will need to click this to move on when finished.
Next exercise URL: It tells the computer the name of the next exercise in the set.
Index: It is useful to have an index page for each unit. It is easiest to call this ‘Index.htm’. We'll create an Index page later in the Masher, so all you need here is the word ‘Index’.
The ‘Include “Back” button’ checkbox enable students the ability to go back to the previous exercise. Enable this if you want this to be possible.
Once we have created all our exercises, we’ll use the Masher function where we’ll input the names of the files so we can leave this blank. However, if you don’t use the Masher, you’ll need to decide what file follows (or disable the Next exercise function by un-ticking it).
The whole file name, including the ‘.htm’, must be added each time. It tells the computer to look for a .htm file, which is the internet-friendly format the exercises are saved in.
Appearance tab:
This page allows you to change the colours of the different parts of the page. By clicking each rainbow, you can select a colour.
This will appear in the preview section on the left. Alter the appearance of the page to suit your preferences, but preferably keep it simple.
Again, we will do this in The Masher for all the exercises together, so you can leave this for now.
The remaining three tabs do not apply to this exercise so you can ignore them. Click ‘OK’ to complete your configuration.
Clicking ‘Save’ will allow you to save all the settings in a special file so it can be re-used.
We will now save the exercise twice. The first save will save the JMatch file with all the information you have 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 student will see and use.
The Masher will later on convert our files to Web pages automatically, but let’s save it this time anyway to see our exercise.
Click the red disk icon again to save the JMatch file. Doing this will automatically save the file.
Now, save the web page. There are two ways of doing this using the ‘spiderweb’ buttons. The right-hand button will create a drag-and-drop exercise while the left-hand button will create an exercise with a drop-down menu to select the answer from.
Click the right-hand button for this exercise.
Check that the file is being saved into your Numbers-exercises folder. Enter the name of the file; this should be the same as the JMatch ‘creation’ file, ie numbers1-match. This is important as, if you need to edit the file at a later date, it is easier to find the creation file if it has the same name as the exercise file.
Now click ‘Save’.
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.
So now you have created your first interactive exercise using the Hot Potatoes program. 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.
JQuiz: Creating a multiple-choice exercise
Next we are going to create a multiple-choice exercise where the students will have to identify and click the correct name of the number in the sentence.
From the Hot Potatoes Front Page, click the JQuiz potato.
Firstly, type in the title of your exercise, eg Numbers in sentences.
Next, save your JQuiz file using the red disk. This exercise will be called numbers2-multiple-choice, and should be saved in the Numbers-exercises folder too. When you open the folder, you will not see any files as it is only showing JQuiz files.
You are now ready to input the exercise.
The question field is below the title field; the question itself is input here. Let’s type in I have 1 dog.
Next, input the four possible possible answers; one right and three wrong.
You need to tell the computer which is the correct answer by ticking the box next to the correct answer.
Enter as many prompts sentences and sets of possible answers as you wish by working through the questions buttons (visualised with a large Q).
You can also have more than four options to choose from. Use arrow buttons next to the ‘Answers’ section to move further down the list.
Once you have entered the exercise, you need to configure it, in the same way as before. Check back above if you need a reminder of how to do this. The screens to work through are essentially the same as in JMatch.
The one extra screen you need to look at is the ‘Other’ tab.
Tick the boxes you want to be active in your page.
It is is vital to tick the final box on this list for exercises where typing is required if the alphabet of the input has non-Roman characters or diacritics which are not present on a standard English keyboard.
Now you are ready to save the second exercise in your set.
As before, you can do two saves - the J file (which requires clicking on the red disk), plus the web page file (not necessary to do this as we'll do it later on). This exercise is called numbers-2-quiz.
If you are saving the exercise as a webpage, you can view it. It should look something like this:
JQuiz allows you to create four different types of quizzes. Apart from Multiple-choice, which has been introduced here, you can choose:
Short-answer: the student will see an empty box instead of the selection of answers, in which they will write their answer.
Hybrid: the student will see an empty box to type their answer in. If they get the answer wrong, the programme will revert to multiple choice.
Multi-select: for questions where more than one answer can be selected.
JCloze: Creating a gap fill exercise
The next exercise in the set is going to be a gap fill exercise where the student will be required to type the name of the number shown in brackets into the gap in the sentence.
From the Hot Potatoes front page open the JCloze potato.
Type in the title of your exercise, eg Numbers - fill in.
Save your JCloze file using the red disk. This exercise will be called numbers3-fill-in, and should be saved in the Numbers-exercises folder.
In the main box, type in your text (or cut and paste it from another application). Choose the word you want the student to have to insert and highlight it. Click the ‘Gap’ button at the bottom of the screen.
You can insert a clue if you wish to (though, probably not necessary here).
You can also insert alternatives, if appropriate, in situations where more than one word will fill in the gap.
Configuration time again. The exercise will be called numbers3-fill-in and the configuration will be the same as before. However, click on the ‘Other’ tab for some important settings.
The bottom three tick-boxes are fairly obvious.
If you want to give the student a list of the words to be inserted to make the task easier, or because you are creating a text reconstruction task, tick the third box.
For case-sensitive checking, tick the fourth box.
Ensure the fifth box is checked for non-standard characters.
Now you can save the exercise as before.
The finished product, if you have saved it as a web page, should look something like this:
JMix: Creating a re-ordering exercise
Next, let’s have a look at the JMix potato. This allows us to create jumbled sentences or series of words, where the student has to put the parts of the sentence back into the correct order. Keeping it simple, we will use this potato to produce an exercise where the student has to put the five numbers in the correct order from the smallest to the largest.
From the Hot Potatoes front page, open the JMix potato.
Firstly, type in the title of your exercise, eg Numbers - ordering.
Save your JMix file using the red disk icon. This exercise will be called numbers4-ordering and should be saved in the Numbers-exercises folder.
In the ‘Main sentence’ box, type the list of numbers in the correct order, each one separated by a line break. If this is a sentence, you can divide it by word or a phrase, or you can have several sentences, for example if you want to have the students reconstruct a sequence of events or a storyline.
In the ‘Alternate sentence’ section, you can type any other possibilities, ie different possible word order for a sentence. There are none in this case, so the section can be ignored.
The next stage is the configuration. The screens are the same as before. The only exception is shown below.
The ‘Restart’ button allows the students to restart if they go wrong. You may want to include it, but you may not.
Once completed you are ready to save the JMix file and you can save the web page if you wish.
Again, there are two spiderweb buttons. The right-hand one will create a drag-and-drop style exercise, while the left will create a ‘click the word’ style exercise. From experience, the latter tends to work better.
You can make this decision later when saving the exercises in the Masher.
The completed exercise is shown below, drag and drop on the right, ‘click the word’ on the left.
The Masher
You have now created four exercises and the Masher will enable us to make an index page with navigation through the exercises.
Open the Masher from the Hot Potatoes home page.
Click on ‘Add files’ and locate your Numbers-exercises folder. Hold the Ctrl key on your keyboard and click on the four exercises in the folder, then click ‘Open’.
You can also add other .htm files. The Masher will include them in the sequence and add the navigation buttons to them as well.
The Masher will automatically create the .htm output files. In the ‘Next exercise file name’ field, input numbers2-multiple-choice.
Click ‘OK’ and repeat with the other file names (numbers3-fill-in, numbers4-ordering). When finished, click ‘OK’.
Now save the file in the usual way: click the red disk and call the file numbers-exercises-index.
Let’s now customise the appearance and navigation.
Appearance tab:
This page allows you to chance the font and its size, as well as the colours of the different parts of the exercise page. By clicking each ‘rainbow’, you can select a colour. This will appear in the preview section on the left-hand side.
Try to keep it simple - the student needs to focus on the exercise and not be dazzled by bright colours.
Buttons:
This menu lets you decide about the navigation options through the set. In the Masher, we are creating the index page, so the student can always return back to it from any of the exercises. Use the other buttons at your discretion.
And finally, we’ll give the index page a name:
Next, we click on the ‘Index’ tab. Here, we give the whole unit a title; let's call it Learning the first numbers, and the index page that will be created should simply be called index.htm.
Now you are ready to take the final step and build the unit. Click on the ‘Build unit’ button at the bottom of the window.
The program will flash a few times (as it creates the .htm files) and then ask you whether you wish to view the page. You should see something like this:
You can now click on the links, try out the navigation and go through your exercises!