Gamified Digital Dashboard / Meet the Squad 🎮💻
Hi everyone! 👋 Here is my entry for Challenge #543. I wanted to step away from the traditional corporate org chart and try something more gamified and dynamic. I designed a digital dashboard inspired by video games and sci-fi interfaces to introduce our elite squad. In this interaction, users are guided by "A.I.L.A." (our AI host), who helps them explore the profiles and stats of our core team: Emperatriz, Fernando, Christian, and myself. Behind the scenes (The Tech Stuff): To bring this cyberpunk/digital aesthetic to life, I combined motion graphics with custom code in Storyline: Holographic Videos: The character holograms were fully animated and rendered in After Effects to get that perfect sci-fi glow and smooth movement. Smooth UI Animations: I used Vanilla JavaScript and GSAP natively within Storyline to animate the interface panels. By manipulating coordinates and autoAlpha, the UI boxes smoothly slide in and float into place, giving the dashboard a very responsive and modern feel. You can check out the interactive demo here: 🔗 Gamified Digital Dashboard / Meet the Squad I really enjoyed mixing visual design, interactive storytelling, and a bit of code. I would love to hear your feedback! 🚀HEIST
Hello! When TomKuhlmann recently suggested his 'Production Workers' character pack could be 'safety-forward thieves dressed for an elaborate heist', the idea stuck... To build this demo, I brushed up on DavidAnderson's tutorial on adding Characters to Circles. As in previous weeks, I have used a 'Zoom Region' to move around the slide at key moments. I created the additional poses for the characters using NanoBanana in Pixlr. And the final activity is controlled by three dials. It can only be reached once you have read all three bios. Have a go for yourself here: HEIST If you have any questions, please ask!
Perfect Match?
Hello! Typography is a big part of elearning design. And being a total font nerd, I love it when I find the 'Perfect Match'. This interaction is built around two dials and has been optimised for mobile phones. Javascript randomises the starting position of the dials at the start of each game. It also controls how far the dial turns with each tap. When the value of Dial1 and Dial2 match, a feedback layer is shown, and the score increases. When you hit 4/4, the game resets. The AI voiceover is 'Liam' with the style exaggerated to ~70, and I used Suno to create the game show-style theme tune. This plays on repeat until the score hits 4/4, when it is stopped and replaced by applause. But you can also mute the music during the game if it's not your jam. The content is based on this article. I had a lot of fun making this one! Let me know what you think. If you have any questions, please ask. PLAY HERE: https://bit.ly/elhc540Unleash the Legend!
This challenge gave me the chance to try something a little different. I’ve always enjoyed comics and superheroes, so I built an interaction where learners could select a power and a background using two dials to reveal a matching hero. I put together a quick prototype in Storyline to prove out the idea, then brought the idea into ChatGPT to help me shape the content. I worked through the hero grid, tightened up the descriptions, added flavor text, and refined the overall look and feel. About halfway through, I had the idea to present each hero like a Magic: The Gathering–style card, which gave the whole thing a more collectible feel. From there, it was all about polish: adjusting the instructions, finding the right button label (Unleash the Legend), and even adding some sound effects to give the interaction more punch. This was a fun back-and-forth with ChatGPT — starting simple, then layering on details until it started to feel complete. You can see the final version here: Unleash the LegendThe best weigh to make an espresso
Hello! I like to mimic real-life machinery, dials, switches, and buttons in eLearning where it's appropriate. Sometimes learning by doing can be very literal. But these features can also impact #accessibility. In this week's coffee-themed demo, I have ensured the drag and drop, slider and dial interactions are also accessible from the keyboard. All of the vectors in this week's demo were 'handmade' in PowerPoint and Storyline using the 'merge shapes' feature. Most of my time was spent making sure the interactions perform as intended when the keyboard is used instead of a mouse. But I'm pretty pleased with the overall effect. What do you think? PLAY HERE
Spookily Accruate
Hello! For this challenge, I reused a character I created way back in 2020, for Challenge #292 (Using Variables). In case you wondered, Zardoz is a cross between Sean Connery and the Zoltan machine from Big. I've upgraded Zardoz with a few tricks I've learned in the meantime, including live polling, a speech animation cycle, and some sneaky Javascript. If Zardoz doesn't successfully read your mind, he can still surprise you with what he does know about you. Does Zardoz know what you're thinking? TRY IT OUT HERE
Chainsaw Safety
Review 360 I learned a lot with this fun challenge! And I know what I will do differently the next time (like don't cover the dial with videos / images on the layers). I used Articulate's TTS, sound effects, and icons with Gemini's videos and images. Given more time, I would vet the entire project with an SME to ensure technical accuracy. Also, I'd love to know how to make the dial's pointer pivot from the end instead of the middle.Voyage experience - Signature venues
Hello! I've been lurking around for years, and this is my first challenge (a bit late, I know). Since I develop Travel Advisor training courses for a storied cruise line, I thought a ship's wheel (well, an old-timey wheel) would be perfect for a dial to page through our ship's signature venues. Animating the dots was a bit of a chore (lots of triggers), but I like the way it turned out. Signature venues
