It’s the holiday season which means lots of baking in my household. Pies, cakes, bars, cookies… you name it, we make it. With so many treats on my mind, I decided to build a delicious drag and drop demo.
Baking Basics walks you through the process of making a cupcake batter. It showcases a lot of Storyline features including branching, animations, and a slider. But the icing on the cupcake is a custom built drag and drop interaction that gives feedback based on both where and when you drop an object.
Order in a drag and drop is important if you want the learner to demonstrate knowledge of a process such as baking or, on a more serious note, putting on a biohazard suit.
Mapping Your Route
To add an element of order to your drag and drop it’s helpful to first map out the sequence of events. This is part of my map for this project:
Adding in Feedback
For each potential misstep, I added in a custom feedback layer. Constructive feedback was created for when an object is dropped on the wrong target or in the wrong order.
I also added subtle feedback for when steps are completed correctly to let the learner know they are on the right track.
Making Order Matter
Now all you have to do is add in some variables and triggers using your map as a guide.
- First, I created a True/False variable for each variable listed in the map.
- Then I created a trigger for each action to change the value of the corresponding variable when complete. This is also where I added in any corresponding conditions.
- The final step was to trigger feedback layers if an action was completed in the wrong order.
And that’s it! To learn more about creating drag and drops in Storyline (& Storyline2), you can check out this tutorial or post your questions below. And you can click the image below to try your hand at making some vanilla cupcakes.