Treasure Hunters Learning Game
Before I officially became an ID I worked in a job that encouraged self-learning and would give us time to take e-learning. One of the e-learning I became focused on was PowerPoint. This led to me making games in my free time one game was a Pirates adventure that I repurposed to be a trivia game for learning a new process at work. This was long before I became an ID but was laying the groundwork for this path. When I became an ID I was introduced to Storyline and was told it is PowerPoint on steroids. For my first couple week I was encouraged to play around, watch videos, come here and look at what other can and have done. I took that time to remake the game using Storyline and enhanced it with branching options. This is the result after those 2 weeks. I really wanted to see if my PowerPoint skills and translated to Storyline and see how I could push it. I thought I would share it and maybe inspire others I have been by this community. https://360.articulate.com/review/content/ba0f4bcc-5d69-4d22-9b6d-acb7c644c254/reviewVibe 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 HereOpen-Source: Confidence Self-Check Dashboard (Dual HTML & Storyline Exporter)
Hi Everyone, It is great to be posting back here after a while! A lot of the custom widgets and micro-apps we see shared across the community are fantastic out of the box, but they often share a common flaw: they are completely hardcoded. If you want to change a question, tweak a score boundary, or alter a feedback message, you have to dig into line after line of tightly coupled JavaScript or manually update dozens of variables inside your authoring tool. Following some great discussions here on the hub—and specifically responding to a note from community member SamanthaGonz271 who mentioned wanting the ability to freely edit and tailor these frameworks, I wanted to take a completely different architectural approach. I have built a modernised, fully state-driven Confidence Self-Check Baseline Tracker (v9.7). Instead of standard text blocks, this framework relies on a modern glassmorphism UI overlay and features a dynamic digital grid canvas. You can preview the interactive widget running live on Review 360 here: 👉 https://360.articulate.com/review/content/d58cf155-636e-4f43-82c9-1832035cd504/review 🚀 What makes this version different? I have engineered a built-in "Designer Mode" directly into the interface. This transforms the widget into an automated production pipeline for your VLE: Dynamic Content Modification: Add or remove questions, upload custom image URLs, configure unique item weights, and adjust percentage performance bands without writing a single line of code. Tabbed Dual-Exporter: Once customised, the engine generates clean production code instantly via a split panel. You can copy the code out as a Standalone web deployment file (HTML) or grab the Storyline JS Trigger payload. 🛠️ Upgraded Learning Features: Pre / Mid / Post Checkpoint Tracking: Learners can capture a baseline at the start of a module, log a mid-point check-in, and execute a final checkout. Visual Distance Travelled Map: The system references localStorage to compute exactly how far the learner has travelled between checkpoints, plotting their growth on an animated spectrum bar and a historic progress node map. Sandbox-Safe PDF Printing: To circumvent strict iframe browser restrictions that block pop-up windows inside modern learning management systems, I have engineered a clean window-write utility that smoothly bypasses pop-up blockers to print or save progress certificates safely. Dead-End Validation Errors: Learners can no longer accidentally submit partial sheets. The engine targets missing inputs and highlights exactly which questions need attention. 📦 How to use it in your own builds: I have attached both the master Source HTML Engine and the Articulate Storyline template file to this post. To customise it, simply run the HTML file locally, click into "Designer Mode" in the top-right corner, modify your curriculum parameters, and copy the clean output code right out of the generator panels. If you are placing it into Storyline, simply copy the code from the Storyline JS Trigger tab and paste it directly into an "Execute JavaScript" trigger on slide start. Special credit to JoeDey for the original inspirational "Perpetual Notepad" concept that got the ball rolling on this community script style. Let me know how you use it in your programs or if you have any feature ideas to push it further! Cheers, Daniel Boyland Forged FrameworksShowcase: 3D Molecular Visualiser/Manipulator
Hi everyone! I wanted to share a project I’ve been working on a 3D molecular visualiser for 4-bromo-3-nitroacetophenone for a Level 6 HE Applied Chem course, and it’s been a bit of a journey in balancing high-end aesthetics with rock-solid performance. The "Why" Behind the Build We’ve all been there: you embed a cool 3D element, and it either looks tiny on the screen or feels like you're steering a tank when you try to rotate it. For this asset (S0501b), I wanted to see if I could create a digital laboratory experience that felt "snappy" and scientifically grounded, even when tucked inside an iFrame. The Technical "Secret Sauce" I spent quite a bit of time under the hood on this one, and here are the bits I’m most excited about: Scientific Grounding: No manual models here! The engine pulls raw SDF coordinates directly from PubChem (CID 87737), so every atom and bond is exactly where it should be. Fixing the "Input Lag": If you’ve ever used WebGL, you know the keyboard can sometimes feel laggy. I built a custom Input State Filter (a little JS buffer) that syncs movement to the browser’s refresh rate. It completely killed the "overshoot" and made keyboard navigation feel instant. The "Cyber-Flora" Look: I moved away from the standard black background for a softer, pastellised #691eda (Purple) theme. It’s easier on the eyes and makes the Jmol colour-coded atoms really pop. Features at a Glance Adaptive Scaling: No more "tiny molecule" syndrome. The engine forces a zoom and a strict 700px height to keep the UI stable. Accessibility First: It’s fully navigable via mouse, touch, or keyboard (tuned with a high rotStep for precision). Performance Tweak: I used Level of Detail (LOD) geometry to make sure it runs at a smooth 60fps, even on older hardware. I'd Love Your Feedback! I’m really looking to see how this holds up across different environments. If you have a moment, I’d love for you to review and evaluate the interaction. Does the rotation feel smooth on your setup? How does the scale look in your specific VLE? Please feel free to reach out if you’re working on something similar or want to chat about the code logic behind the input filtering. I’m more than happy to share what I’ve learned! Review360JavaScript - Point and click RPG prototype/side project
Playing around with Articulate for my current job made me remember when I first learnt about Macromedia Flash from the school IT technicians, when I made loads of Flash games - which very quickly got my email banned by school for sharing them! However, remembering all this, I thought I might try to make a point and click RPG prototype to learn a little more about Storyline's APIs. Here it is: https://evanclark.co.uk/Portfolio/Point_Click_Game/story.html Instructions Just click around on the screen and your character will move there. Walk to the stairs to go to the next floor. Walk to the chest and click "Loot" to loot the chest. Assets The assets were all taken from free vector sites, with the character being an animated gif I found online. A question for you all... Before I get into how it works, I do want to some advice: I am looking for a new job as my post is coming to an end soon. This was meant to be a fun side project and making it look professional would be a lot of work. Having said this, do you think it is worth adding to my portfolio in its current state, or leaving it out? How it works World Movement I've got an almost invisible shape covering the entire slide. When users click on it, JS runs which calculates the x and y distance from the slide centre. It'll also calculate moveXDirection and moveYDirection to be -1, 0 or 1. The character is in the centre of the slide and the world moves around the character. On the main slide's JavaScript, there is an array of every object on each slide. A for loop inside a function moves all the objects in the array using this sort of logic: obj.x += speed * moveXDirection (and the same for y). This is a bit of an oversimplification, as it has to be a little more complex for the collision to work, however the principle of it is fairly consistent. Character Animation There are 16 gifs, each with a different animated character, one for walking and one for idling in each direction (0, 45, 90, 135, 180, 225, 270 and 315 degrees). I did have it so all of these were different states, and the state changed, however this caused a lot of flickering as they were constantly being loaded. Instead, I placed them all on the centre of the slide, and changed the opacity of them depending upon moveXDirection and moveYDirection. Collision There are hotspots around all the borders and objects on the slide, and a hotspot underneath the character. All the world hotspots are in an array of objects. There are a couple of functions that are called which detect collision. These work by comparing the x,y and object width of both the character hotspot and the world hotspots based on where the world hotspots will end up after movement. This allows me to toggle movement, and also all these functions to detect when the character is close to the chest or the staircase. Moving between floors Each floor is its own slide. A hotspot is placed in-front of each staircase, and a variable changes once the character hits this hotspot (using the same collision logic as above), which triggers a slide change. Now, that is straight forward, until you realise that when you go up a floor, and then go back down, this returns you to slide 1 which starts at a different location to the staircase you've just come down. This was the trickiest part of the entire project. I could've made it work by having the bottom floor be multiple slides each with different starting locations, however, this didn't seem like the best solution: what happens if a floor has numerous staircases? We'd need numerous slides, and fixing any bugs or changing things on that floor would involve changing numerous slides. Fine for this two floor map, but not really suitable on a larger scale. Therefore, I made a tiny 1x1 invisible object where I want the character to be when they come back down to floor one. Then, a variable is used to determine whether the world moves to this object (or at least, the world moves by the distance of the object to the centre of the slide). This seemed like it could easily be scalable, and it worked quite well! Inventory & looting the chest This was perhaps the simplest of all. There is an inventory layer on both slides. Each inventory square has multiple states - one for each object, and a textbox to list a number of items. I only got the first square working as a proof of concept. It has a variable determining what is in it - in this case just a normal text variable. If I was to expand it, I'd likely have a Storyline text variable for each inventory slot (given there are only five, this seems to be the easiest solution) which would include the name of the item in that inventory slot and a number of the item (e.g. coins_50). This string can then be sliced in the main JavaScript to determine the number of the object displayed and the state of the inventory square. When you loot the chest, it simply changes the inventory variables and adds a random value (between 4-9) to the coins if you didn't have any already. There is a little animation where the coin grows and goes to your inventory. This is just an entrance animation and a motion path that are triggered when the player clicks the "Loot Chest" button. The state of the chest also changes to "Looted" when the player clicks on the button; or at the timeline start based on a variable (whether the player has looted the chest already or not). Accessibility This is obviously not very accessible at all! It was a fun side project to push Storyline's API a bit, which I thought would be fun to share with you all. I wouldn't use anything like this for eLearning due to its accessibility, but it was definitely a good bit of CPD for myself! Final Thoughts Unsurprisingly, eLearning authoring tools like Storyline are a bit clunky when it comes to making an actual top-down RPG and making it work in Storyline was a challenge - although the fact they can is a credit to its versatility! It could have been made much smoother with an external JavaScript file referenced by the Storyline project, or used JavaScript's own event listeners, however this defeats the point of the challenge. Overall though, I'm actually quite happy with the project and impressed at how much Storyline has the potential to do - I could've pushed this so much further!My Custom Rise Block Component Library
Hi everyone! I wanted to share a custom library of Rise-compatible interactive components I’ve been building and experimenting with for eLearning projects. The library includes custom-designed blocks and interactions intended to help make Rise courses more engaging, flexible, and visually dynamic beyond the default block set. You can explore the library here: https://cognitoblox.netlify.app/ This is an ongoing project, and I’d genuinely love feedback from the community: Which components do you find most useful? What kinds of interactions would you like to see added? Any ideas for improving usability or accessibility? Happy to connect with fellow developers who are experimenting with custom Rise code blocks as well! Thanks for checking it outHappy Birthday Mini Game
How I Built a Bright, Clicky Birthday Game for Rise 360 I wanted to make a birthday interaction in Rise 360 that felt a little more playful than a standard celebration graphic, so I built a custom HTML block for a colleague's birthday. It started as a colorful animated birthday screen with balloons, confetti, and a cake. Cute? Yes. But then I thought… what if it felt more like a mini game? So I turned it into a fast little “birthday grab” activity where goodies fall from the top of the screen and learners click them before time runs out. I added a score, timer, party meter, different fall speeds, and a win screen to make it feel more arcade-like. Cupcakes drift slowly, stars zip by faster, and the whole thing is packed with bright colors and motion. One of the biggest lessons was keeping the code simple enough to behave nicely inside a Rise 360 embed. Once we switched to a cleaner JavaScript approach for the falling items, everything clicked into place. It was a fun reminder that even a small custom block can add a lot of personality to a course. Sometimes a birthday shoutout can also be a mini interactive experience. Happy Birthday Mini Game
People Manager Simulation
This is a vibe-coded people manager simulation game. The learner steps into the role of a new call centre manager, taking over a struggling team. Each decision impacts key measures such as performance, morale, complaints, retention, and stress, and if the wrong calls stack up, you risk being “fired”. The full game runs inside Rise, with avatars, tooltips, game-over conditions, and a narrative end-summary. To keep it simple, I hosted the images directly in Rise (using a hidden lesson to grab the image URLs). I’ve also written a short how-to guide just below the game, so anyone who wants to repurpose the code and build their own simulation can follow along. 👉 Play the demo here This was a great way to test the Code Block for more advanced interactions, and to explore how lightweight simulations can boost engagement in corporate learning.Bilingual Glossary
I needed to build a glossary for two products that shared similar content - one in English only, and one in both English and Spanish. The glossary contains both English and Spanish terms, cross-linked. I used Storyline but took design elements from Rise so it would have a consistent look with our other training materials. Everything is contained in a single slide so the scrolling sidebar menu on the main layer remains consistent throughout the experience. Each term is its own layer, and a third lightbox layer shows a zoomed version of the image on click. I created a custom lightbox so I could show images of different orientations and aspect ratios. You can see the glossary here: https://360.articulate.com/review/content/205f45ff-1eec-4c8a-b0a3-fe3672b2dc47/review (I removed my company's content so the text is from wnyc studios, images from freepix and articulate, and spanish text from google translate.) .story file is attached
