Hot Graphic
The Hot Graphic component allows you to position icons over an image. When an icon is selected, content associated with its corresponding location is displayed in a window over the image. This component will fall back to a narrative when viewed on mobile.
This component is always full-width.
The Adapt Authoring tool allows you to insert a Hot Graphic on the left or right, despite the component’s requirements. This works with some situations and not in others. Please carefully check your half-width Hot Graphics on multiple computers before use.
Unlike other components, the Hot Graphic completely transforms itself on mobile. Because of this, your body text and instructions that are specific to desktop may not be valid on mobile devices. Adapt has added in additional fields to allow you to present correct instructions on mobile devices. If those are left blank, the desktop instructions are used.
Hot Graphic Settings
The Hot Graphic component inherits all the settings common to the Presentation Components.
Determines when completion should be triggered. Options are:
Setting | Description |
---|---|
allitems | The component is marked complete when all items have been viewed. |
inview | The component is marked complete when the Hot Graphic is scrolled into view by the user. |
Main Hot Graphic: Src
This is the main graphic that you will position your pins on. Keep in mind that this graphic will be hidden on mobile devices.
The alternative text for the main graphic.
An optional field for providing attribution for the image when the license requires.
An alternative body text that is displayed only on mobile devices when the Hot Graphic is transformed into a Narrative component. This field can be left blank to use the Body text instead.
An alternative instruction line that is displayed only on mobile devices when the Hot Graphic is transformed into a Narrative component. This field can be left blank to use the Instruction text instead.
If enabled, the progress indicator and previous and next controls will not be shown on the popup toolbar.
If enabled, the items in the open popup will be allowed to cycle through continuously.
Checking this option will remove the main Hot Graphic and the pins entirely. It will attempt to use the images in the Hot Graphic items themselves as pieces of the another image to be assembled like a jigsaw puzzle.
Unfortunately, there is no way to use this option without a custom theme or custom CSS.
This is a list of the items in the Hot Graphic. When you click the Add button, a dialog will slide-out from the right side of the screen allowing you to populate the slide. The fields in this dialog are:
The Title of the dialog item for this pin.
The ARIA Heading Level for this pin. This should be left at the default (0) unless specifically directed to change it by an accessibility expert or a developer.
Required: Body text for the dialog of this pin.
Required: A mobile-friendly title that appears as the item clickable area in the narrative on mobile devices.
Required: Graphic to be used inside the pin dialog and as the main graphic on mobile devices.
The alternative text for this graphic.
An optional field for providing attribution for the image when the license requires.
HTML class names that can be applied to the graphic. Leave this blank unless directed to alter the value by a developer.
Graphic to be used as a custom pin. Leave blank to use the default pin.
The Alt text for the custom pin.
HTML class names that can be applied to the popup when this pin is active. Leave this blank unless directed to alter the value by a developer.
Required: A positive integer percentage this hot spot should be from the left border of the main graphic.
Required: A positive integer percentage this hot spot should be from the top border of the main graphic.
Positioning the pins in a Hot Graphic is can be difficult.
First, your pins shouldn’t require pixel perfect positioning. Even in the best of situations, the pins will shift around a little depending on the user’s settings.
Second, the pin’s top and left position refer to the top-left corner of the pin from the top-left corner of the graphic you use. Setting the pins left position at “100%” will position the left side of the pin at the far right of the component.
Finally, pins are not constrained to the graphic. Entering a number higher than 100 (or less than 0) will position the pin outside the graphic.
The Hot Graphic uses multiple images and thus has different size requirements for each. In general, all images are width-contstrained — meaning it’s important that your images are at least the minimum width. Because of this, there are no Photoshop templates provided.
The main hotgraphic image should be full-width and be at least 984px wide.
If you use a Hot Graphic on the left or right, the main hotgraphic image should be 448px wide.
Pin item graphics are displayed in two ways: Inside the popup for a pin and spanned when the user is on a mobile device. We recommend that your pin item graphics are sized to work on mobile first and allowed to be resized in the dialogs.
Pin Item images should be 400px wide but can be whatever height your content requires.
However, all Pin Item Graphics should be the same aspect ratio. Using different sized images may make the Hot Graphic bounce or shift on mobile devices when the learner moves from item to item.
Pin Graphics must be square and will be reduced to 48px by 48px when displayed on screen.