Drag and Drop

Primary tabs

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.

Comments

hosais

Tue, 02/03/2015 - 13:58

Is possible to add short audio into the text object?

Is possible to add short audio into the text object? In learning language, it would be very good to play a short audio with click the text.

thanks.

falcon

Wed, 02/04/2015 - 09:18

It's currently not possible.

It's currently not possible. This is something that might get added in the future, and we do accept patches or donations to make this happen.

Thu, 02/05/2015 - 14:12

Hello Falcon,Currently with

Hello Falcon,

Currently with my current status, I have no resource to give donation, but I am very interested in this project. I read the developer documents. They are not very clear for me. If you can offer some support or explanation, I am willing to do the patches. I can also help to support making some documents.

I breifly check the code and documents. It is good for h5p to have audio option for many content types. It needs to conclude a standard (I noticed that there is no semantics for audio yet).

Briefly in my mind, for the audio of drag and drop, it will need

add html <audio> tag to text object for adding audio source(mp3)
make jQuery event listener for click or mouse hover
adding interface for the editor

I would really appreciate if you could let me know how to continue to get involved and cooperate with h5p project.

Fri, 02/06/2015 - 10:39

Yeah, the documentation needs

Yeah, the documentation needs a real upgrade. I added the audio type to the semantics now.

I suggest that you (1) start of by doing the tutorial, and (2) replace the image with an audio. Then (3) try to add audio to the semantics of the drag and drop. Then, finally, (4) try to make the audio play when you need it to play.

Ask for help here, or contact us directly to get help more quickly. Ok?

Wed, 02/11/2015 - 12:28

I did a few tests. I added a

I did a few tests. I added a audio in h5p with jQuery (H5p JQuery). Here shows my test with the tutorial. Currently it uses the audio source remotely.

It is great to have a audio player but what I need most would be audio text and audio image. That is adding audio to the text and audio to the image so that when the user clicks or hovers the text/image, they can hear how to say it. This is very helpful for language learning. I plan to make every object be able to pronouce.

Currently I have a little problem to add the audio(refer to my post in the tutorial page). My problem right now is how to add the content for editor and the user can add their audio and related information. Also, I apprecate your opinion: should we create a new type (audio text and audio image) or update the old text and image object.

I also think of make the audio refer to the word itself and search a pronounciatoin database in the future. Well currently this is still far away idea.

Let me know what you think. Thank you.

Wed, 02/11/2015 - 13:05

Cool!Do you only need this to

Cool!

Do you only need this to work in drag and drop? If so I would add audio to the semantics of drag and drop(H5P.DragQuestion) on the same level as x, y, height and widht - and let H5P.DragQuestion be responsible for playing the audio when texts and images are being clicked.

Wed, 02/11/2015 - 20:14

Yes. For drag and drop, that

Yes. For drag and drop, that is all I need. I also would like to have audio function in multiple choice. If we should do it individually for each content types, then that's it.

To implement this in drag and drop, do you mean add audio in semantics.json (arround the following?)

"options": [

"H5P.Text 1.0",

"H5P.Image 1.0"

]

and

modify C.prototype.attach = function ($container) {}

Anyway, if you could do this part, it would be great and I will check the implementation.

For long-term, I am also interested in modifying multiple choice (be alle to have text, image, and audio in the choices), make short answer content type (I think h5p does not have either) and optionally create a content type that focuses on arranging orders of words to make a sentence. If you kindly give some support somtimes, I can do these little by little.

Thu, 02/12/2015 - 10:26

By "If so I would add audio

By "If so I would add audio to the semantics..." I didn't mean that I would actually do it, only that if i were to do it I would do it that way. I'm working on the xAPI integration and have a lot of other tasks lined up after that.

I think you're heading in the right direction.

Thu, 02/12/2015 - 11:13

Sorry that I mis-understood.

Sorry that I mis-understood. I appreciate very much your help and I will continue to make it.

Fri, 02/13/2015 - 09:49

Great, we're happy to assist

Great, we're happy to assist you on the forums, we just can't do the coding

Wed, 02/18/2015 - 11:56

library for editor

Hi,

I am trying to add audio info into the h5p_text. About editor interface, since the editor libraries document is not finished, I need some clarification.

In semantic, I think widget is input interface in the editor. I saw html (text editor), dynamicCheckboxes, and dragQuestion. Currently I check what the widget types are by matching the code and the h5p content. Is it possible to customize or provide patches (I mean a standard or common base so that people can refer to, contribute and follow)?
Some items (for example, text and image) do not have widget, then the default applied?
I dont know the definition of "H5P.Text 1.0". I mean 1.0 is the majorVersion in library.json?
If I would like to make a H5P.Text with audio, the best practice would be create a new library (for example H5P.audioText) similar to H5P.Text, correct? (And then add it to options for Task (a dragQuestion widget)).

Thank you.

Thu, 02/19/2015 - 13:30

Hi!I'll try to answer:Widget

Hi!

I'll try to answer:

Widget is the input interface yes. Didn't understand the last part of the question.
That is correct
Yes, it's the library with machineName H5P.Text, majorVersion 1 and minorVersion 0.
Yes, I think that would be the way to go.

natasharomanoff

Mon, 09/28/2015 - 13:53

Drag and drop in drop down list at h5p

I was trying to create this content type online at h5p but could not find it in drop down list. Is it not available anymore?

Sun, 10/04/2015 - 22:15

You've got access to it now :

You've got access to it now :)

smartasc

Mon, 10/12/2015 - 17:36

Task troubles

When creating a new drag and drop, I am able to upload an image for the background but when I switch to tasks to add dropzones or text or images, the buttons don't respond. I can click and i see the button push action but with no result. Any ideas?

Tue, 10/13/2015 - 10:38

Which browser are you using?

Thu, 02/11/2016 - 13:05

I'm using Chrome

Thu, 02/11/2016 - 13:27

Sounds like a JavaScript

Sounds like a JavaScript error. Could you try to open your console and paste any error message you're getting here? You use CTRL + SHIFT + I to open your console, just do that and do the things that doesn't work and see if if you get any messages in the console.

Chris

Tue, 10/20/2015 - 09:23

How to avoid revealing answer to user?

If we're doing an activity where drop zones are labeled with words, and there are multiple draggable images that correspond to those words' meanings, how can we disable the functionality that displays a dotted outline for the correct drop zone when the corresponding image is being dragged? It's basically revealing the answer to the user before they even try placing the image in any drop zone...

Tue, 10/20/2015 - 10:12

Edit the draggable item and

Edit the draggable item and select all the dropzones and click done. This way you'll make all the dropzone a possible answer.

Edit the correct drop zone and mark the correct draggable there, this way you make the solution.

Hope this helps!

testuser

Mon, 11/09/2015 - 01:04

Drag and drop partly working

Hello,

Could you assist in identifying the problem with the drag and drop on this WP theme?

It seems to have worked great on my last theme, but this one makes the words that are lifted up dissapear:

http://greatwebsiteplans.com/keyword-optimization-quiz/

Tue, 11/10/2015 - 16:32

That was an ugly one. We'll

That was an ugly one. We'll look into it and update you as soon as possible. I had a quick look but couldn't find the reason right away so I made a ticket for it instead and we will probably start on it next week.

petro007

Tue, 11/17/2015 - 18:33

Is there a show solution button for drag and drop questions?

Hi, we are using course presentations on our site and we are including drag and drop questions within these. Is there a show solution button available for drag and drop questions? Currently the users can only see whether or not their answer is correct but cannot see what the correct answer is.

Tue, 11/17/2015 - 21:33

No, solution view for drag and drop questions haven't been implemented yet. We're not sure how to design it. If you have a good idea feel free to share it! Remember that it must be WCAG 2 compliant and support all the features of drag and drop (stacks of moveable alternatives and multiple alternatives may belong to the same dropzone etc.)

books4languages

Fri, 03/05/2021 - 17:41

how to show the solution

Maybe if after to show the solution button activate, the exercise shows the drop zone number in each drop zone, and also, nedxt to the text field the drop zone number too.

is frustrating to the students if they can not know the solution.

Beatriz Rojo

Fri, 12/04/2015 - 23:44

NIce but size is too big

the drag-and-drop exercise is easy to use thanks to your tutorial. What I find extremely annoying is the sizing. I have tried with the task size and I got the result I wanted. What I did not manage to achieve was to resize the embedded code. When the exercise appears on the my website, the user has to scroll a lot just to see the whole picture and press the "Check" button. It is not that dramatical because I was just testing and wanted to show an example on my blog, but it is not user-friendly.

Thanks and congratulations for the great job.

lewiscarr

Mon, 12/07/2015 - 14:59

Resizer

Hi Beatriz, you may be using the auto resizer.

In your embed code you may see this just after the </iframe> tag:

This will scale the content to fit your page, so the height will scale proportionately with the auto-sized width.

Try the embed code without script. Obviously if your project size is greater than your iframe size you will have an internal scroll bar.

Thanks.

Mon, 12/07/2015 - 17:34

Thanks a lot!

Wed, 12/09/2015 - 22:03

Another option if you want to

Another option if you want to keep the script in order to get a smaller view on phones is to try a div outside the iframe tag with a max-width, or maybe even add a max-width on the iframe. I haven't tried this myself though.

teamelearning

Wed, 12/09/2015 - 13:01

Drag and drop in list

I too don't have the option for Drag and Drop on H5P.org. Any chance of providing it please?

Wed, 12/09/2015 - 21:26

You've got it now :)

Thu, 12/10/2015 - 11:08

Drag and drop

Thanks for the very prompt action

Jakob Kopczynski

Mon, 01/25/2016 - 16:12

Drag and drop in List

I don't have the Drag and Drop Tool in my Dropdown-Menu either. Can somebody please help me out?

Tanks in advance.

Tue, 01/26/2016 - 08:21

Do note that the reason it

Do note that the reason it isn't there for new users is that it is hard to use. The possible answers are set when you edit the draggable alternative, but the correct answer is set when editing the drop zones.

You've got access now.

Claire Dervout

Tue, 02/23/2016 - 03:09

Drag images

I can't create a drag and drop with images. Could you please give me access to it?

Thanks

Claire

Tue, 02/23/2016 - 08:53

You've got it!

Thu, 02/25/2016 - 05:45

Thanks for that!

EI HAS

Wed, 03/02/2016 - 15:59

Could I be given access to the drag/drop quiz

This is exactly what i'm looking for! Could I also be given access to it from my drop-down list?

Thu, 03/03/2016 - 16:07

Granted :)

Mon, 03/07/2016 - 16:37

Great

Many thanks!

nguyentuanmy2206

Fri, 04/22/2016 - 10:34

Hello

How can I change color of the drop zone? As i can see the default color is light grey, nearly white, no borber so when i create on white background it will be very difficult to see. So is there anyway i can change the color or make border for the drop zone?

Tue, 04/26/2016 - 00:53

I'm afraid you currently have

I'm afraid you currently have to do some coding to achieve this :/

joso23

Mon, 04/25/2016 - 00:08

remove negative points

Normal 0 21 false false false HR JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Calibri",sans-serif; mso-bidi-font-family:"Times New Roman";}

I would like to know if there is an option to remove negative points. For example when i place two object on the right target and one on the wrong target I get one point because placing object on the wrong target reduces score.

Mon, 04/25/2016 - 11:41

I'm afraid that we don't have

I'm afraid that we don't have an option for that yet :/

21cccs

Fri, 04/29/2016 - 14:05

Second that (0 points instead of negative points)

I'm not a developer so I have not clue the amount of work that goes into this like this, but it is confusing to my students who get 2 out of 3 right but only get one point, so +1 to trying to avoid negative scoring. Thanks : )

PS, they LOVE this activity!

Tue, 05/03/2016 - 10:09

Thanks! Do note that many

Thanks! Do note that many drag and drops will be possible to cheat on if we just disabled the negative scoring. For instance if there is one drop zone (fruit) and 10 draggables (some fruits, some vegetables) the student would get full score if she dragged all the draggables into the dropzone. +1 for each correct and 0 for the mistakes.

papi Jo

Sat, 01/14/2017 - 10:08

@falcon, your reasoning is

@falcon, your reasoning is true in the case of a D & D activity with only one drop zone and several draggables. In my opinion this is not the most frequent use of D & D and actually the D & D strawberry example on this site should be replaced (or complemented) by a more standard example of several drop zones with several draggables!

Anyway I am currently working on adding a "penalties/no penalties" option to the behaviour settings of D & D which would leave that decision to the activity creator. Hoping that that would please everyone.

Mon, 01/16/2017 - 09:47

Good, yes, I agree, it is not

Good, yes, I agree, it is not the most standard. There are other examples as well that we need to think about when working on this. If you check "Infinite number of element instances" for a draggable it will be possible to match it to all dropzones. Again, without negative points(or only one element per drop-zone) you can pair it with all drop-zones and get full score.

So a simple choice with a description (and probably negative scoring as the default) would be good!

(Even better would perhaps be "automatically decide scoring method"? So if we detect one of (1)There is only one dropzone and it accepts multiple entries or (2) The alternatives may have multiple instances and dropzones accepts multiple entries we go for negative scoring, if not we go for the new scoring.)

Mon, 01/16/2017 - 10:05

I'm generally wary of

I'm generally wary of "automatic decisions" and prefer human decisions. Please have a look at my "Add option to apply or not apply penalties to wrong answers" pull request and comment. Looking forward to that feature to be implemented, as it has been requested by a number of users.

Mon, 01/16/2017 - 12:23

Looks good! I don't think it

Looks good! I don't think it is easy for any user to see that no negative scoring will allow users to cheat, so we should at least do a small attempt to inform about that. Other than that it needs normal testing. Commented on GitHub. I think many will appreciate this change a lot!

You are here

Drag and Drop

Primary tabs

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

Description

Comments

Pages