Section 5 Content creation step-by-step guides

Hot Potatoes: JMatch (matching or ordering exercise)

  1. Open the activity Know your browser icons located in the ‘Activities’ folder on the CD-ROM accompanying this pack, and complete it to familiarise yourself with its concepts.
  2. Start Hot Potatoes (Start All Programs Hot Potatoes 6) and select JMatch.
  3. Enter the title for the exercise: ‘Activity: Know your browser icons’. This will become the main heading of the web page.


For the first part of this exercise you will create the quiz using the drag-and-drop output as in the example you have just viewed (see the ‘Software contents’ section of the overview, ‘Hot Potatoes’, for more information on the different outputs available in JMatch).

Figure 1:The JMatch quiz creation dialog box

  1. Before inserting the images you will need to save the file (File Save) so that Hot Potatoes can calculate the relative file path to the image files. (When creating a quiz using images, the image files must be saved with and accompany the HTML file – images are not embedded into JMatch but are linked by file reference.)
  2. To insert the first image click inside Box 1,Left (ordered) items then select Insert Picture Picture from Local File and browse to the E-Guides CD-ROMCC_Images icon_hp_favs.gif. A preview image dialog box will open where you can create alternative text (which will be displayed by any web browser that does not display images) and set the alignment of the image, if required. Click OK to accept the image.


Figure 2: The preview image dialog box

Do not expect to see the actual image in Box 1, but an HTML link to it instead. Images can be inserted on either the left or the right, depending on whether you want the student to drag the word to the image or the other way around. It is also possible to create a drag-and-drop exercise using images on both sides, or you can use words or sentences instead of images.

  1. Enter the text ‘Favourites Folder’ in the Right (jumbled) items column.

The Fix column enables you to display a correctly matched item. In drag-and-drop output mode, any fixed items will appear within a jumbled list, but once the HTML page has loaded, they will move to their correct matching position on the left of the page. Fixing items can be a useful way to demonstrate to the student what is required of them.

  1. Repeat steps 5 and 6 to insert the following images and text:

Image / Text
icon_hp_history.gif / History
icon_hp_home.gif / Home
icon_hp_refresh.gif / Refresh
icon_hp_search.gif / Search
icon_hp_stop.gif / Stop
  1. The Default box is only used if you are creating a standard output, in which case Right (jumbled) items will appear as a drop-down menu. Any text entered in the default box will appear at the top of each drop-down list. As you will be viewing this exercise in all output modes, enter the text ‘Select the correct match’ here.
  2. Once you have created all the required matching components, select Options Configure Output.


Figure 3: JMatch Configure Output dialog box

The Other tab provides options for shuffling the order of questions when the exercise is opened by the student. There is also the option to have only a limited number of randomly selected questions shown each time the exercise is opened. Combining these options creates a quiz that will be different every time a student opens it, making the quiz more useful for repeated practice.

The Navigation section under the Buttons tab allows you to link your exercise to other exercises or web pages, enabling you to build linked units of resources.

JMatch will automatically calculate the student’s percentage score as they complete the exercise. Clicking the Check button if any of the answers are not correct will incur a penalty: students should be advised to complete the whole exercise before pressing the Check button to ensure they do not lose too great a score.

Click OK to exit Configure output once all amendments have been made. The Load, Save and Save As options can be used to save your configuration settings in a separate file. This is useful if you are creating a group of quizzes where the same output settings are required.

  1. Save the completed exercise (File Save and browse to your floppy disk). Although the Hot Potatoes file is not required to enable the exercise to run, it is good practice to keep a copy to enable the exercise to be amended or updated at any time.

Note: for this exercise you have made links to the images stored on the E-Guides CD-ROM. For your file to work from your floppy disk, you will need to have the CD-ROM running. Alternatively, copy the images to your floppy disk and redo steps 5 and 6 to change the file links specified.

  1. To enable students to complete the exercise using a web browser, it must be converted into HTML by selecting File Create Web page Drag/DropWeb page for v6 browsers.


A Save As dialog box will open and, once a File name has been entered, the View or upload the exercise dialog box will open.

Figure 4: View or upload the exercise dialog box

ToUpload the file to the hotpotatoes.net Website,you require an additional registration key, which is only available following the purchase of a commercial licence (see The Masher in the ‘Software content’ section of the overview, ‘Hot Potatoes’).

Select View the exercise in my browser to review and test your work.

  1. This exercise can also be output in standard mode without amendment by following step 11 but, this time, select File Create Web page Web Page for V6 Browsers and give it a different filename.

Notice that all the answer options appear in each drop-down list. It is not possible to insert images in the Right (jumbled) items column in standard mode.

  1. For both the drag-and-drop and standard output modes, you may want to add in additional answer options that do not have a correct match: simply add items to the Right (jumbled) items column, but leave the corresponding Left (ordered) items column blank.
  2. This exercise can also be output in flashcard mode as an aid to helping students memorise matching items or learn vocabulary in two different languages. Repeat step 11 but, this time, select File Create Web page Flashcards for V6 Browsers and give it a different filename. This exercise can utilise images in both columns, but it cannot contain additional answer options that do not have a correct match. You may want to change the instructions under Configure Output for this mode.
  3. Now that you have created your exercise, it is also worth spending a little time experimenting with the Configure Output options to see the effects of any changes you make. It is not necessary to save the Hot Potatoes file each time, but you will need to follow step 11 to see how your amendments will appear in the completed exercise. Either overwrite your existing HTML file or create a new file.


E-Guides training programme