Table of Contents
Interactivity > Annotated diagram
This page allows for connections to be made between zones on an image (or hotspots) and sections of text. The learner clicks on;
- either some text in a list
- or hotspots on an image
and the connection between the hotspot and the text is made. In addition, some text related to the connection can be revealed whilst the connection is still active. If the learner clicks on another item in the list or another hotspot, a new connection is made, replacing the previous one.
The Hotspot Image page is similar, but in this case the learner explores the image by clicking on hotspots on the image, which reveals text. Here again, clicking on a new hotspot reveals new text, replacing text related to the previous hotspot.
Example demo
Try clicking on either parts of the image or their names in the list in the left pane.
or view at Xerte Page Types > Interactivity: Annotated Diagram (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 page | Text+ (Toolbar) | Use this to give the context or instructions for the task. Other content (e.g. images, audio, video) can be embedded here. |
| Text Align | Puts all the text, including the clickable items, either in a panel on the left or below the image {Left/Bottom} | Drop-down | |
| Panel Width | Sets the dimensions of the right-hand panel containing the image {Small/Medium/Large} | Drop-down | |
| Image: File | Adds the image (through XOT Media Browser) | Upload | Click on the upload icon, import the image into Media Browser, and click on the thumbnail to add here. |
| Image: Description | Adds a description for accessibility | Text | |
| Highlight: Type | Highlights the hotspot clicked on, and (if selected) adds a line or arrow between the text and the part of the image {Line, Oval, Rectangle, Arrow} | Drop-down | |
| Highlight: Colour | Changes the colour of the highlighting, only really clear on Line or Arrow. | Colour picker | For consistency, make a list of the HTML Color Picker codes you want to use in your project (or collection of projects), and input the one you want here. |
Top Level: Optional Properties
Page-specific
There is only one page-specific Optional Property at the top level; Hide List allows you to hide the list of hotspots that displays in the Page Text. If you choose this option, however, you may want to change the Highlight Type, if you have selected Arrow.
General
Add New Hotspot
Having set up the overall settings and properties for the page, you need to add hotspots (and possibly groups of hotspots).
- New Hotspot if there is just one hotspot associated with one label (.e.g. “Saddle” in the demo above)
- or New Hotspot Group if multiple hotspots are associated with one label (e.g. “Pedals” in the demo above). After you have added a new Hotspot Group and given it a Group Title (i.e. a label) and, optionally, some descriptive text, you need to add New Hotspots within that group.
Hotspot: Core Properties
| Property | Description | Type | Additional information |
|---|---|---|---|
| Title | The clickable text that goes in the list of items | Text | |
| Edit Hotspot | Add and change the shape of the hotspot here | Hotspot editor | |
| Text | The text that is revealed after the link has been made | Text+ |
There is only one Optional Property for hotspots; Tooltip Description allows you to add a description that pops up on mouseover of the hotspot. There are no Language Options for hotspots.
Hotspot Group: Core Properties
| Property | Description | Type | Additional information |
|---|---|---|---|
| Group Title | The clickable text that goes in the list of items | Text | |
| Text | The text that is revealed after the link has been made | Text+ |
After you have made a New Hotspot Group, you need to add New Hotspots within that group.
There are no Optional Properties or Language Options for hotspot groups.
Further information
Try to avoid having more than 5 hotspots or hotspot groups on one page. This page does not display well if you need to scroll up and down to see a label, description and image. If you need more than 5, can the task be split over 2 or more pages, with the same image (but different hotspots?) on each page.
In the Highlight: Type property, Line and Arrow make a clearer connection between the label and the hotspot than other setting options.