Hot Spot Activity

Hot Spot Activity

Give users an image with specific parts you want them to be able to identify by clicking on that spot.
Users can earn points for each correct answer.

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 Prompt character limits:

Up to 75 characters

Activity image best practice:

Recommended main image maximum size 1020px width x 500px 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-20240913-131230.png
  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.

Hot Spot Zoom.mp4

Screen readers will also read out loud:

  • Activity Title

  • Activity Instructions

  • Activity Keyboard Command List

  • Skip/Complete/Retry Button

  • Hotspot Prompt text

  • Hotspot Alternative Text

Create a Hot Spot 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.

  1. Enter text in the Prompt field.

  2. Enter text in the Alternative Text field.

  3. Repeat STEPS 2-5 until all HotSpots have been created.

  4. When finished, click OK.
    The Hot Spot Activity placeholder will appear in the lesson.

7. Preview the lesson changes.

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

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

Notice a different color appears when
adding a new hotspot.

Click on the hotspot color swatch to determine the color.

With Show Answers: 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.

The drawn hotspot on the image is only visible in the Hot Spot Activity editor. Users do not see the drawing.

Hot Spot Activity Mobile Views

Vertical

Horizontal

Vertical

Horizontal

Â