H5P Interactives

Create simple, fun and interactive online learning activities.

 

Using the H5P Drag & Drop Tool

This guide is specifically for the Drag & Drop Questions questions with an image. The response requires the student 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 students to drag items on the page to their correct destinations. Use a drag and drop question to review something 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.

This guide uses an H5P object. 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:

 

Step One: Create a New Drag & Drop Object


 1. In Learning Space,  choose the module where you want the H5P to be in, click on New then New Document.

 

new new documentv1 

2. Click the Insert Stuff  insert stuff  button.

 

insert staff

 

3.  Click H5P Learning Object.

 

H5P Learning Object

 

4.  Click Add Content.

 

add content

 

4. From the Content Type menu, Choose Drag and Drop.

choose drag and drop

 

Note: 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

 

drag and drop details


5. Add a Title that will be easy to remember and find.


Drag and Drop Title

 

Step Two: Add Setting


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.

 

Add background

 

2. Edit the Task size to specify how large (in px) the play area should be.

 

task size

 

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.

 

overall feedback

 

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 whole task disables individual answer scoring and penalties for inccorect 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. 

 

Behavioural settings

 

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 will display a button for users to view the object in full screen. 

Show score points shows each answer's allotted score. 

 

Drop zone highlighting


Show Title displays the title or uncheck if you do not want it visible.

 

show title

 

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. 

text overrides and translations

 

Step Three: Add Task


 Scroll back up and click Task to continue to the next step.

 

step2 task

 

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.

Step 2 1


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.

 

label field  


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 corect match and Message displayed on incorrect match.This is optional.

Tip text field and feedback fields


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.

Tip: If this is your first drag and drop activity, we recommend you check these options to keep things simple.

radio buttons

 

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.

 

Two buttons: remove button and done button. Done is highlighted

 

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 the editing page.

 Tip: If you are creating several same drop zones, it is handy to set up one and click copy icon in the pop-up menu.

example drop zone on image

 

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.

 

text icon

  

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.

draggable

 

3. Tick the drop zone that the text draggable corresponds to.

 

tick laptop


4. Click Done to save your changes and create the draggable.

The highlighted done button as before


5. This will insert the draggable into the activity. Use the menu to resize, move or delete the draggable.

example object complete


6. Keep adding the draggable until you've created enough to fill all of your drop zones.

Note: 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.

Step Four: Finalise and Preview


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 - Folder: (previously 'My Content') All your content will be saved in one spot, within a root folder.

3 - 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. 

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 - Send Score to LMS: (previously 'Send to Gradebook') 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. 


title new h5p

 

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.

 

save and insert

 

preview of object

 

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 area) you are working on.

 

 insert

 

3. Alternatively, you can click Save.

 

h5p save 

 

4. Then click Insert.

 

h5p insert

 


Further Support

Visit the VU Collaborate Help site at https://vucollaboratehelp.vu.edu.au for up to date information and resources on blended learning or email This email address is being protected from spambots. You need JavaScript enabled to view it..

Contact ITS Service Desk on (03) 9919 2777 or via self-service http://servicedesk.vu.edu.au for further technical support.