Drag and Drop

Submitted by H5P Group on Wed, 05/14/2014 - 09:50

A free HTML5-based drag and drop question type allowing creatives to create many forms of drag and drop using only a web browser. Create engaging challenges using H5P and Drag and Drop in publishing systems like Canvas, Brightspace, Blackboard, Moodle and WordPress.

711

Simple drag and drop

H5P Group

68888

Chessboard Setup

Avi Megiddo

Try to set up the chess board! Drag and drop the pieces to the correct starting positions. 1 point for each correctly placed piece.

63159

Simple matching game

H5P Group

63697

Matching game with auto align

H5P Group

Would you like to create content like this on your own?

Get started

Register on H5P.com to start creating H5P Interactive content. Your content can be accessed via direct link, embeded, or inserted into any learning management system that supports LTI integration.

And more

Description

Drag and drop questions enable the learner to associate two or more elements and to make logical connections in a visual way. Create Drag and drop questions using both text and images as draggable alternatives. H5P Drag and drop questions support multiple draggable to drop zone combinations; one-to-one, one-to-many, many-to-one and many-to-many.

Learn how to create a Drag and drop question in this tutorial.

Drag and drop questions may be used standalone, but can also be included in:

The H5P content on this page is licensed under Creative Commons Attribution 4.0 International unless another Creative Commons license is specified under rights of use. The author of the content is H5P Group

New to H5P? Read the installation guide to get H5P on your own site.

As in most activities used in teaching/learning, we need to distinguish here between 2 types: learning and testing.

- Learning activity (or game-like activity)

We are interested in helping the end-user/learner/player to achieve the best result. There is no notion of "scoring" and no notion of "cheating" we are only interested in task completion. In the case of D & D, I suggest these settings:

- Enable "Retry" YES; Enable score explanation: Un-necessary; Apply penalties NO (of course!); Feedback text: something like "You correctly placed @score labels out of @total." or "You correctly labelled @score of the @total zones." etc. (depending on the actual exercise elements).

The green ticks and red crosses displayed upon Check will clearly tell the user exactly what he got right or wrong.

- Testing activity (exam/assessment)

Here we are interested in assessing the end-user/student's knowledge. Various degrees of the test difficulty can be attained by selecting the appropriate Behaviour Settings. The most difficult degree could be achieved with the following settings:

- Enable "Retry" NO; Enable score explanation: Yes or No; Apply penalties YES; Feedback text: You got @score of @total points.

Of course if—as I hope—the "Apply Penalties" feature is included in a further release of the D & D activity, the D & D tutorial should explain its use.

I agree. We have been discussing adding modes to most H5P activites. "Testing", "test your self" and "learning" for instance. Modes instead of settings. For content types created by Joubel ease of use is a high priority. We don't want more settings than we need to to be exposed to new users. Switching between modes would be much easier than toggling lots of settings to achieve this. Fine grained control could be placed into an "advanced" fieldset or something.

Regarding my last feedback, does your post meen that you don't agree that we should warn authors that disabling the penalties could allow for cheating?

I agree with the idea of implementing a "practice"/"test" mode setting plus an "advanced" fieldset (in all H5P activities, not just D & D).

"We don't want more settings than we need to to be exposed to new users." That is the usual problem of dealing with a variety of user levels, from beginner to advanced. In my opinion, programers should be careful not to sacrifice advanced users' needs for the sake of offering simplicity to newcomers. Lots of software boast of being "both powerful and simple to use". In my experience that is rarely true. The more powerful a piece of software is, the more complex it is to use. Which does not mean programers should not tend towards associating power with ease-of-use, of course.

"Regarding my last feedback, does your post mean that you don't agree that we should warn authors that disabling the penalties could allow for cheating?" Not exactly. I just meant what I said, namely that the notion of "cheating" is meaningless in the case of a "practice" mode; you can't cheat with yourself (or can you?).

Ok, we seem to be on the same page. Organizations/individuals that develop H5P content types may go for any philosophy. For Joubel we want a minimum of settings to be exposed, but also in some cases make it possible to expand more advanced options for those who seeks it. Hopefully in a year or two there will be many more who creates and shares content types than Joubel so that the community has a larger variety to choose from.

Will you make changes to the descriptions on GitHub, or do you want the Core Team to just do it when they consider the PR?

I think that improving descriptions can wait until my Pull Request has been considered.

Ok, the core dev will probably just change them then if everything else checks out :)

Hi,

I'd also like to request that the negative marking is removed or at least an option to disable it. We have setup several drag and drop questions for students where there are two boxes to drag words to - very simple. And the negative marking is confusing students - pretty poor from a pedagogic point of view. Example embed here:

Alex

Hi Alex,

We are currently working on this "apply/do not apply penalties" option. Should be available in the next release of H5P activities.

Hi, this is great! Thank you for the hard work. I am trying to create a spelling game for beginners (not so important), and I've been able to add the image, then the number of dragables, and dropables I need, and everything is working fine. The problem I have with this is that it seems that you can only create one task (one instance of a task) and there is no way to add multiple tasks, you have to go ahead and create a new one. In wordpress this creates two or more separate shortcodes. My problem is that I'd like to be able to create several similar tasks, and when the users solves the first one they can easily press a next button/ arrow and move on to the next one. For example, if I am to create a spelling game on animals, I'd like to include, let's say 10 different animals and this will be one game falling in one category and creating one shortcode for me to add to my pages. How can I do that, and is there a way to work around it? Thanks

Glad you like it? Maybe you can use Question Set or Course Presentation in your use case? They both allow you to combine multiple drag and drops.

Could I have drag and drop with images please?

Could I have access to image drag and drop please

please help me out :)

Can I please have access to image drag and drop?

Of course, should be working now.

Hi Everyone!

How do you get the image to *actually* resize? They are displaying far too large to view on a normal screen, see: https://h5p.org/node/19767

Cheers,

Hi A,

Try setting the Task Size to something like 640 x 640. If the background image looks weird I suggest removing it and then adding it as an image element inside the task(Step 2). The background image will always try to cover the entire task and to be visible. With some images, this causes issues when the browser resizes the task to fit on the web page.

Drag and Drop tasks can be very complex and as a result of that, the Editor is one of the more advanced / difficult to use ones.

For https://h5p.org/node/19767 the task size set was: 138 x 400

I will have a go at your suggestion - thanks :)

How to hide the dropzone dotted line while draggind the object??

Hi,

There is currently no setting for hiding the dotted line. But, this may be achieved by overriding the default CSS. Relevant info found here: https://h5p.org/documentation/for-developers/visual-changes

Hi!

I am trying to use MathJax in Drag n Drop content.When i load the content the MathJax displays properly in the answer but when i drag and drop the answer in the text box the mathjax gets removed.Given below is the code.

<!doctype html>

<head>

<!- To add mathjax->

// <![CDATA[

MathJax.Hub.Config({

styles: {

".MathJax": {

"font-family": "serif",

"font-style": "normal",

"font-size": "100%"

}

TeX: {extensions: ["AMSmath.js", "AMSsymbols.js"]},

extensions: ["tex2jax.js"],

jax: ["input/TeX", "output/HTML-CSS"],

showProcessingMessages : false,

messageStyle : "none" ,

showMathMenu: true ,

tex2jax: {

processEnvironments: true,

inlineMath: [ ['$','$'], ["\$","\$"] ],

displayMath: [ ['$$','$$'], ["\\[","\\]"] ],

processEscapes: true

"HTML-CSS": { availableFonts: ["STIX","TeX"], scale: 100 }

});

// ]]>

</script>

</script>

<!- End add mathjax->

</head>

<body>

H5PIntegration = {"baseUrl":"http:\/\/dipsh5p.dd:8083","url":"","postUserStatistics":true,"ajaxPath":"\/h5p-ajax\/","ajax":{"contentUserData":"\/h5p-ajax\/content-user-data\/:contentId\/:dataType\/:subContentId"},"saveFreq":false,"l10n":{"H5P":{"fullscreen":"Fullscreen","disableFullscreen":"Disable fullscreen","download":"Download","copyrights":"Rights of use","embed":"Embed","size":"Size","showAdvanced":"Show advanced","hideAdvanced":"Hide advanced","advancedHelp":"Include this script on your website if you want dynamic sizing of the embedded content:","copyrightInformation":"Rights of use","close":"Close","title":"Title","author":"Author","year":"Year","source":"Source","license":"License","thumbnail":"Thumbnail","noCopyrights":"No copyright information available for this content.","downloadDescription":"Download this content as a H5P file.","copyrightsDescription":"View copyright information for this content.","embedDescription":"View the embed code for this content.","h5pDescription":"Visit H5P.org to check out more cool content.","contentChanged":"This content has changed since you last used it.","startingOver":"You'll be starting over.","by":"by","showMore":"Show more","showLess":"Show less","subLevel":"Sublevel"}},"user":{"name":"KaranBharti","mail":"[email protected]"},"contents":{"cid-1268":{"library":"H5P.DragText 1.4","jsonContent":"{\"taskDescription\":\"Drag the words into the correct boxes\",\"checkAnswer\":\"Check\",\"tryAgain\":\"Retry\",\"showSolution\":\"Show Solution\",\"score\":\"Score : @score of @total.\",\"behaviour\":{\"enableRetry\":true,\"enableSolutionsButton\":true,\"instantFeedback\":false},\"textField\":\"Mathematical Equation *$\\\\iiiint{\\\\int_{x=1}^{n}{x}\\\\;dx } $*\"}","fullScreen":"0","exportUrl":"http:\/\/dipsh5p.dd:8083\/sites\/default\/files\/h5p\/exports\/drag-text-test-1268.h5p","embedCode":"<iframe src=\"http:\/\/dipsh5p.dd:8083\/h5p\/embed\/1268\" width=\":w\" height=\":h\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>","resizeCode":"<script src=\"http:\/\/dipsh5p.dd:8083\/sites\/all\/modules\/h5p\/library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>","mainId":"1268","url":"http:\/\/dipsh5p.dd:8083\/node\/1268","title":"Drag Text test","contentUserData":[{"state":false}],"disable":0}}};

</script>

</body>

</html>

It is really hard figuring out what is going on only from looking at the source code. Is this H5P available somewhere?

Thank you for sharing the link. I have looked at the implementation of H5P.DragText, which assumes text is present. I.e, it does not presently support MathJax. Ref this line: https://github.com/h5p/h5p-drag-text/blob/master/drag-text.js#L794

Hi! Is there any update on MathJax issue with drag n drop?

Sorry, there has been no updates to this yet.

I do not see the drag and drop in the drop down menu anymore. This was a very useful tool for our development. Are you no longer supporting the drag and drop H5P format?

Hi, could you specify which menu you are referring to?

When you log into the H5P site, and "Create New Content" under the 'Quick Links'

This brings you to the Create interactive Content page where you add a title and then select content type from a drop down menu. It's this menu that I cannot find Drag & Drop:

Some of the content types on h5p.org are not available by default. This is because the drop down menu because incredibly long and may confuse new users due to its sheer size. I believe the Core Team has granted you access and you should be able to see it now.

I have setup a typical drag 'n' drop exercise with a picture of the digestive system. There are 6 drop zones and 6 text objects. Each drop zone and object is checked to match each other. The problem is that, when the student clicks on a text object with the intent to drop it in the correct drop zone, the correct drop zone "lights up" with a border around it which signifies that this is the correct answer. I tried this in Chrome and FF - same behavior.

Have I unintentionally rigged this activity by the way I set it up? This doesn't seem like this is the intended design.

Hi Steve,

When starting to drag a draggable all hotspots that the draggable can be dropped at is highlighted. In this case I suppose you would want the draggable to be able to be dropped in all dropzones and only have one of the dropzones as the correct answer. To achieve this you must go to the editor and for each of the draggables you must edit them and allow them to be dropped in all dropzones. Then you must edit the dropzones to make sure that only 1 (the correct) draggable is correct for the given dropzone. Hope that clears things up. If you don't want any of the dropzones to get a highlighting there is a new feature for that in the upcoming release, which should be out pretty soon.

- Thomas

Hi, I can't find in the dropdown list neither "Drag and Drop" nor "Impressive Presentation". How can I create a content of this types without clone examples?

Thanks,

Now you should be able to create all content types. We are hiding some of them for new users since the list has become long, and we don't wanna scare anyone away :)

I have tried to create a drag and drop exercise both from within word press and using this site and cloning the strawberry exercise. Neither Step 7 nor Step 8 work. When I do step 7, the label does not appear in the appropriate drop zone target even though I have clicked on it. When I click twice on the drop zone icon, I do not get the "Select correct elements option" at all. Is this a browser issue? I am using Firefox?

I am not seeing any problems (except the drag and drop editor is hard to use) neither in Firefox or Chrome.

the label does not appear in the appropriate drop zone target even though I have clicked on it

I am not sure I follow you. Could you please add some screenshots of the editor popup dialog for the draggable and the dropzone?

I attempted to use the add image, but it wanted a URL. I am posting a URL below to show you what happened when I tried this.

https://docs.google.com/document/d/1Yi2SGKfES3M-dR73I-j1QXMYSGzseZUxSVT0...

I think the problem is that you don't have a label on your dropzones. Try to add that, and then open one of the draggables. You should then see a a list containing the two dropzone-labels. They need to be checked.

Thanks for a great Drag and drop feature.

We are using it with small children and have come across situations, where we need just to allow drag and drop. So no "test", but just moving stuff around.

Would it be possible to add a switch flag in the Settings part where:

1) We could switch off the "Check answer" functionality and only have the "Retry" button functionality?

So, there would not be shown "small red crosses" og no points as nothing is considered wrong of right yet. There would only be one button to press - the "Retry" as it is today, where the text is customizable as it is today (We would e.g. use "Rearrange" as text instead of Retry).

2) Minor feature request: Would it be possible to have a switch flag, that switches off the printing of the "The title of this question" on the screen?

Best regards

Christine and Allan

Hi,

those seem like good suggestions! Would you be able to break them up into different feature requests and post them in the 'Feature Requests' forum?

So from what I've read, the drag and drop tool gives a point for a correct dropzone match, and deducts one for an incorrect match. A lot of academics at my institution are having trouble with this as they just want 1 point for right answers.

Example: A drag and drop object with 4 drop zones - a student gets two drop zones correct, but puts the third and fourth draggable item in the incorrect drop zones - the score is 0, even though 2 answers were correct.

The academics I am working with want to be able to give points for correct dropzones and no change to points for an incorrect dropzone. I have looked and can't find this flexibility in any of the options. Am I not looking in the right place? Can this be updated for greater flexibility which will allow for broader innovation?

Hi Raine, sorry for the late response. I think there are quite a few people who are thinking along those lines. Would you be able to make a post in the feature requests forum and the Core Team can evaluate it or a developer from the community can pick it up.

Hi Raine, sorry for not getting back to you. I see you made a great feature request:

https://h5p.org/node/45755

I'll reply there.

Just to weigh in - we alsot hinnk the negative marking makes this type of object unuseable for most of our students interactions.

So seconded!

Hi. I am trying to add a "Drag and Drop" question type to a Question Set at h5p but do not see it in the drop down list. Could I please request access to it (and Question Set)? Thank you in advance!

Hi,

Access has been granted :)

You are here

Drag and Drop

Primary tabs

Would you like to create content like this on your own?

Description

Comments

Pages