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.htmlStoryline Theme Builder
Inspired by the work of randykepple and DShaw , I decided to take my internal theme builder to the next level and make it available to the entire community. It has been integrated and improved with Claude. This standalone, HTML-based tool allows you to create complete Storyline 360 color and font themes without needing Storyline to be installed or running. You can export your themes as .athmx files, share them with your team, and import them directly into Storyline whenever needed. For PowerPoint users, the tool also supports importing .thmx theme files. PowerPoint themes define 12 colors, including two hyperlink colors. During import, the Followed Hyperlink color is ignored, while the remaining colors are automatically mapped to their corresponding Storyline theme colors. The converted theme can then be exported as a valid Storyline .athmx file. The Storyline-specific colors that do not exist in PowerPoint such as Control 1, Question - Correct, Question - Incorrect, Custom 1, Custom 2, are initially assigned automatically. Before exporting the final theme, you can easily replace these defaults with any colors you prefer. In addition to theme creation, the app includes several utilities designed to streamline your workflow: A Color Contrast Checker to help you create more accessible color combinations. A Color Blindness Simulator to preview how your theme may appear to people with different types of color vision deficiency. An Image Color Extractor that samples colors from an image and automatically maps them to Storyline’s 16 theme color slots. Google Fonts integration (internet connection required), allowing you to enter a font’s exact name as it appears in Google Fonts for automatic recognition or simply paste the embed code generated by Google Fonts. Additional tools and widgets that simplify theme creation and help maintain a polished, consistent visual style across your projects. The goal of this application is to make creating, customizing, converting, and sharing Storyline themes faster, easier, and more consistent. Whether you are building a theme from scratch, converting an existing PowerPoint theme, or developing a color palette inspired by your brand, the tool is designed to save time while giving you complete control over the final result. I hope you find it useful, and I welcome any feedback or suggestions for future improvements. Storyline Theme StudioDial Spectrum scale for Rise and Storyline without custom slider logic
Need a real confidence scale in Rise or Storyline without building a custom slider from scratch? Use a dial that outputs as one HTML file you can drop into your course. Problem: yes-or-no questions flatten nuance. If two people both click Yes, one might be at 80 percent confidence and the other at 20 percent. If you try to fix that inside Storyline, you are into slider variables, motion paths, value mapping, and conditional feedback layers. Rise does not even give you a native scale block. Solution: Dial Spectrum is a generator that builds a continuous or stepped scale with configurable labels and feedback, then exports a single HTML file you can embed. - Set the scale range and step size. Example, 0 to 100 in 5-point steps, or 1 to 7 with whole steps. - Label anchors and optional midpoints. Example, Not at all confident, Neutral, Very confident. - Map value ranges to tailored feedback. Example, 0 to 30 triggers one message, 31 to 70 a second, 71 to 100 a third. - Match your brand colors. - Keyboard accessible. The dial can receive focus and be adjusted by keyboard. - Built to sit inside iframes and web objects without layout drift. Where it fits: - Confidence self-checks before a practice scenario. - Pre and post attitude snapshots around a module. - Opinion gauging when more than two positions are valid. - Reflection prompts tied to ranges. Example, If 0 to 40, ask them to pick one resource to revisit. How to embed: - Rise 360: Host the exported HTML on your web space, then insert it with the Embed block using the public URL. If your LMS blocks external content, wrap it in a one-slide Storyline file as a Web Object and use the Storyline block in Rise. - Storyline: Insert as a Web Object, either pointing to the hosted URL or to the local HTML file. Storyline will package it with your publish. - Captivate, Canvas, Moodle: Insert as a Web Object or iframe. Host the HTML and point the iframe to it. Most LMS pages that accept custom HTML will take it. Notes: - You are not collecting scores by default. Use it to surface thinking and route feedback. If you need to record values, capture it with your platform’s form, survey, or xAPI layer around the dial. - If you see scrollbars, increase the iframe height in your host block. The exported file is fixed-frame friendly, so once the container is tall enough the dial will hold position. Demo Dial Spectrum Dial Spectrum GeneratorEscape 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 LinkVibe Coding an Escape Room
I built this escape room mini game as a Portable Web Object, first as a fast prototype in Figma Make, then as a working build in Claude Code. It is designed to sit inside a Storyline or Rise course as a short challenge, practice activity, or knowledge check with a story feel. If you try it out, I’m open to any notes on the flow, difficulty, or small tweaks that could make it even better. View Demo HereVirtual Escape Room
Happy Friday everyone! Our Engage team wanted to host a virtual escape room teambuilding, and I thought, "Surely there are some articulate version of this online." I found some, and was definitely inspired, so I created a "full" escape room. The notes have the answers. I have never worked this much with variables-I hope this is helpful for any other trainers who want to get started on this type of project. Good luck!Football Basics: Click the Pitch to Learn the Game
DEMO LINK For this week’s challenge, I created a simple interactive football basics activity for new fans, casual viewers and beginners who want to understand the game without feeling overwhelmed. The idea is built around a top-down football pitch with numbered clickable markers. Each marker opens a short explanation of one key football concept, such as the goal, players, positions, the ball, passing, dribbling, shooting, defending, set pieces and offside. I wanted the interaction to feel like the learner is reading the game from the pitch itself rather than moving through a traditional slide deck. The pitch acts as the main navigation screen, and the markers guide learners through the basics in a clear, visual way. How I approached the design I used a clean football pitch as the central visual so that the learning stayed connected to the game environment. The numbered markers are deliberately large and easy to spot, so learners know where to click without needing long instructions. Each pop-up includes: Element Purpose Short explanation Introduces the football term in plain English Quick example Helps the learner understand how it appears in a real match Visual support Shows the concept rather than only describing it Learner takeaway Gives the learner one simple point to remember Design rationale The design is intentionally simple because the audience is new to football. I avoided too much technical detail at the start and focused on helping learners build confidence. For example, the offside section ( Marker 10) uses a visual comparison of not offside and offside, showing what the situation looks like before and after the pass. The key message is: Freeze the picture at the moment the ball is passed. That one sentence gives beginners a practical way to understand a rule that many people find confusing. Interaction idea The learner clicks each marker on the pitch to reveal a short learning point. This could easily be expanded with: Possible addition How it could improve the activity Progress tracking Shows how many basics the learner has completed Audio narration Supports learners who prefer listening Short quiz questions Checks understanding after each topic Match scenario cards Lets learners apply each rule in context Final recap jingle Helps learners remember the key basics Reflection This was a fun way to turn football rules into a small exploratory learning experience. Instead of explaining the game as a long list of rules, I tried to make the learner feel as if they are standing above the pitch, clicking into the parts of the game they want to understand. I look forward to your input and feedback. Best Nadia :-) Here is my example: DEMO LINKCustom Text Contain Trigger
Hi All, As a learning experience designer, I am often tasked to develop a pause and reflect for asynchronous learners. I have many thoughts about how those should look and feel, but I wanted to share one powerful example. Storyline cannot accept more than one word when inputting text data to trigger an action. So, I've developed a "trigger" that allows a user to type in as much text as they like, and Storyline will look for words contained within. In this example, there are three parent keywords that trigger a layer based on what is typed. For example: Teamwork is a parent word, but I've also developed children keywords, so if a user were to put in team work (adding a space), the same layer would be triggered. Where I have a parent keyword for Innovation, there are children words like creativity, etc. You can add in as many words to be trigged as you like. Custom Contain Trigger Yes, you can use A.I. for a feature like this, but at the risk of making your API public (as far as I understand). Do you think there is use for this? Thanks for the feedback.Phone Texting UI Kit for Storyline: Free & Fun!
Transform your Storyline projects with this free texting UI kit, engaging, immersive, and super easy to customize. Preview: https://craftuxd.tech/Texting/story.html Download: (File Attached) Watch the full breakdown in this video and see how you can make your courses more fun and interactive! Tutorial: https://youtu.be/Tm9ZqiAkrXYOffice Scavenger Hunt Learning Game
Looking at a few different ideas for a way to make learning a new process fun, I came across Jonathan Hills "I have no Idea how to get out of here" from 17 Ways to Use Escape Room Interactions in E-Learning #432 | E-Learning Heroes and put my own twist on it. Instead of being trapped in a maze of a store you are in an office and need to search several rooms for sticky notes. The rooms are presented in 360 view. When you find one you are given a question. This can be multiple choice or a fill in the blank. The fill in the blank answer is in the style of a hangman game as you get hint letters if you fail. Once you found all 10 notes you then need to put them in order of the process/flow chart. Hope this can inspire others as Jon inspired me. Review Link
