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

mrmccrorey

Mon, 10/22/2018 - 20:22

Request: Ability to Add Shapes

Add shapes. Ability to add shapes (rectangle, circle) instead of just images. I would use this for background design.

Mon, 10/22/2018 - 20:46

Drag and Drop Score

The scoring is off. I have six scorable elements but it is scoring out of 8 total.

BV52

Tue, 10/23/2018 - 06:04

Hi mrmccrorey,I hope you don

Hi mrmccrorey,

I hope you don't mind I'll answer all your questions in one comment :-)

1. For the incorrect answers not accepted by the drop zone you need to change the setting of the draggable so that you drop it in any drop zone.

2. Please head over to the feature request forum for your shapes suggestion.

3. Do you have the URL for this activity so that we can check?

-BV52

Karen Dilbaryan

Mon, 11/05/2018 - 17:45

cant find this tool online version

I want to create drag and drop image questions but cant find it in online version. What I have to do for starting using this feature.

Tue, 11/06/2018 - 03:26

Hi Karen,The content types

Hi Karen,

The content types offered up for testing on H5P.org are supposed to give new users examples of what H5P can do. Drag and drop for instance is a content type that is more difficult to use, and for this reason, it is not enabled by default.

I recommend that you check out the tutorials for these content types.

Visit https://h5p.org/access-to-all-content-types to get access to all content types

jlb89

Wed, 11/28/2018 - 14:46

multiple draggables for 1 drag zone

Hello...

I created a drag/drop in which one drag zone had multiple draggables. When I completed the activity, even though all answers were correct, it didnt give me full credit for completing the activity. Showed 0 out of 1 or 10 out of 12 even though ALL drag zones were correct. Is there a possible solution to this or an enhancement request on file?

Tue, 11/27/2018 - 07:48

Hi jlb,I noticed that in your

Hi jlb,

I noticed that in your activity you have several text "draggables" that are inactive, which are used as labels or questions. There is a possibility that 2 of these were initially active draggables that has been deactivated. This is related to this bug report. For now until the bug has been fixed the only way to resolve this is remove the text one by one and add them again or redo the whole project keeping in mind not to "recycle" objects in this activity type.

Tue, 11/27/2018 - 17:42

Hi BV52...Thanks for your

Hi BV52...

Thanks for your response. I recreated the Drag and Drop, but its still showing the same results. Only one option has multiple choices and the rest have 1. The only thing I didnt delete when adding everything back into the Drap and Drop was the titles and left text in each box, but deleted and added the drag zones and draggables. I've created other Drag and Drops similar to this one and have had no issues with text not being a draggable. Do you think that it could be that there are 11 draggables and only 10 drop zones?

JLB

Wed, 11/28/2018 - 02:18

Hi JLB,I created a separate

Hi JLB,

I created a separate thread for this.

tsamacc

Fri, 01/11/2019 - 22:55

Make Draggables appear in random order

How can I make the draggable items appear in random sequence each time the page is reloaded? Right now, they appear in the same sequence every time I load the activity.I really love this activity.

Mon, 01/14/2019 - 08:32

Hi tsamacc,Currently this is

Hi tsamacc,

Currently this is not possible.

GemmaC

Fri, 02/01/2019 - 12:49

Uploading background picture

Hello - seems like a basic issue, but every time I try to upload a background picture it tells me that the image is too big. The pixel size is 515x310 and it 19KB which is below the maxium limit. I have also tried as png, jgep and gif format, but I am unable to upload anything. Any tips?

Thanks, Gemma

Mon, 02/04/2019 - 03:49

Hi Gemma,In order to give

Hi Gemma,

In order to give your bug report the best chance of getting answered, please include the following information:

Detailed steps to reproduce the bug (exactly how and when did it happen)
Platform and version number. E.g. Drupal, Wordpress, Moodle.
Mobile or Desktop
Browser: Chrome, Firefox, Safari etc.(Version would be helpful)
H5P plugin version
Any browser console errors

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!

malcolmg

Sun, 03/03/2019 - 07:36

Stand Alone - H5P.Question - draggable error

Hey guys.
love your work, and I hope this helps someone? not sure where to post this.
We have a standalone player, and everything is working well. Went to use a Drag& Drop interaction and kept getting an error in the H5P.Question for a draggable prototype.
I figured out there is a naming error.
Im using JQuery 3.3.1

.draggable({

revert: function(e) {

t.removeClass("h5p-dragging");

var n = u(this);

console.table("n: "+n.data("ui-draggable"));

return n.data("ui-draggable").originalPosition = {

top: o.y + "%",

left: o.x + "%"

}

the prop name should read: 'ui-draggable'
(its on line 1300 of the expanded .js)

please delete this message if I have posted in the wrong place :)
Malcolm

Mon, 03/04/2019 - 08:03

Hi Malcolm,This is the

Hi Malcolm,

This is the perfect place to post this :-) and thank you for the information this should help other users that may encounter a similar issue.

EvieM

Thu, 05/09/2019 - 10:26

Offline mode?

Hi,

I was just wondering if there was any way to download my drag and drop game so i can use it offline without internet?

Thanks

Fri, 05/10/2019 - 03:37

Hi EvieM,This is possible

Hi EvieM,

This is possible with a few additional download/installation. First you need to setup a virtual server by downloading and installing MAMP/WAMP (depending on your OS). Once installed you need to install one of the 3 supported publishing platforms. Then install H5P, this should now let you use contents offline.

KAVITASRI

Wed, 05/15/2019 - 04:19

Title of image

Hi, I've created a drag and drop activity, with images as the draggables. I added titles and enabled the ''Hover text'' setting. But, the titles don't seem to appear for any of the images. What should I do to enable the titles to appear? Please help.

Thu, 05/16/2019 - 02:33

Hi KAVITASRI,Draggable images

Hi KAVITASRI,

Draggable images do not have a title. There are only 2 places where you place text, first is the hover text which is not working and has been reported here. The other one is the alternative text which only shows when the browser cannot load the image.

Thu, 05/16/2019 - 03:12

Will the ''hover text''

Will the ''hover text'' feature be working anytime soon?

Thu, 05/16/2019 - 03:15

Fri, 05/17/2019 - 04:34

Hi KAVITASRI,I do not have a

I do not have a timeline when this will be fixed. The original issue I reported has been fixed but there was a different issue that surfaced when metadata was added.

ferpect

Wed, 06/12/2019 - 13:34

show correct answer

The question was asked already in earlier times, but I couldn't find an answer:

Is there a possibilty in drag and drop question to show correct answers when students/learners failed??
I know these function from other activities but can't find in drag and drop :-(

Thu, 06/13/2019 - 05:09

Hi ferpect,Papi Jo has

Hi ferpect,

Papi Jo has created a prototype for this. You can read more about this here.

Thu, 06/13/2019 - 11:34

Great, thanks for hint!!

janinanne.101

Tue, 08/20/2019 - 16:10

Feedback

Bonjour, je souhaiterai ajouter un feedback dans mon drag and drop comme il y en a dans votre exemple avec les capitales mais je n'arrive pas à le faire. Comment dois-je faire ?

Merci

Anne

Tue, 08/20/2019 - 20:09

Bonjour Anne,You can add the

Bonjour Anne,

You can add the feedback under the Dropzones. You can find this Tips and feedback section (screenshot).

cfm11813

Wed, 08/28/2019 - 23:47

Setting max-height

How do I prevent content to be higger than 90vh?

Alex_Guz

Tue, 11/19/2019 - 19:34

Testing Quantity?

Hello H5P Team,

All the examples are pieces of art that allow users like me with 0 experience in programming to do wonderful things to help people learning different subjects. Thank you for all of them!

I have a question regarding the Drag & Drop. Is it possible to use it to test quantity? For instance, I would like to have the following scenario (simplified here for explaining purposes):

- Three buckets labeled as 1,2,3
- Six draggable items

The correct answer would be when the user drops:

1 draggable on the 1 bucket,
2 draggables on the 2 bucket
3 draggables on the 3 bucket

I want to allow, however, incorrect answers so dropping 2 draggables into the 1 bucket should be allowed but not correct.

Does this make sense and has someone figured out a way of doing this?

Thank you

Wed, 11/20/2019 - 18:33

Hi Alex,This got me curious

Hi Alex,

This got me curious if it is indeed possible but I'm afraid it's not. This is because of how scoring works in Drag and Drop. Although you can set the draggables to be dropped to any drop zone and drop zones can accomodate any number of draggables there is a need to set which draggable is the correct answer which is not. So for your scenario above, you can drop any of the 6 draggables to any drop zones but the drop zones will only recognize those that you set as "correct". I created a sample content here to better explain this.

You will see on this sample that draggablse 2 can be dropped in any of the buckets but will only be recognized as a correct answer in bucket 2. If you for example you drop 2 draggable "2" and 1 draggable "3" in bucket 3 it will only mark draggable 3 as the correct answer.

-BV

Thu, 11/21/2019 - 20:27

Thank you, BV52. I understand I was hoping that there was a setting I was missing. I created this https://h5p.org/node/655591 and it is very close to what I need but still not quite. I guess the idea is that the Dropzone can be told to return a correct answer if a certain number of draggables (regardless of which ones) is within it.

If I was interested in someone to develop this kind of feature, do you know what kind of skill does that person needs to have? Also, any clue on how hard that would be?

Thank you for your prompt response and willingness to help!

Thu, 11/21/2019 - 17:48

Hi Alex,The developer should

The developer should at least have knowledge of CSS, PHP and JS it would also help if they have experience with H5P. My coding skills are novice at best and I'm not sure how hard it will be. Although what I am sure is that the developer would need to add/change the following:

How to handle scoring based on quantity not right and wrong draggable
The editor to show the option to set quantity instead of the "classic" right or wrong set up.

If you need help from a developer that has experience with H5P I suggest that you post in this forum. Leave your e-mail address so that they can contact you directly.

yurashrol

Mon, 12/02/2019 - 09:05

Need help!When using activity

Need help!

When using activity using the interactive whiteboard, objects are not dragged.

It does not work on https://h5p.org/drag-and-drop and I have on the Wordpress.

paulster47

Fri, 02/14/2020 - 11:54

How to add image slider

Your drag and drop is awesome. However my boss wants to add a slider for the image choices coz the area is quite small for larger images. We want the images to be large enough so users can really see the small details in them.

How can I add an image slider for the image choices? I tried downloading the Drag and Drop.h5p and unpacking it but I dont know where to start to add the slider library and other codes to enable it.

Cheers

Aakashkumar Gupta

Wed, 04/29/2020 - 12:32

About the Content

I'm not able to see all the content.

I can only see 13 contents.

Wed, 04/29/2020 - 18:51

Hi Aakashkumar Gupta,To

Hi Aakashkumar Gupta,

To provide a best possible experience for new users and to ensure that people use H5P.org only for trying out H5P (we've had more traffic than our server can handle lately, ref also the warnings when you create content, embed content and view the content) we are experimenting with which content types should be available here. We might have a different set of content types next week.

Check the getting started page for information on how you can use all the content types and use H5P for real. We unfortunately are not able to provide free hosting, only free software :) Hopefully you'll consider supporting the H5P Core Team by using H5P.com.

dhanpalpadmavathi

Sun, 05/03/2020 - 10:41

drag and drop

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

Mon, 05/04/2020 - 19:34

Hi dhanpalpadmavathi,To

Hi dhanpalpadmavathi,

lisabza

Thu, 06/04/2020 - 19:06

Divi Builder Compatibility

Hi,
I'm new here... I was super excited when ran across H5P yesterday because it can fulfil a request my client has. The client's website is built on Wordpress using the Divi page builder. I've installed H5P plugin on a demo site and built a drag and drop exercise. It shows the embedded exercise when I preview the page, but not when viewing the published page. (UPDATE - this is the case when using the shortcode, it seems to work fine with the iframe embed code)

Is the plugin compatible with the Divi builder?
And if it is compatible, is there a way to send the results of the exercise to the site owner via email ITO the selection the participant made? (The selection made is unique to each participant)

BTW I'm not a coder ;) TIA

elodie87

Fri, 07/17/2020 - 11:03

Printing drag and drop answer to a PDF

Hello H5p team,

I am wondering whether there is a way to print the images with the correct answers of a drag and drop task to a PDF or similar document so the students can save the solutions and revisit them when they are preparing for exams instead of having to do the task over again?

Please let me know. Thank you for your support.

Fri, 07/17/2020 - 19:34

Hi elodie87,I'm afraid there

Hi elodie87,

I'm afraid there is no feature to print drag and drop but you may try using the built-in print option for browsers.

selvagopal

Fri, 09/04/2020 - 08:44

drag and drop image type question

Dear sir,

I could not create drag and drop image type question. Can you give access to me?

Thank you.

P. Selvagopal

Fri, 09/04/2020 - 08:51

drag and drop image can't be created

I could not create drag and drop image type questions. Can you give me access to create.

Fri, 09/04/2020 - 19:05

Hi P. Selvagopal,To provide a

Hi P. Selvagopal,

joelmacdonald

Thu, 09/24/2020 - 16:12

Icon for Full Screen Inconsistently Appearing in Moodle

I've got five drag and drops on a course page in Moodle. The first two have the double diagonal arrowhead icon in the top right corner to go full screen. The other three don't have the icon at all. Any idea what's going on or do you need to see the files?

Thu, 09/24/2020 - 19:20

Hi Joel,I have a few

Hi Joel,

I have a few questions:

Did you check if Full screen is enabled in the Behavioural settings?
Are these stand alone contents or are they inside another content (i.e Column)?

examsextra

Sun, 12/06/2020 - 14:05

Background colour of draggables has changed

Hi guys!

I've made quite a number of Drag n Drop exercises recently where the background colour of the draggable elements has been a nice neutral grey, and nicely rounded at the corners. However, the colour now seems to have changed to white, and more squared in shape (I can't attach screenshots on this page unfortuntely). I was wondering if you guys have changed the colour or whether it's simply a bug or even something else? I have checked it on a few different browsers and the issue remains.

Do you know if there's anything I can do to change it back to grey in order to keep it the same as the other Drag n Drop activities on my course?

Very much appreicated guys, as always!

Paul

Mon, 12/07/2020 - 18:03

Hi Paul,Please check my

Hi Paul,

Please check my answer in your other post.

Tue, 12/08/2020 - 03:24

Thank you sir!

HerrStibbe

Sun, 01/10/2021 - 11:30

Drag and Drop not in list

Hello,

I can´t create a drag and drop item. It is not in my list.

Can you help me?

You are here

Drag and Drop

Primary tabs

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

Description

Comments

Pages