How to create interactive, web-based quizzes and add them to your web site using Hot Potatoes and FrontPage
Class Outline
Today we will cover the following topics:
- How
to obtain and install Hot Potatoes
- How
to create interactive, web-based quizzes, including how to use graphics
and links.
- How
to configure your Hot Potatoes quizzes.
- How
to modify quizzes that are already created.
- How
to integrate Hot Potatoes quizzes into a FrontPage web.
________________________________________________________________________________
Where to obtain Hot Potatoes
http://web.uvic.ca/hrd/halfbaked/
After downloading and installing the program, you will need
to return to this web site to get a registration key. Click on the word “Register” at the top of
the screen, fill out the form, and the key will be mailed to you. Hot Potatoes is free to academic users who
are willing to share the quizzes they create.
Sample Quizzes
http://www.palomar.edu/at/hotpot/
________________________________________________________________________________
What is (are?) Hot Potatoes[1]
“The Hot
Potatoes suite is a set of six authoring tools, created by the Research and Development team
at the
“Although the exercises are constructed using JavaScript,
you don't need to know anything about JavaScript to use the programs. All you
need to do is to enter your data -- texts, questions, answers etc. -- and the
programs will create the Web pages for you. Then you can post them on your Web
site. However, the programs are designed so that almost every aspect of the
pages can be customized, so if you do know HTML or JavaScript, you can make
almost any change you want to the way the exercises work or to the format of
the Web pages.
“If you work in a non-profit-making educational institution
or context, and you are prepared to share your exercises by placing them on a
publicly-accessible Web server, then you may use the Hot Potatoes suite free of charge. If you are
working for a company or in a commercial context, or if you password-protect
your exercises or distribute them only on an intranet, you will need to buy a licence (contact Half-Baked
Software for information). However, whether you're commercial or
otherwise, we do ask that you register the programs; all you have to do is to fill in a form on our Website,
and it helps us to stay in touch with our users and get some idea of who is
using our programs. See the help file for more information on registration. “
What do the different programs do?
There are six basic programs in the Hot Potatoes suite:
v
JBC creates multiple-choice quizzes. Each
question can have as many answers as you like, and any number of them can be
correct. Specific feedback is given to the student in response to each answer,
and a percentage score is displayed after each correct answer is chosen.
v
JQuiz
creates short-answer quizzes, in which the student types in a word or a
sentence in response to a question. The sentences are checked against correct
answers you have specified (you can have as many as you like), and the feedback
shows which parts of a student's answer are correct. The student can ask for a
hint if necessary, and see the next correct letter in the answer.
v
JCloze
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.
v
JCross
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.
v
JMix 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.
v
JMatch
creates matching or ordering exercises. A list of fixed items appears on the
left (these can be pictures or text), wth 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.
Is there a tutorial where I can learn Hot Potatoes?
Yes. After installing and starting the program, click the “Tutorial” menu item at the top of the opening screen, or go to this URL for an online version:
http://web.uvic.ca/hrd/halfbaked/tutorials.htm
________________________________________________________________________________
What are the three steps in making a quiz?
There are three stages in creating exercises with these
programs:
1. Enter your data
You type in the questions, answers, feedback etc. which forms the basis of the exercise.
2. Adjust the configuration
The "configuration" is a set of information used
to compile the Web pages. It includes instructions for the student, captions
for navigation buttons, and other information which is not likely to change
much between exercises.
3. Create your Web pages
This is simply a matter of pressing the "Export to Web" button on the toolbar, choosing a file name, and letting the program do the rest.
________________________________________________________________________________
The three steps illustrated – follow-along example
1. Entering Data
Let’s create a simple multiple choice quiz using JBC. Start Hot Potatoes, and then start the JBC program. (Note that each “potatoe” is a stand-alone program, and can be started independently of the Hot Potatoes suite).
The opening screen looks like this:
Type the title, the question, and possible answers, as shown. Don’t forget to check the correct answer.
Now advance to question 2 (click the “up-arrow” next to “Q1”)
Type the following question:
“JBC allows a timed reading to be included with the quiz”
Enter the answers “True” and “False”.
The correct answer is true. Click the check box next to the correct answer.
Advance to question 3, and type the following question:
“JBC allows that each question be presented on its own screen, or all questions can be seen on the same screen.”
Answers: True (correct); false.
Advance to question 4.
Question 4: Is it possible to include a graphic, a video, or a sound file in a JBC question or feedback?
Answers: Yes (correct); No.
Advance to question 5.
This question will allow multiple correct answers. Click the box at the top of the answers column titled “All correct answers must be selected”. Then enter the following:
“Select the following statements that are true of Hot Potatoes:
Hot Potatoes are a suite of 6 stand-alone programs (true)
Each program has its own configuration file (true)
Hot Potatoes is made by Microsoft. (false)
There are both PC and Mac versions of Hot Potatoes (true)
It is easy to change the screen colors of the quizzes (true)
It is easy to add questions to a Hot Potatoes quiz later (true)
Hot Potatoes stores student scores in a database on the server (false)
You have finished building your first quiz. Now click File > Save. Save the quiz in the My Documents folder on the hard drive of the lab computer where you are working. Name it “firstquiz.jbc”. Note: You do not need to add the “.jbc” file extension because the Hot Potatoes program will do it for you. This file contains all the code necessary to export the quiz as a web page. If you later want to modify the quiz, this is the file you will open in the JBC program to make your changes.
2. Configuring Your Quiz
Each Hot Potatoes program comes with its own configuration file, which contains the standard screen colors, button captions, and program behaviors which are applied when you save the quiz. To modify any of these things, and therefore customize the quiz you are currently creating, from within the program (like JBC in our example above) click Options > Configure Output, or simply click the configuration icon on the tool bar:
The JBC configuration screen looks like this:
HTML can be used within the boxes above, and in almost any part of the Hot Potatoes input process, to add formatting, graphics, links, sound or video files, javascript popups, etc.
The “Buttons” JBC tab looks like this:
Note the three check boxes in the middle of this tab. These control the navigation between a set of quizzes being put together, NOT the navigation within the quiz itself. If you are not linking quizzes together, or do not have a main index page for your quiz, clear these check boxes. If you do not, a “Page cannot be displayed” error will appear in your user’s browser window when they click these buttons.
The “Appearance” tab looks like this:
This tab allows you to control screen colors and configuration.
3. Exporting your quiz as a web page
After building, configuring, and saving your quiz, choose File > Create Web Page > and choose the type of browser for which you are exporting. The difference between version 5 and 6 browsers is that version 6 support more sophisticated DHTML effects than do version 5, and therefore the quizzes can take on a more sophisticated appearance. To reach the broadest possible audience, it is probably better to choose version 5 browsers, but version 6 browsers are very widespread now, so it comes down to a stylistic choice, for the most part.
Rather than using the export menu, you might want to use the icon on the JBC toolbar to export your quiz:
When naming the exported file, be sure NOT to include spaces in the file name. The file extension “.htm” will be automatically appending to the name you choose. Save your quiz in the My documents folder. After it has been saved, Hot Potatoes will give you an opportunity to view it in your browser.
Ok, now that I have exported my quiz from Hot Potatoes, how do I get it
into my web at Palomar College
Start Microsoft FrontPage. For today’s exercise, we are going to use pre-created class webs, or you can use your own web if you have one and would rather. Instructions here will be for the class webs.
Within FrontPage, choose File > Open Web and type the following name into the Web Name box:
http://pluto.palomar.edu/classwebxx
where xx represents the number printed on your monitor. If you are sitting at computer 4, your address would be:
http://pluto.palomar.edu/classweb04 (Note the zero before the number 4)
After the web opens, choose File > Import and click the Add File button. Find the file firstquiz.htm in you’re my Documents folder and click Open. Then click OK to import the file into your web.
Now create a new home page for your web. It will be named “default.htm” because you want this to be the main page in the web. Add a link to your quiz, save the page, and test it on the web.
The process for making other Hot Potatoes quizzes is identical, with only minor variations dictated by the different nature of the Hot Potato programs—for instance, a crossword puzzle will have different configuration options than a multiple choice quiz.
Now let’s add another quiz
Let’s make a crossword puzzle, add it to our web, and link to it from our main web page.
Start the JCross program.
The main screen looks like this:
You can design your own crossword, but it is far easier to enter a list of words, and let JCross do the work. Click Manage Grid > Automatic Grid Maker, or simply click the Automatic Grid Maker icon:
You will see the following:
Enter a list of words to create your puzzle. Note that you can control the maximum size of the grid, and may want to keep it small to minimize any scrolling your user needs to do to see the entire puzzle within a browser window. If you have reduced the size of the grid, or have made an exceptionally complex puzzle in a 20x20 grid, JCross may take a long time trying to fit the words together. That is what the “Stop now – that’s good enough” button is for. It will light up as JCross begins processing your word lis.
Once you are satisfied with the puzzle layout, enter the clues by clicking the Add Clues button on the main JCross screen:
After adding clues, save your quiz. Now configure output, and export the quiz. Use the same FrontPage procedure to add it to your web.
How do I modify quizzes I have already created?
You must open the original data file (the .JBC file, for example, with a multiple choice quiz), using the program you use to create the quiz, JBC or JCross or whatever potato you used, Make your changes, make any configuration changes—and beware here, because, unless you saved a custom configuration file after having made changes to the default configuration, Hot Potatoes will revert to the default configuration—save the file, export the file, and import the .htm file again into your web, overwriting the old one. As long as you name it the same, there will be further linking to perform.
How do I add images to a Hot Potatoes quiz?
Use the HTML image source tag to do this. For this to work on the web, the image you reference must be available on the web. This might involve uploading the image into your web, or linking to an existing image from a known URL. Here is an example:
Note that the HTML image source tag refers to an image named shakespeare.gif (the border=”0” part of the tag is not necessary, but may be present). Since this does not specify a fully qualified URL on the web, Hot Potatoes will expect to find this image in the same folder as the quiz .htm file. Therefore, if it is not already there, you will need to upload this image to your web in the same way you upload the quiz itself (using the Import feature of FrontPage).
Here is what this question looks like when rendered on the web:
The basic image source tag looks like this:
<img src=”filename.gif”> where filename is a gif, jpg or png format file. Note the angle brackets. Hot Potatoes interprets these as part of an HTML tag, so do not use them for any other purpose.
If the image tag were one to an image “out there” on the web, it would look like this:
<img src=”http://pluto.palomar.edu/classweb00/shakespeare.gif”>
When using HTML tags, be sure to include any variable after the equals sign in double quotes, as in the examples above.
Now let’s add a matching quiz, using drag and drop, with images
Start the JMatch program.
The opening screen will look like this:
Now configure, save and export your quiz (Note that you can only have 1 “question” or “exercise” in a JMatch quiz. We will create three here, and link them together.
In order to export a drag and drop style quize, we will click the browser version 5 drag and drop export icon:
Experiment on your own to find out what the version 6 drag and drop, and the versions 5 and 6 non-drag and drop quizzes look like.
When we save this initial quiz, we will give it the name “matching01.htm”. When we save our second and third matching quizzes, we will name them “matching02.htm” and “matching03.htm”. Using a logical naming convention like this will allow us to configure our navigation buttons in advance, like this:
Note the use of the “Next Exercise” button, pointing to the file named “matching02.htm”—a file we have not yet created, but will name accordingly when we do—and the “Home” button pointing to the main web page in the web where will place this quiz—a page that will act as a menu for all our quizzes.
After creating and configuring quizzes 2 and 3, we are ready to upload to the web server. Be sure to upload the graphics files needed for these quizzes along with the htm files.
How do I add a live URL to my quiz?
If you wish to have your students click a URL within a Hot Potatoes question, read a certain web page, then return to answer a question, add the URL by using the HTML anchor tag, like this:
<a href=”http://www.palomar.edu/at/lab” target = “_blank”> Placing the target = “_blank” part is important. This will cause the URL to open in a new window, and not the window that contains the quiz.
You can link to audio or video files in the same manner. You can even create popup windows by including a little javascript. Contact Terry (ext. 2877) or Chris (ext. 3225) if you need help doing these things.
Are there shortcut keys to help me add html tags to my quizzes?
Yes. Here they are:
For container tags, first select some text if you want to place the text inside the container tag. Hold down Control and Shift, then press:
I for Italic (you will get <i>my text</i>)
B for Bold
U for Underline
< to decrease font size
> to increase font size
A to enclose something in single quotes
Q to enclose something in double quotes
R or RETURN to insert a <br /> tag
H to insert a <hr /> tag
L to insert a link
F to insert a full span tag for font size, family and colour
E to insert an embed src tag
P or G to insert an img src tag
[Up arrow] (or + on the NumPad) for Superscript
[Down arrow] (or - on the NumPad) for Subscript
[Right arrow] for a blockquote tag
C for a <div style="text-align: center;"> tag (for centering text)
D to create a JavaScript Alert (a popup message -- you could use this for glossing a word)