Image Hotspot
What is an Image Hotspot Element?
An image hotspot element creates interactive assessments where learners click on specific areas within an image.
It’s ideal for testing visual recognition, spatial understanding, or identifying elements in diagrams, charts, maps, and other visuals.
Edit General Image Hotspot Element Settings
Open an image hotspot element settings window to start editing.
1
Success criteria
Sets the logic for the hotspot element completion.
Select an option:
One: Requires to select one of the areas to answer correctly;
All: Requires to select all of the areas to answer correctly.
2
Display feedback icon
Shows / hides the feedback icons next to the image hotspot.
Select an option:
Click Yes to enable the feedback icons;
Click No to hide the feedback icons.
3
Display feedback
Shows / hides the Feedback type: general option.
Select an option:
Click Yes to enable the feedback option;
Click No to hide the feedback field.
4
Feedback type: general
Enable the Display feedback option to start editing.
Allows to set general feedback.
Select an option from the drop-down menu:
Correct/Incorrect: Displays feedback depending on whether the entered answer was correct or incorrect;
Any Response: Displays informational feedback regardless of whether the entered answer was correct or incorrect.
6
Accessibility
Click Add Alt text to open the accessibility settings window.
7
Scaling
Select an image scaling option from the drop-down menu:
Auto: Automatically selects the best fit for the display;
Fill: Scales the image to cover the entire area while maintaining the aspect ratio (cropping if necessary);
Fit: Scales the image to be as large as possible without cropping or distortion;
Stretch: Resizes the image to fill the area by distorting its aspect ratio.
8
Overlay
Click + to add the overlay color and its intensity by using a hex color code or selecting a shade from the palette or Branding color list.
9
Type
Select a selected spot type option from the drop-down menu:
Icon: Shows icon on the image after selecting a hotspot;
No icon: Doesn’t show any icon on the image after selecting a hotspot.
The changes will be saved automatically.
Manage a Hotspot
1
Add a hotspot
a. Hover over the image; b. Hold and drag to select an image area.
2
Move a hotspot
a. Hover over the image hotspot; b. Hold and drag it.
3
Resize a hotspot
a. Click on the image hotspot; b. Hold and drag its corner.
4
Delete a hotspot
a. Click on the image hotspot; b. Click the Delete icon.
The changes will be saved automatically.
Brand an Image Hotspot Element
Set corporate branding for an image hotspot element.
Use the pro mode of the editor to set an element branding different from the corporate branding template.
Last updated