Tutorial - How To Control Rise Block Interaction From Storyline Using JS!
Hi Heroes! It’s fantastic to see that Storyline developers interested in using JavaScript to enhance the user experience now have our own dedicated group with the latest E-Learning Heroes website update! Nearly three years ago, I launched my ‘Storyline Magic’ tutorial series on YouTube because I wanted more resources to be available for those looking to leverage JavaScript coding to push the boundaries of what’s possible working with Articulate software. In the very first episode, I demonstrate how combining JavaScript with CSS in Storyline can automate actions within an Articulate Rise course. Specifically, I show how to automatically advance the learner to the next lesson in Rise after they complete the required actions within a Storyline activity: Storyline Magic Series - Episode 01 Controlling Rise Navigation In Articulate Storyline --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/How To Embed An ElevenLabs Conversational AI Widget Into SL360 Using JS!
Hi Heroes, It feels like something new and exciting is always around the corner in the world of generative AI technology, and this week ElevenLabs put themselves firmly in the driving seat of the agentic AI revolution with their new Conversational AI toolkit. If you haven't heard of this yet, check out this video which explains it all: https://www.youtube.com/watch?v=v-EYzZCLF48&ab_channel=ElevenLabs The interactive, animated widget that this toolkit provided is easy to embed anywhere, including directly within an Articulate Storyline 360 project slide! If you're interested in how to get started, I've written a blog post that includes all the steps, including an Execute JavaScript snippet you can use to effortlessly get your agent loaded into your activity: https://discoverelearninguk.com/how-to-set-up-elevenlabs-conversational-ai-widget-in-articulate-storyline-360/ I'm also currently experimenting with the API for the new Conversational toolkit to understand how I can implement it into my eLearning Magic Toolkit plugin for Storyline + WordPress, potentially opening the door for developing real-time voice activated automation all within a Storyline-built eLearning activity! Much more to come very soon. 🚀 --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/New Tutorial! Better Organise Unruly Navigation Menus With Custom Line Separators and JS
Hi Heroes, I have a handy Storyline JavaScript hack I'd like to share with you! In this Storyline Magic Series episode, I'll be showing you how to set up an 'Execute JavaScript' trigger that can add custom line separators to the standard navigation menu bar in Articulate Storyline 360. It's a simple but effective technique which provides another option you can use to help visually separate and group slides together within your courses! Check out the full tutorial below, along with a link to all previous episodes in the series: Watch the full series here - https://lnkd.in/dNvyD7wv --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/
New Tutorial! Build Dynamic Animated Bar Charts In Storyline Using JavaScript
Hi Heroes, I’m excited to share the latest episode of my Storyline Magic Series with you all! In this episode, I'll be showing you how to create dynamic animated bar charts in Articulate Storyline 360, using standard Storyline shapes, variables, and a touch of JavaScript magic. 📊✨ One of the highlights of this technique is that your chart animations are controlled using Storyline number variables, and bar shapes will adjust their height beautifully across all screen sizes, ensuring consistent results for all users. By the end of the tutorial, you’ll have a reusable template that you can apply to any bar chart designs you want to bring to life in Storyline! Check out the full tutorial below, along with a link to all previous episodes in the series: Watch the full series here - https://lnkd.in/dNvyD7wv --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/
Dynamic border radius experiment
This was just a little experiment to see if I could manipulate the border radius of shapes on the slide numerically using JavaScript, and the answer is yes. Not sure of any use case, but I've always wanted to be able to control the border radius numerically in Storyline as border radius is not maintained when resizing shapes. I'm not sure if this could help as there is no easy way of targeting specific shapes in a slide without knowing their unique ID. It was a bit of fun anyway. If anybody would like to play or expand on this, go for it. What I've found so far, is it will only support solid or no outlines on shapes. When you start using other styles (dot, dash) an image is used by Storyline to achieve this. window.updateCornerRadius = function(targets, radius) { targets.forEach(function(target){ const path = document.querySelector(`[data-dv_ref="ref-${target}"] path`); if (!path) { console.error(`SVG target ${target} not found.`); return; } // Extract the bounding box of the current path const bbox = path.getBBox(); const x = bbox.x; const y = bbox.y; const width = bbox.width; const height = bbox.height; // Ensure radius doesn't exceed half the width or height radius = Math.min(radius, width / 2, height / 2); // Construct a new path data string with the updated corner radius const newPathData = ` M ${x + radius},${y} H ${x + width - radius} A ${radius},${radius} 0 0 1 ${x + width},${y + radius} V ${y + height - radius} A ${radius},${radius} 0 0 1 ${x + width - radius},${y + height} H ${x + radius} A ${radius},${radius} 0 0 1 ${x},${y + height - radius} V ${y + radius} A ${radius},${radius} 0 0 1 ${x + radius},${y} Z `; // Update the path's "d" attribute path.setAttribute("d", newPathData); }); } An example of this being called. I'm using a variable, borderRadius, change trigger. const borderRadius = getVar("borderRadius"); window.updateCornerRadius(['12','15','18','21'], borderRadius);Using Javascript to run complex mathematical simulations in a 'space survival' game
As a learning designer, I'm always looking for new ways to engage learners and create immersive experiences. I'm a big fan of board games like Catan and 7 Wonders, where you have to manage resources and make strategic decisions. It struck me that similar game mechanics could make corporate e-learning more compelling and realistic and help people refine their decision-making skills. I started experimenting with this waaaay back in E-Learning Heroes Challenge #314, with my Usable Suspects game: In that game, the player has to pick the best gang member to crack a safe within 20 seconds. Fast forward to E-Learning Heroes Challenge #430, and I took this 'resource management' concept much further in No Sushi!: This game involved a lot of complex math that nearly broke Storyline and me. (Yes, I did it all with triggers and, no, I wouldn't do that again!) Recently, I've discovered that large language models are great at writing code - it's just another language after all - which makes it astonishingly easy to write custom Javascript for use in Storyline. No more triggers! No more headaches! With the help of Claude.ai, I built this 'space survival' game: PLAY SURVIVAL HERE! The Concept The game is a first-person survival scenario set on a remote planet. Players must choose two out of three specialists, each with unique skills, to awaken from cryosleep and keep everyone alive for 90 days until rescue arrives. The challenge? Managing four critical resources: Food, Shelter, Security, and Communications. Collaborating with Claude To create the game's underlying simulation, I explained my idea to Claude, outlined what I wanted the code to do, and then defined the specific outcomes I was seeking in Storyline. The Development Process Establishing the Basics: We started by defining the core mechanics – how resources would deplete over time and how each specialist would influence these rates. Creating the Simulation: Claude generated JavaScript code that would run within Storyline, simulating the daily resource changes and determining the mission's outcome. Balancing Act: One of our biggest challenges was fine-tuning the resource depletion rates to ensure each team combination (A+B, A+C, B+C) presented unique challenges and outcomes. This required multiple iterations and careful adjustments. Implementing Cascading Effects: We introduced more complex mechanics, such as security breaches leading to rapid resource loss, and the effects of malnutrition on the crew's ability to maintain systems. Crafting Narratives: For each possible outcome, we developed detailed feedback messages to provide players with a clear understanding of their mission's fate. Debugging and Refinement: Throughout the process, we encountered and solved various issues, from unexpected behaviour in certain scenarios to ensuring the correct triggers for different endings. Lessons Learned Iterative Development is Key: Our back-and-forth process, constantly testing and refining the simulation, was crucial to creating a balanced and engaging game. Claude as a Collaborative Tool: Claude proved helpful in rapidly prototyping ideas, generating code, and problem-solving. However, human oversight and creative direction were essential in shaping the final product. Balancing Realism and Gameplay: We often had to strike a balance between realistic outcomes and maintaining engaging gameplay. For instance, we adjusted how quickly resources depleted to create tension without making the game overly difficult. The Importance of Narrative: While the underlying mechanics were crucial, we found that crafting compelling narratives for each outcome enhanced the player experience. The characters define the mechanic and vice versa. Flexibility in Design: Being open to unexpected outcomes led to more interesting gameplay. For example, we implemented a system where the communication beacon could continue functioning even after the crew had perished, adding a thoughtful touch to certain failure scenarios. Technical Challenges and Solutions One particular challenge we faced was ensuring that for certain team combinations (like A+B), security would fail before other resources reached critical levels. This required careful adjustment of depletion rates and the implementation of conditional penalties. We also had to be mindful of some limitations, particularly how Storyline displays text generated by variables. This led to problem-solving sessions, where Claude and I used the console log to dig into what was happening. Conclusion While collaborating with Claude felt very natural, we did at times have to go back a few steps to debug the code. I am not a coder, so I don't know whether 12 iterations to get this to work as I liked is unreasonable by human standards. But I'm really pleased with the results. SURVIVAL teaches resource management and strategic thinking while also telling a story of survival against the odds. And it conveys this lesson in just two slides and a few minutes of your time. I haven't shared my master file as I'm still tinkering with the visual design and this will likely become a portfolio piece, but I'm happy to share what I've learned and answer any questions you may have. For anyone interested, here's the latest version of the code that powers the simulation. If you want to know more about any part of this demo, please ask. (This is a repost of this article from the 'Share Examples' group.)
New Tutorial! Create and Control Glassmorphism Effects With JavaScript In Storyline
Hi Heroes, I'd like to share the latest episode in my Storyline Magic Series on my YouTube channel! In this episode, we'll delve into 'Glassmorphism'—a modern and powerful design technique that blends translucent surfaces with frosted glass effects. This approach not only enhances the aesthetic of your content but also helps learning designers create depth and establish a clear visual hierarchy. I’ll show you how to create and control this stunning effect entirely within Articulate Storyline 360. Let me know if you'd enjoy seeing more comprehensive start-to-finish project builds like this in the future! And see how other Storyline devs are using Glassmorphism here: https://community.articulate.com/blog/e-learning-challenges/using-glassmorphism-designs-in-e-learning-course-development-310/1151525 --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/
Progress bar with javascript not working in new versions
Hi all. I am new here. Maybe a beginner question.... I found out that my javascript progress bar doesn't work after the updates past 8th october 2024. I couldn't find out why, tried with the console and different ways. I think the <div> is not visible or not inserted. Could you please check my script in the example file? Probably you have seen this scipt in other projects, its from the web. Behaviour: start slide (without progress bar) 1. slide - master slide 1 - progress bar works fine the first time. 2. slide - master slide 1 - progress bar failes. 3. slide - master slide 2 - progress bar works fine. 4. slide - master slide 1 - progress bar works fine. If I have two slides with the same master slide in a row, on the second slide the progress bar failes. I upload a example with 4 slides. The script is on the master. Any help is welcome. Thank you.Always on top
I just set myself the challenge of having elements that are "always on top". I've worked on a handful of courses in the past, that had an irregular shaped header graphic (sometimes with drop shadow), where it would have been great to be able to set some elements in the Master Template to appears always on top of other elements within the module. For those courses, I had to create a slice of the header (the irregular shaped part) and paste on each slide, where the header appeared over another element on the slide. I have had some success, and of course it is a JavaScript implementation. This is very much an ALPHA release. Here's the implementation if interested in having a play with it or extending it. I'm sure there will be some elements, that I haven't played with, that may need some extra logic in the JS. For each element you would like to appear always on top, add the string "{AOT}" in the "Alternative text" field. If the element is decorative, you can just add "{AOT}". This will be taken care of during processing (removed, and set to aria-hidden=true). If the element is non-decorative, for example an exit button, you would just add "{AOT}Exit" to the alternative text. This would also be process, and "{AOT}" removed and "Exit" retained in the ALT text. Add the following script to the "timeline starts" on the SLIDE MASTER. This ensures that the script will process on every slide. const init = () => { // inititial value for z-index let z = 999; // get all elements with data-acc-text attribute starting with "{AOT}" const elements = document.querySelectorAll('[data-acc-text^="{AOT}"]'); // loop through each element elements.forEach(element => { // get the modelId and accText from the element's dataset const { modelId, accText } = element.dataset; // get the root element with the same modelId const rootElement = document.querySelector(`[data-model-id="${modelId}"]`); // set the z-index of the root element (incrementing by 1 each time) rootElement.style.zIndex = z++; // get the alternative text by removing "{AOT}" from accText and trimming the result const alt = String(accText).replace('{AOT}', '').trim(); // get the alt element with the id "acc-${modelId}" const altElement = document.getElementById(`acc-${modelId}`); // set the alternative text to the element's dataset element.dataset.accText = alt; // re-write the inner text of the alt element altElement.innerText = alt; // if the alternative text is empty (decorative), set the aria-hidden attribute to true and the z-index to -1 if (!alt) { altElement.setAttribute('aria-hidden', 'true'); altElement.style.zIndex = '-1'; } else { if (altElement.hasAttribute('aria-label')) altElement.setAttribute('aria-label', alt); } }); }; requestAnimationFrame(() => { init(); }); I've also including a very simple example file. This just demonstrates that the designated "Always on top" elements will appear over the image on the slide.
