How to Turn This Boring Content Into a Fun Drag-and-Drop

Recently, I was tasked with finding a way to make some really boring, bullet-point-style content interactive. Common problem, right? Here’s how my slide looked to start:

Pretty standard, right? It looks fine, but it’s nothing special—just plain text (including, to my horror, bullets!) on a nice background image. No interactivity, and doesn’t require the learner to think. So I thought to myself, “How can I present this content in a way that’s more fun and engaging?”

A drag-and-drop! I decided I wanted learners to pack their beach bag by dragging the items that are important for sun safety into the bag. Here’s how my slide looked after the interactivity makeover: 

View Example

So what did it take to turn this drab content into a drag-and-drop activity? While Articulate Storyline makes it super-simple to create the drag-and-drop itself, a bit of thought and design went into creating the interaction so it works right, looks good, and fits well on one slide. Here’s how I made it all happen.

Create Drag Items and Drop Target Graphics

I wanted an interaction that asks the learner to pack a beach bag with the essentials for sun safety (the bullet-point items listed on the “before” slide), so I needed graphics to represent the drag items and a graphic for the beach bag in which they would be dropped.

I also needed some drag items that would be “incorrect” for this objective, so I had to think of things that would typically go in a beach bag but aren’t important in terms of sun safety. I settled on items like a book, magazine, or MP3 player.

Next I thought: if I’m going to drag my correct items to the beach bag, where will I drag the incorrect items? I decided on a trash can as the “drop target” for the incorrect items.

How did I create these graphics? I created most of them (except a few, such as the sunglasses and the sandals) directly in Storyline using grouped shapes. I did a right-click on the group and from the menu chose “Save as picture” to save the graphics as .PNG files. Here’s an example of how I used three shapes to create a sunhat:

Because you cannot include grouped objects as drag items in a drag-and-drop interaction, I right-clicked to save the graphics as .PNG files, which I then reinserted into my project. By now my slide looked a bit like this:

Create Your Slide Layout

I now have all my items on my slide, but the graphics need to be arranged in a layout that makes sense. I place all my drag items at the top of the slide, next to the text instructions. For my drop targets, the garbage and the beach bag, I’ll add a spot on the bottom of the slide for each graphic with simple text instructions to either “Toss it” or “Bring it.” Now my slide looks something like this:

When I look at this I quickly realized that I won’t be able to fit all of my drag items on the slide at once; there just isn’t enough space. Luckily, Storyline offers the ability to reveal drag items one at a time. So, I select all of my drag items and use the align tool to “Align Center” and “Align Middle” all of those items. Now, my drag items are all stacked neatly like this:

Finally, I added a transparent shape (you could also use a hotspot) over each of my drop zones. I did this to convert the entire area into a drop target, and not just the garbage can graphic or the beach bag graphic. Now it looks like this:

Another helpful tip is to rename these two rectangles or hotspots to “correct” (the one over the beach bag) and “incorrect” (the one over the garbage). This becomes helpful when you set up your drag-and-drop in the next step.

Set Up Your Drag-and-Drop

With everything in place, it’s time to convert this into a functional drag-and-drop interaction. On the insert tab of the Storyline ribbon, click the “Convert to Freeform” button, then select the drag-and-drop option. From the form that appears, use the drop-down menus to assign your graphics as your drag items. For each, assign the corresponding drop target (e.g., the “correct” one for the sun safety items, the “incorrect” one for the unnecessary items. This is where naming your shapes comes in handy!).

The next thing I did was click the “Drag & Drop Options” button on the ribbon and select the “Reveal drag items one at a time” option to display the drag items one by one. I also changed my “Snap dropped items to drop target” to “Free,” so users can place the drag items anywhere on the drop target.

Edit Feedback Layers

Now that my drag-and-drop has the right functionality, the last step is to edit my feedback layers. I first went into the Feedback Master and removed everything from the Master Feedback layout. Then, I went into my correct layer and formatted it to look exactly as I wanted by adding some rectangle shapes, and editing the text. I then copied everything from the correct layer, pasted it onto the incorrect layer, and styled it by changing the color from green to red and updating the text.

And voila! That’s how I took this slide:

… and made it into this interaction:

View Example

What do you think of this drag-and-drop? Do you have any comments or questions? Anything you would add or do differently? I’d love to hear your feedback, so please leave a comment below.

Want to try something you learned here, but don’t have Articulate software? Download a free trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.