hotgraphic wiki

#adapt-contrib-hotgraphic

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

The Hot Graphic component allows you to place one or more pins (hot spots) over an image. When a user clicks on a hot spot within the image, a popup is displayed that consists of text with an optional image. Controls are provided to move between the next and previous hot spots within the pop-up window. Controls may be removed through configuration in order to force a learner to click each hot spot in order to reveal its content.

When the viewport size changes to the smallest range (e.g, smart phone), this component behaves like Adapt's Narrative component (adapt-contrib-narrative). All information remains available but is formatted as a narrative rather than triggered by hot spots.

Link to Usage and Tips

##Installation

As one of Adapt's core components, Hot Graphic is included with the installation of the Adapt framework and the installation of the Adapt authoring tool.

• If Hot Graphic has been uninstalled from the Adapt framework, it may be reinstalled. With the Adapt CLI installed, run the following from the command line:
  adapt install adapt-contrib-hotgraphic

• If Hot Graphic has been uninstalled from the Adapt authoring tool, it may be reinstalled using the Plug-in Manager.

Back to Top

##Settings

The settings listed below are the properties that may be configured within the authoring tool. Listed first is the name of the property as it is presented in the authoring tool. It is followed in parentheses by the property as it is used in the Hot Graphic source code. Finally, an explanation is provided to help the course author better utilize the property.

The relationship between Hot Graphic's properties and the way they are presented in the authoring tool’s interface is governed by properties.schema.

Title (title): A reference title for the component. Title is distinct from the Display Title which, if present, appears above the component. If Display Title is rather long, Title provides the opportunity to use a shortened form in tighter spaces, such as in a menu or in the drawer.

Display Title (displayTitle): Optional text that will display as a title above the component. It can be used as a headline. In the authoring tool, Title and Display Title may be linked for easy input. Click the chain icon to toggle linking.

Body (body): Optional text that appears above the component. It can be used in a variety of ways, including as an introduction to the content in the component. HTML is permitted.

Instruction (instruction): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.

Classes (_classes): Custom classes predefined in the theme's Less files may be applied to this component. To do this, enter the name of the CSS class. If using more than one class, separate each with a space.

Layout (_layout): This defines the horizontal position of the component in the block that contains it. This property is set when the component is being added to the block. When Add to left or Add to right is selected, another component can occupy the space next to it. If Add is selected, the component spans the width of the containing block.

Further settings for this component are:

Mobile only body text (mobileBody): This body text is displayed on mobile devices when this component turns into a Narrative. It replaces Body.

Mobile only instruction text (mobileInstruction): This text is displayed on mobile devices when this component turns into a Narrative. It replaces Instruction.

Hide pagination (_hidePagination): When set to true, hides the "previous" and "next" icons and progress indicator (e.g., "1/5", meaning "first out of five") on the pop-up's toolbar.

Cycle through item pagination (_canCycleThroughPagination): 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.

Main hotgraphic (_graphic): The component's main image upon which the pins are positioned. It has three properties: src, alt, and title.

Select graphic: (src): File name (including path) of the image. This text will be set when you upload an image or select one from the Asset Manager.

Alternative text: (alt): This text becomes the image’s alt attribute. It is intended to be a text equivalent of the information conveyed by the image. It is read by assistive technology such as screen readers.

Graphic title: (title): This text becomes the image’s title attribute. It should complement the alt attribute. It is displayed in a “tool tip” when the cursor hovers over the image.

Hot Graphic Pins (_items): Multiple items can be created. Each item represents one clickable hot spot and contains values for Hotspot title, Hotspot main body text, Strapline, and Item Graphic.

Hotspot title (title): This is the main title for a hot spot popup.

Hotspot main body text (body): This is the main text for a hot spot popup.

Strapline (strapline): Enter text for a strapline (header). This will be displayed when viewport size changes to the smallest range and is shown as a title above the image.

Item Graphic (_graphic): Each hotspot can contain an image. Details for the image are entered within this setting.

Alternative text (alt): This text becomes the image’s alt attribute. It is intended to be a text equivalent of the information conveyed by the image. It is read by assistive technology such as screen readers.

Select graphic (src): File name (including path) of the image. This text will be set when you upload an image or select one from the Asset Manager.

Graphic title (title): This text becomes the image’s title attribute. It should complement the alt attribute. It is displayed in a “tool tip” when the cursor hovers over the image.

Pin Position - Left (_left): The position of each hot spot on the hot graphic is determined by coordinates. Enter the number of pixels this pin should be from the left border of the main graphic.

Pin Position - Top (_top): The position of each hot spot on the hot graphic is determined by coordinates. Enter the number of pixels this pin should be from the top border of the main graphic.

Back to Top

##Usage

Should something be said about moving the placement of straplines via classes?

##Limitations

When viewport size changes to the smallest range this component will behave like the Narrative component. All information will be available but as a narrative rather than as hot spots on a graphic.

Back to Top