Gamified Learning | What is 5S
Hi Heroes. I'd like to share a recent project developed for our Supply Chain teams. The course has now been rolled out to over 900 learners and has received very positive feedback. I designed a 15-minute Articulate Storyline course introducing the fundamentals of 5S. The goal was to transform a traditional Lean Manufacturing topic into a more engaging digital learning experience. One of the highlights is a gamified 5S activity. This activity was originally delivered in the classroom using cardboard number cards. Recreating it in Storyline with all sorts of number variables and calculations was a challengeš. Some of the features include: Custom-built 5S game using Storyline variables and calculations. Advanced reporting using JavaScript to capture learner responses and game results in an online Excel spreadsheet. Selection of male or female narration. Anyone working in Manufacturing or Continuous Improvement? What topics or activities do you think could be transformed into a gamified learning experience? Link to the course āWhat is 5Sā: https://storage.googleapis.com/fischer_e_learning/SHARE/What%20is%205S/story.htmlSwatch Library
With Swatch Library you can create a palette per brand or project, and every swatch is one click to copy, in hex or RGB. Use it free right inside a Rise course or online. Type or paste a code, bulk-paste a whole list at once or, in Chrome/Edge, use the eyedropper to pick colours from anywhere on your screen, a client's website, a brand PDF, a Storyline slide. You can drop a logo or brand asset onto the tool and it will pull the dominant colours out and build a palette from them. Everything happens in the browser, nothing is uploaded anywhere. Beyond that there is a WCAG 2.2 contrast checker built in, set a foreground and background colour, get the ratio, and see pass/fail for AA and AAA body text, large text and non-text elements like icons and focus indicators. That is useful enough on its own, but the thing I am most pleased with is the contrast grid. Each palette has a Grid button that opens a matrix of every colour pair in that palette, painted with the actual pair so you can see at a glance which combinations work for text and which do not. One click on any cell opens the full checker for that pair. If you have ever wondered whether your brand colours are actually safe to use together, this answers it quickly. There is also a colour vision preview. A Vision button on each palette shows it as it appears to people with protanopia, deuteranopia and tritanopia, plus a greyscale row for print. It automatically flags any pairs that become hard to tell apart, named with their perceptual distance score. Each swatch has a tints and shades button that opens a nine-step ramp from light to dark, and you can click any step to copy it or add it to the palette. Useful for hover states and backgrounds. You can drag swatches to reorder or move them between palettes, filter palettes once your library grows, and use Export/Import to back everything up or share a brand palette file with your team so everyone's working from the same set. There's a built-in guide for the full tour. It can be used directly in the linked Rise course, or used online via the link. All free, no downloads, no signup, no nonsense! Swatch Library - Rise Swatch Library - OnlineThe Discount Decoder
A short, interactive course for school-age learners on percentage change, discounts, tax, and the traps that catch almost everyone. Every price tag, every sale sign, every tax-inclusive receipt is doing the same maths under the hood, but percentages trip people up in exactly the same places, over and over. This course doesn't try to explain percentages. It hands the numbers to the learner and lets them play, break things, and discover the pattern for themselves. Fully accessible ā keyboard nav, swipe, ARIA states, reduced-motion opt-out, mute toggle for the narration. The Discount Decoder For those interested, here's how it was built - The short answer; it's a single self-contained HTML file dropped into a Rise code block. The longer answer is that 'single HTML file' hides quite a lot of learning-design decisions I've refined across a dozen or so of these builds. Here are the ones I think are most portable. The whole thing is one file No frameworks. No build step. No CDN. One index.html, two background JPGs, nine short MP3s. Drop the folder into a Rise code block and it works. Vanilla HTML/CSS/JS is boringly reliable! Each screen is a "scene," and only one is on at a time Every section is a <section class="scene"> stacked absolutely on top of the others. A single class, .on controls which one is visible. Navigating means fading out the old scene and fading in the new one, with the new one entering from a slightly different starting position depending on whether you're going forward or backward. This is the same pattern you'd find in a native iOS or Android app: a stack of screens, one active. Learners find it intuitive because they've been using apps built this way for a decade or more. The nav rail is deliberately simple A row of small pill segments, one per section, with a persistent Next arrow and a persistent Previous arrow. Learners can jump anywhere by clicking a segment, arrow-key their way through, or swipe on mobile. The Next arrow pulses in a warm gradient the whole time it's active, because I noticed in testing that it wasn't obvious there was a way forward unless you were shown. The rail counts up: 01 / 10, 02 / 10. That number matters more than you'd think, it turns "how much of this am I in for?" into something the learner can see at a glance, without a progress bar dominating the screen. Content-driven interactivity, in small doses Every section has one main interactive idea. Not four. Not seven. One. The temptation is to pile more into each screen. Resist it. Learners can only pay attention to one thing at a time, and a single interactive done well outperforms three done half-heartedly every time. Learners drive the pace, not a timer Nothing in this course auto-advances. Not the step reveals. Not the chain animation. Not the "we've spent long enough here" fade to the next section. Every reveal, every animation, every transition is driven by a click, tap, keyboard press or swipe from the learner. This matters more for maths than for example policy training. Someone reading a data-protection policy can skim; someone learning the multiplier trick genuinely needs a moment to think. If your content moves without them, you've lost the room. What I'd tell someone starting out Copy the pattern before you copy the code. The pattern is: scenes, rail, one-idea-per-section, learner-paced reveals, tolerant feedback, in-context reward, accessible controls. That pattern works for policy training, safety courses, product onboarding, and, as this build hopefully shows, maths. Interactive doesn't mean "click to reveal." Click-to-reveal is the low bar. Aim for: change a number and see what happens. Commit to an answer before the explanation. Type your own working. Make a mistake and get specific feedback on why it was tempting. Small courses are better than big ones. This lesson is 10 sections and ~ 8 minutes. Nobody has been dragged through it against their will. That's a good bar. Happy to answer specific questions in the thread. If enough of you want a follow-up on any particular piece shout out!Escape Room Adventure
One of my favorite things to do is look at others designs and then try and recreate them. Sometimes I will download the file if avaailbe to look under the hood. About a month ago I came across RachelEMdesignsā Vibe Coding an Escape Room | E-Learning Heroes and was intrigued how it was done. I saw others were also curious about the inner workings of it but it seemed the secrets would remain hidden. So I did my best to reverse engineer the project to see how I could do it. With a little bit of networking with a colleague's acquaintance, I solved the biggest obstacle I encountered, how to have the mouse become a flashlight. Once I knew the JavaScript for that the rest was easy enough to recreate via triggers, layers, states, and variables. The main thing I did not add was the score, but that would be easy enough to do with the proper "Score" variable and adding some triggers to add or subtract points based on the hotspots they click. I also changed how the "found" function worked on mine. In Rachels it was a state of the main flashlight picture (or that was how I replicated it) and would follow the mouse as it hovered over the hotspot. However, I did not like the text in the middle of the screen where other items were popping up so I moved them all to the top right corner of the screen just under the timer, number of items found, and the reset button. I still have the triggers they have just been disabled in the file attached if anyone is curious. I made mine as an Operational Health and Safety search looking for items around an office that should be flagged to be fixed. 6 correct items and 3 distractions can be found. The key to the movement is the JavaScript that is two pronged. First, it takes the picture chosen and uses it to follow the mouse icon. The 2 nd part of the script removes the mouse icon completely, so it is hidden while on the search screen. The flashlight is just an extra-large black PNG with partial opaqueness so you can still see the room and then a fully transparent circle in the middle, so it acts as a "light". I added a small dot to the middle to act as a point of reference for the where you are currently looking. That is the jist of it. Hope this is helpful for those who were looking for possible answers to how RachelEMdesigns did theirs. Review LinkThe AI Shift
The tools have changed. Your judgement hasn't. In this Rise course learn the best practices of how to work alongside AI to move faster, create sharper content, and stay the most valuable thing in the room. The L&D professionals pulling ahead right now aren't the ones who know the most about AI. They're the ones who know how to work with it. AI is already in your workflow, whether you've invited it or not. This course shows you how to use it deliberately, critically, and well. The AI ShiftInteraction - Infographic Creator Tool
Hey everyone, I've created something I think you'll like... My tool (built right into a Rise course, no downloads or plugins required) includes all of the interactions available in Rise and more. They are fully customisable via a user friendly UI right inside Rise! No coding, no AI prompting to and fro! Perfect for ID's who don't have a coding background or who don't have access to AI tools because of company policy or prohibitive costs (or just get mad using several AI prompts to change a simple text colour only to find it changed something else!! š )... Directly upload your own custom images to infographics, flip cards and more.. Each tool has a live preview so you can see exactly how it will look in your course before adding... āLabelled graphics interaction where you can choose where the popup modal appears so not to obscure your content?... Yes please!! āWant to change the animation style on a carousel?... I got you!! Hope you enjoy!... Feedback and requests welcome... š Rise CanvasSelf Assessment Builder
I've built a free self assessment builder tool you can use right inside Rise. You can use this to build your custom self assessments to use in your Rise courses. After completing the assessment users can view, save or print their results. I'll be adding this to my Rise Canvas tool in the next update. Any feedback to add features or improve is welcomed. Self Assessment BuilderRise Reflection Block Builder
I previously shared an example of a course that includes Reflection blocks that allow the learner to respond to reflection questions that are compiled and can be printed in a Reflection log at the end of the course. Here's a shorter version of that with just the reflection blocks (FYI, you'll see a light RPG/Fantasy theme in the wording, which is a theme of my content). Reflection Block Example After receiving requests for the code and how it works, I created a Rise Reflection Block Builder tool because I recognize that not everyone knows HTML well enough to make the necessary updates between reflections, and I wanted something to just make it easier for me as well as you. There are four tabs on the tool: How It Works - describes how the system works, the different block types, how the data flows and is stored, and a recommended workflow. There are options to include an image... or not. Customization - This allows you to assign a name to your Reflection Log (I call mine "Quest Log"), set the label, and set your brand colors. Plan All Blocks - This is where the real work is done. You can plan all of your reflection blocks at once, click a link to grab the code, and go back and adjust if needed. Build a Reflection Log - once all of the reflection questions have been completed, this is where you build the final output that can be printed. You'll import the tracker from the Plan All Blocks tab and copy the code. I hope you'll try it out and let me know what you think!
