JavaScript for Keystrokes
I ventured boldly into JavaScript after DavidAnderson challenged us in this week's webinar. I did it, but only with the help of a couple of eLearning Heroes, and some AI assistance with the coding. Here's the published file The Problem I'm developing technical training for a mainframe system and wanted the users to practice actually using the keystrokes to practice the tasks they need to be able to use. In this system, TAB is required to move from field to field, but in Storyline, TAB activates the accessibility features, which I had to override. The Solution I used JavaScript to get around that at the slide level. Thanks to NickBaca-9980a0 who helped figure that out in this discussion. I also wanted the learners to be able to leverage a hint as they were learning, which required layers to be activated by clicking a question button. I never got the hint button to work right to trigger the layers using states, so I created multiple buttons that show and hide, one for each layer. Heroes Discussion In the final review section of the course, I reused the same activity. I didn't want the learners to have the hint option, but I wanted it to show what the correct answer was if they clicked the wrong key. The challenge here was creating a trigger that would go from any key except the correct answer. I reached out again to the forum and was able to figure this out and troubleshoot when it turned out to be buggy with the help of Nathan_Hilliard. Here's the details of that conversation. Lessons Learned JavaScript is powerful to extend the capabilities of Storyline. AI tools like CoPilot, and ChatGPT will create code for you if you ask what you want it to do correctly. Troubleshooting requires an experienced skillset. You need to pay attention to the details, like capital letters in the code, and to ensure you have all of the triggers to fire in the slide. The eLearning Heroes forum is invaluable when you get stuck on this. Jean Marrapodi jean.marrapodi@umb.comHelp Kyra Cool Off!
In this eLearning challenge, I decided to use the javascript mouse follower execution. In this simple course, Kyra is disoriented from the heat and you need to help her by using your mouse and clicking items in the break room to cool her off. If you have any questions, let me know! Click here to ReviewBEAT THE MACHINES
Hello! Like every object in Storyline, sliders have their very own object ID that can be accessed via the new Javascript API: With Javascript, it's possible to take this object ID and manipulate the z-index of three overlapping sliders, so the slider that is being moved always passes in front of the other two. Er, a bit like a 'cup and ball' game... Play BEAT THE MACHINES here! There's a lot of other stuff going on in this demo, including a 'collision detection' system (also powered by Javascript) to ensure that no two cups occupy the same position. If you'd like a more in-depth look behind the scenes, read my full write-up here.
Slider
In this example, I used various effects to dynamically modify an image using a slider. In addition to a classic before-and-after slider, there are variations with a crossfade, a blur effect, and a circular reveal from the center. All effects are responsive and adapt smoothly to different screen sizes. Images can easily be replaced using the "Replace Image" function. For effects that use two overlapping images, it’s important to ensure that both images are exactly the same size. ReviewFixing Slide Positions For Drag Interactivity On Mobile Using JavaScript
Hey Heroes, I’ve recently been working on a number of client projects that really put the new JavaScript API in Storyline to good use! One challenge I had to overcome was how Storyline behaves on mobile devices. By default, it seems to add a slide-drifting transition when users swipe—great if you're building swipe navigation between slides, but not so helpful when users are meant to interact with objects on the slide itself. For example, trying to drag an object can instead cause the whole slide to shift, which can lead to some confusion and frustration. For this week’s challenge, I’ve put together a demo that showcases the solution I developed to disable this behaviour when needed. You can try out the project here: LINK Copy the JavaScript code snippet for your own projects: LINK I also recorded this video for YouTube showing the results:
Where there's a Will there's a way
Storyline's new Javascript API makes it simple to add custom animations and hover effects to your courses. So simple, that it took me no time at all to build this #ElearningChallenge demo after being terminated by Litmos due to restructuring. Looking for an award-winning learning manager, equally at home tinkering with Javascript, managing creatives, and developing your learning strategy? If so, I am #OpenToWork This demo is best viewed on a desktop and navigated using a mouse: https://bit.ly/jonopentoworkMy 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 BreweryVault Zone
Long-time listener, first-time caller here. I'm still pretty new to the JavaScript game, but I wanted to challenge myself this week and see how far I could get. This simple game has four scripts running on the base layer: 🔦One hides the cursor and moves the flashlight with the mouse 🏞 One moves the background (and target area) as the cursor pans left and right ⏱ One handles the countdown timer 🎯 One checks if the user has found the target and triggers the "You Win" layer The “You Win” and “Time’s Up” layers each include a small script to bring the cursor back after the game ends. With more time, I’d love to make the "computer screen" graphic with onscreen text more dynamic - but for this version, I really wanted to nail the core mechanics. I relied on ChatGPT for a lot of the JavaScript support, but honestly, I learned a ton through the process - especially having to figure out where things were off or how to adapt code to work with Storyline’s triggers and native capabilities. https://360.articulate.com/review/content/24c010db-096a-49a5-a1d8-11d83f908b12/review
