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

smarty01

Thu, 05/18/2017 - 13:28

Show answers

In order to show the correct answers of drag and drop, is it possible to display show solution or show answers button?

tim

Fri, 05/19/2017 - 09:55

Currently, that isn't an

Currently, that isn't an option. Learners will be able to see the correct solution only once they've completed the task.

Tue, 05/30/2017 - 17:33

line spacing

Is it possible to manage line spacing between the text....for the drag text

tomaj

Wed, 05/31/2017 - 07:34

Visual changes

It's possible to do any css change, by following the instructions on this page.

Good luck!

- Tom

hopkin20

Fri, 06/09/2017 - 01:26

Content Access

Hi,

Can I have access to the drag and drop and agomotto content types?

Best,

Claudia

icc

Fri, 06/09/2017 - 09:32

You should have access now.

texteachersab

Thu, 06/15/2017 - 04:42

Drag and Drop Scoring

When creating an activity that only has two drop zones like placing numbers into the category of Prime or Composite, the scoring makes it easy to fix mistakes. If a student misses a number they know to simply place it in the other drop zone. Would it be possible to choose scoring that gives them one point for each they got right, but not reveal which are in the right drop zones and which are not? For example, a student would see they got 8 out of 10, but then would not know which two numbers where in the wrong drop zone.

BV52

Thu, 06/15/2017 - 07:29

Hi texteachersab,Are you

Hi texteachersab,

Are you creating this activity in the 'Question set' content? I think what you need is either remove the option to retry or show solution or both at the end of the quiz. These settings would be great to have but currently they are not yet available. Please go to feature request to post this suggestion.

-BV52

Thu, 06/15/2017 - 07:33

Hi,There isn't an option for

There isn't an option for what you want to use with your prime numbers, but it's a good idea, so I suggest you head over to the feature request forums, and make a post about it there.

brookelustig

Fri, 07/07/2017 - 06:43

Possible to remove the check button?

Hi. I love the drag and drop tool, it's simply amazing. I was wondering if there is there a way to disable the "check" button and have the "Correct or Wrong" notification popup as soon as the user has dragged and dropped their answer?

Can't wait to play with this:)

Cheers,

Brooke

Fri, 07/07/2017 - 07:33

Automatic Checking

Hi Brooke,

Currently Drag and Drop doesn't have an automatic checking feature. There are some quiz/test type contents that have an "automatic" feature of checking the answers and some which doesn't because of different complications (e.g. Multiple choice questions that is set to have multiple answers). You can see some discussions about this here. Also if you still feel that there is a need for new features to a certain content feel free to post in the feature request thread.

anna_rr

Wed, 08/02/2017 - 17:33

Hover text for drag and drop images

I've created an activity where users have to drag images into drop-zones, and each image has hover text attached to it. However, the hover text doesn't show up for draggable images. Is there anything you'd suggest? Thank you!

Thu, 08/03/2017 - 13:46

Hover text not working

Hi anna_rr,

Thank you for reporting this. I have created a ticket for this issue. You can follow it here.

kcorp

Thu, 08/24/2017 - 06:31

Restricted content type

I found this in the examples and it will work perfectly for an activity I'd like to make. Is there a way to access this content?

Thank you!

-Kimi

Thu, 08/24/2017 - 07:44

Hi kcorp,Please head over to

Hi kcorp,

Please head over to the access all content types page to gain access.

Fri, 08/25/2017 - 02:30

Thank you so much!

I can now use the Drag and Drop!

opinco

Wed, 09/13/2017 - 20:20

Background image resizing

I set a D&D question as part of a quiz in Moodle. The activity is great but despite there is a setting for Task Area, the background image seems to take all the screen width. making the activity almost impossible to complete.

I read this thread about the resizing script. But in Moodle we can't edit the HTML part of the activity. Why not set an outer div that is the same height and width of the Task Area, and tell the user to set that area the same size of the uploaded bkg image? I'm not a programmer, but I think this could work, don't you?

fnoks

Thu, 09/14/2017 - 10:43

You are correct, the task

You are correct, the task area setting is used for setting the ratio of the Drag and Drop canvas. We can not use a static width and height, since that won't work on e.g. smaller screens. So the default behavior for all H5P content type is to use all width available. I do see this does not makes sense in all contexts, but it should be possible to have e.g a max-width for all H5Ps on your site? E.g:

.h5p-frame, 
.h5p-iframe {
  max-width: 650px;
}

Thu, 09/14/2017 - 18:08

Success!

Thank you @fnoks for your help.

My Drag and Drop activity looks decent now.

Sadly, the other activities are wrapped into the same container, but I can deal with it. I think it would be better to inherit the size of the Iframe from the Task Area, specifically for this activity, and let the others take 100% of the screen width.

I added margin:auto; to center the iframe. And replaced size in px with percentage, to deal with various screen resolutions.

This is how the CSS look like now in /mod/hvp/library/styles/h5p.css

html.h5p-iframe, html.h5p-iframe > body {
  font-family: Sans-Serif; /* Use the browser's default sans-serif font. (Since Heletica doesn't look nice on Windows, and Arial on OS X.) */
  max-width:80%;
  height: 100%;
  margin: auto;
  margin-top: 10px;
  padding: 0;
}

Thu, 09/14/2017 - 18:48

My D&D activity looks decent now. Sadly the other activities are wrapped into the same container, but I can deal with it.

I set margin:auto; to center the Iframe and replaced size in px with percentage, to deal with various screen resolutions.

This is how the CSS looks like in my moodle/mod/hvp/library/styles/hvp.css

Fri, 09/15/2017 - 08:50

Thank you for you update.

Thank you for you update. Maybe a better solution for your scenario would be a setting in Drag Question where you could set the max-width. Maybe someone in the community can do that? It would need to be available only when Drag and Drop is standalone, not inside e.g. CP and IV

Sanscal

Wed, 10/11/2017 - 10:19

Simple matching game on Moodle

I am trying to create the simple matching game, as in the example here on Moodle, but it isn't working on the same way? Is it possible to create it in Moodle? If so, could I have some guidance please?

Thanks

Thu, 10/12/2017 - 05:17

Hi Sanscal,Yes it works

Hi Sanscal,

Yes it works similarly in Moodle. Can you please elaborate what you mean with "it isn't working the same way".

rbrookhart

Wed, 11/01/2017 - 21:54

using this

When I go to create a Drag and Drop I get the message that it is not available. When will it be available?

Thu, 11/02/2017 - 02:38

Welcome to H5P!

Hi rbrookhart,

To gain access to all content types please visit the access all content types page.

Sinika

Mon, 11/13/2017 - 13:21

Hey,I am using Drag and Drop

Hey,

I am using Drag and Drop as part of the Coulmn layout in a Moodle Course. I can upload the image but the other participants in this Moodle course can't see it. Why is this so and what can I do about it?

Tue, 11/14/2017 - 04:18

Hi Sinika,Please check my

Hi Sinika,

Please check my reply in your other post.

Oosterom 307

Fri, 12/01/2017 - 11:10

wrong answer

Hi, is it possible in the drag&drop question that learners give a wrong answer? Because it seems you can only drag your answer to the right position.

Sun, 12/03/2017 - 12:05

Hi Oosterom 307,Yes this is

Hi Oosterom 307,

Yes this is possible. You just need to make some changes on the settings of the content:

1. Draggables - Place a check on all available Drop Zones

2. Drop Zones - Choose correct draggables/elements.

I hope this helps feel free to post if you have additional questions.

joopm

Sat, 01/13/2018 - 14:59

add task text by typing

I wonder if it possible to place a "task text" like i made a task label by typeing *task-label* (in this case a dropzone appear in my long text). I have a long text and i want that some words(these will be dragable text) of the text should be place on the picture.Now i type the long text make a space between words for the desired word but this sometime does not show nicely. But if i just one time

Mon, 01/15/2018 - 07:28

Hi joopm,I'm not sure I

Hi joopm,

I'm not sure I follow what you are asking. Can you please elaborate on what you need.

julia_crawford

Sun, 01/21/2018 - 22:10

Drag and drop

Hi there, I don't seem to have access to this content type... Would love to make one of these activities!

Cheers J

Mon, 01/22/2018 - 08:28

Hi Julia,Welcome to H5P!So as

Hi Julia,

So as not to overwhelm new users some of the contents are locked. Please visit the Access to All Content Types page to gain access. Enjoy :-)

rocknrollstar2000

Thu, 02/08/2018 - 17:06

Change request - This drop zone can only contain one element

Updated - Apologies I have found the correct area for my suggestion.

https://h5p.org/node/182239

Pammellam

Sat, 02/17/2018 - 00:43

Scoring Trouble

I have noticed something odd with the scoring of a DRAG & DROP exercise I made for a Hindi course I am helping with.

There are 2 DROP ZONES, one with 2 answers and another with 3 answers. I tried making a mistake to test it by dragging all 5 possible answers to just one drop zone. Upon CHECK, the wrong and correct answers were marked correctly as wrong or right, BUT THE SCORE did NOT reflect this. The score showed all 5 as WRONG even though the graphics on the drop zones showed points for 2 correct selections. The FINISH score also showed a 5 point loss.

Also, when I selected SHOW SOLUTION, all the other questions showed the correct solution, but when I got to the DRAG & DROP solution, it still showed all 5 answers dragged onto the just one drop zone, but with + marks or - marks. It did not show the correct solution, I mean what I thought would be the correct solution, each answer on its correct drop zone.....

I have screen shots of this behavior but I don’t know how to attached them to this comment or if that is possible at all. Sorry.

Mon, 02/19/2018 - 05:41

Hi Pammellam,I created a new

Hi Pammellam,

I created a new post for you here. Please insert the screenshot as well as a sample H5P so that we can check.

cz-laoshi

Thu, 03/22/2018 - 11:19

retry button

Hi, is it possible to show the retry button even if the student answers all the questions correctly. As of now the retry button only shows if you don't get all the answers right.

ps. Loving this activity!

Thu, 03/22/2018 - 14:19

Hi cz-laoshi,This is not

Hi cz-laoshi,

This is not possible not unless you make changes to the code. Although I think this is a very good suggestion and thanks a lot for contributing your ideas on how to make H5P better! We’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful. In order for your feature request to attract as much interest as possible make sure it follows the below guidelines:

It is clear from every perspective how the feature will work. We recommend describing the feature with one or more user stories, for instance “As an author I want it to be possible to pick between different effects for the check answer animation so that the learners will see a variety of effects and also I can adapt the effects to my target audience(I’ll be using pink unicorns which works really well for both my target audience which are 4 year old girls and venture capitalists)”
If the feature can be illustrated with images or videos it always helps
Make it clear what content types this is relevant for, and or if this is a new content type

Make sure you post the feature in the Feature Request forum.

jpcolombia

Sun, 04/01/2018 - 01:52

Help With Drag and Drop

Hi, how are you?

Please i need Drap And Drop option, but i do not got it. Is still possible?

Tue, 04/03/2018 - 07:04

Hi jpcolombia, The content

Hi jpcolombia,

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.

ldj

Mon, 04/30/2018 - 07:00

Could I please request access to drag and drop and question set? Thanks

Mon, 04/30/2018 - 14:46

Hi ldj,The content types

Hi ldj,

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

Wed, 05/09/2018 - 07:12

Is it possible to add a "Show

Is it possible to add a "Show solution" function on a drag and drop activity?

Many thanks, Julia

Wed, 05/09/2018 - 07:13

Show Solution

Is it possible to add a 'Show solution" to a drag and drop activity?

Thanks Julia

Wed, 05/09/2018 - 08:57

Hi Julia,A member of the

A member of the community has created this feature but it is in the testing phase. You can read more about this here.

lori

Mon, 05/28/2018 - 06:27

Missing from create new project

I want to use the drag and drop, but it is not available in the drop down menu whenever I am starting a new project from my account. What's up?

Tue, 05/29/2018 - 02:39

Hi Lori,

Momiji

Wed, 06/13/2018 - 10:25

Drop and Drag - drop zones moves by itself

Hi! I have placed drop zones and images for several tasks and it worked fine. Now I can see that some drop zones have moved by themselves to a wrong position. I have made several attemps to put them back again by moving them and press update button. Still they don't remain in the corrected postion. What has started to go wrong? I am om MacBook Air and it's the same in Safari as in Chrome. Thanks! / Momiji

Thu, 06/14/2018 - 08:41

Hi Momiji,I created a

Hi Momiji,

I created a separate thread for this.

mrmccrorey

Mon, 10/22/2018 - 20:20

Leave text drops on the target even if they are wrong

I don't know if this is a bug or a missing feature, but I think that you should leave the text in the drop-targets even if they are wrong. This is currently not the behavior unless I'm missing something

You are here

Drag and Drop

Primary tabs

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

Description

Comments

Pages