Narrative
The narrative component lets you scroll through a series of images each with some accompanying text.
This component is always full-width.
The Adapt Authoring tool allows you to add a Narrative component on the left or right. This appears to be a bug in the component as using the Narrative component at half-width can produce some odd results. Use half-width Narratives with caution.
Why use an Narrative?
- As the name implies, Narrative components are astoundingly good at helping you tell a story.
- Narratives are particularly good for showing dialogue between two or more characters, with each step of the conversation being accompanied by an image. This photo story approach can be used to provide context for the learning about to follow, to illustrate real world application of the learning or to show the impact on people when the learning hasn’t been applied correctly.
- Narratives can also be used to present case studies, where the different displays are used to set the scene, show the key events and then the outcome.
- The narrative can also be used when you want to illustrate the constituent steps that make up a larger process.
Why avoid using a Narrative?
- The area for text in each step of the Narrative is small. The component doesn’t have a good way of dealing with large blocks of text.
- Narrative navigation is sequential and there is no way to disable this, making it difficult for a user to view a specific item.
- Narrative steps require images. In addition, those images should all be the same size or the Narrative component will be difficult to navigate.
Narrative Settings
The Narrative component inherits all the settings common to the Presentation Components.
On mobile devices, the Narrative changes its behavior slightly, requiring the user to click the “strapline” to view the text. This field is used to provide a different set of instructions on mobile. If left blank, the contents of the Instruction field is used instead.
Move navigation to text area
Removes the navigation from the image and instead places the navigation in the text area. This setting is stylistic and has no impact on behavior.
Set Completion of Narrative on
| Setting | Description |
|---|---|
| inview | The Narrative component is marked complete when the item is completely in view. |
| allitems | The Narrative component will be marked complete once the learner has viewed all of the items. |
This contains the list of items you’ve added to the component. When you click the Add button, a dialog will slide-out from the right side of the screen allowing you to populate the narrative item. The fields in this dialog are:
The title that appears at the top of the text area for this item.
The ARIA Level for the title. The default level 0 allows Adapt to set this dynamically. Should be left set to the default unless specifically instructed to change this by an accessibility expert or developer.
The text that appears in the text block for this item.
Required. The graphic asset for this item.
The alternative text for this graphic.
A line of text to be used to supply an attribution for the original artist if required by the license of the graphic.
Required: The title for the item that the user will click on to view the text on mobile devices.
Recommended Sizes
Narrative images are width-constrained — meaning it’s important that your images are at least the minimum width. Because of this, there are no Photoshop templates provided.
The graphic in each item should be 680px wide but can be whatever height your content requires.
However, all item graphics should be the same aspect ratio. Using different sized images may make the Narrative bounce or shift when the learner moves from item to item.