Drag and Drop
Hot Potatoes Home
Loading Your Exercise into D2L
Back to Resources Site

                    Potatoes Tutorial

Hot Potatoes software allows you to make interactive web games and puzzles for students. These puzzles and games are not gradeable by GAView/Vista. Why create these activities? Use them as self-assessment exercises, reviews, or as interactive activities.

Types of applications that can be created with this software include, but are not limited to:

 You can make fill in the gap exercises, called JCloze; regular multiple choice or multiple response quizzes, called JQuiz; drag and drop matching exercises, called JMatch; multiple choice/matching exercises, also one of the JMatch options; and crossword puzzles, called JCross. 

This software is available free from the Hot Potatoes web site .

The Hot Potatoes Logo is used with permission from Half-Baked Software.

Making Self-Graded Quizzes

 In this tutorial, you will learn how to create and publish (upload to a web page or GAView/Vista) a self-graded quiz.

To begin, launch the Hot Potatoes program.  The following screen will be displayed:


     Hot Potatoes Start      

1.  Click on the Potato labeled JQuiz.  A dialog box will be displayed asking whether Beginner or Advanced mode is desired.

2.  Click Yes to start in Beginner mode. The following screen will be displayed.


     Hot Potatoes 1


3.  In the Title box, type in the name of the quiz.  This function allows you to give the quiz a name.

4.  To select the quiz type, use the drop-down menu immediately to the right of the Q(n) box.


Creating a multiple choice quiz:

1.  Select Multiple-choice in the drop-down menu on the right.

2.  Begin creating the questions, answers, and feedback. 

     a.  Type the question in the Q(n) box (where "n" is the question number). 

     b.  Type the acceptable answers (multiple choice) in the A, B, C, and D boxes under the Answers column.

     c.  If you wish to leave feedback, type the desired feedback for each answer in the boxes in the Feedback column.

     d. Check the box next to the multiple choice option that is correct under the Settings column.



           Hot Potatoes 3 


3.  Once all entries have been made, go to File > Save and save the quiz. Remember, don't put any spaces in the name.


Changing Quiz Settings:

Quiz settings are available under Settings in the Edit menu.

Changing the Look of Your Quiz

Under the Options menu, choose "Configure Output."
configure output

You will see the Output Menu. Here you can set instructions, supply links to other exercises, set a timer, and change colors.
Output Menu

Choose Appearance, and you can use a background graphic or change the colors by clicking on the rainbow buttons beside each quiz element. If you want more colors, you can choose hex codes here: When you are finished, hit Okay.

Publishing a Quiz:

In order to publish your quiz, select create web page from the file menu.  Then choose the option "Create Web Page," and select the standard format. 

publish quiz

The standard format option will allow you to save your quiz as an html file. You will see a window that asks you where you want to save the file, and what you want to call it. Call it the same thing that you called the Hot Potatoes file, so that you can associate the two later, if you need to make changes to the web page. To make changes to the Hot Potatoes exercises, you have to make the changes to the Hot Potatoes file and then resave the file as a web file.

cue for name

 Be sure that there are no spaces in the file name.  For example, your quiz could be named Ilovetc or Ilove_tc but not I love tc. A box will then appear asking if you would like to view the page in your browser. Tell it yes so that you can make sure your exercise looks like it should.

In your folder, you should see two versions of your exercise: the Hot Potatoes version and the html version:
web and Hot Potatoes files
The html file is the one you will load onto the web or into GAView/Vista. The Hot Potatoes file is the one you will edit if you need to make changes to your web file. It would be wise to keep these files together in your web folder. However, you probably don't want to load both into GAView/Vista.

Creating Drag and Drop Exercises


When you open your Hot Potatoes software, you will see the screen below. Click on the potato marked "JMatch." 

You will see a template that looks and operates like the JQuiz template.  The same options are across the top.

Open Hot Potatoes


First, give your drag and drop a title. Our theme will be "African American Literature." So, title this drag and drop "African American Authors and




Under the "OPTIONS" column, choose "CONFIGURE OUTPUT."

configure output

Then, choose "TITLES/INSTRUCTIONS." In the "INSTRUCTIONS" box, clear the default instructions and put "Drag the author's name (on the right) to the work (on the left)."


These revised instructions will help students to understand that they are to use the mouse to drag items on the right to the corresponding items on the left.  Click the green check marked "OK" button at the bottom to return to your template.



Click inside the box marked 1 under "Left (ordered) items." Type "Invisible Man."

match example

Hit your tab key to move your cursor to the column marked "Right (jumbled) items." Type "Ralph Ellison."



Fill out the rest of the fields as you see in the example below:


Left (ordered) items Right (jumbled) items
Invisible Man Ralph Ellison
The Color Purple Alice Walker
Native Son Richard Wright
Beloved Toni Morrison
Erasure Percival Everett



Save your exercise. You can save it as Lit_match or litmatch or book_and_author. Remember not to put any spaces in the file name you choose.  If there are spaces in the file name, the file will not load properly later.



Beside the first question, there are two arrows. One points up, and one points down. Click on the arrow pointing up to add more questions. However, please remember that your students will have difficulty seeing more than five questions at a time, so it is not recommended that you have more than five drag and drop questions. You can test your finished product to see if you have too many questions and answers, or if you have room to add more.



The "fix" box to the right allows you to tell the software not to jumble this particular answer.



Also, if you want to add an image, for instance, substitute pictures of authors for author names, in this case, you can do that.  First, create a folder and title it logically. For example, you might title it African_Amer_lit. Put a folder inside that one entitled "images." Put your pictures in the images folder, and save your puzzle in the main folder. Click on the "INSERT" column and then select "INSERT PICTURE." You select the images and save them with your finished drag and drop. The puzzle will only work if the folder is moved with the puzzle and images inside as they were linked. Once you put your activity on the World Wide Web, you will need to re-link your images and make sure they work, so you'll want to keep the original Hot Potatoes exercise and the html file together.



Under "OPTIONS" and "CONFIGURE OUTPUT," you can choose colors to brighten your drag and drop.



Under "FILE," choose "CREATE WEB PAGE."  Three options appear: "STANDARD FORMAT," "DRAG/DROP FORMAT," and "FLASHCARD FORMAT."  Choose "DRAG/DROP FORMAT," and save your exercise using the same name as the JMatch file. You will want to keep your JMatch and html versions of the exercise together. 



When you  update or make a change to your exercise, you should make the change to the JMatch file and then resave it over the older JMatch version.  You should then use the new JMatch to create a new html version, following the instructions in step 10.


Success! The program will ask you if you want to view the quiz in your browser. Check out this fun, educational activity that you have made in just a few minutes! If you can't see your exercise, look at the top of your screen under the browser bar. You may see a yellow bar that asks if you want to view the page. You must tell it "yes" in order to view your page.

Making Crossword Puzzles:


When you open up your Hot Potatoes software, you will see a pile of potatoes with different words on them on the left.   Click on the potato marked "JCross." 


Hot Potatoes Open


Here you will see the grid. The crossword puzzle is a bit more complicated than the other puzzles.

1.   Across the top you will see the words "FILE," "EDIT," "INSERT," "MANAGE GRID," "OPTIONS," and "HELP." This tutorial suggests you let the software make the grid for you. Under "MANAGE GRID," choose "AUTOMATIC GRID MAKER."

automatic grid maker

2.   A box will pop up that says "Create a crossword grid automatically."

3.   The directions tell you "Enter each word or phrase on a separate line."

4.   Type in the following words:













5.    Click on the box that says, "Make the grid."

make the grid

6.    Now, you can see your grid. On the left hand side, find the word "Title." There should be an empty box underneath it. Can you guess what the title of this crossword puzzle will be? In the empty "Title" box, type "Star Trek."

7.    Click on the box that says "ADD CLUES." This part gets tricky. There is a GREEN "OK" button at the bottom of the screen. You will need this button when you are finished entering the clues.  Until then, ignore it.  If you click on the GREEN "OK" button at the bottom, you will be taken back to the grid page, and you will need to click on the  "ADD CLUES" button again to return to this screen.

8.   Two boxes appear after you click on "ADD CLUES."  The top box is labeled "ACROSS."  The bottom box is labeled "DOWN." You can start with either box.  Click a word to highlight it. Your cursor will flash in the  box below, and you can type a clue for it. For practice, click on the word "McCoy." It will be highlighted in gray. Type "Original 'Star Trek' doctor" in the clue box.

 9.   Once you have finished inserting the clue, click on the red "OK" button on the right. 

manage clues
10. Now, you can insert another clue. Select and highlight another word, and type in your next clue. For practice, repeat the instructions in steps 8 and 9 to add clues for
"LaForge," "Troi," "Kira," "Luc," "Kirk," "Home," "Archer," "Kathryn," and "Spock."


Answer Clue
LaForge "Star Trek: The Next Generation" engineer
Troi "Star Trek: The Next Generation" Counselor
Kira "Deep Space Nine" officer ____ Nerys
Luc Enterprise captain Jean-___ Picard
Kirk Original "Star Trek" captain
Home Movie title: Star Trek IV: The Voyage _____
Archer "Star Trek: Enterprise" captain Jonathan ____
Kathryn "Star Trek: Voyager" captain ____ Janeway
Spock Original "Star Trek" Vulcan


11. Once you are finished entering all the clues, click on the GREEN "OK" button at the bottom of the page. You will be returned to the grid screen.

12. Under "OPTIONS", you can choose "CONFIGURE OUTPUT." Under "TITLES/INSTRUCTIONS," make sure the exercise has appropriate instructions, in this case,  "Students need to click on the number in the puzzle to access the clue."  Also, you can change the colors of your exercise under "CONFIGURE OUTPUT." 

13. Under "FILE," choose "SAVE AS." Save your exercise--again, remember, just one word such as "Star" or "StarTrek" or "Star_Trek."

14. Under "FILE," choose "CREATE WEBPAGE." The option "STANDARD FORMAT" appears. Choose it. Then, save your puzzle (same name as the JCross file). You will want to keep your JCross and html versions of the puzzle together. When you update or make a change in your puzzle, you will make the change to the JCross file and then resave it over the older JCross version. Then you will convert the new JCross version to html.

15. Success! The program will ask you if you want to view the exercise in your browser. Warp speed ahead!


Note: There are two methods. Method 1 is the quickest. Method 2 should be used if Method 1 doesn't work (sometimes, in rare cases, it doesn't).


Load your Hot Potatoes .html file following the directions below. Google Chrome is not recommended for use with D2L.

1. Login to D2L and enter the course where you wish to put your web page. Under the Content link, select New Topic.

GAView/Vista step 1

2. Under New Topic, select "Upload New File."

upload new

3. Next, you will be asked to choose a module to link your Hot Potatoes exercise under. Choose a module or create a new one.

choose a

4. Next, you will be asked to name the file. Name it something that your students will understand/recognize, if possible.

name file

5. Click on the "Browse" button to find your Hot Potatoes exercise so that you can upload it.

Browse for

6. On your computer, browse for your html file. When you find it, select it (click on it), and click "open."

get file

At this point you can hit "Save," and click on the content button to view your work.

OR you can put your Hot Potatoes file into a specific folder in your file manager. If you look to your left on this screen, you will see under "Settings" a folder called "Manage Files."
manage files

6 b Note that with your "Choose destination" button, you can choose a file in your file manager for your Hot Potatoes exercises to "live" in.

6 c IF you click on "Choose destination," you can either create a new folder for all your Hot Potatoes exercises, or you can put your exercise in a specific module (for example, your Module 1 folder, if you have created one). If you do not choose a destination, your Hot Potatoes exercise will go in with your general files.
create a
7. When you hit "Save," your Hot Potatoes will open up in the Content window because it is an HTML file. Don't be alarmed if you do not see the full exercise at this time. Just click on "Save" again, then click on the Content link at the top.

8. Now, preview your exercise under the "Content" tab by clicking on the exercise. If you don't see the questions at this time, you may need to reload. Return to step 1 in this section and try again. Save over the file you uploaded on your first attempt.

There is also a second way to load Hot Potatoes exercises, if the first way isn't effective.


You can also load your Hot Potatoes .html file following the directions below. Google Chrome is not recommended for use with D2L.

1. Under "Content" in D2L, click on "Manage Files."

manage files

2. You will enter your files area. You can either click on an existing file to open it, or you can click on "New Folder" at the top to create a new folder.

Keep your
              files organized

3. If you create a new folder, make sure you have no spaces in the name. Spaces are okay (don't panic if you see spaces in the names of your folders in D2L!), but the files will load faster and D2L will "like" them better if they have no spaces. When you have named your folder, click "Save." Then, click on it to open it. (The new folder will stay at the top for now, but will "file" itself in alphabetical order when you return to your file area.)

creating a
              new folder

4. Next, click on the upload button.


5. A browse button will appear. Click on it to browse for your Hot Potatoes file.

browse for
              the html file

6. Select your file and click, "Upload." You will see your Hot Potatoes exercise populate the folder.

upload file

7. Now, hover your mouse in the area where your Hot Potatoes exercise has appeared. You will see a drop down menu option appear. Click on it, and then select "Preview" from the menu to preview your quiz. It may appear jumbled up. Don't panic if you see jumbling. Just confirm that the quiz loaded.
hover your

7. After you have confirmed that your Hot Potatoes exercise has loaded, return to the "Content" menu. Click on "New Topic." Then, choose "Quicklink."

8. Under "New Topic - Quicklink," select a module and give the Hot Potatoes activity a title. Then select the "Quicklink" button.quicklink button


9. Under "Quicklink," click on the arrow beside "Pick Category." Then, select "Course File."

pick a

10. The "Add a File" button appears. Click on this button and you will be taken to your file area. Find the file where you put your Hot Potatoes exercise. All the files will be listed in alphabetical order now.

find file

11. When you click on your file folder, you will see the folder open. Select the radio button beside the Hot Potatoes exercise that you wish to add to your module. Then click on "Select File."

select file

12. Now you will be asked if you wish to insert the file. Click on "Insert."

insert the

13. Finally, click on "Save" to save the process you just went through and insert the inserted file.

save inserted

14. Return to the "Content" page and click to test your Hot Potatoes Exercise

Additional Information:
If you have a Hot Potatoes file folder with images that go in your Hot Potatoes exercise, you will need to load the entire folder into D2L using the zip option. Unzip the Hot Potatoes folder. Then, quick link to the .html file.

Back to Top


This page was created collaboratively by Anna Miller, Whitney Christofferson, Ryan Hall, Brandy McKnight, Jennifer Moore, Kyle Prather, Dena Pruett, Bill Randall, Mary Rolfs, Nikki Scheuermann, Stacey Smith, Richard Wolfe, Sarah Youngblood, and Tamara Powell