narrative wiki

#adapt-contrib-narrative

Narrative is a presentation component bundled with the Adapt framework.

Narrative displays items (or slides) that present an image and text side-by-side. Left and right navigation controls allow the learner to progress horizontally through the items. Optional text may precede it above. Useful for detailing a sequential process.

On mobile devices, the narrative text is collapsed above the image.

Back to Top

Link to Usage and Tips

##Installation

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

• If Narrative 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-narrative

• If Narrative 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 Narrative source code. Finally, an explanation is provided to help the course author better utilize the property.

The relationship between Narrative'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.

Classes (_classes): Custom classes predefined in the theme's Less files may be applied to Narrative’s containing div. 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. Use caution when selecting Add to left or Add to right as these do not allow much room for the component to display.

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

Mobile Instruction (mobileInstruction): This is optional instruction text that will be shown when viewed on mobile. It may be used to guide the learner’s interaction with the component.

Move navigation to text area (_hasNavigationInTextArea): Determines the location of the arrows (icons) used to navigate from slide to slide. Navigation can overlay the image or the text. Set to true to have the navigation controls appear in the text region.

Set Completion of Narrative on (_setCompletionOn): Because Narrative contains slides that are hidden from view, there can be different interpretations of when a learner has completed this component. Narrative accommodates two interpretations: inview and allItems. When inview is selected, the component will be flagged as complete when the component is wholly visible, top and bottom. inview does not account for interaction with the slides. If it is important that the learner navigates to each slide before the component is flagged as completed, then select allItems. Completion status is used by various modules, including Page Level Progress and Spoor.

Narrative items (_items): Multiple items may be created. Each item represents one slide and contains values for the narrative (title, body), the image (_graphic), and the slide's header when viewed on a mobile device (_strapLine).

Narrative display title (title): This value is the title for this narrative element.

Narrative main text (body): This is the main text for this narrative element.

Narrative graphic (_graphic): The image that appears next to the narrative text. This group contains values for Select Graphic and Alternative Text.

Select Graphic (src): File name (including path) of the image. This text is set when you click the icon to select the graphic asset.

Alternative Text (alt): This text becomes the image’s alt attribute.

Narrative strapline (strapline): This text is displayed as a title above the image when the screen size is small, such as when viewed on a mobile device.

Back to Top

##Limitations

No known limitations.