Practice Using JavaScript in Your Storyline Projects #506
This week, your e-learning challenge is to practice using Storyline’s JavaScript API to build interactive e-learning. Start with ready-made examples, explore easy-to-customize code snippets, and discover new ways to create engaging interactions in Articulate Storyline 360.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/Magic JavaScript switch?
I have a drag and drop quiz with 95 drag options that are then added to a chart. This is all working beautifully and tiling onto the chart very nicely, but if I want to randomize the order that the 95 options appear in (on the drag sequence menu) then I have to manually drag them around to make them appear randomized. Has anyone ever incorporated javascript to make drag options appear in random order if they are appearing one by one? Apologies if this is unclear or not allowed to ask.GSAP Articulate Storyline 360 Restart Issue
Greetings. I've posted my issue on the GSAP forums. But upon looking through there it seems there's only a handful of people who can relate with Articulate Storyline 360. So I decided to try my luck here in the e-learning heroes forums. This is my issue https://gsap.com/community/forums/topic/42498-gsap-articulate-storyline-360-restart-course-bug If anyone is knowledgable with GSAP and JS in general that could help. It would be really appreciated. Any input is welcome. Thank you! P.S. MathNotermans-9 if you can read this, I wanted to PM you specifically to inquire about this issue since I've seen your posts on JS and all that. But I can't find a PM function, so was hoping you can see this message and reach out hopefully.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/
My Experience with the New JavaScript API
This week, I participated in E-Learning Challenge #506, hosted by the Articulate community. The theme was all about integrating the new JavaScript API feature into Storyline projects. Before I dive into my submission to this challenge, let’s take a closer look at why and when JavaScript can be handy. By tapping into Storyline’s new JavaScript API, developers can go beyond the limitations of built-in triggers and states—adding more dynamic functionality, custom logic, and integration with external data sources to create truly interactive learning experiences. Why and When Use JavaScript While Storyline’s built-in triggers and states offer a solid foundation for creating interactive courses, there are times when they just aren’t enough—especially for more advanced or customized learning experiences. That’s where JavaScript comes in. Using JavaScript in Storyline allows you to: Manipulate variables dynamically: Perform calculations, update multiple variables at once, or set values based on complex conditions. Create custom interactions: Go beyond Storyline’s standard interactions by building logic that isn’t otherwise possible—like randomization, time-based events, or advanced form validation. Connect to external data sources: Pull in real-time data from APIs, user profiles, or tracking systems to personalize the learning experience. JavaScript isn’t always necessary, but when you need more control, personalization, or external connectivity, it can be the key to taking your project to the next level. And with the new JavaScript API at your fingertips, using JavaScript in Articulate Storyline becomes easier than ever. My submission For my submission, I created a freeform drag-and-drop interaction where learners are challenged to place five items in the correct order. The core interaction itself is built with Storyline’s drag-and-drop functionality, but the real enhancement came through the use of the JavaScript API. Using JavaScript, I was able to easily manipulate the transparency of the numbered items to guide learner feedback more effectively. On the base layer, I set all the numbers to be fully transparent. Then, by adding a small snippet of JavaScript to each feedback layer, I made the corresponding numbered items fully visible—revealing the correct sequence only after the learner attempts the drag-and-drop activity. This subtle use of JavaScript not only improved the clarity of feedback but also gave me greater control over the visual presentation—something that would have been difficult to achieve using triggers alone. Final Thoughts Exploring the new JavaScript API in Storyline has been a rewarding experience. The best part for me is how accessible it is—element IDs are now clearly listed in the JavaScript panel, which removes much of the guesswork that used to come with trying to target specific objects on the slide. Another big win: responsiveness. Unlike some animation libraries like GSAP, which can break alignment or positioning when the browser window is resized, the JavaScript API works seamlessly with Storyline’s layout engine. This makes it far easier to create dynamic effects without worrying about them falling apart on different screen sizes. All in all, this feature opens the door to a lot of creative possibilities—without having to fight the tool. I’m excited to keep experimenting and see what others in the community come up with next. Want to Try It Yourself? You can preview the interaction here to see it in action. If you'd like to explore how it was built, I’ve also made the full project available as a free download. Feel free to dive in, tweak it, and make it your own! About me: Paul Alders LinkedIn Profile The eLearning BreweryNew 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/
