Table of Contents
Interactivity > Hotspot Question
This page presents an image which includes hotspots (i.e. selected areas of the image), and a question asking the learner to click on one or more of the hotspots. On submission the learner is told how many of the hotspots have been correctly identified but not which hotspots have been correctly identified. The number of attempts can be set to give the learner the chance to do the task again until all hotspots have been correctly identified.
Example demo
or view at Xerte Page Types > Interactivity: Hotspot Question (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. |
| Align Text | Puts all the text in either the left or right panel {Left/Right} | Drop-down | |
| Min Text Width | Sets the width of the panel in which the Page Text appears {No Text / Small / Medium / Large} | Drop-down | |
| Image: File | Upload the image here, through Media Browser | Link to Media Browser | |
| Image: Description | Adds a description for accessibility | Text | |
| Show Highlight | Shows all the hotspots with a highlighted boundary | Tick box | |
| Attempts | Add the number of attempts you will allow the learner | Number | |
| Feedback | Feedback displayed on completion of task. | Number |
Top Level: Optional Properties
Page-specific
The first 7 of these relate to Hotspot Appearance.
| Property | Description | Type | Additional information |
|---|---|---|---|
| Stroke colour | The colour of the edges of the hotspot. This appears only on mouseover. | Colour picker | |
| Stroke opacity | The opacity (a decimal number between 0 and 1) of the edges of the hotspot. Opacity relates to how transparent the stroke is in relation to its background. | Number | If you do not want the outline of the hotspot to display, opacity should be set to 0. |
| Stroke width | Width of the edges of the hotspot. | Number | |
| Fill hotspot | If selected the hotspot remains filled with colour until the next hotspot is selected. | Tick box | |
| Fill colour | The colour of the fill. | Colour picker | |
| Fill opacity | The opacity (a decimal number between 0 and 1) of the fill. | Number | If you do not want the shape fill of the hotspot to display, opacity should be set to 0. |
| Show tooltip | If selected, a tooltip appears when the mouse is hovered over the hotspot. The text in the Tooltip Description is the Title of that hotspot. | Tick box | |
| Tracking Score Weight (0=Off) | Allows the task on the page to be weighted relative to other scored pages in the project. | Number | See the Tracking and Weighting page for more information on weighting. |
General
Top Level: Language Options
| Property | Description | Type | Additional information |
|---|---|---|---|
| Score Label | Feedback on how many hotspots have been correctly identified, and how many have not, where /r and /w are the applicable numbers. | Text | Default - “You have /r answer(s) right and /w wrong” |
| Warning Label | Feedback if the learner has not attempted the task. | Text | Default - “You have not selected anything” |
| Try again Label | Tells the learner how many attempts remain, where /a is the number of attempts left. | Text | Default - “Try again, you have /a attempt(s) left” |
| All Correct Label | Tells the learner if they have selected all the correct answers. | Text | Default - “Well done, you have selected all of the correct answers.” |
| All Wrong Label | Tells the learner if they have not selected any correct answers, where /c is the number of correct answers available. | Text | Default - “You have not selected any of the /c correct answers.” |
| Incomplete Correct Label | Tells the learner if they have selected some, but not all, correct answers, where /c is the number of correct answers available. | Text | Default - “You have not selected all of the /c correct answers.” |
| Submit Label | This is the text displayed on the button for learners to register their chosen answers. | Text | Default - “Submit” |
After you have created the settings and added the image, go to New Hotspot.
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 | |
| Correct answer | Identify hotspot as a correct or incorrect answer {True/False}. | Drop-down |
There is only one Optional Property for hotspots. Tooltip Description (Text) allows you to enter a description for accessibility, which is displayed on mouseover. There are no Language Options for hotspots.