Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

Image Map Activity

With the Image Map Activity, you can give users an image with specific parts you want them to be able to identify. As they scroll over the image, a popup will display additional information for that spot. They can practice as many times as they want.

See online example.

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

You will want to avoid overlapping hotspots.

Hotspot Heading character Limit:

Up to 50 characters

Hotspot Description word Limits:

Up to 150 words look best

Up to 75 words if using an image

Activity image best practice:

Recommended main image size 1020px width x 665px height

Recommended hotspot image size 366px width x 290px height

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.

Image of Activity

Image Map Activity.png

Tips

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

  2. In the activity editor, you can Zoom into the image to better draw the hotspot. Use the icon to drag the Zoom image.

Accessibility

Screen readers will also read out loud:

  • Activity Title

  • Activity Instructions

  • Complete Button

  • Activity Keyboard Command List

  • Hotspot Heading/Description text

  • Hotspot Image Alternative Text

Keyboard Command list for Activity

Image Map Keyboard Commands.png

Create a Image Map Activity

Build the Activity

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

  2. Click Plus Icon.png to create a HotSpot

  3. Click and drag to color part of the image.

Students do not see the HotSpot
drawing.

  1. Enter text in the Heading and add text,
    images, and more in the Description area.

  2. Repeat STEPS 2-4 until all HotSpots have been created.

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

  4. Preview the lesson changes.

Image Map Activity video

Image Map Act.mp4

Show Hints (on)

Image Map Show Hints.png

When Show Hints is toggle ON, the colored hot spot will appear on the image when the student completes the activity.

Image of Show Hints ON

Image Map Show HotSpots.png

Show Hints (off)

Image Map Show Hints off.png

When Show Hints is toggled OFF, the colored hot spot will not appear on the image. The Complete button is not available.

Image of Show Hints OFF

Image Map no HotSpots.png

Customize Hot Spot Color

Notice a different color appears when
adding a new hotspot.

Click on the hotspot color swatch to determine the color.

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

The dot is placed with the first click to draw the hotspot on the image.

Only the activity creator will see the drawn hotspot on the image.

Image of HotSpot color pallet

Hot Spot Color.png

Customize Hot Spot Description

Each hotspot has a Heading and Description field.

Use the Description field to add additional information and content to the hotspot popup, such as hyperlinks, images and equations.

Image of HotSpot fields

HotSpot Heading and Description.png

Image Map Activity Mobile Views

Vertical

Horizontal

  • No labels