Table of Contents
Navigator > Interactive List
This page presents a list of hyperlinked items. When learners click on an item it brings up content (text, images etc.). When they click on another item in the list, the content is replaced with new content.
Example demo
or view at Xerte Page Types > Navigators: Interactive List (opens in new tab).
Editor Interface
Top Level: Core Properties
| Property | Description | Type | Additional information |
|---|---|---|---|
| Page Title | Text that appears in header of published page | Text | |
| Page Text | Content that appears at the top of the left-hand panel, above the clickable items | Text+ (Toolbar) | Use this to give the context or instructions for the task. Other content (e.g. images, audio, video) can be embedded here. |
| Panel width | The size of the panel displaying the content that appears on click in the right-hand panel {Small/Medium/Large} | Drop- down | |
| Show first item | Select this if you want the content relating to the the first item to be visible in the right-hand panel when the learner lands on the page (i.e. before any clicking) | Tick box |
Top Level: Optional Properties
Page-specific
| Property | Description | Type | Additional information |
|---|---|---|---|
| Background Button Colour | The background colour of the clickable items | Colour Picker | |
| Hover Button Colour | The colour that a clickable item changes to when you mouseover it | Colour Picker | |
| Text Colour | The colour of the text on the clickable items | Colour Picker |
General
See General Optional Properties
There are no Language Options for this page type.
When you have created the content for the activity and the settings, you need to add items to the list. Click on New List Item.
New List Item: Core Properties
| Property | Description | Type | Tooltip |
|---|---|---|---|
| Title | The text on the clickable item | Text | |
| Text | The content that appears in the right-hand panel when the item is clicked on | Text+ (Toolbar) | Can be text, image, audio, video etc. |
You can also add an Image as an Optional Property. You can, of course, add an image through the Text Editor, but it may display better if you add it as an Optional Property. You also prompted to add a Description for Accessibility.