If you’re looking to add some interactivity to your next e-learning project, you might consider designing a drag-and-drop interaction. Drag-and-drops are a nice way to make your learner stop, think, and engage with the content: perhaps to order the steps in a process, match terms, or place items where they belong.
Storyline newbies might be wondering how to build and customize a freeform drag-and-drop interaction. Let me walk you through the steps you can follow.
Step 1: Design Your Slide
Let’s say you want to build an interaction on the topic of Canadian geography. You want learners to place various Canadian cities in the appropriate place on a map.
The first thing to do is design how the slide will look. You need to add all the items you want to have on your slide, including the objects you will use as drag items and drop targets (both key to creating a drag-and-drop interaction). Drag items are the objects that you actually click and drag on the slide, whereas drop targets are the areas on the slide where you drop the drag items.
In the example below there is a black rectangle with a title across the top of the slide, an image of a map of Canada in the background, and rectangle shapes that are used to create drag items (the names of the cities) and drop targets (locations of the cities on the map). You’ll also notice the use of star shapes to indicate the exact placement of the city on the map. So far, the slide looks like this:
Right now this is a static slide. It has a default Next and Prev button, and if you preview it, nothing happens. You can’t click on the cities and drag them to their spot on the map ... yet.
Step 2: Convert to Freeform
To take this from a static slide to an interactive drag-and-drop, click the “Convert to Freeform” button that’s available on the Insert tab of the Storyline ribbon.
When you click the Convert to Freeform button, Storyline presents you with options for the type of freeform slide to create. For this example, select “Drag and Drop.”
Select “Drag and Drop” to create a drag-and-drop interaction.
Once you’ve converted a static slide into a freeform drag-and-drop slide, a few things happen. First, you’re presented with what’s called “Form View,” which looks like this:
Form View is where drag items and their corresponding drop targets are assigned.
A few other things happen when you convert a static slide to a freeform slide, which you can see when you switch over to “Slide View.” The slide no longer has a Prev and Next button, but instead now has a Submit button. Storyline also automatically creates Correct and Incorrect feedback layers for the slide. (You may choose to leave the default feedback layers as they are, or you can pop into the Feedback Master to customize the look and feel of those layers.)
Once you hit Convert to Freeform, the slide has a Submit button, as well as Correct and Incorrect feedback layers.
Step 3: Assign Drag Items & Drop Targets
Next, pop into Form View to assign which objects are drag items and drop targets. It’s super simple to do; just choose the drag item in the left column and select the corresponding drop target in in the right column. There’s even a handy slide preview in the right-hand panel that shows you which object you’re selecting, to minimize room for error. Once you’ve assigned your drag items and drop targets, Form View looks like this:
Tip: Naming the drag items and drop targets makes it easy to ensure you have selected the correct corresponding objects.
Step 4: Preview Your Interaction
Now your drag-and-drop interaction should be working. You can hit the Preview button to see how it looks and check for any unwanted behavior:
The interaction is working, but you might want to change a few things to improve the learner experience:
- The Incorrect layer doesn’t provide any tips or indications about which drag items (if any) were placed in the correct drop zones and which weren’t.
- You can drop the drag items anywhere on the map, even outside of the drop targets.
- You can drop more than one drag item in a drop target.
Notice the learner gets no feedback about which answers are right or wrong. Also, learners can place drag items outside of drop targets, which looks messy.
Let’s look at how you can customize this freeform drag-and-drop interaction to make it work the way you want it to.
Step 5: Add Drag-and-Drop States to Your Drag Items
First, you can address the issue of not providing feedback to learners about which questions are right or wrong by using Storyline’s custom drag-and-drop states. These states are a quick and easy way to give your learners feedback about their choices. To add these states, simply select your drag item objects and click the “Add State” button in the States panel. You’ll notice these three options are available under the dropdown when you create a new state:
There are three drag-and-drop states available.
The three states available are:
- Drag Over State: This state determines how an object looks when it’s being dragged over any drop target
- Drop Correct State: This state determines how an object looks when it’s on the correct drop target
- Drop Incorrect State: This state determines how an object looks when it’s on an incorrect drop target
Once you’ve added your custom drag-and-drop states to one object, you can use the Format Painter to quickly apply those identical states to your other drag items. Now your learners will know which drag items are right and wrong when they click Submit.
Step 6: Customize with Drag-and-Drop Options
To further customize your drag-and-drop, head over to the Design tab of the Storyline ribbon:
Tip: There’s more than one Design tab; select the one that is on the far right.
On this Design tab of the ribbon you’ll notice a button called “Drag & Drop Options.” Click on this button to reveal this window:
Here, you have lots of options and features to customize how your drag-and-drop will function. Let’s run through them here:
Drag Item Options
Return item to start point if dropped outside:
- Any drop target: Select this option to make the drag items return to their start point if the learner does not drop them on one of the targets you’ve assigned in Form View.
- A correct drop target: Select this option to make the drag items return to their start point if they are not dropped on the correct target.
Reveal drag items one a time: In certain cases you may not have the space to put all of your drag items on the slide. This option allows you to reveal your drag items one at a time (here’s an example). You can even decide in what order to reveal them.
Drop Target Options
Snap dropped items to drop target: This option allows you to specify how the drag item reacts when you place it on the drop target. You have the following options:
- Tile
- Stack random
- Stack offset
- Snap to center
- Free
Allow only one item in each drop target: Pretty straightforward, this option makes it so that only one drag item can be in each drop target at the same time. If you drop a second item in the drop target, the drag item that’s already on the drop target will be returned to its starting point.
Feedback
Delay item drop states until interaction is submitted: This option uses Storyline’s custom drag-and-drop states, which are mentioned in the previous step.
By default, when you’re using these custom states, they will only be displayed once the learner clicks the Submit button. You can, however, change this by de-selecting the “Delay item drop states until interaction is submitted.” With this option de-selected, the drag-and-drop state (either Correct or Incorrect, depending on their choice) will appear as soon as the user drops the drag item on a target, not after they click the Submit button.
With all these options available, you can make a few quick edits to change how this interaction works.
- Select “Return item to start point if dropped outside: any drop target” to prevent the learner from being able to leave a drag item anywhere on the slide besides a drop target
- Select “Allow only one item in each drop target” to prevent the learner from placing more than one drag item in a drop target
Let’s look at how this example works with those changes in effect:
This interaction is a lot smoother now, and you’re providing the learner with valuable feedback about which answers they answered correctly and incorrectly by using the drag-and-drop states.
You could even take this a step further and give the learner unlimited attempts so they can keep trying until they’ve got all the cities in the correct spots. This is helpful from an instructional design standpoint because you don’t want to leave a learner hanging, unsure of the correct answers. Here’s how the interaction would work with unlimited attempts:
Did you notice that the learner gets to keep trying until they get it right? This leaves them with no doubt about the correct answers.
Hopefully this example helps you understand how to create freeform drag-and-drops, and how you can customize them with the drag-and-drop options available in Storyline. Do you have tips of your own for creating freeform drag-and-drop interactions? If so, let me know in the comments below!
Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.
Published 7 years ago
Version 1.0
