Perpetual Notepad for Storyline
Hi, here’s a simple Storyline 360 notepad in JavaScript: It is designed to be 720×540 and centred for use on a lightbox slide. It provides persistent notes across the course via localStorage. Multiple notes are allowed: the learner can create / rename / delete / switch notes. It has an advanced editor: font, size, colour, highlight, bold/italic/underline, lists, align, clear formatting and custom Undo/Redo (to 10 levels). The learner can export the current notes or a selection of multiple notes into a Word document. It has a built in close button that (a) flips a Storyline variable CloseNotepad (which you need to create). Optional SL variable can be created to sync content across your course: NoteTitle, NoteBody, NoteId. The code can be found in the Execute JavaScript trigger on the lightbox master slide. It also requires a trigger to reset the variable CloseNotepad back to false. Everything can be found in the attached file. If you find this useful, please let me know. I'll also upload a version that can be used in Rise 360.Whack-a-Vamp: When Backup Ideas Bite Back
Ahead of Halloween this month, one of my Articulate Storyline projects took a spooky turn. Whack-a-Vamp began as a backup plan—a quick side idea in case my main project (Wanda the Witch) didn’t work out. But as it turns out, even vampires can be trickier to tame than witches. Check it out in review: https://360.articulate.com/review/content/96d19db4-e6f8-4647-9c1d-0080370a65c7/review From backup plan to brain-twister What started as a “simple” arcade-style mini-game quickly turned into a trigger labyrinth worthy of Dracula’s castle. Each vampire needed to appear, vanish, and splatter just so, with timing loops, variable conditions, randomisation, and sound effects all working in unison. There were moments where the logic felt less like Storyline and more like sorcery. Still, after plenty of experimentation (and a few resurrected slides), the graveyard finally came to life, complete with vamps rising from their graves, splats, and a countdown clock that keeps players on edge. How it works 👻 Arcade inspiration: Based on the classic Whack-a-Mole, but reimagined as Whack-a-Vamp for a Halloween twist. 🕹️ Gameplay: Click or tap the vampires as they rise from their crypts before they disappear back into the night. ⏱️ Countdown chaos: You’ve got 30 seconds to rack up as many points as you can. 🔊 Spooky soundscape: Splats, and a little bat-themed ambience to set the tone. Lessons from the crypt This project reminded me that “simple” games in Storyline are rarely simple—especially when you start layering in random events, looping layers, and state-based sound triggers. But that’s also what makes eLearning design so fun: even backup ideas can surprise you, challenge you, and rise from the dead in unexpected ways. Closing thoughts So here’s to a Halloween that’s extra spooky—and extra gamified. If you see a vampire rising from a grave this month… don’t run. Grab your stake (or your mouse) and Whack-a-Vamp!Buckle 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.Using Animations for Knowledge Check Feedback
Here are two short examples of how animations can be used to set up a knowledge check, and provide reinforcing (and humorous) feedback for correct/incorrect answers. Each answer, whether it's incorrect or correct, has a corresponding animated sequence that redirects or reinforces the content. Both of these are from the full course I posted earlier - TeamQuest: I realized short examples are the way to go (first time contributing, still learning the ropes). This was built in Storyline with animations built in Vyond. https://360.articulate.com/review/content/7e663b3f-c82b-4e5a-ba75-9739bce32e10/review https://360.articulate.com/review/content/e0b21eb5-e335-4b4c-80a8-50fd41bd00e0/reviewMars 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.Escape Room
We've built escape room interactions for clients a few times, but haven't been able to share them publicly. That's why I've taken the time to create this demo. I created a fictional drug, SynebroVax, and built a scenario where the learner plays a pharmaceutical sales rep preparing for a high-stakes meeting with stakeholders. The goal is to explore the environment, uncover insights, and respond to realistic stakeholder concerns, all within a timed, gamified experience. It’s designed to show how immersive storytelling, decision-making, and interactivity can turn complex product knowledge into something memorable and engaging.Level Up English Quiz
Hi everyone! I’d like to share my project “Level Up English Quiz”, which I created for the English Speaking Club at the company where I work. This quiz was created to attract new members and speakers. Feel free to share your feedback or ideas for improvement. 👉Level Up English Quiz How it’s built: I created three variables: FiftyUsed, HintUsed, and SkipUsed. Each hint icon has two states: Normal (active) and Disabled (used). When a hint is clicked, the corresponding action is performed: 50/50 — changes the state of two incorrect answers to Hidden; Hint — opens a layer with a text clue; Skip — automatically skips the current question and moves to the next one. After a hint is used, its variable changes to True, and the icon becomes inactive. When each question loads, triggers check the variable values and disable any hints that have already been used.Claude Shannon Explainer – Interactive Overview of the Father of Information
Hi everyone, This interactive module offers a short introduction to Claude Shannon’s key ideas and how they shaped modern computing and communication. The module is part of my portfolio and was designed to demonstrate accessible design, custom illustration, and learner-driven interaction in Storyline. I’d appreciate your feedback on: Navigation and overall flow Accessibility (especially for screen readers) Visual design and pacing Any suggestions for improving engagement or polish Here’s the link: Claude Shannon Explainer Thanks for taking the time to have a look. I’m new to the community and would welcome any thoughts or suggestions.
