Image Hotspot

What is an Image Hotspot Element?

An image hotspot is an interactive Quiz element that places clickable markers on an image.

Edit General Image Hotspot Element Settings

Openarrow-up-right an image hotspot element settings window to start editing.

1

Success criteria

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

Click No to hide the feedback icon.

3

Display feedback

Click No to hide the feedback field.

4

Feedback type: general

Select a general feedback option from the drop-down menu:

  • Correct/Incorrect: Displays feedback depending on whether the answer was correct or incorrect;

  • Any Response: Displays informational feedback regardless of whether the answer was correct or incorrect.

5

Picture

Click + or Upload to open the image uploading settings window.

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

Hover over the image, then hold and drag to select an image area.

2

Move a Hotspot

Hover over the image hotspot, then hold and drag it.

3

Resize a Hotspot

Click on the image hotspot, then hold and drag its corner.

4

Delete a Hotspot

Click on the image hotspot, then click the Delete icon.

Brand an Image Hotspot Element

Set corporate branding for an image hotspot element.

circle-check

Last updated