Drag Queens and Drop Outs

Sorry – this post will not live up to its title! It’s only about using the ‘Drag and Drop’ content type of the H5P suite of online learning applications. I’ve been inspired by Vedrana Vojković Estatiev and her occasional posts about using H5P on her blog After Octopus. We use H5P for a lot of things on this platform too, and I thought I’d start by presenting a few ideas for dragging and dropping.

H5P, if you don’t know, is an open source library of interactive content types which works as a free integration for WordPress, Moodle and Canva learning platforms. It can help add an extra dimension to online learning content, from traditional comprehension activities (‘Multiple Choice‘) up to dynamic pathfinding or decision-making tasks (‘Branching scenarios‘). New applications are added regularly wih constant updates, there are lots of guides and tutorials, and a community of users and designers to help you troubleshoot any issues. What’s more, you can have your students’ interactions with H5P content tracked and reported to a Learning Record Store, which is really important if you need to account for what students have actually done on your courses.

I use H5P both for language teaching and teacher training, and ‘Drag and Drop’ is one of the content types I use most frequently. There’s a much easier-to-use ‘Drag Text’ option which allows you to quickly create a gapfill of single words or chunks, but ‘Drag and Drop’ integrates image and text so there are a few more things you can do with it. Rather than give technical instructions (not that my examples are particularly complicated or revolutionary), the examples below can be downloaded and re-upped to your own H5P installation – so you can see how I put them together and adapt them as you wish. Just click on Re-use at the bottom of each one, and once you’re in H5P, you can copy/paste the content to create templates for your own creations.

Categorisation tasks

One obvious thing to do with Drag & Drop is to have people put things in categories. Here’s a text-based one I created for our teacher-training course on Task-Based Language Teaching (TBLT). It follows a video presentation, the content of which you’ll need to guess at! (NB: you can make it full-screen by clicking in the top right).

More recently, I tried to achieve a similar thing, but using a photo of a whiteboard. This could definitely look better (a really clean board, nicer markers and better boardwriting skills would help!) but I think it’s a bit more visually appealing than the text-only one. The fact the text is a bit tricky to read is overcome by having it appear when you hover over a draggable object.

The ‘MPs’ are Michael Long’s 10 ‘methodological principles’ and the idea is to drag the particular ‘pedagogic procedures’ to the MPs they fit best.

The 10 MPs are ‘MP1: use task, not text, as the unit of analysis; MP2: promote learning by doing; MP3: elaborate input; MP4: provide rich input; MP5: encourage inductive “chunk” learning; MP6: focus on form; MP7: provide negative feedback; MP8: respect learner syllabi and developmental processes; MP9: promote cooperative collaborative learning; and MP10: individualize instruction’. (Long, Lee & Hillman, 2019).

Labeling

To have learners label something, you’ll need to use a background image. In the next case, learners drag the labels to the correct rooms.

This one’s a bit more colourful; I used a free webtool to create a collage to use as a background image. We can all dream of a post-Covid holiday, right?

And if you take a scan or screenshot of a text, you can have learners label that, too – useful for drawing attention to discourse features, organisation etc. For this, you might need to make sure your image has some blank space for the labels and dropzones – in this case, there’s space on either side. Learners need to drag the labels to the right, and the possible spaces to drop into are highlighted when they start dragging.

Ordering tasks

These can be created in two ways. In the first, we can create text objects which need to be dragged into the correct order. The size of the dropzones to the right appears when you drop each item, and this gives some of the game away, so this activity may work better with bits of text (and corresponding dropzones) of similar size. This would also permit a slimmer format without the need for a separate ‘drop’ space at the side.

Another disadvantage here is that H5P automatically centres the text, which makes it look less authentic as an email. You could get around this with some custom styling if you know how, but the solution I prefer again involves taking a screenshot of the text itself, and cutting out the bits you want to make draggable by using a simple photo editor (I use Shotwell, which is free for Linux and Windows). Doing it this way also means the size of each dropzone doesn’t become apparent, so it’s more challenging for the learner, and looks a lot better, too.

Checklists

Finally, this idea came about from a suggestion by SLB member Anita Derecskei. On our TBLT course we have required reading for each session, and she wanted a way of keeping track of what she’d read and what she hadn’t looked at yet. H5P doesn’t have a checklist content type (yet), but ‘Drag & Drop’ allowed for a neat solution, and hopefully it motivates our course participants to get through their allotted texts!

That’s all folks …

Hope it’s been useful; I’ll be happy to try to answer any questions you might have in the comments section below. If enough people are interested, I’ll follow this up with a look at other H5P content types.