Here's How I Built This Minimalist Subway-Themed Drag & Drop Interaction
Recently I was watching my husband play a cool little route-planning game called Mini Metro. It was fascinating to see how quickly he was hooked on such a seemingly simple game. But after watching him play for awhile, I realized that the game was engaging because it was so simple: it was a little challenging, a little rewarding, and it allowed him to experience the consequences of his choices—both good and bad—all without a lot of fluff or exposition. Sound familiar?
Simplicity, risk, challenge, rewards, and consequences—all five are elements that can make for a compelling e-learning experience.
I set out to design my own simple subway-themed puzzle inspired by Mini Metro. However, I quickly realized that letting learners experience consequences requires a robust game design that would take much more time than I had to dedicate to the effort.
So, rather than the full-fledged railroad building game I originally had in mind, I ended up simplifying my design into a more lightweight route-planning puzzle interaction with only two outcomes: a best-choice answer and two pieces of feedback or guidance for when the learner made choices that wouldn’t fulfill the goals of the project. The goal was for the learner to follow some simple project requirements to plan an express route (no stops) between two destinations on my map—the Sports Complex on the east side of town and Central Station on the west side. To make the experience a little more hands-on, I opted to go with a drag-and-drop interaction.
So, are you game to take your learners for a ride on this express route to e-learning fun? Here’s a step-by-step walkthrough (with videos) showing you how I did it, and how you can do it too.
1. Set Up a Slide with Drag Items and Drop Targets
First, I created a simple map (similar to a big city subway route map) in PowerPoint using drawing shapes. Once I finished my map, I selected all of the drawing objects, right-clicked with my mouse, and selected “save as picture.”
Note: I could’ve drawn my map in Articulate Storyline and done “save as picture” as well. Using PowerPoint was simply a matter of habit for me.
Back in Storyline, I laid out the structure of my project in story view and then inserted my map image to the slide where I wanted to build my drag-and-drop interaction.
I wanted learners to lay segments of track onto the map, so I used Storyline’s line shape to draw some lines that would represent the railroad tracks. These lines were my drag items.
To visually separate the map (my drop target) from the tracks in my rail yard (my drag items), I created a gray rectangle shape at the bottom of the map.
2. Add Feedback Layers
I wanted learners to experience two possible outcomes from their choices: 1) to see their train running along the most practical route (the correct choice); or 2) to see some helpful feedback when their choices didn’t fulfill the project’s requirements.
To do this I needed to add some custom feedback layers, which I did by clicking the “new layer” icon on the slide layers panel to add each layer.
Once added, I renamed my layers to “No Parks” and “No Stops” to help me keep track of which feedback would match the hotspots I'll place on my map in Step #3.
3. Draw Hotspots
Storyline’s hotspot feature is super-handy for creating everything from basic navigation to rich interactions. In this case, I decided to use hotspots on my map image to act as drop targets for the rail segments.
I accessed the hotspots from the insert tab. They’re located under “Controls” in the Interactive Objects.
Since my project was a grid (mostly straight lines), I was able to use the hotspot rectangle for my drop targets, but you can also create oval and freeform hotspots.
By default, Storyline names and numbers hotspots as you insert them (e.g., Hotspot 1, Hotspot 2). Since I had multiple hotspots on my screen, I thought it would be easier to keep track of them by renaming them on the timeline.
In my case, I was using the hotspots as drop targets so I renamed them in a way that would make it easier for me to remember—Correct, No Parks, and No Stops.
4. Add “Show Layer” Triggers
With all of my hotspots/drop targets in place, it was time add a few triggers. This may sound more complicated than it really is, so I created a short video to walk you through the steps and the rationale behind them.
In summary, the point of this step is to trigger my “No Parks” and “No Stops” feedback layers by specifying which drag items and drop targets should trigger which feedback layers to appear.
5. Convert to Freeform Drag-and-Drop
Now I’m ready to let Storyline work some drag-and-drop magic! Under the insert tab, I chose “Convert to Freeform” and then selected “Drag & Drop,” and clicked “OK”.
This action tells Storyline that I want it to treat the objects on my screen as either draggable items or drop targets. All I need to do is specify which objects serve which purpose.
How? Simply click the “form view” tab and then select the drag items from the drop-down menu on the left and the corresponding drop targets from the drop-down menu on the right. Repeat this action for each drag item.
6. Add “Jump to Slide” Triggers on Each Layer and Set the Base Layer to “Reset to Initial State”
So now we have a working drag-and-drop interaction, but there’s just one tiny hiccup: when my learners get feedback that their route doesn’t comply with the No Parks or No Stops requirement, the railroad track (my drag items) don’t return to their original positions in the railyard. That's because, by default, Storyline doesn’t return drag items back to their original position. So how can we trigger the base layer in our interaction to reset drag items back to their original position?
A brilliant solution to this conundrum was originally shared by one of our Super Heroes, Rebecca Fleisch Cordeiro. In this Screenr, she walks through the simple process of adding a “jump to slide” trigger and adjusting the base layer to "reset to initial state" — but I’ve also recapped the steps, as they relate to this project, in the following short video.
7. Build the “Correct” Slide with Motion Paths and Looping Layers
Once the learner lays the correct route and clicks Submit, I want them to see a screen that shows the results of their route in the form of a circle that moves continuously back and forth between the two map destinations, simulating a train moving along the route my learner just built.
To do this, I’ve used a combination of layers, triggers, and motion path animation. Again, the steps are simple, but I think it’s easier to follow when you can see how it all comes together. So, here’s another short video explanation to walk you through how it's done.
8. Add Supporting Slides and Finishing Touches
Because the visual design was very spare and minimalist, I wanted to provide a brief navigation tutorial to explain the objective of the puzzle and to point learners to the drag items. To do this, I inserted a slide that’s a duplicate of my drag-and-drop interaction, and then added three layers with short navigation instructions.
I also wanted to make sure folks had the ability to review the project requirements and to see a less cluttered version of the map. To do that, I added two slides to my project—one for the project requirements and one for the map. Then I took advantage of Storyline’s lightbox trigger to make these slides accessible from two buttons that I added to the header of my drag-and-drop activity: “View Map” and “View Requirements”.
Note: For more step-by-step details on how to trigger a lightbox in Storyline, take a peek at my article All About Lightboxes.
Finally, to finish out my project, I created a little splash screen with text and arrows, and then I animated them with a simple wipe animation. I also added a free subway sound effect I downloaded from freesfx.co.uk to really set the stage.
And that’s it!
Yes, this approach is much, much simpler than what I’d originally intended to build, but I’m happy with the result. I also see lots of ways to make it more challenging and rewarding by incorporating features like Storyline’s number variable to add game elements like a timer or a budget.
In the end, I had a lot of fun transforming a big idea into a simpler interaction. Would I like to have built my own full-fledged subway game? Heck yeah! But now that I’ve built this simple interaction, I can see exactly how to do it in Storyline. And that’s the thing I love most about Storyline: you can build pretty much whatever you can imagine—big, little, or in between.
So if you’re like me—more imagination than time—use the free download of this project to inspire your creativity, speed your progress, or just practice reverse-engineering a custom drag-and-drop. The possibilities are endless!
Ready to chart your own route to e-learning success? Check out our recent gamification series for more ideas and free downloads.
Want to try something you learned here, but don’t have Articulate software? Download a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.