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

{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#hotspotquestion 98%, 465px noborder}}

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


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

{{:xerte-inter-hotspotquestion-editor.jpg?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. |
| 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 [[:trackingandweighting|Tracking and Weighting ]]page for more information on weighting. |

=== General ===

See [[:optional_properties#General optional properties|General Optional Properties]]


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

{{tag>pagetype interactivity}}