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!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/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/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!
The 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
Meet The Leaders
Hello! For this week's challenge, I used Suno to create four Beatles-inspired tracks as a novel way to introduce a fictional leadership team. I took four regular photographic characters from Storyline and used Nano Banana in Pixlr to alter their poses to mimic the cover of the album HELP! by the Beatles. And don't worry if you've never used a record player before. In the live version of this demo there are also full instructions. The record player tonearm is actually a dial, and there's some JavaScript in the background that adjusts its position as each track plays. If you move the needle too quickly, you may make the record skip. That's not a bug, it's a feature. 😄 If you have any more questions about this build, please ask! Rock out here: https://bit.ly/elhc548
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 RaviRace Back To Base
Hello! Can you make it back to base before the sandstorm hits? Play now. The thing I really love about working with vectors is how scalable they are. Even the tiniest details remain crystal clear when you scale them up. I built this demo using elements from a single vector pack created by Macrovector on Freepik. To create the illusion of movement, I used PowerPoint to recolour the wheels on the Mars Rover vehicle, and isolated parts of the tyre track. I then made a GIF using these shapes. And then placed the GIF over the modified SVG image in Storyline. This allowed me to turn the motion on/off using state changes. Pretty much everything that moves in this demo is a GIF, tucked away in a state change until it's needed. Having access to high-quality, easy-to-use graphics allowed me to focus on the instructional elements and the scoring mechanic. The 'wronger' your answer, the quicker your oxygen will deplete. Even if you reach the third question, if your oxygen hits zero, you will have to start again. This is controlled by JavaScript, which adjusts the value of the variable by a set amount when triggered. var player = GetPlayer(); var penalty = 35; // Change to 45 or 55 depending on the button var battery = player.GetVar("Battery"); var elapsed = 0; var interval = 100; var steps = 10000 / interval; var amountPerStep = penalty / steps; var timer = setInterval(function() { elapsed++; battery = Math.max(0, battery - amountPerStep); if (battery === 0) { player.SetVar("Battery", 0); clearInterval(timer); } else if (elapsed >= steps) { player.SetVar("Battery", Math.round(battery)); clearInterval(timer); } else { player.SetVar("Battery", Math.round(battery)); } }, interval); The eagle-eyed among you will have also noticed that when this demo runs on a desktop, the closed captions that accompany the narration have been repositioned and have a slight 'glitch' effect as they appear. This is also achieved with JavaScript. Despite the recent improvements to the closed caption feature in Storyline, sometimes I prefer to manually override the position of the captions to better suit my layout. This code only reliably works in desktop view, though. const mobileView = window.innerWidth < 768 || window.innerHeight < 500; var storyW = 1280; var storyH = 720; var boxLeft = 850; var boxTop = 430; var boxWidth = 350; var boxHeight = 200; var captionFontSize = 20; function positionCaptions() { if (mobileView === true) { console.log("Mobile view detected - caption positioning skipped."); return; } var leftPct = (boxLeft / storyW * 100).toFixed(2) + "%"; var topPct = (boxTop / storyH * 100).toFixed(2) + "%"; var widthPct = (boxWidth / storyW * 100).toFixed(2) + "%"; const css = ` .caption-container { position: absolute !important; transform: none !important; } .caption { position: absolute !important; left: ${leftPct} !important; top: ${topPct} !important; width: ${widthPct} !important; font-size: ${captionFontSize}pt !important; transform: none !important; z-index: 1000 !important; } @keyframes glitchstutter { 0% { opacity: 0; transform: translate(-10px, 4px) skewX(-8deg); filter: blur(6px); } 8% { opacity: 0.8; transform: translate( 10px, -4px) skewX( 9deg); filter: blur(3px); } 12% { opacity: 0; transform: translate(-8px, 2px) skewX(-6deg); filter: blur(7px); } 18% { opacity: 0.9; transform: translate( 8px, 3px) skewX( 6deg); filter: blur(1px); } 22% { opacity: 0.1; transform: translate(-12px, -2px) skewX(-10deg); filter: blur(5px); } 28% { opacity: 1; transform: translate( 6px, 0px) skewX( 4deg); filter: blur(1px); } 35% { opacity: 0.3; transform: translate(-6px, 4px) skewX(-6deg); filter: blur(3px); } 42% { opacity: 1; transform: translate( 4px, -2px) skewX( 3deg); filter: blur(1px); } 50% { opacity: 0.6; transform: translate(-3px, 1px) skewX(-2deg); filter: blur(1px); } 60% { opacity: 1; transform: translate( 2px, 0px) skewX( 1deg); filter: blur(0px); } 75% { opacity: 0.95; transform: translate(-1px, 0px) skewX( 0deg); filter: blur(0px); } 100% { opacity: 1; transform: translate( 0px, 0px) skewX( 0deg); filter: blur(0px); } } .caption-glitch { animation: glitchstutter 0.6s ease-out forwards !important; } `; let style = document.getElementById('custom-caption-style'); if (!style) { style = document.createElement('style'); style.id = 'custom-caption-style'; document.head.appendChild(style); } style.textContent = css; var capEl = document.querySelector('.caption'); if (capEl) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { capEl.classList.remove('caption-glitch'); void capEl.offsetWidth; capEl.classList.add('caption-glitch'); }); }); observer.observe(capEl, { childList: true, subtree: true, characterData: true }); capEl.classList.add('caption-glitch'); } console.log(`Captions positioned at left:${leftPct} top:${topPct} font:${captionFontSize}pt`); } document.addEventListener('DOMContentLoaded', positionCaptions); positionCaptions(); I had a lot of fun making this. It still surprises how much mileage you can get from a small number of visual assets. If you have any more questions about this demo, please ask.
Fore! 😱 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/reviewTransform Your Customer Service Skills – Interactive Rise 360 Training
Step into real-world customer scenarios where your decisions shape exceptional experiences. Learn, respond, and improve your skills one decision at a time. Course Highlights Why Customer Service Matters Key Customer Service Skills Communicating Positively Handling Difficult Situations Quiz & Practical Application Summary Start Learning Today: Elevate your customer service skills and create memorable experiences with every interaction. https://www.swiftelearningservices.com/customer-service-training-rise360/
