Xerte Community Documentation

User Tools

Site Tools

Trace: • Optional Property: Script... • Sharing projects and folders • Interactivity > Documentation > Nested Page > New Text Area • Bootstrap > New Text
interactivity_drag_and_drop_labelling

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
interactivity_drag_and_drop_labelling [2022/12/02 10:57] – removed - external edit (Unknown date) 127.0.0.1interactivity_drag_and_drop_labelling [2025/09/12 08:13] (current) – [Further Information] 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.
 +
 +==== Further Information ====
 +
 +:!: **From 3.14**, if a learner moves away from this page and then returns to it, the page state is maintained.  If a learner has dropped any items without submitting, these drops are maintained (and marked) when the learner returns to the page. Previously, if a learner left this page and returned to it, the page would have re-set.
 +
 +{{tag>pagetype interactivity}}