In the sidebar to the left of your screen in WordPress, scroll over H5P Content and select Add New from the drop down box.
Use the search bar to search for Drag and Drop and select it from the list. If you have never used it before, you will need to click Get.
Once you have selected Drag and Drop from the list, you will see the Drag and Drop editor window. After entering a title, add a background image by selecting + Add. Your background image will act as the placement for your drag and drop placeholders and items.
Define the size of the drag and drop question by entering in the width and height of the background image. For example, if the image has a width of 800 px and a height of 532 px, you should use that size for the task.
Please note that the drag and drop question will be scaled to the maximum width of the page where it is placed, after saving. The size defines the width and height of the editor as well as the aspect ratio of the drag and drop question, rather than the actual size in pixels when it is viewed.
Under behavioral settings, you can enable the Retry button if you want learners to have multiple chances to attempt the drag and drop activity.
The Give one point for the whole task option is more relevant when you add drag and drop questions to question sets, interactive videos, or course presentations. This option controls the score the learner gets for solving the drag and drop question when it is placed in a sequence of multiple tasks. Since this example is a stand-alone drag and drop question, it doesn’t matter whether or not you leave this option checked.
Press the Task tab in the top right half of the editor to start creating the task itself. You’ll see that the background image is displayed with the size defined in the Settings tab.
You will see a toolbar above the background image. The toolbar allows you to insert dropzones, texts, and images.
Dropzones are areas on which Text and Image draggable elements can be dropped.
Create a dropzone by clicking the Dropzone button in the toolbar. Drag the dropzone onto the background image and drop it where you would like it to go. You can also adjust the size of the dropzone by clicking and dragging the points along the edges of the box.
Once you let go of the dropzone, the dropzone editing options menu will appear. Add a label title and set the opacity to 50 to make it semi-transparent. You can also make the dropzone invisible by setting opacity to 0. Click done when you’re finished with the options.
Next, you can add text or images as your draggable items. To add text, click the text button and drag it onto the background image. You may want it place it off to the side of the image.
Once you let go of the text, the text editing options menu will appear. Add the title and text. Under Select drop zones, check “Select all”. You want to do this for all of your text options. We want the learner to be able to drop the all the text options on all of the dropzones, even if they drop them into the incorrect one. If this option was unchecked, the learner would not be allowed to drop the text on the dropzone.
Move and resize the draggable object as desired. You move it around by pressing on it and dragging it to where you want it. You resize it by clicking and dragging the points along the edges of the box.
Add as many text and dropzone options as you like. This example shows 3 dropzones and 3 text objects.
Finally, you need to define which match between dropzone and draggable elements is correct. To do this, double click on a dropzone. This will bring up the same dropzone options as before.
Since you have defined an association between the three draggable objects and the 3 dropzones, you will now see a Select correct elements option. In this example, I am checking “Text: SD Card Slots” as the correct match for the SD Card dropzone. Click “Done”.
Now match the remaining 2 dropzones to their corresponding texts by choosing the correct element in each dropzone editing options. When you’re finished, click the “update” button to save your changes to the activity.
As a last step, you might want to add an instructional text such as: “Correctly label the parts of the XA10 camera”. Add a Text element and type in our instructions in the text field. You should title it “Instructions” or something similar. This text is not a draggable element, so you will not need to select a dropzone.
Place the instructions wherever you like.
Additionally, you can use the title of the Drag and Drop activity as a place to list instructions as well.
For more information on Drag and Drop, check out this tutorial on H5P.org.
