Reorder the story - drag n drop

Teaching languages you want the students to read words over and over again. One way is to let them reorder the story or the sequence of some lines. There are plenty posibilities doing this with pictures, but to do it with simple text seems to simple... Anyway, here is a rapidly found example (I'm not religious so be happy...).

The idea is to do the reordering vertically with some lines that starts out in disorder - and the player orders the lines:

Mary had a little lamb, little lamb,
And everywhere that Mary went
little lamb, Mary had a little lamb
Mary went, Mary went, everywhere
whose fleece was white as snow
that Mary went
The lamb was sure to go

The player no has to move the lines with dnd. And ends up with a perfect verse.

It ought to be a quite simple job to program, I believe. I would be happy if anyone did.

The purpose is quite simple: students have to read words, understand frases and connect the frases in an order which is cognition in many levels.

Next step, say, another idea, is to reorder frases that are split. Technically the table of lines will have to rows, not just one. That is, I think the solution is best based on a table of lines with on coloumn (or two tables, the correct and the disordered). From that base you can add coloumn with text or pictures...

I hope I have inspired somebody.


⋆Reorder text with drag & drop to form sentences/paragraphs
Issue Status: 
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
tomaj's picture

Hi Anders,

I also hope you have inspired someone. Sounds like a fun and useful project!

- Tom

with drag-n-drop text. place images above or in course presentation. Although there seems to be a maximum length of characters on the greyed out spots. I don't suppose that can be easily changed?

Come to think of it, have done something similar with an image drag-n-drop by adding a rectangle composed of smaller rectangles, one for each line, and dropping the text in place. It does lack the simplicity of one-click scrambling, though :)

H5P file: 

I'm quite thrilled - but I'm very new in h5p: how do I test?

ah, got it. I have already tried it. Yes, it is a possibility. But I believe the best solution works with a kind of table or list so that it can easily be expanded.

papi Jo's picture

Well-done but... the problem-as you stated-is "maximum length of characters on the greyed out spots". This problem was already mentioned by the OP (Anders Skov) in this comment. I agree with the reply provided by thomasmars there that this feature should come with a new H5P activity type, "Drag the lines".

I also agree with Anders Skov that the Edit interface in that new type might consist of a table with 2 columns (which would make it into a "match" type activity?)

Or it could be a brand-new type of activity, something like the Hot Potatoes "jumble" activity (or the "Match" activity). Like many teachers, especially language teachers I used Hot Potatoes for many years and found it quite versatile. Pity it has now fallen into a limbo. Good opportunity for H5P to come to the rescue!

papi Jo's picture

Tweaking "Drag Text" files, a couple of changes to the javascript and css files, it's possible to get longer drop text zones, as demonstrated on the attached screen captures. However these changes are not secure, and a better solution will have to be found.

so will be brief: 

The audio is kind of funny, I'm not used to "talking" the song but I wasn't about to sing. Ha ha. And slide 1 should be slide 2.  But overall I agree that a quick alternative (2 columns + text) would be great. If you need help to make it let me know, and it's downloadable.

papi Jo's picture

Well-done, maude. It's of course possible to create a "re-order" sentences exercise with the H5P Drag & Drop activity. And you did it quite well (nice pics & nice layout, by the way).

There remain 2 problems. Creating the activity takes quite some time, as you have to create all the draggables and drop zones one by one, and then associate them. Not to mention creating a nice background image (although that could remain blank).

And in the end-user interface, the draggables are not randomly re-sorted, unlike in the Drag text activity.

So ideally we need a new H5P activity which would combine the features of those 2 H5P activities.

We do miss it. Cette activité nous manque.;)

icc's picture

Many interesting ideas here! I have to agree with the idea of creating a separate content type that is better tailored for this purpose. It would make it a whole lot easier and quicker to create tasks that are more flexible. I have been thinking of creating sort of a "pair-off", matching or unscramble task myself. It should not involve too much work getting it good and making it useful in many settings.

Thank you for sharing your examples on how this can be achieved with the existing content types, and also how they can be improved. These thoughts and ideas are highly valuable and very much appreciated when trying to improve H5P for everyone!

Thank you all :-)

I second that, too. In the mean time, it is hard to find a feature that does exactly what you want, so we need to learn to work with what we have :) which is kind of exciting. With templates and strict processes, it is possible to work quickly (not as quickly as a version for that specific content type of course). Just updated the h5p - reordered slides and added audio to vocab task.

In my eyes, most important about h5p is how user-friendly it is (except for the CSS :-0 ). If you try Adobe Captivate, Storyline or other apps, they are much more complex and require a steep learning curb. It is hard to be a teacher and use Storyline regularly - you'd be a designer. 

@papi jo, thanks. Very interesting things on your website. 


tomaj's picture

Hi Maude, I really agree with the importance of making the content creation process as easy for the user as possible.

- Tom

tomaj's picture

Very good mockups by both @papi jo and @maude. It's easyer to visualize with something concrete. (we also have the first example from @Anders Skov)


I also agree with @icc, that it sould be a seperate content type.

- Tom

Avi Megiddo's picture

Is this content type coming soon?  I see it in my installed library of.h5p files,  but it doesn't seem to be available for content creation.  thank you.

tim's picture

It's not out yet. Keep a lookout for the release notes :)


Agree with the comments from other language educators here. H5P does not really cater to higher level 2nd language learning.

We all used Hot Potatoes etc as teachers in the past. Now in curriculum design, it can feels like a step backward when we are unable to reproduce similar activities.

I get what people are saying about taking a creative approach - I am using Agamoto to highlight sentence structure and Image Hotspot for pop-feedback / annotation of mindmaps etc - but for a lexical/chunked approach to language we need more versatility to ensure that activities are pedagogically sound. 

I have used Articulate and Captivate at an introductory level. I don't think the learning curves are that steep at all for simple activies. Matching (pairs, not cards), for example, is easy/quick to set up. 



BV52's picture

Hi scotty,

Thank you for input/suggestions. We'll definitely take note of these.


I agree but still grateful for the tool. AS you said, there are some points we take for granted from other apps/software and find we have to go through time consuming workarounds to make up for it. I have even thought of using image sequencing to reorder words/chunks in sentences as there is a better control the visuals than with d-d text. 

Feel free to join the h5p facebook group I'd love to discuss h5p further with a group of language teachers to share ideas, outline what really works and finally provide a consolidated list of "tweaks" (or more important changes) that could be important deal changers. True about Articulate and Captivate - but then you need scorm or post as a web page without calculating score, if i am not mistaken. I find that Articulate has the BEST sound recorder, even better than Audacity.