In the previous tutorials, we learned to use the states, layers, and triggers to build an interactive scenario. Then we practiced adding interactive markers to an image. In this tutorial, we'll look at how to create a quick drag-and-drop interaction.

Drag-and-Drop Basics

Here’s a quick overview of how drag and drops work. First, you need an item that can be dragged. And you need a place to drop it. We call that the target. When you create drag-and-drop interactions in Storyline, you’ll select the draggable item and the drop target using a simple form.

Practice Activity: Create a Drag-and-Drop Sorting Interaction

Watch this video first, then follow the steps below to practice.

Let’s build a quick drag-and-drop sorting activity where we will sort colored squares to a garbage can or file cabinet. To get started, download the practice folder.

  • Open the drag-drop.story file. At this point the slide just contains some objects. There are two sets of colored squares (yellow and blue) and two images, a garbage can and a file cabinet. You’ll also notice that there are no Slide Layers. We're going to convert this slide to a freeform question.
  • From the Insert tab, select Convert to Freeform. And then choose Drag and Drop.

  • This opens a form where you can choose your Drag Items and Drop Targets. The form also contains all of the default programming required to grade the interaction and provide feedback. As you can see there are a few options. For now, we’ll just go with the defaults.
  • Under the Drag Items column, select all of the yellow and blue squares. That makes them all draggable.
  • Under the Drop Target column, select the garbage can for the yellow squares and the file cabinet for the blue squares. We’ll keep all of the default settings.
  • Click on Save & Close.
  • Preview the drag-and-drop interaction. Pretty cool, huh?

This process converted the slide objects into a graded drag-and-drop interaction. Now look at the Slide Layers panel. You’ll notice that Storyline created the Incorrect and Correct feedback layers. They can be edited just like any other layer.

If you want to edit the interaction, go to the Edit Drag and Drop button in the top right corner. We’ll stick with defaults, but feel free to look at your options and see what they do.

As you can see, building drag-and-drop interactions is pretty easy. The key point is that anything you put on the slide can be converted to a drag-and-drop interaction in minutes. That's going to give you all sorts of opportunities for interactive elearning.

Create a sorting activity on your own. See if you can figure out how to get the items to return to their starting spot when not dropped on the right target.

Practice Activity: Convert to Freeform

Watch this video first, then follow the steps below to practice.

While we're at it, let's create another freeform question. We use the same process as the drag and drop, but in this demo we'll use the Pick One option.

Let's see how well you do on your own.

  • Start with the drag-drop.story file and select the slide with the three characters on it.
  • Convert it to a Pick One freeform question and make one of the characters selectable.
  • Preview the slide.

As you can see, Storyline makes it easy to convert a slide and its objects to a freeform interaction. There’s obviously a lot more you can do to build interactive content in Articulate Storyline. But this is a good start. The best thing is to practice building a few of your own interactions. If you get stuck, feel free to ask someone in the community or check out some of the other Storyline tutorials.

In the next tutorial, we'll look at how to create quiz questions in Storyline.

Related Content