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

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:

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:

• The QuizImage Builder is what you, the instructor, uses to create the quiz by assembling the image(s), marking and naming the features, and saving it.  Of course, a quiz can be re-editted later.
• The applet, which is what the students run through their Web browser. There are now two versions of this:
  1. QuizImage which will ask students to find features within the image(s).
  2. DiscoverImage which will pop-up the feature names as the pointer is moved over them; you may also include hypertext links so they can get more information.

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:
• using your Windows Explorer to locate the QuizImage.exe file and then just run it (be sure to check the "Target Directory" that will be used to unpack the software into - change it to the directory created in Step 1 using the "Browse" button if necessary)
• or...use the unzip command if you're not running on Windows
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:

• Load Lesson let's you pick an existing quiz file (by selecting the HTML created previously) and then edit it.
• Save Quiz Lesson will let you choose a name to save the HTML as; all image files and Java class file are automatically copied into the same directory so they're ready to be used
• Save Discover Lesson will let you choose a name to save the HTML as for the "discover" mode, where the name of the items appears as the student moves the pointer over the feature.
• Exit will terminate the QuizImage Builder

• add Image allows you to retrieve an image (GIF or JPEG files only) and include it with the lesson
• delete Image will delete the currently-viewed image from the lesson

• add Item let's you add a new item (or feature) that the students will be asked to identify
• insert Item will insert an item into the ordered list of items at the point of the one currently selected; others will be moved to make room for this item.
• delete Item will delete the currently-selected item from the lesson
• delete Polygon will allow you to delete one polygon associated with this item

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.

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

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

• You must use the format above (that is, begin with http://
• The URL must follow the item name, and must not contain any imbedded blanks!

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

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:
• Creates HTML an file (or updates it if you were actually modifying a previous lesson) using the file name and directory you specify
• Copies the image(s) into the same directory that you saved the HTML into
• Puts the 'class' files (Java code) into the directory as well.
4. You can do a quick test of your quiz by pointing your browser into this 'save' directory to the HTML file you specified.

Running the QuizBuilder

• If you have Windows, the just switch to the directory you unpacked the code into and type: build

(or run the build.bat file from the Explorer).
• If you are running Unix, then edit the build.bat file so it reads:

        java -cp ./ QuizBuilder
After you save it, make it executable. Also, for you Unix folks, you will need to have the Java Runtime Environment installed. Please refer here for pointers to where you can get the JRE for your environment.

Questions, comments, suggestions, whatever...

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