Showcase: 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! Review360Open-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 FrameworksIt’s All About That Prompt...
You know that feeling when you have a massive project looming, and your timeline is shorter than a TikTok trend? That was the energy I brought into my latest project. I set out to build a comprehensive, highly interactive course—"Copilot for Beginners: Use AI to Work Smarter, Safer, and Faster"—and I wanted to see just how much I could push the boundaries of rapid development without sacrificing the "WOW" factor. The Secret Sauce: It's All About That Prompt To get this done, I lived by a new mantra (apologies to Meghan Trainor): "Because you know I'm all about that prompt, 'bout that prompt, no trouble..." Let’s be real: teaching AI to beginners is 10% explaining what it is and 90% convincing them that "Please do the thing" is not a valid prompt. The core of this course is dedicated to the art of the ask. I wanted to show learners that if you treat your prompt like a bad text to an ex—vague, confusing, and full of typos—the AI is going to ghost your expectations. 👻 By focusing on high-quality prompting with Claude AI, I’ve been able to move from concept to a bespoke, custom-coded experience at lightning speed. It’s a bit of "prompt-ception"—using expert prompts to build a course that teaches people how to be expert prompters. What usually takes a massive development cycle is coming together faster than I ever thought possible. How I’m Building It (The Tech Stack) I decided to forgo the standard Rise 360 blocks entirely for this one. I wanted a 100% custom feel, so here is the "special ops" toolkit I used instead: The Framework: Everything is built using the </> Code block and Project blocks. For those who haven't tinkered with it, the Project block is a total game-changer—it allows you to upload zipped files (like a video with a custom wrapper or a self-contained web interaction) directly into the lesson. The Custom Visuals: I’m utilizing Custom blocks to build my own unique visuals from scratch. This gives me total creative control over the aesthetic, ensuring that every chart, diagram, and layout perfectly aligns with the Copilot branding rather than relying on generic templates. The Custom Flair: By using the </> Code block, I’m injecting custom HTML and CSS to create a UI that feels completely unique. No "Rise-standard" buttons here! The Digital Mentor: Instead of just text on a screen, I’ve integrated an AI Avatar. This virtual guide walks beginners through the nuances of AI safety and security, making the learning path feel more personal and a lot less robotic. The Brains: Claude AI is my creative partner. I’m using it to "vibe code" the custom interactions, refining the UI/UX in real-time until the functionality is snappy and intuitive. Why Speed Doesn't Kill Quality Building "Smarter, Safer, and Faster" isn't just the course title; it’s the philosophy behind the build. Using AI to handle the heavy lifting of the code means I can focus my energy on the instructional design—ensuring the "Safer" part of the Copilot training actually sticks. What Do You Think? I’m still tinkering with the final transitions and polishing the edges, but I wanted to share the process with the community. How are you all using Project blocks to bring in external zipped assets? Are you experimenting with Custom blocks for your visuals, or sticking to the Rise defaults? How are you teaching "prompt engineering" to people who still struggle with "Ctrl+Alt+Delete"? Drop your thoughts below—I’m all ears (and all about those prompts)! 😆 Copilot for Beginners: Use AI to Work Smarter, Safer, and FasterNew Code Block Game
It's been a long time since I shared my work, but I'm really pumped up about the potential of the new Code Block in Rise. I started with a basic idea and then started vibe coding. It's amazing what can be achieved in a short space of time, and have been resisting the temptation to just have fun, and instead focussed on keeping my work learning focussed. A couple of learnings: The power of the code block will be really unlocked if Articulate can... Allow us to upload zip folders with images in them. Everything says you can, but I have yet to have a single successful upload. Provide code/facility to allow a code that can report course completion based on the code i.e. when a game is completed completion can be sent - even better if scores can be included. When course continuation can be linked to code block completion it enables true gamification. Not being able to include images is a limitation, but not a blocker - you will notice I have included some very rudimentary graphics by encoding the images as base64, however it seems Rise has a limitation of not being able to read base64 strings longer than 500 characters at present. As I suspect will be the case for many others, I, work for a company with very stringent security policies, so we aren't allowed file storage solutions. If there can be a basic image storage allowance for zip code blocks, that changes the game! Would love your feedback you wonderful humans. Review LinkMeet Your New Co-Presenter: What I Learned Building with AI Avatars in Rise 360
If you've been following along on E-Learning Heroes lately, you've probably noticed AI Avatars starting to pop up in people's Rise 360 projects. I decided to take it for a real spin — not just a quick test, but an actual microlearning build — and I want to share what I found. The good, the genuinely useful, and the "wish I'd known that before I hit publish." The result is a five-slide microlearning called Meet Your New Co-Presenter, built entirely in Rise 360 with AI Avatars as the hook. Here's what I learned along the way. What AI Avatars actually does In case you haven't tried it yet: AI Avatars is a native Rise 360 feature that generates a lifelike on-screen presenter from a written script. You type what you want the avatar to say, choose a presenter style, and Rise generates a speaking video — no camera, no studio, no scheduling a subject matter expert who keeps canceling on you. It lives inside Rise as a Media Block, which means it drops cleanly into your lesson flow just like any other media element. The generated video includes Rise's native player controls automatically, so learners can pause, rewind, and replay without any extra setup on your end. For certain use cases — quick scenario illustrations, course introductions, process overviews — it's a genuinely useful addition to the toolkit. And the speed of it is real. From script to generated avatar, you're talking minutes, not days. What worked well The hook moment is powerful. There's something genuinely compelling about opening a course with a speaking presenter that you built from a single paragraph of text. For the first slide of this microlearning, I used an AI Avatar to deliver the hook line — "What if your next training course already had a presenter?" — and then immediately showed learners the exact script that produced it. The meta moment landed exactly the way I hoped. Script-first thinking is actually good instructional design practice. Because the avatar reads exactly what you write, you're forced to write the way people talk, not the way people write slide decks. Short sentences. Active voice. A conversational rhythm. Those are things we should be doing anyway — AI Avatars just enforces it. Iteration is fast. Don't like how something sounds? Rewrite a sentence, regenerate, and you've got a new version in a couple of minutes. No reshoots. No re-recording. No waiting on anyone. That speed genuinely changes how you think about revision. Avatar selection is a real design decision — and a good one. The range of avatar styles available gives you enough variety to be intentional about representation. Choosing a presenter who reflects your learner audience is a small decision with real impact on engagement and trust. You can build a custom avatar — and it's easier than you think Here's the part that genuinely surprised me, and that I think more IDs need to know about: you're not limited to the preset avatar options. You can create a custom AI Avatar using a plain-language prompt describing exactly who you want your presenter to be. For this microlearning, I created a custom avatar from scratch using this prompt: A professional woman in her 50s with long, straight auburn-brown hair and bangs. She has light skin, green-hazel eyes, and a warm, confident smile. She is wearing a black blazer over a black turtleneck. She is standing in a modern professional office environment with soft, neutral lighting. Her expression is approachable and knowledgeable — like a trusted subject matter expert presenting to colleagues. She faces the camera directly with a poised, engaging demeanor. That's it. One paragraph. And what came back was a polished, realistic-looking presenter that felt like she belonged in the course — not a generic stock character, but someone with a specific look, a specific energy, and a specific professional context. Think about what that means for your work. If you're building for a specific industry, you can describe a presenter who looks like they actually work in that field. If you have brand guidelines around representation, you can build a presenter who reflects them precisely. If your learner audience is specific — frontline healthcare workers, financial advisors, retail managers — you can describe a presenter who looks like a trusted colleague rather than a generic talking head. A few tips for writing custom avatar prompts that get good results: Be specific about appearance. Hair color and style, eye color, approximate age, skin tone — the more detail you give, the more consistent and intentional the result. Vague prompts produce vague avatars. Describe the setting, not just the person. The background matters more than you'd think. "Modern professional office with soft neutral lighting" reads completely differently than "bright open-plan workspace" or "clinical white background." The environment signals context to your learner before the avatar says a single word. Name the energy, not just the look. Phrases like "approachable and knowledgeable," "warm but authoritative," or "confident and direct" genuinely influence how the avatar presents. Think of it like writing a casting note for an actor. Iterate the prompt, not just the script. If the first result isn't quite right, adjust the prompt description and regenerate. Small tweaks — changing "business casual" to "blazer and turtleneck," for example — can shift the result meaningfully. The custom avatar prompt is, in my view, one of the most underrated parts of this feature. The ability to describe your ideal presenter and actually get them — without a casting call, a shoot day, or a post-production budget — is genuinely remarkable. Use it intentionally. What to know before you dive in Here's where I want to be honest with you, because the E-Learning Heroes community deserves the real version, not the marketing version. You cannot edit the generated video. This is the big one. Once Rise generates your avatar video, what you get is what you get. There's no trim tool. No way to cut a section. No way to splice takes together. I ran into this firsthand: for some reason, my avatar was still visibly moving — still talking — at the very end of the clip, even after the script had ended. It looked awkward. And there was nothing I could do about it. No way to cut those last few seconds. I actually left that version in the microlearning intentionally so you can see exactly what I mean — go ahead and watch through to the end of the first slide and you'll catch it. The only fix was to rewrite the script, add a cleaner closing line, and regenerate the whole thing and hope the new version ended more gracefully. If you're used to working with tools like Camtasia or even a basic video editor where you can trim a clip to the frame, this limitation will feel significant. Plan your scripts carefully on the front end — because you can't fix it on the back end. You cannot export the avatar video out of Rise. The generated video lives inside Rise and that's where it stays. You can't download it, bring it into another tool for editing, or repurpose it elsewhere. If you were hoping to grab the file and use it in a Storyline project or a standalone MP4, that's not currently possible. The Media Block is the only home for AI Avatars. This has layout implications. Because AI Avatars only lives in a Rise Media Block, you don't have the layout flexibility to, say, place the avatar side by side with text content in the same block. I originally designed this microlearning with a two-column layout — avatar on the left, script context on the right — but had to rethink it when I realized the Media Block doesn't support that kind of custom positioning. I ended up stacking the avatar above the Code Block content, which actually worked fine once I reframed it: the avatar speaks first, then learners look down and see the script that produced it. Flexibility is limited overall. Beyond the editing and export limitations, you're working within whatever Rise generates. You can influence the output through your script, but you can't control pacing, emphasis, pause timing, or the avatar's gestural behavior in any granular way. What you see is what the AI decided to do with your text. How I worked around the limitations A few things that helped: Write for endings. Since you can't trim, your last line matters a lot. Write a clean, definitive closing sentence that gives the avatar a natural stopping point. Something like "Let's take a look at how it works" worked better for me than an open-ended line that trailed off. Keep scripts short and focused. The shorter the script, the easier it is to regenerate if something doesn't land right. I kept every avatar script in this microlearning to 20–30 seconds. Fast iteration is only an advantage if you're not regenerating a two-minute monologue every time. Use the avatar strategically, not on every slide. I originally planned to include an AI Avatar on each of the five slides. After working through the layout constraints and the Media Block limitation, I scaled back to just the first slide. That was actually the right call — one strong hook moment is more impactful than a talking head on every screen, and it kept the rest of the microlearning moving at a good pace. Lean into Code Blocks for layout control. Since the avatar lives in a Media Block and I needed more visual control over the surrounding content, I built each slide's content layout as a custom Code Block. This gave me full control over typography, spacing, animations, and interactivity — things Rise's native blocks don't always offer. If you're comfortable with HTML, CSS, and JavaScript, Code Blocks are where you can push Rise further than it's designed to go. The bottom line AI Avatars is a genuinely useful feature — with real constraints. It's fast, it's accessible, and it removes a meaningful barrier for IDs who want a human presence in their courses but don't have the budget, equipment, or scheduling flexibility for recorded video. But go in clear-eyed. You're trading editorial control for speed and convenience. If your workflow depends on being able to trim, cut, export, or precisely control the output, you'll run into walls. If you can write a tight script, embrace iteration, and design around the tool's constraints rather than against them — you'll find a lot to like. I'd love to hear how others are using AI Avatars in their own projects — especially if you've found creative workarounds I haven't thought of yet. Drop your thoughts in the comments below. Meet Your New Co-PresenterMaking PCI Training Personal (ELH Challenge #477)
Hurdle to Overcome How could I open the Payment Card Industry Data Security Standard (PCI DSS) awareness module in a way that immediately created tension, felt personal, and captured the learner’s attention from the very first moment? Solution Rather than opening this year’s PCI awareness module with traditional learning objectives, I chose to begin with a narrated scenario designed to set the stage. My goal was for learners to hear and see the weight of a potential cybersecurity lapse right away. Steps I Took To create this opening slide, I followed these steps: I wrote a short, highly detailed script that included backstory, multiple characters, and narrative depth (well, not so short!). 🤣 After reviewing it, my manager supported the scenario-based approach but felt the initial script missed the mark and revised it. I used Copilot to further refine the updated script. With the revised scenario in hand, I first prompted Canva AI to generate the character imagery. While promising, the results never quite matched the desired look. I then passed my image prompt through Copilot multiple times, refining it across at least four iterations. Once I landed on a clean, effective prompt, I fed it into Storyline360’s AI Assistant to generate the images and poses for the main character, Ava. The scenario narration was created using Storyline360’s AI voice: Brian (Man | Middle-aged | English | American accent | Social Media | Classy; Model 3, default settings). To introduce tension and a sense of movement, I drew inspiration from comic panels. Instead of static visuals, I cropped the images to panel-like frames and animated them in sequence, using cue points to drive the timing and flow. Lessons Learned Generative AI (GAI) prompting has become part of our daily workflow. Across my organization, we have access to tools like Adobe Express, Canva, and Articulate360, each with its own strengths and limitations. Key takeaways from this project include: Output from one GAI tool can be refined and reused in another to achieve stronger results. For example, after Canva AI didn’t produce the desired imagery, I used Copilot to refine the prompt and then fed that improved prompt into Storyline360’s AI Assistant. This experience reinforced an important truth: creativity matters even more in an AI‑powered world. The overall look and feel of this slide came from human decision‑making—mine—not from the tools alone. Conclusion The close collaboration between humans and generative AI produces results that are more effective and impactful than what either could create independently. Even with powerful learning‑focused AI tools, such as those in Articulate, achieving the desired outcome can still take time, and that’s okay. The more we experiment, prompt, and practice with these tools, the more efficient we become. Ideally, those efficiency gains translate into greater business impact through improved learning experiences and stronger employee performance. Click here to experience the demo. The SL file is attached.Mars Base Demo: Storyline Integration with Blender 360° Panoramic Renders UPDATED March 2026
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 (updated March 2026): 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 . Quixel megascan assets have now been replaced with my own. 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. Live link updated March=2026AI-Powered Lessons-Learned Workflow for Project Teams
Are you ready to transform how your project team captures and reuses critical knowledge? In this course, you’ll discover how to harness generative AI to streamline lessons-learned processes, eliminate manual bottlenecks, and institutionalize organizational learning. Explore the real challenges project teams face, see prompt engineering in action, and learn how to implement governance protocols that ensure trust and security. By the end, you’ll be equipped to design, deploy, and scale an AI-assisted knowledge management workflow that delivers lasting value to your organization.Microlearning with SaaS Drag-and-Drop Simulation
This is a microlearning course teaching corporate learners how to quickly assign roles and set up user permissions in a fictitious workspace administration software, TaskFlow Pro. It includes a drag-and-drop simulation for hands-on practice, scenario-based instruction, and instant feedback. Built with Articulate Rise, Storyline 360, Figma, and Adobe Express. I used Storyline to build the simulation, Figma for the fictitious UI, and Rise to build the main course content. I also used Adobe Express to generate the badge awarded at the end of the course. TaskFlow Pro: Fast, Accurate Role Assignment for Workspace Permissions
