Image Pairing Tutorial

Example

Here's the Image Pairing activity we'll create in this tutorial:

When to use Image Pairing

The Image pairing activity lists one group of images on the left side and another group on the right side. The task is solved by dragging images from one side to match the corresponding image on the other side. The activity can be used for any task that requires the user to match one object with another, for example:

Match a country flag with the country map, match an object with a place where it is found, match a tree with its leaves, etc...

Step 1: Topic

In this example, we are going to match images of animals with images of what fur/feather they have. Animals we are going to match are:

Flamingo, Peacock, Tiger, Jaguar, Zebra, and Parrot 

Step 2: Creating an Image Pairing

Select the New content option and choose Image Pairing from the list of Content types:

Step 3: Image Pairing editor

The Image Pairing editor should now appear. The editor should look something like this:

In this tutorial, we'll focus on creating the Image Pairing content using the above example.

Step 4: Preparing content

Before we start creating content please download the following images to your computer: 

Animals:

     

Fur/feather patterns:

To do this, right-click at each image and choose "Save image as..."
Now, when we have all images prepared, we can proceed to create content.

Step 5: Creating content

In the section "Cards" for "Image" click "Add image" and upload the image of the flamingo. For "Matching image" upload the image of a pink feather. It should look like this:


Repeat the process for the rest. A new card is added by clicking on the blue "Add Card" button. In the end, you should have 6 cards.

Step 6: Finishing up

Save the node/article to view your finished Image Pairing activity. 
You should now have the same result as the example at the top of the page. 
Feel free to leave any comments or suggestions on how to improve this tutorial.