Who sent it?
Hello! This demo shares a simple but overlooked tip on how to verify whether an email is legitimate. I've used Javascript in a couple of places. Firstly, some custom script adjusts the X position of the email background relative to the value of the invisible slider in the foreground. Then, Chris Hodgson's code from last week's challenge stops the whole slide from shifting when you drag the slider with your finger on a mobile device. Finally, a third piece of This gives the effect of moving the email to one side and 'peeking behind the curtain' to see who actually sent it! Looking for an award-winning learning manager, who can rapidly prototype and visualise his ideas to lead and inspire creatives? If so, I am currently hashtag#OpenToWork. Send me an email! Hopefully not a dodgy one.
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:
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.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/jonopentoworkJavaScript 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 BreweryPractice 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.Vault 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
