TELL Tutorial Series:

Hotpotatoes Part 1 – Jquiz & Jcloze

for Reading Quizzes

By Dedy Kurniawan
Lesson Objectives

By the end of this lesson, learners will be able to create

interactive, HTML-based reading quizzes/exercises by
using HotPotatoes‘ JQuiz and Jcloze.
They will learn to automate the process of creating the
quizzes by using HotPotatoes as an instance of an
authoring tool focusing on quiz creation.
JQuiz will be used as a paradigmatic example of how
HotPotatoes works in general.
They will further enhance the reading quizzes by adding
reading texts, images, and other media formats.
They will also be introduced to Jcloze, another
application in HotPotatoes aimed at creating Cloze
exercises for reading.
Hotpotatoes: Starting Point
Hotpotatoes: An Introduction
Hotpotatoes ™ is an open-source authoring tool
specializing in creating quizzes/exercises. We can use
Hotpotatoes to create various quizes ranging from
Multiple Choices, to Cloze, to Crossword Puzzle.
Although it can be used for various subjects/topics, its
rich features are more geared toward language-based
quizzes/exercises and thus are very good for English
language learning and teaching.
Hotpotatoes: What it Can Do

Hotpotatoes ™ consists of 5 (five) different applications

for different quiz types plus one application called The
Masher that can be used to combine (Mash up) all the quiz
types into one.
Hotpotatoes: The Suite
Hotpotatoes ™ consists of the following applications
with their own functions:
No Name Function

1 Jquiz For creating Multiple-choice, Multi-select, Short answer, or the

Hybrid between Short Answer and MC

2 Jcloze For creating Cloze Exercise

3 Jmix For creating scrambled letters, words, even sentences

4 Jmatch For creating matching exercises

5 Jcross For creating Crossword Puzzles

6 The Masher For creating a mash-up (combination) of the above

quizzes/exercises into a single HTML file
Why Hotpotatoes ?

Open-Source
• Free and Legal

Portability Automated
• Multiple Outputs  Process
HTML page, Printed, etc • Authoring Tool

Interesting Interactivity
Looks • Web-based Exercises
• Multimodals: Text, • Personalized responses
Images, Audio Video
• Customizable
Where and Which
Version of
Hotpotatoes

╺ HotPotatoes can be downloaded from

https://hotpot.uvic.ca/
╺ The current stable version is 6.3. However we can
also try a beta version of 7.0 which is compliant
with HTML 5
╺ The installer version is recommended for Windows
user.
Hotpotatoes: The Output
╺ The main output of Hotpotatoes ™ is HTML page
(webpage) that can be used interactively (typically button-
click, drag-and-drop, or form-typing). Learners can do the
quizzes interactively with browsers of their choices
╺ we can also export the quiz into Word Document for
printing or even into a WebCT format that can be used to
transferrable into an online quiz framework such as
Moodle.
╺ Hotpotatoes owns a capability to integrate various media
such as images, audio, even video into the HTML page
and thus can enrich the interactivity of the quizzes
JQuiz

Jquiz is a Hotpotatoes’ application that can be used to create quizzes

in forms of Multiple Choices, Multi-Select, Short Answer, or Hybrid.
The following table explains the differences:

No Quiz Type Expected Responses

1 Multiple Choice One correct answer by clicking the corresponding

button
2 Multi-Select Two or more choices by checking all the correct
answers
3 Short-answer A word or phrase by typing the answer to the box
provided, with a possibility to provide alternative
answers
4 Hybrid Combination of MC and Short Answer. Users first
supply short answer by typing. After several
incorrect attempts, the item changes into MC where
the users have to click the correct answers from the
choices provided
First look of Jquiz
Inputting the Quiz for Multiple Choice

╺ Fill in the TITLE of the quiz

╺ In the box with Qn label, type the stem (The question)
╺ In the ANSWER boxes, fill in the options (Two or more options)
╺ FEEDBACK is optional, but the creator can use it to provide a
customized feedback for each answer selected by users. If empty,
the default feedback will be provided (See CONFIGURING THE
OUTPUT)
╺ Put a checkmark on one of the CORRECT boxes on the right side.
This is the KEY. Normally there is only ONE correct answer (KEY),
but creators can select more that one correct answer, and after that
in Advanced Mode, they can give weights (in percentage) for each
correct answers
First look of Jquiz

The question / Stem

The option
Filled-in Question (MC Type)

Remember to check ONE corect

answer!
Filled-in Question (Multi-Select Type)

Remember to check TWO or

MORE options
Filled-in Question (Short Answer Type)

One answer should be typed and

Checked as correct. If alternative
answers are available, type them
all and check as correct answers
Filled-in Question (Hybrid Type)
This type starts with a short answer. After several incorrect attempts, it
changes into MC, where users have to select among the options
provided

Type one answer and check it as the correct answer. The other options
will be used for MC phase
Saving the Jquiz File

Click Save button or select from FILE menu. Name the file. Click save to
save it into jqz file
Export to HTML

Click export button to create the HTML page. Type the name. Click
Save. This file can be opened by using any browser.
Export to HTML : Options

After saving the HTML file, you have and option to VIEW (Open) the HTML file, to
Upload to Hotpotatoes.net (Will soon be shutdown), or just do nothing. Anyways,
you will find the HTML file in your default save place (Typically Documents). The
file has an extension of .htm or .html. Your default browser (e.g. Mozilla or Chrome)
will be used as the icon
Output: HTML for MC Quiz Type
HTML for Multiple Select Quiz Type
HTML for Short Answer Quiz Type
HTML for Hybrid Quiz Type
Adding Reading Text

Click FILE menu. Select Add Reading

Text (Ctrl + R).
Add Reading Text Form

Check “Include Reading Text”. Type or copy and paste the title and the
text. Click OK. Texts can also be added from an already prepared text file
HTML with Reading Text

Reading text on the left side. Question on the right side

Adding Media to Jquiz

Several types of media including images and video can be inserted into
Jquiz (with reading text, as the question or options).
Adding Media to JQuiz

╺ We can integrate several types of media into Jquiz: Images, Audio Video, Links,
HTML Tables
╺ These media may be saved locally or be embedded from the internet.
╺ If you would like to add media locally, all files must be saved in the same folder
as the html file. First, save the html file in one folder, and then edit it by adding
the media into the file.
╺ If the media is embedded from the internet (URL), the media can only be opened
while connected to the internet
╺ To insert the media: (1) Put the cursor in the part where you would like to pu the
media; (2) Click INSERT menu (3) Select the Type of Media; (4) Select the
Source (Local or URL); (4) Select the file to be used or copy and paste the URL;
(5) Set some options if necessary; (6) Click OK.
╺ Note:
╺ The use of more complicated media will be explained in another section.
╺ In the Jquiz, you will see HTML tags that you may not really understand. Do not
worry about this for now as Jquiz will correctly render this into HTML page
HTML with Image in the Reading Text

Do some settings to adjust the image

HTML with Image as Options

Do some settings to adjust the image

Miscellaneous: All Questions Shown
Miscellaneous: Final Scores Shown
Miscellaneous: Incorrect Attempt
Miscellaneous: All Questions Shown
Miscellaneous: Incorrect Attempt
Manage the Questions

By clicking MANAGE THE QUESTION MENU, you can arrange the

questions as you like it. You can also delete, insert, or duplicate (clone)
the questions
CONFIGURING OUTPUT

╺ For general use, basically you only need to input the questions
and export it into HTML; However, we can do some additional
configuration in order to enrich the quiz
╺ In the following section we will see some options that can be
configured further for additional, enriched used.
╺ Configuration can be found under OPTION menu >> Configure
Ouput
Setting 1: Titles/Instruction
In this section,
you can set the
subtitle of the
exercise (Put
under the title
of the exercise
you set in
Jquiz) and A
short instruction
for the quiz
users
Setting 2: Prompts/Feedback
Here you can
set the default
prompts/feedba
ck that will pop
out whenever
the users click
something. If
you would like
to have
customized
feedback for
each answer,
please fill in the
feedback box in
each of the
options in the
Jquiz. Etc.
Setting 3: Button
Here you can
set the default
prompts/feedba
ck that will pop
out whenever
the users click
something. If
you would like
to have
customized
feedback for
each answer,
please fill in the
feedback box in
each of the
options in the
Jquiz. Etc.
Setting 4 : Appearance
You can modify
the appearance
of the HTML
page in this
section. You
can change the
color, font type
etc here to suit
your need.
However, make
sure the display
is visible. Learn
individually
about
Complementary
Color
Setting 5 : Appearance
In HTML
format, we can
add a timer so
that the users
have to
complete the
quiz in a
specific period
of time
Setting 6 : Other
In this part,
there are
several useful
settings that we
can use to
enhance the
quiz
Some Useful Settings in OTHER Section
No Setting
1 Show a limited number of questions each
time page loads
2 Shuffle order of questions each time page
loads
Shuffle order of answers in each question
when page loads
# attempts are allowed before a hybrid
question switches into Multiple-Choice
Note: Other options in this section are either clear enough or perhaps not
really useful, and thus are negligible. You are recommended to just use
the default settings or simply skip them
Function
You can create a question bank with
many questions (e.g. 20 questions), and
check this option and set the limit (e.g. 5).
So each time users load the HTML page
they will find different randomized
questions.
Each time users reload the HTML page,
they will see the questions randomly
ordered
Each time users reload the HTML page,
they will see the options in each questions
randomly ordered
Set the number of incorrect attempts to
Short Answer allowed before a Hybrid
changes into MC questions
Setting 7 : Custom
This is an
advanced
setting for
HTML. You are
recommended
to skip the
setting.
However,if you
know HTML,
you may want
to hack into
these settings
Setting 8 : CGI
This is also an
advanced
setting. This
setting allow
you to put an
additional script
into the HTML
file so that
everytime a
user is online
while opening
the file, the
results will be
sent to your
email. You will
need to own
your own
hosting
Setting the Fonts for the HTML Output
By default, the
HTML output
will use
common fonts
such as Arial or
Times New
Roman. To
enhance the
look, you might
want to change
the default
fonts. To do
that, Click
OPTION Menu
and select
Font. Choose
the font
Jcloze is an application in Hotpotatoes aimed at creating a Cloze
exercise.
Cloze exercise is considered as an “Integrated Exercise”.
Cloze is basically a reading text with gaps. Every nth word is deleted
from the text, typically the seventh (7th) word.
It is integrative as learners depend on their vocabulary as well as
grammar and reading skills in order to be able to fill in the gap .
The expected responses can be set from the configuration.
Learners can either type the answers or select from the dropdown.
The list of the words can be hidden or provided on the top of reading
text. The deleted words can be selected automatically or
purposefully. These options are selected depending on the
emphasis, whether the Cloze is aimed at teaching reading; writing;
vocabulary, grammar, etc

Jcloze: An Introduction
Jcloze: First Look

Type the title here

Type the reading text directly here,

or copy and paste. As this is text-
rich format, only use ENTER to
separate paragraphs
Creating Gaps (Deleted words)

Use the buttons at the bottom of the Jcloze to organize gaps:

╺ 1) GAP  To create gaps manually. Select the word to be
deleted. Click GAP
╺ 2) DELETE GAP  To delete a gap, re-select the gapped word.
Click DELET GAP
╺ 3) CLEAR GAPS  To delete ALL gaps. Click CLEAR GAPS
╺ 4) AUTO GAP  To create gaps automatically. Set the nth
number. i.e. For every nth word, a word will be automatically
deleted
╺ 5) SHOW WORDS  To show all gaps , add clues, etc.
Jcloze: Example of Copied Text
 Jcloze: Create Auto-Gaps

To create auto gaps, click Auto-Gap button, and then set the nth number of the
words to be deleted (i.e. Every words counted as the nth number will be
deleted. Theoretically by deleting every 7th word
Jcloze: Text with Gaps

All deleted words are signed by red-colored,

underlined text
Jcloze: Saving the .jcl file

Don’t forget to save the file for later use. The file extension is .jcl
Jcloze: Export to HTML

Click export button to create HTML file for learner’s use. The file
extension is .htm or .html. The file name must not have an extra space.
Jcloze: The HTML Basic Look
Jcloze: More complex Look: Text with Image, List of words
provided, Answers selected via dropdown
Jcloze: Setting the Gaps Manually

To add gaps
manually or add
clue, select the
word, and click GAP
button. Clue can be
added here, as well
as possible
alternative answers
 Jcloze: Some Important Settings

Some options can be checked here to enhance the Cloze. E.g.

Use dropdown; Include Word List, etc
Miscellaneous

╺ Jcloze can be enriched with media, be modified etc. Basically the procedures will be
similar to JQuiz
Closing Notes

╺ HotPotatoes, especially Jquiz and Jcloze as described here are proven to be very
powerful in authoring/creating various interactive HTML-based quizzes/exercises and
they also offer various alternatives for teachers and learners in different context and
technological affordances.
╺ HotPotatoes is also fully customizable and “Tweakable”. There are various things that
you can do with it and most of the tutorials can be found online.
╺ If you are interested to develop yourself in this area, you can try to independently learn
the following things:
╺ 1) Hypertext Mark Up Language (HTML) for webpage design
╺ 2) Selecting color for website design
╺ 3) Java script
╺ 4) etc.
Glossary

╺ Authoring tool
╺ HTML
╺ Cloze
╺ Web page
╺ CSS
╺ Javascript
╺ Application
╺ Software
╺ Mash up
╺ Interactivity
╺ Technological affordances
╺ Multimodality
╺ Embed
╺ Rich-text format