Differences

This shows you the differences between two versions of the page.

--- connector_hotspotimageconnector_page [2022/12/02 10:57] – removed - external edit (Unknown date) 127.0.0.1
+++ connector_hotspotimageconnector_page [2024/10/31 14:26] (current) – [Hot Spot: Optional Properties] tadachi
@@ Line 1: / Line 1: @@
+====== Connectors > Hotspot Image Connector ======
+This page presents an image marked up with hotspots. The hotspots can be configured to provide a range of responses when a learner clicks on them: display a text or image; present a video or audio for the learner to play; display an embedded external webpage; take the learner to another page in the project or to an external webpage.
+The **Hotspot Image** page in **Interactivity **can provide similar functionality, but most of the response options have to be added through the Text editor for each hotspot.
+===== Example demo =====
+''{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#hotspotimageconnector}}''
+or view at [[https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#hotspotimageconnector|Xerte Page Types > Connectors: Hotspot Image Connector]] (opens in new tab).
+===== Editor Interface =====
+{{:xerte-connect-hotspotimage-editor.jpg?600|:playground:xerte-connect-hotspotimage-editor.jpg}}\\
+==== 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. |
+| Align Text | Puts all the text in either the left or right panel {**Left**/Right} | Drop-down | \\ |
+| Highlight Hotspots | Displays all the hotspots when the learner lands on the page | Tick box | If this box is unchecked, the highlights only appear, one by one, on mouseover. |
+| Image: File | Adds the image (through XOT Media Browser) | Link to Media Browser | Click on the upload icon, import the image into Media Browser, and click on the thumbnail to add here. |
+| Image: Size | {Small/Medium/**Large**/Full} | Drop-down |   |
+| Image: Description | Adds a description for accessibility | Text | \\ |
+==== Top Level: Optional Properties ====
+=== Page Specific ===
+^ **Property** ^ **Description** ^ **Type** ^ **Additional information** ^
+| Dialog position: Vertical | The vertical position of the dialog box that appears when the learner clicks on the hotspot {Top/**Middle**/Bottom} | Drop-down | Default - "Next" |
+| Dialog position: Horizontal | The horizontal position of the dialog box that appears when the learner clicks on the hotspot {Left/**Centre**/Right} | Drop-down  |   |
+| Hotspot Highlight Appearance: Stroke colour | The colour of the edges of the hotspot. This appears only on mouseover, unless the **Highlight Hotspots** box has been checked..  | Colour picker  |   |
+| Hotspot Highlight Appearance: Stroke opacity | The opacity (a decimal number between 0 and 1) of the edges of the hotspot. | Number |   |
+| Hotspot Highlight Appearance: Stroke width | Width of the edges of the hotspot | Number |   |
+| Hotspot Highlight Appearance: Fill hotspot | If selected the hotspot remains filled with colour until the next hotspot is selected. | Tick box |   |
+| Hotspot Highlight Appearance: Fill colour | The colour of the fill | Colour picker  |   |
+| Hotspot Highlight Appearance: Fill opacity | The opacity (a decimal number between 0 and 1) of the fill. | Number  |   |
+| Hotspot Highlight Appearance: Show tooltip | If selected, a tooltip appears on mouseover of a hotspot. The text in the tooltip is the Title of that hotspot. | Tick box |   |
+=== General ===
+See[[:optional_properties| General Optional Properties]].
+After you have created the settings and added the image, go to **New Hotspot **.
+{{ :xerte-connect-hotspotimage-newhotspot.jpg?400 |:playground:hotspot_image_add_hotspot.jpg}}\\
+==== Hotspot: Core Properties ====
+^ **Property** ^ **Description** ^ **Type** ^ **Additional information** ^
+| Title | A label or title that appears above the text associated with a hotspot | Text | \\ |
+| Edit Hotspot | Add and change the shape of the hotspot here | Hotspot editor | \\ |
+| Show Title | A title that displays at the top of the Dialog box. | Tick box | Note that this property only appears if you select Text, Image, Sound, or Video from Optional Properties. |
+| Display in | {**Dialog**/Lightbox} Dialog displays as a pop-up that can be dragged around the screen. Lightbox places the text/image/audio player in the centre of the screen and greys out other content until the Lightbox is closed. | Drop- down | Note that this property only appears if you select Text, Image or Sound from Optional Properties. |
+==== Hot Spot: Optional Properties ====
+=== Page-specific ===
+These enable you to determine the type of response to clicking on the hotspot.
+^ **Property** ^ **Description** ^ **Type** ^ **Additional information** ^
+| Destination Page | %%This is for an internal link. Choose the page in the Xerte project to which the selection of this answer will take the learner. You have a choice of first or last page in the project, the next page, previous page, or any other specific page in the project.%%  | Drop-down | \\ |
+| External Destination Page | Takes the learner to an external webpage. | Text | The browser navigates away from this project. Choose **New window...** instead, if you want the external webpage and the Xerte project to be visible at the same time, e.g. on dual monitors. |
+| iframe | This embeds external content within the Xerte dialog or lightbox | Number | Refer to iframe in the [[glossary|glossary ]]for more information on how iframes work |
+| Image: File | Upload the image here, through the Media Browser | Link to Media Browser | \\ |
+| Image: Description | Enter a Description for Accessibility | Text\\ | \\ |
+| New window: URL | Add the URL if you want an external webpage to open in a new window | URL\\ | The HTML box (see below) must be blank when using this option.\\ |
+| New window: HTML | As an alternative to a link to an external webpage, you can add HTML content here. | Text+ (Toolbar) | \\ |
+| New window:  Width | Sets the width of the new window, in pixels | Number |   |
+| New window: Height | Sets the height of the new window, in pixels | Number |   |
+| Sound: File  | Upload an audio file (MP3) here, through Media Browser  | Link to Media Browser  |   |
+| Sound: Auto-Play  | {**Audio Player**/Auto-Play} Audio Player allows the learner to play, pause, navigate and adjust volume; Auto-Play automatically starts and stops the audio  | Drop-down  |   |
+| Sound: Start Time  | If you only want to play a segment of the imported audio, set the start time (in seconds) here.  | Number  | This Optional Property only becomes visible in the Optional Properties pane, if you select Sound... from the Optional Properties  |
+| Sound: End Time | If you only want to play a segment of the imported audio, set the end time (in seconds) here. | Number | This Optional Property only becomes visible in the Optional Properties pane, if you select Sound... from the Optional Properties |
+| Text | Text (and/or other content) that is displayed in the dialog or lightbox | Text+ (Toolbar) |   |
+| Tooltip Description | Text that appears on mouseover of the hotspot | Text | This text cannot be formatted |
+| Video: File | Upload a video file here, through Media Browser | Link to Media Browser |   |
+| Video: Description | Add a description for accessibility here | Text |   |
+{{tag>pagetype connector}}