Versions Compared

Version Old Version 2 New Version Current
Changes made by

Carol SoftChalk

Carol SoftChalk

Saved on

Key

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

Image Map Activity

With the Image Map Activity, you can give students users an image with specific parts you want them to be able to identify by clicking on that spot (unlimited). 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.

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)

Character limitsNumber of hotspots:

Unlimited

Panel
bgColor#DEEBFF

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 740 px 1020px 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.

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).

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 Map Activity.pngImage Added

Panel
bgColor#DEEBFF

Tips

  1. When a user clicks the X in the activity, the card is removed from the deck.
    This is a study guide feature that allows the user to customize the deck to meet their study needs.
    The card is maintained in the activity and will repopulate when the page is refreshed.

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

  3. Customize the Animation method used to Card Flip, Move to Next Card, or Move to Previous

<insert video of animation changes>

  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.

Image Map Zoom.mp4
Panel
bgColor#DEEBFF

Accessibility

Screen readers will also read out loud:

  • Activity Title

  • Activity Instructions

  • Complete Button

  • Activity Keyboard Command List

  • Slide Hotspot Heading/Description text

  • Hotspot Image Alternative Text

Panel
bgColor#DEEBFF

Keyboard Command list for Activity

Image Map Keyboard Commands.pngImage Added

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 Click Plus Icon.pngImage Added to create a HotSpot

  4. Click and drag to color part of the image.
    Use the icon to drag an
    image (optional).
    4.

Panel
bgColor#DEEBFF

Students do not see the HotSpot
drawing.

  1. Enter text in the Heading

(50-
character limit)

  1. and add text,
    images, and more in the


  1. Description area.

5.

  1. Repeat STEPS

3 and

  1. 2-4 until all

hot
spots

  1. HotSpots 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

  1. .

6.

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

7.

  1. Preview the lesson changes.

Panel
bgColor#DEEBFF

Image Map Activity video

Image Map Act.mp4

Panel
bgColor#DEEBFF

Show Hints (on)

Image Map Show Hints.pngImage Added

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 Image of Show Hints EnabledON

Image Map Show HotSpots.pngImage Added
Panel
bgColor#DEEBFF

Show Hints (off)

Image Map Show Hints off.pngImage Added

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

Panel
bgColor#DEEBFF

Video Image of Show Hints Disabled

Panel
bgColor#DEEBFF

Customize Hotspot Description

OFF

Image Map no HotSpots.pngImage Added
Panel
bgColor#DEEBFF
panel
bgColor#DEEBFF

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.

Panel
bgColor#DEEBFF

Image of HotSpot color pallet

Hot Spot Color.pngImage Added
Panel
bgColor#DEEBFF

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.

Panel
bgColor#DEEBFF

Image of HotSpot fields

HotSpot Heading and Description.pngImage Added

Image Map Activity Mobile Views

Vertical

Horizontal

Image Map Vertical.pngImage Added

Image Map Horizontal.pngImage Added