Create a Drag & Drop Tool with H5P
This guide is specifically for the Drag & Drop H5P tool.
The response requires the pupil to drag an answer into the image from a pool of responses. Drag and drop questions can help students to review and measure their understanding of the concepts presented.
This type of exercise can add interactivity by asking pupils to drag items on the page to their correct destinations. Use the drag and drop tool as a review device in your course and provide immediate feedback and scores. Students can be given the option to answer the question various times until they get it right. H5P.org also offer their own tutorial on using this interactive with extra details about drag and drop objects.
For getting started on placing H5P into a space, please see Inserting H5P in VU Collaborate.
Below are the steps to use the H5P drag and drop tool:
1. In Learning Space, choose the module where you want the H5P to be in, click on New then New Document.
2. Click the Insert Stuff icon.
3. Click H5P Learning Object.
4. Click Add Content.
4. From the Content-Type menu, Choose Drag and Drop.
If you click on the Details tab next to the preferred tool, a summary of the tool and an option for a demonstration will appear. If it is satisfied with your tool selection, click Use.
5. Add a Title that will be easy to remember and find.
Now, in the settings tab, you have the ability to add a background image, change the size, add feedback, edit behavioural settings and edit text overrides and translations.
1. Click on the Add icon to add a background image. This is optional.
2. Edit the Task size to specify how large (in px) the play area should be.
3. You can also add some custom feedback depending on the percentage a user gets correct. To do so, click Add Range and fill in the feedback for your preferred percentage.
4. Set your preferred Behavioural settings. These determine how the user interacts with the question. Some boxes are checked by default.
Enable Retry will allow infinite attempts.
Require user input before the solution can be viewed ensures that users must enter something before the solution is available.
Give one point for the whole task disables individual answer scoring and penalties for incorrect answers. This will score one point for the task in its entirety.
Apply Penalties will lower the score of users who drop elements in the wrong zones
Enable Score Explanation displays the breakdown of reasons for the final score (this can only be applied when Apply Penalties has been selected).
Background opacity for draggables is the level of transparency for the draggable elements. This should be a number between 1 and 100.
Drop Zone Highlighting: options are When Dragging, Always or Never. These determine when the drop zones will become highlighted.
Spacing for Auto-Align (in px): displays the spacing.
Enable Fullscreen: This will display a button for users to view the object in full screen.
Show score points: This shows each answers allotted score.
Show Title displays the title or unchecks if you do not want it visible.
5. Text overrides and translations are used to change the text of buttons on the object. It is recommended that leaving these at their default setting unless there is something specific you would like on the buttons.
Scroll back up and click Task to continue to the next step.
2.1 Placing the Drop Zones
1. Below the task tab, we can see the image uploaded earlier. The taskbar at the top of the image has three buttons: Drop Zone, Insert Text and Insert Image. Click the Drop Zone button.
2. This opens up an edit screen for the new drop zone. Enter a Label, but leave the Show Label box unchecked to prevent giving students any extra clues.
Background Opacity can be edited to change the level of transparency. If you want the drop zones to be transparent, you can change Background Opacity to 0.
3. You can add a tip if you want to. Click on Tip to open the Tip text field and enter a handy hint.
This is optional.
You can also add Message displayed on correct match and Message displayed on incorrect match.
This is optional.
4. Use the tickbox to determine whether you want the drop zone to accept multiple answers, or just one. You can also enable or disable auto-aligning answers.
If this is your first drag and drop activity, we recommend you check these options to keep things simple.
5. Click Done to save your drop zone and add it to the activity. You can add as many drop zones as you like, to be filled with draggables in later steps.
6. Your drop zone will appear in the activity. You can change its size and position or delete it using the pop-up menu.
To edit it, you can click the pencil icon in the pop-up menu, and this will bring you back to the editing page.
If you are creating several same drop zones, it is handy to set up one and click the copy icon in the pop-up menu.
2.2 Adding the draggable
Draggables are images or pieces of text that correspond with your drop zones.
1. To add a text draggable, click the Text icon in the toolbar.
2. Enter your answer in the Text field. This can be as many words as you like, and a range of colours and sizes, but be mindful of space restrictions and readability.
3. Tick Select All, this will ensure that the drop zone will allow the draggable to enter each zone. This guarantees that incorrect and correct answers are possible.
4. Click Done to save your changes and create the draggable.
5. This will insert the draggable into the activity. Use the menu to resize, move or delete the draggable.
6. Keep adding the draggables until you've created enough to fill all of your drop zones.
You can set a draggable to correspond with multiple drop zones, but for the purpose of this guide, we have used one for each drop zone.
7. Once all draggables and drop zones are created, you will need to click back onto each drop zone, select edit and attach the correct draggable to be associated with the drop zone.
8. Tick the correct draggable to be associated with the drop zone. Select Save once the correct answer has been selected. Continue to edit all drop zones to attach all correct answers to finalise the activity.
Drop zones can have multiple correct answers if selected.
At the bottom of the screen you can adjust your H5P settings (you can leave these settings by default or make alterations):
1 - Display options: (previously 'Display and copyright buttons') What options do you want to be visible for the user, for example, you can tick the display download button to enable students/staff to download the H5P to their own computer. You can also tick the Display embed button, which allows the user to embed the H5P into their HTML editor in VU Collaborate for example.
2 - Publish: This option allows you to make the H5P Unpublished (content can not be inserted into VUC), Protected (content can be inserted into VUC) or Public (visible to the public using a content link and the content can be inserted into LMS and be embedded). Protected is the default setting and it is recommended to leave this setting as it is.
3 - Folder: (previously 'My Content') All your content will be saved in one spot, within a root folder.
4 - Collaborators: (previously 'Authors') In this setting you can add and search for other collaborators and give them access to edit your H5P. For example, if you are teaching a unit with another staff member and you would like them to have access to edit your H5P, then you can use the search field to locate another staff member by typing in their full name.
5 - Sharing: (previously called 'Select value') This is where you share your H5P with others, so they can view and clone your content. There is a folder allocated for each college, for example, 'Arts and Education', select your College and area within the college.
Note: To know more about Sharing and Collaborators, please see H5P Sharing and Collaboration.
6 - LTI Settings : (previously 'Send Score to LMS') In this section you can link your H5P directly to VU Collaborate and also link it to your gradebook. It is recommended to leave this setting as it is, and NOT send the results to the gradebook because the grades are unreliable and inaccurate.
1. Click Save and Insert. A preview of the new drag and drop activity will appear. You can test the object by dragging the corresponding answers into drop zones and click Check to make sure everything is working correctly.
2. The activity is now ready to add to your space. Click Insert to add the drag and drop to the document (or other embeddable areas) you are working on.
3. Alternatively, you can click Save.
4. Then click Insert.
Contact ITS Service Desk on (03) 9919 2777 or via self-service http://servicedesk.vu.edu.au for further technical support.