Forum Discussion
Building Blocks for Critical Risk Training: Flip Cards + Dynamic Progress Bar
I’ve just started experimenting with a new side project: creating digital microlearning modules for critical risks in Civil Infrastructure. My aim is to combine storytelling, gamification, and microlearning to make safety training both memorable and practical.
For my first prototype in Storyline 360, I focused on two core building blocks:
1. Flip Cards for Scenarios
Flip cards were my first choice because they’re simple but powerful. Learners can tap or click to reveal hidden information, making the interaction feel more active than static text.
In my reversing hazards module, for example, a card might show:
Front:
“Tap to reveal.”
Back:
An illustration plus a quick fact stating, “Vehicles have blind spots. Workers can be hit if the driver cannot see them”
This creates a moment of reflection before revealing the answer, which helps with recall.
2. Dynamic Progress Bar with JavaScript
I also wanted a progression mechanic to give the module a more gamified feel. Using a little JavaScript, I set up a dynamic progress bar that updates as learners complete challenges.
The visual feedback adds to the sense of achievement and makes the module feel more like a level-based game than a linear course.
Why These Matter
They’re small details, but they’re foundational. Flip cards allow me to present risks in an interactive way, while the dynamic progress bar encourages learners to keep moving forward. Together, they start to shape the kind of habit-forming, challenge-based training I’m aiming for.
Click image to view Articulate Review link
Helpful Resources that made this work
Flip Card approach in Articulate Storyline
Part 1: How to Create a Flip Card Animation in Articulate Storyline: https://community.articulate.com/blog/tips-tricks/part-1-how-to-create-a-flip-card-animation-in-articulate-storyline/1220661
Part 2: How to Create a Flip Card Animation in Storyline – Backflip: https://community.articulate.com/blog/tips-tricks/part-2-how-to-create-a-flip-card-animation-in-storyline—backflip/1220727
Dynamic Progress Bars in Storyline
Dynamic Progress Bars in Storyline – JavaScript in Storyline 360 #3: https://www.littlemanproject.com/posts/javascript-progress-bar/
2 Replies
This is a wonderful example of trickery on the eye. From what I can tell the card on the base layer never flips, and on the layer that is displayed only the back half of the card flips. Yet I can't see any weirdness. I tried flipping both sides and yeah it can work, but it looks so off. Great job on this.
And thank you for sharing.
Agree with AaronBurgessAU, thank you so much for sharing, SuperSuze! Particularly appreciative and impressed with how much you & other folks like EmilianoPireddu and AzharMohammed29 have been sharing these super in-depth examples not only with the how but with the why as well.
This is so appreciated for new instructional designers who may be browsing these forums and wondering why these seemingly small details matter. Thank you so much for your share!
