Are you sure?
Hello! Personally, I've always found confirmation prompts like "Are you sure?" to be a little ominous and creepy. This week's demo is inspired by the hit horror movie, #Backrooms. This was another chance for me to practice with branching video scenarios, modal screens, and pairing footage created using Rise's new AI avatar feature with environments built in Google Flow. There are seven individual videos, which are shown/hidden depending on your choices. I found the AI text-to-speech in Storyline to be very versatile - the more you go round in circles, the more desperate the protagonist of the story sounds. There are four different routes through the demo. Be warned, two of the routes end in jump scares. You only have a 66% chance of making it through to the 'good' ending on one of the routes. Fancy your chances in the Backrooms? CLICK HERE
Social Media Quiz Final Answer
This was the knowledge check for a larger social media policy course where the knowledge check functioned as a test-out and learners received "likes" for each correct answer. During the quiz, instead of a "Submit" button on the screen, once a learner selects an answer, the "Final Answer" button appears. If you are wondering about the hearts and faces emojis on the feedback layers, they are just images with float in (up) and float out (up) entrance and exit animations! Explore this project.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.OSHA Course Starter Template
The safety slides got a glow-up: OSHA Course Starter Template Safety training doesn't have to be a snooze-fest. This is a simple starter pack built around a character-driven illustration theme. The source file is available for download on the Resources tab. Grab it, riff on it, make it yours. OSHA turning 55 felt like the right moment to sit this one out. #ELHChallengeThe 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 RaviThe Cost of Ignoring Safety Signs
Created an interactive scenario-based quiz: “The Cost of Ignoring Safety Signs” ⚠️ The course uses AI-generated visuals to build realistic workplace scenarios that help learners understand the real consequences of ignoring safety warnings. A quick, engaging, and impactful learning experience focused on improving workplace safety awareness. Demo: https://www.sarkgcreation.com/elc552/story.htmlRace 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.
Copy The File
Hello! This is a twist on the classic 'tab interaction that looks like a file of papers', which uses a Drag and Drop interaction instead of traditional Click To Reveal. But I've built in fallback controls to make it more accesible, of course. This was also a chance to play around with Rise's new AI Avatar feature, and extend that footage using Google Flow to create the two 'cut scenes' that bookend this experience. Check it out here: Copy The File | EngageBrainTrain.com
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.The unlikely return of Jobsworth
Hello! For this week's challenge, I used the 'Upload Character' tool in the new AI Avatar feature to resurrect Jobsworth, my robotic compliance officer from Challenge #412. It took only a few minutes to generate the voiceover and video. I have to say, the results are pretty impressive! Looks like my days of animating characters using state changes might be numbered. Check it out for yourself here: The unlikely return of Jobsworth
