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....
The HTML for this looks like this (note that line-breaks in the <body> element are for clarity only...):
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:
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".