Match Image Pairs Quiz Tool
Released: July, 2018
Updated July, 2018
This small WebApp is designed to allow you to set up a 2-column quiz to
identify pairs of images. The student draws lines connecting pairs of
images from the left- and right-hand columns. They can then click a
button to find out if their answers are correct.
To set this up, you create the space for the image matching, using a common <div>
HTML tag. The images will be scaled to fit within this domain. (The
student may click on an image to get a (probably) larger view of that
image.)
The images in each column are presented in a random order each time
the webapp is invoked.
When the student presses the "Check my connections" button, the lines
between images are re-drawn in either thick, solid green, or thin, dashed
red. These provide visual clues as to which answers are correct (and
not). Here's what a typical display might look like...after selecting but
before and after clicking "Check my connections" button:
Here's that example, but "live" so you can experiment with it....
Match photos to GOES-16 ABI visible images
(click and hold on an image, draw a line to other column)
("right click" to open an image)
Did you match them all?
The HTML for this looks like this (note that line-breaks in the <body> element are
for clarity only...):
<![CDATA[
<html>
<head>
<script src="matchimage.js"></script>
</head>
<body onload="MatchImage.go('a.IMG_6548_june30.jpg, b.IMG_8285_july1.jpeg, c.IMG_8339_july2.jpeg, d.IMG_8399_july6.jpeg',
'1.GOES16VIS.GIF, 2.GOES16VIS.GIF, 3.GOES16VIS.GIF, 4.GOES16VIS.GIF',
'mdiv', 'separator=blue)">
....
<div id="mdiv" style="background-color:lightgray;height:500px; width:400px"> </div>
]]>
If you would like this presented horizontally, then you would add the 4th
parameter as 'horizontal=yes;prompt=Click to check',
change your height and width values and you would get this:
There are 4 parameters (each is a quoted string and separated by commas) to the MatchImage.go() call:
- A list of image filenames (in a quoted string, separated by commas) for the
images in the left column.
- A similar list of filenames for the right column
- The id of the <div> element to contain the display/quiz.
- An optional 4th parameter, as a single quoted string, that is a list of
options in the form keyword=value, separated by semi-colons:
- horizontal=yes (use horizontal orientation; otherwise, vertical)
- separator=color (set the color, by name (e.g., blue), of the line separating the images)
- line_colors=black, red, green (list the colors for the drawing line, the incorrect line, and the correct line)
- path=<path to images> (if not in the same directory - e.g., path=images/)
- left_random=no (left column images will be shown in order)
top_random=no (for horizontal orientation, top row images will be shown in order)o
- right_random=no (right column images will be shown in order)
bottom_random=no (for horizontal orientation, bottom row images will be shown in order)
- prompt=<text for button> (alternative text for click-to-check button)
An example: 'path=images/; left_random=no; prompt=Click me to check'
You may download the matchimage.js code or a
minified version, matchimage_min.js by
right-clicking on these links and doing a "Save As".
This webapp is Copyright © 2018 by Tom Whittaker. It was inspired
by Tim Schmit (NOAA). It is free to use, copy, etc.