Differences

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

--- interactivity_drag_and_drop_labelling [2022/12/02 10:57] – removed - external edit (Unknown date) 127.0.0.1
+++ interactivity_drag_and_drop_labelling [2023/09/25 09:43] (current) – [Hotspot: Core Properties] jsmith
@@ Line 1: / Line 1: @@
+====== Interactivity > Drag and Drop Labelling ======
+This page presents an image which includes drop zones, and a number of labels which learners have to drag into the correct zone on the image. If a label is incorrectly placed it bounces back to its start position; when it is correctly placed it fixes in the drop zone, and (optionally) further information is displayed.
+===== Example demo =====
+{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#draganddroplabelling}}
+or view at [[https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#draganddroplabelling| Xerte Page Types > Interactivity: Drag and Drop Labelling]] (opens in new tab).
+===== Editor Interface =====
+{{:xerte-inter-draganddroplabelling-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. |
+| Align Text | Puts the Page Title and Page Text in either the left or right panel {**Left**/Right}; the image is displayed in the other panel. | Drop-down |   |
+| Image: File | Uploads the image (through Media Browser) on which you will create the hotspots i.e. the drop zones)  | Upload |   |
+| Image: Description | Adds a description for accessibility | Text |   |
+| Hotspot Highlight: Show Highlight | Shows all the hotspots with a highlighted boundary | Tick box | The task will be more challenging if the box is unchecked.  In addition, the task may look more aesthetically pleasing without the hotspots superimposed on the image.  |
+| Hotspot Highlight: Colour | Sets the colour of the hotspot boundaries | Number | Use HTML colour codes for consistency - see the [[:usingcolour|Using Colour]] page.  |
+| Interactivity | Choose between {**Describe**/Match} formats  | Drop- down | In **Describe **format, the hotspots will only accept the correct draggable object. In **Match **format, the learner completes all the drops before clicking on the Submit button. Tracking is available in **Match **format only.  |
+==== Top Level: Optional Properties ====
+=== Page-specific ===
+The first 7 of these relate to **Hotspot Appearance**.
+^ Property ^ Description ^ Type ^ Additional information ^
+| Label position | Sets the starting position for the labels (i.e. the draggable objects) {**Below image**/Below Text} | Drop down  |   |
+| 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 ^
+| Try Again Text | Feedback that appears, in **Describe **format only, if a draggable object is incorrectly placed  | Text  | Default - "Try Again"  |
+| Submit button label for Match | Text on the "Submit button (**Match **format only) | Text | Default - "Submit"  |
+After you have created the settings and added the image, go to **New Hotspot **.
+{{ :xerte-inter-dragand_droplabelling-newhotspot.jpg?400 }}
+==== Hotspot: Core Properties ====
+^ Property ^ Description ^ Type ^ Additional information ^
+| Title | Text that appears in the label (i.e. the draggable object)  | Text  |   |
+| Edit Hotspot | Add and change the shape of the hotspot here. | Hotspot editor | Only __rectangular __hotspots are are possible with this page type.  |
+| Text | Text (and other content) that appears, only in **Describe **format, when a draggable object has been dropped on the correct hotspot. | Text+ (Toolbar) |   |
+New Hotspot also has a **Tooltip Description **as an Optional Property. This allows a description for accessibility to be added,
+{{tag>pagetype interactivity}}