adapt-hint

Hint is an extension for the Adapt framework.

The extension appends a button to any component. On selecting the button, additional content is displayed in a popup. The button can contain either text and/or icon and can be configured per component.

The intended use is a 'hint' for question components, providing additional content to aid answering a question. However, Hint can also be used to provide 'more info' for presentation components, whether to declutter text heavy content or to group content of a particular type/theme.

For components with a header (i.e. the display title, body and instruction fields), the button is displayed after the header. For components without a header, the button is displayed after the widget.

Installation

Open the /src/extensions folder in a new terminal window on Mac OSX or right click the folder and select 'Git Bash Here' on Windows.

Git clone the component, making sure to delete the hidden .git folder from the adapt-hint folder.

Settings Overview

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

Attributes

_isEnabled (boolean): Turns Hint on and off. Acceptable values are true and false.

title (string): The title displayed in the popup.

altTitle (string): This will be read out by screen readers as an alternative title if no visual title is included.

body (string): The body text displayed in the popup.

_imageAlignment (string): Defines the alignment of the popup image. Left: Image aligned to the left of the text area. Top: Image aligned above the text area. Right: Image aligned to the right of the text area. Bottom: Image aligned below the text area. The default alignment is right.

_graphic (object): The image displayed in the popup. 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>.

_button (object): The Hint button contains values for _iconClass, _alignIconRight, text and ariaLabel.

_iconClass (string): CSS class name to be applied to the button icon. The class must be predefined in one of the Less files with the corresponding icon added as part of a font. See list of available vanilla icons to choose from. Default is icon-question.

_alignIconright (boolean): Defines whether the icon is aligned to the left or right of the text (if applicable). Default is true, which aligns the icon to the right of the text.

text (string): The text that displays in the button.

ariaLabel (string): This will be read out by screen readers as alternative text if no visual button text is included.

Accessibility

A global Hint button aria-label can be set within the _globals._extensions._hint.openButtonText object in course.json (or Project settings > Globals in the Adapt Authoring Tool). Default is Open hint. This will be overridden when setting either text or ariaLabel on the component's model in components.json.

Limitations

No known limitations.

Author / maintainer: Kineo
Accessibility support: WAI AA
RTL support: Yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari for macOS/iOS/iPadOS, Opera