adapt-contrib-hotgraphic-audio

Hot Graphic Audio is a presentation component bundled with the Adapt framework.

When a learner clicks on a hot spot within the image, a pop-up is displayed that consists of text with an image. Visit the Hot Graphic Audio wiki for more information about its functionality and for explanations of key properties.

In the standard configuration, the 'hot spots' are clickable 'pin' icons overlaying the main image - but it's possible to replace the default 'pin' icon with a custom image (see the _pin setting for more information) or, using the _useGraphicsAsPins setting, create a 'tiled layout' of images where each 'tile' acts as a hot spot.

Installation

Hot Graphic Audio must be installed manually.

Settings Overview

The attributes listed below are used in components.json to configure Hot Graphic Audio, and are properly formatted as JSON in example.json.

Attributes

core model attributes: These are inherited by every Adapt component. Read more.

_component (string):

This must be set to: "hotgraphic".

_classes (string):

CSS class name(s) to be applied to this component's containing div. The class must be predefined in one of the Less files. Separate multiple classes with a space.

_layout (string):

This defines the horizontal position of the component in the block. Acceptable values are full, left or right.

instruction (string):

This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.

mobileBody (string):

This is optional text that will be substituted for body when Adapt.device.screenSize is small (i.e. when viewed on mobile devices, except when the _isNarrativeOnMobile setting is set to false).

mobileInstruction (string):

This is optional text that will be substituted for instruction when Adapt.device.screenSize is small (i.e. when viewed on mobile devices, except when the _isNarrativeOnMobile setting is set to false).

_setCompletionOn (string):

Determines when Adapt will register this component as having been completed by the learner. Acceptable values are "allItems" and "inview". "allItems" requires each pop-up item to be visited. "inview" requires the Hot Graphic Audio component to enter the view port completely.

_canCycleThroughPagination (boolean):

Enables the pop-ups to be cycled through endlessly using either the previous or next icon. When set to true, clicking "next" on the final stage will display the very first stage. When set to false, the final stage will display only a "previous" icon. The default is false.

_hidePagination (boolean):

When set to true, hides the "previous" and "next" icons and progress indicator (e.g., "1/5") on the pop-up's toolbar. The default is false.

_useNumbersAsPins (boolean):

If set to true, the pin icons will be replaced with the item number. Useful if you want pins to be visited in a set order or show steps in a process. The default is false.

_isNarrativeOnMobile (boolean):

When set to false the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in mobile view instead of being replaced by a Narrative interaction. The default is true.

_useGraphicsAsPins (boolean):

If set to true, the image specified by _graphic.src will be ignored and the popup images specified in _items[n]._graphic.src will instead be laid out in a 2 item width grid system. See example.json for a working example. The default is false.

_isRound (boolean):

If set to true, the popup images will inherit a 50% border radius. Ideal for use with images that are square that are required to be round. The default is false.

_graphic (object):

The graphic object that defines the image over which the hot spots are rendered (except when the _useGraphicsAsPins setting is enabled). It contains the following settings:

src (string):

File name (including path) of the image. Path should be relative to the src folder (e.g. "course/en/images/origami-menu-two.jpg").

alt (string):

The alternative text for this image. Assign alt text to images that convey course content only.

attribution (string):

Optional text to be displayed as an attribution. By default it is displayed below the image. Adjust positioning by modifying CSS. Text can contain HTML tags, e.g., Copyright © 2015 by <b>Lukasz 'Severiaan' Grela</b>.

_items (array):

Multiple items may be created. Each entry in the array should be an object, containing the following settings:

_top (number):

Each item must contain _top and _left coordinates to define its position over the main graphic. Enter a percentage value (0-100) that this item should be from the top border of the main graphic.

_left (number):

Enter a percentage value (0-100) that this item should be from the left border of the main graphic.

title (string):

This is the title text for the hot spot's pop-up.

_ariaLevel (number):

ARIA level to assign to the popup title. If not set, it will default to using the value assigned to _notify in the _accessibility section of config.json.

body (string):

This is the main text for a hot spot pop-up.

strapline (string):

This text is displayed when Adapt.device.screenSize is small (i.e. when viewed on mobile devices, except when the _isNarrativeOnMobile setting is set to false). It is presented in a title bar above the image.

_classes (string):

CSS class name(s) to be applied to the popup item. Classes available by default are:

• "align-image-left" (aligns the item image to the left)
• "hide-desktop-image" (hides the pop up image in desktop view)
• "hide-popup-image" (hides the pop up image for all screen sizes)

_graphic (object):

The image that is associated with this item - which will be displayed in a popup when the pin is selected by the learner (although note that the _useGraphicsAsPins setting allows for it to be used as a 'tile' in the main image instead). It contains the following settings:

src (string):

File name (including path) of the image. Path should be relative to the src folder (e.g. "course/en/images/origami-menu-two.jpg").

alt (string):

The alternative text for this image. Assign alt text to images that convey course content only.

attribution (string):

Optional text to be displayed as an attribution. By default it is displayed below the image. Adjust positioning by modifying CSS. Text can contain HTML tags, e.g., Copyright © 2015 by <b>Lukasz 'Severiaan' Grela</b>.

_classes (string):

CSS class name(s) to be applied to hotgraphic pin or, alternatively, to the hotspot tile when _useGraphicsAsPins is set to true. The class must be predefined in one of the Less files. Separate multiple classes with a space.

_pin (object):

Optional image that can appear instead of the default pin icon. See example.json for a working example. It contains the following settings:

src (string):

File name (including path) of the image. Path should be relative to the src folder (e.g. "course/en/images/origami-menu-two.jpg").

alt (string):

The alternative text for this image. Assign alt text to images that convey course content only.

Accessibility

Hot Graphic Audio has two elements assigned a label using the aria-label attribute: ariaRegion and popupPagination. These labels are not visible elements. They are utilized by assistive technology such as screen readers. Should the label texts need to be customised, they can be found within the globals object in properties.schema.

Back to Top

---

Version number: 5.4.4
Framework versions: 5.5+
Author / maintainer: Adapt Core Team with contributors
Accessibility support: WAI AA
RTL support: Yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 14 for macOS/iOS/iPadOS, Opera