The Rapid Elearning Blog

Articulate Rapid E-Learning Blog - how to build a drag and drop interaction

A few years ago building a drag & drop interaction required some programming skills. Because of this, those who didn’t have programming skills often didn’t include drag & drop interactions as an option in their course design.

That’s no longer the case because building a drag & drop interaction is relatively easy. In fact, building an interaction with today’s software can take less than a few minutes; so the focus now is on how to use them and not whether or not you can build one.

Click here to view the tutorial.

Since building them is so easy there’s no reason why they shouldn’t be part of your interaction tool chest. But if you’ve never built a drag & drop interaction there are a few basic things to know.

Do You Need a Drop Target?

Generally there’s a reason why the person is required to drag an object on the screen. In most cases a decision is required which forces the learner to select an object and then drag it to a specific location. We call the location the drop target.

So when building your first interaction:

  • Understand what decision needs to be made
  • Which objects can be dragged
  • Where are the objects dropped

Common Types of Drag & Drop Interactions

There are a many creative ways to use drag & drop interactions. However here are the most common types:

  • One to one: a single drag object goes to a single drop target
  • One to many: a single drag object can be correctly dropped on multiple drop targets
  • Many to one: multiple drag objects go into a single drop target

Here is a simple example that shows those three common drag & drop interactions:

Articulate Rapid E-Learning Blog - drag and drop interaction

Click here to view the elearning example.

Distractions Are Good

Ideally the elearning course and its interactions are aligned with the types of real world decisions the person faces. Often the challenge in making good decisions means we’re faced with alternatives (some viable and some not so good). These alternatives can distract us from the best decisions.

When building drag & drop interactions it’s good to add in a few distractors. They can be used to provoke common misunderstandings or some of the nuances of the required decision-making.

Articulate Rapid E-Learning Blog - example of a drag and drop interaction

Click here to view the drag & drop demo.

Above is an example where more than the correct answer choices can be selected and dragged. By making more than just correct choices available the learner has to demonstrate a deeper understanding of the content and the decisions required.

I’ve seen many drag & drop interactions where only the correct options can be dragged. That makes it easier to guess through the decision. Distractors help remove some of the guessing.

There’s a lot more to crafting good drag & drop interactions. But the above tips are a good starting point.

Do you use drag & drop interactions in your courses? If so, what types?

Events

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for e-learning, instructional design, and training jobs

Participate in the weekly e-learning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool e-learning examples to check out and find inspiration.

Getting Started? This e-learning 101 series and the free e-books will help.



19 responses to “Basic Building Blocks for Drag & Drop Interactions”

http://users.sch.gr/sudiakos/geo02/story.html
Course Greek school (K-12) in geography. I use articulate storyline. Simple and interactive.

I am interested in building a drag and drop function that requires the user to force rank an equal number of items into three categories.

For example, 3 items must be in category 1, 3 items in category 2, and 3 items in category 3. There is no right or wrong answers.

A pop up box that says “sorry, you can only have three items in this category, try again.” would work.

Is this possible?

What does Articulate have to make drag-and-drop interactions accessible to mobility-impaired users? If you can’t use a mouse, how could you complete these activities?

Or if you have low vision and can’t distinguish the items and the targets, how could you complete a drag-and-drop activity?

My organization requires that we meet the highest level of accessibility guidelines. However neat or cool “drag-and-drop” activities may seem, we can’t use them in our courses.

January 28th, 2014

I am interested in building a drag and drop function in PowerPoint 2013. Do you know how to do that?

I’m just here to say that starting image is hilarious.

@Martha: Good points and a consideration when you have to craft learning experiences to meet different audiences. In some cases, drag and drop interactivity isn’t practical.

@Jos: PowerPoint’s not really designed to support drag and drop interactions. That’s where you’d need to augment it with different tools. Articulate Quizmaker supports drag and drop interactivity. In the rapid elearning world, you’d add that to your course (assuming you’re using a PowerPoint conversion application).

@Todd: I liked it, too. 🙂

January 28th, 2014

I’d love to hear others’ view on my statement below. “Out of the many varied interactions available to elearning developers, drag & drop somehow seems to grab people’s attention more than others.” For instance, a sorting exercise where you drop all the distactions in a waste box and the valued items in a treasure box appears to engage the learner’s interest/mind more than with other interactions. The physical act of dragging items seems to aid the cognitive thought process. Is there research to say this is so? Why is this somehow a more rewarding activity than a multiple response question where you could do the same exercise?

@Ian: good question. I’ll see what others think before I chime in.

@Theresa: good question; I’m at conference but when I get back I’ll play with some ideas.

I totally agree that we need to ask ourselves if we do need an drag and drop interaction in our course,.but sometimes it is obvious that we can’t do without. Like my ‘colorbook entry’ of articulate drag and drop challenge.

http://www.eyespirations.com/index.php/portfolio-item/drag-and-drop-2/

Thx,
Paul

January 30th, 2014

Just awesome. In this computer and internet world every person want E-learning and also it need because in far and lungs area people not come to school in city so they may get education by E-learning.

January 30th, 2014

@ Ian – Really interesting point – that got me thinking. Just wondering if drag & drop is because it is more like the physical activity of sorting through actual items than just answering a question?

January 30th, 2014

I typically use drag and drop interactions to break up the monotony of a quiz or assessment. I also make up a variety of interactions that I spread out within larger assessments.

Students have commented on how they had to stop and really read the question and think about what they were doing to answer the question correctly when faced with a drag and drop or multiple choice that used buttons instead of the typical radio buttons.

In the end I go by this rule: if it works, use it. If it doesn’t, drop it.

January 30th, 2014

I use drag-and-drops extensively in the training courses I build in Storyline. E.g.:
— Put these steps in order
— Drag these words to complete the sentences below
— Who’s who? Drag these job titles to the correct people below

I use them as low-stakes, test-your-knowledge activities:
— The activities are optional (you can click “next” to skip by them if you want)
— The activities give immediate feedback. I use the “Drop Incorrect” state to show a red X and the “Drop Correct” state to show a green checkmark

Also… they’re fun to set up. 🙂

Like many of the commenters, I would like to incorporate D+D in its various forms into an e-learning course I have been presenting for several years.
I need to present students’ completed exercises (as part of an evidence portfolio) to an assessing panel, sometimes months after the event.

What do you suggest as a means of permanently preserving students’ completed D+D exercises?

@Leon: you should be able to use the tracking features in the software to track drag/drop scores and then pull the tracked data from your CMS/LMS.

@Theresa: here is a quick demo I mocked up in Storyline. You can drag/drop any of the objects into any box and it only allows three per box. If you didn’t want to score right/wrong you’d disable the submit button. I used the convert to freeform feature in Storyline to build the demo in just a couple of minutes.

David also has a great example that is a bit more complex which offers more flexibility. I asked him to submit a link in this thread. If you want more specific detail jump into the community and we can show you how it was created.