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.

Screenshot of the main Hot Potatoes menu page.

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.

Screenshot of the JMatch menu.

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.

Screenshot of the save menu.

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.

Screenshot of the JMatch exercise creation menu.

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.

Screenshot displaying the Configure button in JMatch.
Screenshot of the "Titles/Instructions" tab in the JMatch configuration menu.
Screenshot of the "Prompts/Feedback" tab in the JMatch configuration menu.

Titles/Instructions tab:

Prompts/Feedback tab:

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.

Screenshot of the "Buttons" tab in the JMatch configuration menu.

Buttons tab:

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.

Screenshot of the "Appearance" tab in the JMatch configuration menu.

Appearance tab:

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.

Screenshot of the JMatch exercise menu.

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.

Screenshot of the JMatch save menu after selecting the right-hand button of the two "spiderweb" buttons.

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.

Screenshot of the completed exercise created through JMatch.

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.

Screenshot of the JQuiz menu screen.

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.

Screenshot of the JQuiz exercise menu.

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.

Another screenshot of the JQuiz exercise menu.

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.

Screenshot of the "Other" tab in the Configuration menu of JQuiz.

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.

Screenshot highlighting the save button in the JQuiz exercise menu.

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:

Screenshot of the completed exercise created in JQuiz.

JQuiz allows you to create four different types of quizzes. Apart from Multiple-choice, which has been introduced here, you can choose:

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.

Screenshot of the JCloze exercise menu.

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.

Screenshot of the "Gap" button menu in JCloze.

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.

Screenshot of the JCloze "Configuration" menu.

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:

Screenshot of the completed exercise created in JCloze.

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.

Screenshot of the JMix exercise menu.

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.

A screenshot of a further breakdown of the JMix exercise menu.

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.

Screenshot of the "Configuration" menu of JMix.

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.

Another screenshot of the JMix exercise menu.

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.

A screenshot of the completed exercise created in JMix, made as a "click the word" exercise.
A screenshot of the completed exercise created in JMix, made as a "drag-and-drop" exercise.

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.

Screenshot of The Masher's main menu.

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.

Screenshot of The Masher's export settings menu.

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.

Screenshot of the "Appearance" tab in configuration settings.

Appearance tab:

Screenshot of the "Buttons" tab in the configuration menu.

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:

Screenshot of the "Index" tab in the configuration menu.

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:

A screenshot of the finalised exercise, combining all the previously created exercises in one menu.

You can now click on the links, try out the navigation and go through your exercises!