Fixing 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:
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.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 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/reviewAvalanche Beacon Search
During a fine search, the avalanche transceiver must be guided along an x- and y-axis in order to find the minimum value for the buried person. The Javascript implementation in Storyline allows me to create interactions with a high learning effect. For me, this is the authoring tool of choice for creating a didactically high-quality course. Review360 Link Looking forward to your feedback Best, Gustav https://www.schneewise.com/#506 - Pan and Zoom for Portrait Images
The Challenge I recently built a Storyline course where I needed to display large portrait images, screenshots of emails we send to our customers. Since emails are typically scrollable documents, the screenshots ended up being quite long. The built-in zoom feature for images is limited to the courses boundaries, so with such long screenshots, zooming barely makes a difference. JavaScript API to the rescue This is where the new JavaScript API came to the rescue! I used the new API to create a pan and zoom interaction. You can view the tutorial and solution here. Copy the final JavaScript snippet for your projects here. Would love to set this up to grab the ID of the picture programmatically so we don't have to set this up on a trigger by trigger basis if any one has any ideas! 😀
