Accordion FAQs
What if an accordion FAQ didn't have to look like one? For this week's challenge, I built two completely different takes. One is styled as sticky notes pinned on a corkboard, where each note peels open on click, and one is a chat conversation where tapping a question triggers a typing animation before the bot replies. Both in Storyline 360 on a 9:16 canvas, with a selection screen so you can pick which style to explore. Check it out here! Would love to connect on LinkedIn and exchange ideas!RISKY RICK
Click here to check it out. For this OSHA eLearning Challenge, I wanted to move away from a traditional “click-next” compliance experience and explore a more cinematic, behaviour-driven approach to warehouse safety training. Rather than focusing purely on rules and hazard identification, I built the concept around a character called “Risky Rick”, an experienced warehouse operative whose confidence and familiarity with the environment lead to unsafe decisions and shortcuts. The experience begins with a fast-paced montage sequence showing Rick carrying out increasingly risky behaviours across a warehouse setting, including: overreaching from a ladder dropping boxes using a forklift without checking the environment properly creating trip hazards with pallet wrap mixing chemicals carelessly The intention was to make the learner feel like an observer watching unsafe behaviour escalate in real time, rather than simply being told what not to do. After the montage, the experience rewinds and breaks each scenario down using freeze-frame analysis interactions. Instead of using standard multiple-choice questions, I focused on three reflective lenses: OBSERVE: the behaviour or warning sign INTERVENE: the point where action should happen CULTURE SIGNAL: what the behaviour suggests about wider workplace norms and accepted risk Visually, I leaned heavily into a gritty, cinematic warehouse style using bold typography, industrial textures, high-contrast colour palettes, and dynamic OSHA-inspired graphics. The “Risky Rick” branding was designed to feel more like a behavioural safety campaign than a standard training course. From an instructional design perspective, the project explores how storytelling, character-driven scenarios, rewind analysis, and progressive reflection can create a more immersive and memorable learning experience around workplace safety and risk awareness. Click here to check it out.Using AI Avatars to Enhance Immersive Learning - Inside Tesla's World
This challenge was an opportunity to explore how AI avatars can be used to enhance engagement within a learning experience, not by over-guiding the learner, but by setting the tone and creating a stronger sense of immersion. Rather than using a traditional narrator or static introduction, I wanted to introduce the experience through a character. To achieve this, I first generated an expressive avatar. This allowed me to create a consistent visual identity that felt aligned with the theme of Tesla and the overall environment. The avatar is used intentionally and sparingly to introduce the experience and reappear at key moments while the learner remains in control of the exploration. This approach helps maintain immersion without overwhelming the experience. The aim was to demonstrate how AI-generated avatars can be used in a simple, practical way within tools like Rise and Storyline Check out what I created in response to this week's challenge by clicking here. to elevate storytelling, create presence, and make digital learning feel more human and engaging.Can One Click Trigger a Cyberattack?
In today’s digital workplace, a single mistake can lead to serious business disruption. That’s why we developed a Scenario-First Cyber Awareness Activity that places learners inside a realistic cyberattack situation. Help your workforce learn how to spot threats, make safe decisions, and protect critical business data. See the Scenario-Based Training in Action https://www.swiftelearningservices.com/scenario-first-elearning-cybersecurity-awareness-training/Pantone COTY 2026 - Creative GSAP 3D Effect for Articulate Storyline 360
For this year's Pantone COTY E-Learning Heroes Challenge, I wanted to explore how motion and perceived depth could be pushed further within Articulate Storyline 360 with the help of the GSAP animation framework! This demo creates the illusion of a living, breathing scene that subtly responds to the user's mouse or finger movement across the screen. Combining parallax and masking techniques together with GSAP scripting, the result is an interaction where each illustrated element appears to rotate and drift in three-dimensional space, even though everything is built using flat 2D shapes. Check out the interactive version here: https://discoverelearning.com/insights/pantone-coty-2026-cloud-dancer-creative-gsap-3d-effect-for-articulate-storyline-360/Mr Plow Saves Christmas
It's that time of the year again, folks! I was a little underwhelmed when Pantone announced Cloud Dancer as their next Color of the Year, but I had a lot of fun making this snow-themed interactive quiz. It's a surprisingly versatile base color. For almost as long as I have been building MCQs in Storyline, I've enjoyed showing immediate and visible 'consequences' for right or wrong answers. In this demo, a correct answer will clear the road and allow the delivery van through. But an incorrect answer will cause a blizzard, and a naughty dog will change the color of the snow in subsequent questions. Get the final question wrong, and you'll set off the car alarm, too. These little details are designed to make it more appealing to try again if you fail. So you not only improve your knowledge, but also improve the on-screen outcomes. Anything less than 100% isn't good enough. Watch out for yellow snow! The 'Mr Plow' character was made with Powtoon. Isometric assets from Freepik. Can you clear the road and help Mr Plow save Christmas? Mr Plow Saves Christmas | EngageBrainTrain.com Happy Holidays!
Meet the Team: Hover Quotes for Storyline
Here's an example of how I've used quotes for meet-the-team type interactions. I've always been a fan of using quotes in my trainings and try to include a few in every course. Rise has some good options for quote blocks but quotes are rare in Storyline courses. View the example (download included)The Last Impression
Check it out here! First impressions get you in the room. But what happens after you leave? Most candidates send a thank-you email and hope for the best. This entry makes the thank-you the portfolio piece. I may have made a guest appearance in a hiring manager's inbox for this one. The experience opens as an email mockup, unfolds into a four-tab interactive, and walks the hiring manager through the conversation, a microlearning sample, the design thinking, and a warm close. Because first impressions get you in the room. The last impression gets you the offer. If you turn every touchpoint into a design opportunity, let's connect — Jayashree RaviFore! 😱 First Aid on the Golf Course
I could have made this longer but ran out of time. Originally, I wanted the scenarios to be videos but Veo 3.1 (Google Gemini) did not do what I wanted even though I used promptcowboy.ai for help. While some of the results were hysterically wrong, I couldn't use them. 😂 I used characters from Articulate, redressed and reposed them in Nano Banana (Google Gemini) and made them transparent with MS Designer, Articulate TTS, and the golf photos are mine (slide 1 is Yeamans Hall, Charleston, SC, 14th Hole - a great example of a Knoll hole, and the other background is Orchards Golf Club, South Hadley, Mass - probably the 6th hole lol I'm not 100% certain). https://360.articulate.com/review/content/6daebfc6-c8a5-4f7f-afc2-41b6e291ba22/reviewThe South Africa Big 5
Hello! I'm currently sitting in Joburg Airport, waiting for my flight back to the UK after a terrific week in South Africa with New Leaf Technologies. After the Learning Indaba, I was very fortunate to spend some time with the team at Kwalata Game Lodge in Dinokeng Game Reserve. Inspired by that experience, here's my demo for this week's Accordion Challenge. This demo uses JavaScript to 'shuffle' the five parts of the accordion, reordering their z-index positions, so that the selected part always appears beneath the other four. var player = GetPlayer(); var animalValue = player.GetVar("ANIMAL"); var ids = { GrassFgd: "6HxcFGzoBsU", ELEPHANT: "6YFFSsUIcdG", RHINO: "6f62e0IMC4F", LION: "5ohBXuBxrO4", BUFFALO: "6moj2Qru7Il", LEOPARD: "6DwuJlPK3xT", GrassBgd: "64KgCoIDN33" }; // Priority order: index 0 = highest z-index (frontmost) var animalOrder = ["ELEPHANT", "RHINO", "LION", "BUFFALO", "LEOPARD"]; function getEl(id) { return document.querySelector('[data-model-id="' + id + '"]'); } function getZ(id) { var el = getEl(id); if (!el) return 0; return parseInt(window.getComputedStyle(el).zIndex) || 0; } function setZ(id, z) { var el = getEl(id); if (el) el.style.zIndex = z; } var zBgd = getZ(ids.GrassBgd); var zFgd = getZ(ids.GrassFgd); var zBase = zBgd + 1; // zBase+0 = selected (back), zBase+1..4 = others low to high // So Elephant (highest priority) gets zBase+4 when not selected, etc. if (!animalValue || animalValue.trim() === "") { // Reset: Elephant highest, Leopard lowest in the group for (var i = 0; i < animalOrder.length; i++) { // i=0 (Elephant) gets highest: zBase+4, i=4 (Leopard) gets zBase+0 setZ(ids[animalOrder[i]], zBase + (animalOrder.length - 1 - i)); } } else { var selected = animalValue.trim().toUpperCase(); // Selected goes to the very back of the group setZ(ids[selected], zBase); // Remaining animals keep their relative order, stacked above var zCounter = zBase + 1; // Walk from lowest priority to highest (Leopard up to Elephant) // so that Elephant ends up with the highest z-index for (var i = animalOrder.length - 1; i >= 0; i--) { if (animalOrder[i] !== selected) { setZ(ids[animalOrder[i]], zCounter); zCounter++; } } } // Re-pin grass layers setZ(ids.GrassBgd, zBgd); setZ(ids.GrassFgd, zFgd); Each section of the accordion is also made using an SVG image, as the transparent areas of a PNG image would have blocked users from clicking any sections beneath it. Right! I have a flight to catch! Visit the Game Reserve here: https://bit.ly/elhc544
