Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

With the Image Matching Activity, learners scroll through images until they find the
one that is associated with the given image.

This is an image to image matching activity. See an online example.

Panel
bgColor#DEEBFF

Things to know

Activity title:

Up to 35 characters look best (50 max)

Activity instruction:

Up to 50 characters look best (500 max)

Number of activity cards:

Up to 4 cards look best (12 max).

A vertical scrollbar appears at the left after 4 cards.

Activity image best practice:

1:1 Aspect Ratio images work best for 6 4 match pairs.

16:9 or 4:3 Aspect Ratio images work best for 4+ match pairs.

Panel
bgColor#DEEBFF

Image pixel size per aspect ratio (without text):

1:1 Aspect Ratio - minimum:
182 pixel x 182 pixel

4:3 Aspect Ratio - minimum:
?? pixel x ?? pixel

16:9 Aspect Ratio - minimum:
288 pixel x 162 pixel

  • Double the pixel size if the image has text.

A 1:1 ratio means that an image’s width and height are equal, creating a square. (Example: a 1080 x 1080 pixel image)

Minimum 179 width x134 height pixels.

A 1:1 ratio means that an image’s width is equal to the image height.

A 4:3 ratio mean that an image’s width of is 4 units and a height of 3 units.

A unit can be inches, lines, or pixels

There are several free image editors available to adjust the image aspect ratio.

Panel
bgColor#DEEBFF

To maintain image quality, crop the image dimensions using any image editor (ex. Paint/Paintbrush).

If an image is re-sized but not cropped to match pixel dimensions, the image may be stretched or squeezed to fit which can degrade the image quality.

Panel
bgColor#DEEBFF

Activity Image

Image Matching Activity.pngImage Matching Activity - Set of 6.png
Panel
bgColor#DEEBFF

Tip

  1. Learners can click the magnifying glass icon to enlarge the image.

  2. Images with little or no text work best.

Image Matching with Magnifying Glass icon.png
Panel
bgColor#DEEBFF

Accessibility

Screen readers will also read out loud:

  • Activity Title

  • Activity Instructions

  • Activity Keyboard Command List

  • Image alt text

Panel
bgColor#DEEBFF

Keyboard Command list for Activity

Image Matching Activity Keyboard commands.png

Create an Image Matching Activity

Panel
bgColor#DEEBFF

Build the Activity

  1. Click the ‘Add Matching’ + icon to create an image matching pair.

  2. Click Select File to insert
    a local image file,
    SoftChalk Cloud image file or
    URL image file location for
    each matching image pair.

  3. Add alt text for each image.
    (required)

  4. Repeat STEPS 1-3 until all
    matching image pair sets have
    been created.

  5. Add points to the activity,
    enable Retry, Show Answers
    or Feedback sounds
    (optional).

  6. Click OK to insert the activity
    into your lesson

Panel
bgColor#DEEBFF

Image Matching Activity video

Image Matching Activity.mp4

Image Matching Activity Mobile Views

Vertical

Horizontal

Image Matching-Dentistry-Vertical Mobile View.pngImage Matching-Dentistry-Horizontal Mobile View.png