Holiday Traditions Game: Save Christmas with Juniper--again!
Inspired with the Holiday Traditions quiz a few years back, I created my own game. Each year I upleveled my "game" and created a new one to explore different countries holiday traditions. Last year I introduced a character called Juniper who went on a mission for Santa to collect missing artifacts from 6 countries. Once collected the holiday Cheerometer would be "full on cheer" and Santa ready to fly. This year Juniper goes on another mission to save Christmas and is joined by the sidekick--the Christmas Bat Hollywings! Travel to 4 countries to solve puzzles and collect the missing artifacts. What I upleveled: Added voice to the characters using Storyline AI VO. Loved the voices it has but concerned with Eleven Labs retiring voices if I'll be able to use the same ones next year. So far, I have found Murf AI to be more consistent with keeping voices. Important when you need to update projects. Animated GIFs--to animate Juniper, Hollywings, and the Yeti. Sourced gaming elements on Freepik for these characters. Used PowerPoint to generate the GIFs. Thanks for ideas from Alexander Salas and Jeff Batt's video on his channel. Added motion paths and the timeline to get the movement effects I wanted. Imagery and Story: Used AI assistant to generate some of my graphics as well as Freepik. I often would find an image I like on Freepik and use its AI to generate the image in a vector style to match my style. I found that faster than generating my own prompt. Leveraged Copilot to come up with stories and riddles for the game. Play it: Play the 2025 short game here! Wishing you a delightful holiday season full of your own happy traditions! And if you want to see the 2024 version, check it out here.Storyline Instant ToolTip
Hi everyone! I'm sharing a script to add tooltips in Storyline. Just one reference object, a quick copy-paste, and it's ready. You could use a native rollover state, but this gives you full control over the animation. Position, colors, shadow: all configurable in 10 seconds. No JavaScript skills needed, the script is designed to be easy to use and maintain.Neon & Dark Mode Soft Skills Training: Getting Creative with Block Content Backgrounds!
Oftentimes, the visual 'design' portions of learning content can be basic and monotonous- So I challenge y'all to find a unique visual concept and run with it to strengthen those design muscles! Personally, I went for a Dark Mode Neon color theme, reminiscent of Miami Vice color themes. Let me know what y'all think!The Agency Algorithm
Hi all! With an academic background in both Ethics and Instructional Design, I’ve always believed learning can immerse us in thought experiments that challenge assumptions and sharpen critical thinking. The Agency Algorithm explores how AI systems leveraged in contexts like medical triage, surveillance, and beyond can reshape (and even diminish) human agency. By placing learners in these complex scenarios, my project aims to highlight the ethical stakes of algorithmic decision-making and the risks of prioritizing efficiency over empathy. I wanted to push the boundaries of eLearning aesthetics to create a modern, engaging course that asks big questions about our agency in a time of rapidly advancing technology. This project won Best Soft Skills at DevLearn last month, and I am excited to continue building sleek, mind-bending courses to get learners thinking critically! You can check it out here. I'd love to get some feedback so I can continue building on my skills as a designer and developer!Updated "Reveal" codes
I’ve been experimenting with the original HTML code blocks included in Articulate 360’s built-in examples and wanted to share how far you can extend that base structure using GenAI to iterate and refine interactions. Starting with the default image-reveal index provided by Articulate, I used GenAI to progressively develop three new versions. I supplied my own images, created meaningful alternative text for screen readers, and introduced additional UX and accessibility improvements. Every version is fully tailorable if you want to adapt the formatting, colours, spacing or behaviour. The three examples are: Enhanced Image Reveal Grid Uses the original Articulate structure. Adds a hover zoom, a click-to-zoom state, and high-contrast purple letter tiles for accessibility. Fanned “Deck of Cards” Flip Interaction A dynamic fanned layout, more like a real card hand. Cards lift and reveal their letter on hover, flip on click, and reset if clicked again. Includes chevron navigation for easier cycling. Plain Flip Grid with Navigation A clean, accessible flip-card grid with navigation chevrons. Mirrors the deck behaviour but with a simplified layout. All three examples are linked below, along with the downloadable files. If you have suggestions, improvements or alternative approaches, I’d really love the feedback. And if you’d like to use or remix any part of this, feel free — I’d love to see what you create with it. Review360 Zip files GDrive location: HEREInteractive Dynamic Shadows Script
This JavaScript code automatically generates a realistic drop shadow that reacts to mouse movements, simulating a moving light source. How it works: Paste the code into an "Execute JavaScript" trigger. Add the Accessibility Text (Alt Text) Mybtnshad to any object or button. The shadow applies instantly and moves opposite to the cursor to simulate depth. Key Features: Fully customizable settings (intensity, blur, opacity) located right at the top of the script.Cooking Game (Jeopardy style + Gamifiation)
Hello Articulate Heroes! I'm excited to share my second personal project with you — a cooking-themed, Jeopardy-style game! Cooking Frienzy This project was inspired by two fantastic webinar series shared here: How to Create A Jeopardy! Style Game Gamification series I started with the "Jeopardy!" template and added the following custom features: Cooking-themed questions and answers — 5 questions across 5 categories Custom visuals — including characters, backgrounds, UI, and tokens The ability to choose one of three characters at the start of the game (and replay with a different chef assistant!) Personalized feedback and questions — with character-specific images and voiceovers A 20-second Pomodoro-style timer with a “wiped” animation Tokens awarded when the user completes a certain number of questions The characters were created using AI. Thank you for taking the time to check out the game! I’d love to hear your thoughts — feel free to share any comments or suggestions! You can check-out the game by this link: Cooking FrienzyBuckle Up
With the additional functionality exposed by the JavaScript API, I've been wanting to implement more specific mechanics of design, e.g., movement/traversal, action/combat, puzzles/problem-solving, etc. With objects (and their coordinates) being so easy to reference now, I wanted to demonstrate movement/traversal being implementable with only some modest code. In this particular design, I wanted to explore how sliding textured images horizontally from one side of the screen to the other could simulate motion, especially with a simple, red rectangle standing in as a car controlled by you. Note: The Up/Down and Left/Right controls cancel each other out accidentally. My intent in this project was on animating graphics and connecting audio, not so much exploring controls, so I left it as it is. I do recognize though that additional learner control would likely improve that aspect of the experience. Graphics For graphics, I constrained myself to most every visual asset being either a basic shape styled a particular way or an image sourced from the content library so that the bulk of the emergence would come from how those simple objects were manipulated in complex ways. Below is a reduced version of the slide's main update loop: update(() => { // Calculates deltaTime (dt), a variable common in frame-rate dependent content like games to constrain the content from rushing or dragging unintentionally. const now = performance.now(); const dt = (now - lastTime) / 1000; // seconds since last frame lastTime = now; const elapsedSeconds = now - lastRecordedTime; // Flipping this flag to false naturally stops the road from moving. if (isMoving) { // Applies/simulates friction against the speed variable, increased elsewhere (not here) in other code related the keyboard keys. speed = Math.max(1, getVar('speed') - (getVar('isOffroad')? 2.5*gsap.ticker.deltaRatio(60) : .2*gsap.ticker.deltaRatio(60))); turnSpeed = Math.ceil(speed / 150) + (getVar('isOffroad')? 2 : 0); // The gsp.ticker calls above allow for gradual changes in the speed over time (as opposed to sudden changes), better simulating friction. In practice, increase and decrease speed however you want so long as its final value makes it down below to whichever lines change the x-position of the image. // Move roads to the left every frame road1.x -= speed * dt; road2.x -= speed * dt; // Reset to right side once entirely off-screen, leap-frogging one road image over the other. if (road1.x < (slideWidth() * -1)) { road1.x = road2.x + road1.width; } if (road2.x < (slideWidth() * -1)) { road2.x = road1.x + road2.width; } }; Audio The "car" features three sound emitters: A repetitive sound emulating exhaust coming out a car's muffler A slower, lower repetitive thump that plays when "driving" on grass A horn (press Spacebar or click the car) All three "emitted" sounds are generated at runtime (not sample-based) using the Tone.js library. The horn is instrumental and silly by design, demonstrating a simple "sine wave" from a default synth that one can use to play music. The other two emitters demonstrate a more complex understanding of waveform modulation. The offroad rumble and muffler synthesizers demonstrate the contextual simulation of simple rhythmic, mechanical sounds. The offroad sound is produced with a Metalsynth, a synthesizer considered clangy and dissonant, but adding a low-pass filter (LPF) at a warm 90hz softens its clang into a warm rumble: const rumbleLPF = new Tone.Filter(90, "lowpass"); const rumblePanner = new Tone.Panner(); if(!window.tireRumble) { window.tireRumble = new Tone.MembraneSynth({ envelope: { attack: 0.1, decay: 0.0, sustain: 1, release: 0.1 } }) .connect(rumbleLPF) .toDestination(); } The muffler exhaust sound was a bit more nuanced. Being personally cognizant of the importance of harmonics in vehicle vibrations, both desirable and not, the FM synth seemed a fitting choice: const exhaustHPF = new Tone.Filter(45, "highpass"); const exhaustLPF = new Tone.Filter(125, "lowpass"); const exhaustPanner = new Tone.Panner(); if (!window.exhaust) { window.exhaust = new Tone.FMSynth({ envelope: { attack: 0.001, decay: 0, sustain: 1, release: 0.005 }, modulationIndex: 40, harmonicity: 3, volume: -6 }) .connect(exhaustHPF) .connect(exhaustLPF) .connect(exhaustPanner) .toDestination(); } Both of these synths run in Storyline's update() loop with some logic dictating when and how they activate. Of particular note (indeed, my solitary seed of this whole project) is scaling the pitch played by the synthesizer with the speed variable: // triggerAttackRelease(note, duration, time?, velocity?): this window.exhaust.triggerAttackRelease(5 + getVar('speed')/100, "8n", now); The minimum of 5 guarantees a lovely purr. "8n" refers to eighth notes, the type of note played over and over again by Storyline. A gentle logarithmic function might better emulate a gear nearing a maximum, and a few conditional ones stair-cased together could emulate the sound of changing gears… The explosion sound effect and music are stock I found online, though I did adjust the song's stereo field to carve more space in the center for the sound effects. Naturally both the music and the explosion can also be crafted in Tone.js--I entertained the idea of the off-road sound effect only ever being out-of-sync with the music to further layer in negative feedback--but I did what I aimed to. I've wanted for a very long time to procedurally synthesize responsive audio at runtime and this proof-of-concept hopefully helps demonstrate such utility.Mars Base Demo: Storyline Integration with Blender 360° Panoramic Renders
I created this short e-learning demo for my Upwork portfolio, showcasing how to integrate custom-modeled 360° environments into Articulate Storyline. I wanted something unique, short, and interesting. Project Rationale: I chose a 3D-printed Mars habitat because the concept aligns with realistic solutions for future human life on Mars, making the demo feel grounded and relevant. To give the base a compelling and genuine purpose, I focused the learning content on growing crops on Mars (Martian agriculture). This subject was a natural fit, leveraging the extensive agriculture knowledge I've gained working with a client over the years, which is also why the base is appropriately named Rhizome Station. Technical Breakdown: 3D Modeling: The Mars base was modeled in Blender (free and open-source software). I created procedural textures for most of the scene and Quixel Megascans assets for distant rocks and lab flora. I also used Blender to model the 3D landscape you see as a backdrop on the computer screens. Interaction Assets: For the icons and images seen within the interactions, these were all done in Storyline using the built-in icons and AI images. Interaction: The experience uses seven linked 360° renders. To track progress, I rendered the images with a start/finish state, allowing a 'completion' green tick to display when the user returns to the main lab view. Audio: Narration was created using Storyline's AI voices. Future Plans: I'm planning to expand this into a full e-learning experience. The expanded course will start with the user in Earth's orbit learning about the Hohmann Transfer Orbit, and once they reach the base, they'll be able to explore different rooms (the living quarters are already built) and go on outdoor missions. I'll update the community when that larger version is complete, but it likely won't be until next year. Check out the Demo here.
