Skip to main content
This site uses cookies to provide you with a greater user experience. By using Exceed LMS, you accept our use of cookies.
Intellum
Get Started
Help Articles
Courses
All Topics

Hot Graphic Component

  • By Intellum Documenation
  • Published: Dec 2, 2021
  • Duration 5m
  • Difficulty Beginner
  • Rating
    Average rating: 0 No reviews

Outline

The Hot Graphic component lets you display an image with clickable hotspots on. The Hot Graphic component allows the learner to interact with the component to get additional information about the topic.

This article provides an overview of the Hot Graphic component, component setup and behavior, and examples of Hot Graphic component configurations.

Component overview

The Hot Graphic component is an interactive component that lets the learner click on hot spots displayed on an image to reveal more information. The Hot Graphic component is flexible and lets you select to build in icons, text, or numbers for your component hot spots. The Hot Graphic item can contain only text or text and media.

The Hot Graphic component is fully responsive and can be set to be displayed as a left, full-width, or right positioned component in your Evolve course.

Component set up

Follow these steps to add the Hot Graphic component to a Block:

  1. Click Add Component.
  2. Use the component search or scroll to find the Hot Graphic component.
  3. Click the Hot Graphic component and select Add Left, Add Full, or Add Right .

Click the Edit Component icon on the newly added Hot Graphic component to begin set up.

General section

Add Hot Graphic Title, or a Hot Graphic Display Title, as needed. Hot Graphic Display Title is seen by learners.

Add your Hot Graphic Body. Use the text editor to style and format your text, as needed.

  1. Add Hot Graphic Instruction Text that tells users how to use the component.
  2. Add Instruction text for mobile devices.

Heads up!

The Instruction text for mobile devices will not be used if the Desktop Layout for Mobile behaviour is enabled.

Include an Aria Label for screen readers, as needed.

Add Next Button Aria Label and Previous Button Aria Label, as needed. This setting is used if the Hot Graphic popup is shown as a carousel.

Enter the text to be displayed as the Popup Close Button Text.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Hot Graphic component that can display an icon and label prior to the Hot Graphic component completion, which changes to a different icon and label once the Hot Graphic component is completed.

Behaviour section

In the Behaviour section, toggle to enable Set Desktop Layout for Mobile.

Toggle to Use Mobile Hotspot Positions to allow hotspot items to be repositioned on mobile.

Toggle to enable Hide Interaction Label on Mobile.

Toggle Has Scrollable Image to allow the Hot Graphic image to scroll through touch and drag.

Enable Show Popup as carousel to display all the items on the Hot Graphic component as a carousel in the popup.

Toggle Tooltip Items as needed.

Enable Display Item Inline to show the selected item inline above the Hot Graphic component image.

Appearance section

  1. In the Appearance section, you set Hotspot Icon.
  2. Set Visited Hotspot Icon to be displayed for visited hotspots.

Heads up!

Hotspot Icon and Visited Hotspot Icon can be overridden in each Hot Graphic component Item.

In the Appearance section, you can select Use Hotspot Colors instead of using the default setting that is set to Use Theme Colors.

Set Text Hotspot Styles and Mobile Text Hotspot Styles, as needed.

Heads up!

Text Hotspot Styles and Mobile Text Hotspot Styles can be overridden in each Hot Graphic component Item.

Finally, in the Appearance section, you can enter Tooltip Content Max Height. By default, this is set to 300.

Animations section

In the Animations section, toggle to display Hotspot Pulse Animation for hotspots that have not been visited.

Heads up!

The Hotspot Pulse Animation is only available for icon or number hotspots.

Toggle Slide Items to allow animation on the next item when using Carousel popup.

Select to enable Fade in Item, Scale in Item and set Easing style as needed.

Heads up!

The animations Fade in Item, Scale in Item, and Easing are only available for Hot Graphic component Items using Carousel popup.

Add Images & Hot Graphic Items

Images section

  1. In the Images section, you select a Desktop Image to display on desktop-sized screens.
  2. Add Image Alt Text, as needed.
  3. Select a Mobile Image that will display on mobile sized screens.
  4. Add Mobile Image Alt Text, as needed.

Scroll down and toggle to Enable Graphic Text. This will allow you to place text on the Hot Graphic Image. Add Graphic Text and use the text editor to style and format your text, as needed.

Set Graphic Text Layout and do other optional settings for your Graphic Text as needed.

Items section

In the Items section, you add Hotgraphic Items to your Hot Graphic.

Add a new Hotgraphic Item.

Add Hotspot Title and Hotspot Body. Use the text editor to style and format your text, as needed.

  1. Click the blue buttons to set positions for Hotspot position and Mobile Hotspot positions.
  2. Select Hotspot Type. The options are Icon, Text, or Item Number. By default, this is set to Icon.
  1. As needed, click the blue buttons to select icon for Hotspot Icon and Visited Hotspot Icon.
  2. Add Hotspot Aria Label and Hotspot Completed Aria Label as needed.

Select Media Type to be displayed for the Hotgraphic Item. Media Type options are Image, Video, Gif, and Audio. Depending on the selected Media Type, select your media and settings for the Hot Graphic Item.

Finally, select Hotspot Image Layout. This option allows you to select the position of the media relative to the text inside the popup. By default, this is set to position Right.

Add, Duplicate and Delete Hotgraphic Items as needed.

Component Examples

The Hot Graphic component gives you a lot of flexibility. Below are examples that illustrate different Hot Graphic component setups:

Example 1 – displays Hot Graphic component with individual set hotspots on the image. This example illustrates hotspots with icons, numbers, and text settings. In this example the text hotspot (Item 3) has been configured to display as a button.

Example 2 – displays a Hot Graphic Item displayed as Carousel.

Example 3 – shows an example of a Hot Graphic component popup.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.