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

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

Use the pro mode of the editor to set an element branding different from the corporate branding template.