Table of Contents
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
or view at Xerte Page Types > Interactivity: Drag and Drop Labelling (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 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 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 Tracking and Weighting page for more information on weighting. |
General
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 .
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,