How to Make a Custom elearning Drag and Drop Activity in Storyline

Storyline comes with a lot of great features and built in eLearning activities, but there are a few limitations to the available interactions. Storyline’s drag and drop activity is great, and allows multiple items to have the same correct drop spot, but currently you can’t have an item with more than one correct drop spot. This was mentioned in my Storyline 3 wishlist of new features.

However, Storyline’s trigger wizard allows you to program custom events for when items are dragged and dropped, and Storyline 2 has the useful feature of being able to select multiple items for your object to be dropped on! With these functions, you can program a simple drag and drop eLearning interaction with multiple correct answers for each drag item. Let’s go through the process of programming this activity.

Here is a simple drag and drop activity, where the objects are either red or blue, and either square or circular, and can be dropped in one of the two corresponding boxes. It also helps to rename all the necessary objects in the interaction by double clicking on the object name in the left column on the timeline, as indicated below. That way you won’t be trying to figure out which object Rectangle 5 really is when it’s listed in the triggers panel.

For each draggable object, you create a True/False variable that you can trigger when the object is dropped on a correct or incorrect drop spot. You can access the variables panel by clicking on the single button in the top left of the triggers panel that has [x] in it.

Now, you need to program what happens when each of your drag items will do if dragged onto a correct or incorrect drop spot. You will have to code for both correct and incorrect drop instances, because if you code only for correct answers, the learner won’t be able to drop the object on an incorrect answer and the object will return to its original place, unless that’s what you want your activity to do! However, unlike the default drag and drop activity, you won’t be able to modify how the objects stack on the drop spot. Here is the trigger for when BLUE SQUARE is dropped on the blue or square drop spots, it will adjust the SquareBlue variable to True. Then you make a second trigger that adjusts the SquareBlue variable to False if it’s dropped on the red or circle drop spots.

Finally, you add triggers to the Submit button that if all the variables are True (use the AND modifier between conditions), then the learner will receive the Correct feedback screen, and if any of the variables are False (use the OR modifier), then the learner will receive the Incorrect feedback screen.