QuizImage - Visual identification quizzes
DiscoverImage - Discover features in images
MatchImage -- draw lines to connect pairs of images

June 10th, 2002

Update: July, 2018

7/2018 Added the MatchImage webapp. See: This page

6/2016 Update: Created an HTML5 client. See the examples at: here and here ....

Details about using the output from the Lesson Builder in HTML5 are found here

6/28/2004 Update: Added builder buttons for forcing the outlines to appear when the correct answer is selected in QuizImage. Also, added an optional "auto-step-image" feature: if you have multiple images that are part of a "progressive" lesson, the "next image" will only appear when the answer is correct. When this option is set, the QuizImage applet will not display the "Next Image" button.

6/10/2002 Update: fixed the strange behaviour when using the show outline option when the correct answer was chosen -- the outline would 'flash' on and then off right away.

1/7/2002 Update: fixed a problem of explanation text not popping up when the show outline option is set to true in the HTML.

10/23/2000 Update: removed the hysteresis from the QuizImage so that people must be inside the polygons in order to have it recorded as "right". Previous version allows a little too much slop and gave misleading results when Items were very close together.

9/20/2000 Update: added the ability to change the font size for DiscoverImage item labels. Also included a shadowing of the labels to make them stand out better. The QuizBuilder will allow you to set the font size; if you need to do it for existing lessons, include a tag like:

<param name="font_size" value="18"> that will set the font size to 18 point.

Also, make available just the .class files needed to run a lesson in the QuizImage.zip file. This way, all you have to do to update an existing lesson is get this ZIP file, and unpack it on top of the current lesson file(s). It contains only the updated .class files for the Quiz and Discover.

7/18/2000 Update: added the ability to recognize the articles a, an, and the as the first word of a feature name; if any of these is provided, QuizImage will not insert the word the before the feature name in the prompts.

6/25/2000 Update: bold text for prompting, easier polygon deleting, and ability to add your own prompt for Discover mode lessons! (good suggestions from the Unidata Summer Workshop)

2/9/2000 Update: audio playback added!

12/14/1999 Update: multiple polygons may now be used for outlining an item!! This change is backward-compatible with any previous lesson you've created.

QuizImage is the name given to a small, yet powerful software tool that allows you, the instrutor, the ability to quickly put together Web-based, visual-identification quizzes for your students.  This tool has application whenever you are dealing with having students identify features in one or more images or photographs.  It is coded in Java to make the most use of the Web.

QuizImage consists of two parts:

In both cases, the QuizBuilder is the same; when you save the lesson, you simply choose whether you want to save a "Quiz" or a "Discover" type. (You may actually save your working material as both -- just specify different HTML filenames.)

For the "discover" mode, here is an example you can try that includes the new ability to change font sizes (18pt used here). (and please don't send me email about my particular choice of "features", please ;-)

Note that the "stratus" clouds have an audio link, and the low pressure center has a browser/HTML link.

Here is the same "discover" mode example, but with a "Reveal" button added (done in the HTML).

If you click here, you'll be taken to a very simple example of a quiz that your students might (well, likely not...) get.  After the images are loaded, and a pause of a few seconds to allow them to read the one line of instruction (you, of course, can supplement the HTML with your own material), the student is asked to identify each feature that the instructor made part of this quiz.

Now that you're back, I hope you'll read on.

To use the QuizImage Builder you must download a file and put it into a unique subdirectory on your disk.  Just follow these steps to install it:

  1. at a convenient place on your disk, make a new directory -- something unique, like quizdir -- to hold the software
  2. get the file:  QuizImage.exe file and put it into the directory you created in Step 1
  3. unpack the "QuizImage.exe" file into the new directory by either:
  4. run the build.bat file in the unpacked directory (from the command line, you should cd to that directory first).

Before you try to run the QuizImage builder, though, here's a description of the controls:

The File Menu has three operations:

The Image Menu has functions related to the images.  The Item Menu has functions related to items  or  features. The Color Menu allows you to choose / change the color of the line you draw that identifies the item or feature. The starting color is black.

The next three controls are used as follows:

The next image button will show you the next image (if any) in a circular queue.  When more than one image is used, the students will also have this button when they do the quiz.

The item name editing box is where you enter the name of the feature that you want to have identified.  You should use only a noun or and adjective plus a noun, since the quiz applet will construct sentences using this (in case they don't get it on the first try; they are given 5 chances before being shown where it is...).

Normally, QuizImage will put the article the in front of the word(s) you enter as the feature name. If you prefer to use the article a or an, just type it as as the first word of the feature name, and QuizImage will not put in the word the.

Don't forget to press the <Enter> key after you type in the feature/item name!!

Hyper-linked text and audio clips

For either the "discover" or "quiz" modes, you may specify an audio file to play when appropriate. These audio clips must be in .AU format and should reside in the same directory as your images. The QuizBuilder will not automatically copy these files (yet...).

To specify the audio filename, just include the phrase: audio:// after the name of the item. For example:

low level stratus audio://strat.au
The name of the audio file is case sensitive and may not contain any imbedded blanks.

If you are making a "discover" lesson, and would like to use the hypertext link feature, just include the complete URL after the name of the item. For example:

low level stratus http://www.abc.ssec.wisc.edu/met101/stratus.html

Just be sure: (Also, if you are saving this lesson as a Quiz, too, the applet will ignore the URL).

If you want to use both the hypertext link and audio clip for a single item, just put the two specifications together (separated by at least one blank space). For example:

low level stratus audio://strat.au http://www.abc.ssec.wisc.edu/met101/stratus.html

The Item List box shows a list of all the items you've created for this lesson.  Just click on one to make it editable.

Finally, the image window will contain the image(s) you choose.  Nothing can really happen until you put at least one image there, so all the Item buttons and menus are deactivated until you do.

Building a quiz

Here's the general process when you're starting from scratch:
  1. Use the Image Menu --> add Image to get your (first) image
  2. Use the Item Menu --> add Item to then add one or more items; each time do this:
    1. type in the name of the feature in the item name editing box. Be sure to press Enter at the end.
    2. use the mouse/pointer to outline the feature by dragging around on the screen:  at the start of your outline, press and hold the mouse button while moving the pointer around the feature. Release the button when done -- you don't have to close off the polygon -- the software will do that for you. If you want to have more than one polygon to define the feature, just draw another one.
    3. If you want to change colors of the polygon(s), use the Colors Menu to pick. If you use more than one polygon to define an item, they will all be the same color.
    4. If you don't like the drawing, you should delete the polygon and then redraw it. To delete a polygon, select the Item Menu --> delete Polygon. Then move the pointer (which now looks like a hand) into the polygon you want to delete, and click.
  3. Use the File Menu --> Save Lesson to save the lesson. Be sure to name your file with a .html or .htm extension!   You should use a new directory for each new lesson!. What this does is:
  4. You can do a quick test of your quiz by pointing your browser into this 'save' directory to the HTML file you specified.
The directory you save the lesson into should be accessible by your Web server, or otherwise be unique so you can copy all the files from there to your Web server.  In addition to the HTML and image files, you will need to have the *.class files as well.

Running the QuizBuilder

Questions, comments, suggestions, whatever...

Please send an email message to: Tom Whittaker

This work was supported by a grant from the University of Wisconsin-Madison, and is Copyright (1999) by Tom Whittaker.