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...):

<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:

  1. A list of image filenames (in a quoted string, separated by commas) for the images in the left column.
  2. A similar list of filenames for the right column
  3. The id of the <div> element to contain the display/quiz.
  4. An optional 4th parameter, as a single quoted string, that is a list of options in the form keyword=value, separated by semi-colons: 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.