Xerte Community Documentation

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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.

{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#annotateddiagram}}

or view at [[https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#annotateddiagram| Xerte Page Types > Interactivity: Annotated Diagram]] (opens in new tab).

===== Editor Interface =====

{{:xerte-inter-annotated_diagram-editor.jpg?600&direct}}

==== 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 Tex**t.  If you choose this option, however, you may want to change the **Highlight Type**, if you have selected **Arrow**.

=== General ===

See [[:optional_properties|General Optional Properties]].

==== 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.

{{ :annotated_diagram_-_add_hotspot.jpg?400 }}


==== 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.

{{tag>pagetype interactivity}}