Versions Compared

Key

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

Image Map Activity

With the Image Map Activity, you can give students an image with specific parts you want them to be able to identify by clicking on that spot. They can practice as many times as they want.

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

Unlimited

Hotspot Heading character Limit:

Up to 50 characters

Hotspot Description character Limit:

Unlimited

Activity image best practice:

Recommended image size 740 px width x 240 px height to fill slide without a scrollbar.

Panel
bgColor#DEEBFF

A scrollbar will be available to view content that expands more than 740 pixel width or 255 pixel height.

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

Panel
bgColor#DEEBFF

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

Image of Activity

image-20240906-163234.png

Panel
bgColor#DEEBFF

Tips

  1. You will want to avoid overlapping hotspots to ensure smooth student interactions with the activity.

Panel
bgColor#DEEBFF

Accessibility

Screen readers will also read out loud:

  • Activity Title

  • Activity Instructions

  • Activity Keyboard Command List

  • Hotspot text

  • Hotspot Alternative Text

Panel
bgColor#DEEBFF

Keyboard Command list for Activity

Create a Image Map Activity

Panel
bgColor#DEEBFF

Build the Activity

  1. Click Select File to insert your local image file, SoftChalk Cloud image file or URL image file location.

  2. Enabled ‘Show hints (optional).
    If ‘Show hints’ is enabled, then
    the colored hot spot will appear
    on the image when the student
    completes the activity

  3. lick to color part of the image.
    Use the icon to drag an
    image (optional).
    4. Enter text in the Heading (50-
    character limit) and add text,
    images, and more in the
    Description area.
    5. Repeat STEPS 3 and 4 until all hot
    spots have been created.
    Notice a different color appears when
    adding another hotspot. (Click on the
    color to select a different color for the
    hot spot.)

Panel
bgColor#DEEBFF

Students do not see the hotspot
drawing.

6. When finished, click OK.
The Image Map Activity placeholder will appear in the lesson.

7. Preview the lesson changes.

Panel
bgColor#DEEBFF

Image Map Activity video

Panel
bgColor#DEEBFF

Show Hints (on)

When Show Hints is toggle ON, the

the colored hot spot will appear
on the image when the student
completes the activity

Panel
bgColor#DEEBFF

Video of Show Hints Enabled

Panel
bgColor#DEEBFF

Show Hints (off)

When Show Hints is toggled OFF, the F

Panel
bgColor#DEEBFF

Video of Show Hints Disabled

Panel
bgColor#DEEBFF

Customize Hotspot Description

Panel
bgColor#DEEBFF

Panel
bgColor#DEEBFF

Customize Hot Spot Color

With Show Hints: ON, students will see this color to identify the hotspot in the image

Panel
bgColor#DEEBFF

Image Map Activity Mobile Views

Vertical

Horizontal