You are here

Drag and Drop

Primary tabs

A free HTML5 based drag and drop question type allowing creatives to create many forms of drag and drop using only a web browser. Make engaging challenges using H5P and Drag and Drop on WordPress, Moodle or Drupal.

Create interactive content like this with the free H5P plugin for:

Description

Drag and drop question enables 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 one-to-one, one-to-many, many-to-one and many-to-many.

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.

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?

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.

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.

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.

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 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)).

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?

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.

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...

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.

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.

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.)

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.

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.

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.

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?

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.

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 : )

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.

@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.

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.)

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!

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:

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: