I started this project because I was playing around with drag-and-drop interactions and thought, wouldn’t it be cool if you could have a drag-and-drop interaction with multiple items, one drop target, and the items have to be dropped on the target in a certain order?
Well, that functionality doesn’t exist in Storyline 2. There are other question forms that allow the learner to order a sequence of responses, but a free form drag-and-drop has to have multiple targets or one target where the items can be dropped in any order.
I set to work to figure this out. In short, what I ended up doing was I created a new drop target for each dragged item. Each drop target was the same shape and size. I stacked the drop targets on top of one another in the order of the correct sequence (with the first of the sequence on top). Then, I set a trigger to change the state of each drop target to hidden when the correct item was dropped onto it. If done in the correct order, the targets would each disappear, revealing the next drop target in the series. If done incorrectly, at least one of the items would be dropped on an incorrect drop target, which marks the question as incorrect. If you need more explanation, I explain it visually below.
First create a standard freeform drag-and-drop interaction. Start by creating your items to be dragged. These could be any shape or image that the learner would need to drag to a drop target in a specific order. For my course, the learner had to memorize a sequence of colors, then drag bottles of potion into a cauldron in the same order as the color sequence. For this tutorial, I create a simple version with numbered colored squares that need to be dragged to cauldron image.
Then create your drop targets. I had the image of a cauldron on the background of my slide, so I created drop targets that were simple rectangles without a fill or outline. I did this because I wanted the learner to drag the items to the cauldron, but I wanted a drop target slightly larger than the cauldron, to make sure they didn’t miss. Having the shapes without a fill or outline allowed the learner to see the cauldron through the drop targets and also couldn’t see what was happening with the drop targets (explained more below). Keep in mind, each of your drop targets should be the exact same shape and size. We will eventually stack these and we don’t want any drop targets to be larger, smaller, or a different shape than those above or below it.
Once I had my items and drop targets created, I made sure to name everything on my timeline to avoid confusion later. I named my items things like “Red 1,” which meant the item is the red potion and it’s first in the sequence. Then I named my targets, “Target 1,” “Target 2,” and so on. That way I can easily match things up later.
Now, using the timeline as a guide, make sure your drop targets are stacked on top of one another with the first target in the sequence at the top and the last target in the sequence at the bottom. Also, make sure the targets are all above the background. Since they have no fill or outline, it’s hard to tell by looking at the slide, but you want these targets “visible” for the items to drag on. If they’re behind other items on the slide, it may not work properly. Make sure that your drop targets perfectly align with one another on the slide. They need to be stacked perfectly in order to work.
Now you want to convert to freeform. Using the dialog, select “Drag and Drop” and then select each drag item and its corresponding drop target from the list. When you’re finished, switch back to slide view.
If you were to preview this question at this point, even if you dragged the items in the correct order, all the items would be dropped on the top target (the target for the first item in the sequence) and your answer would be marked incorrect. What we want to do now is create a trigger for each drop target to change its state to “hidden” whenever the correct item is dropped on it.
To do this, I created a new trigger with the action, “Change the state of,” on object, “Target 1,” to state, “Hidden,” when “Object dropped on,” object, “Red 1,” dropped on, “Target 1.” Substitute the names of your items and targets for the “Red 1” and “Target 1.” Do this for the other drop targets and their corresponding drag items.
Feel free to test this out now. What you might notice is that your items all gather on the drop target. It would be nicer if the items disappeared once they are dragged onto the target. To do this, we want to create a trigger that changes the drag item to hidden whenever it is dragged on any of the drop targets. That way, whether the learner drops the correct item or incorrect item, the item disappears and they will continue to the next item in the sequence.
Create a trigger for your first item (mine is “Red1”). Action, “Change state of,” on object, “Red1,” to state, “Hidden,” when, “object dropped on,” object, “Red1,” dropped on, “check the boxes for all the drop targets…for me this is Target 1, Target 2, Target 3, and Target 4.” Repeat this trigger for the rest of your drag items.
Everything should now work correctly. Of course you can add some bells and whistles now. I added sound effects and some custom feedback layers to make it more playful.
Hopefully this tutorial has been helpful! If you have any feedback or suggestions, I’d be glad to hear them! There’s always more than one way to do something in Storyline 2. Have fun!