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