Cybersecurity Meets Creativity
For this submission I took a different approach. Instead of building a traditional demo or scenario-based quiz, I focused on the first few seconds of the learning experience, because in cybersecurity every second counts. Setting the Scene with Sound and Motion To immediately capture the learner’s attention, I created a high-energy introductory slide using kinetic typography and a stomp-style soundtrack. The idea was to create an immersive, rhythmic start that echoes the urgency and tension of the cybersecurity landscape. This isn’t just a flashy animation, it’s a carefully timed message. With bold movement and percussive beats, the slide communicates the importance of staying alert and protecting personal information in a digital world filled with threats. Powered by Articulate’s New JavaScript API To bring this to life, I used Articulate’s latest JavaScript API. This gave me more control over the timing and sequencing of the animated text, allowing it to sync precisely with the beats of the music. Each key term, like defend, detect and protect, gets visual emphasis to reinforce key cybersecurity concepts and actions. Why This Approach? Cybersecurity training can sometimes feel dry or overly technical. My goal was to disrupt that expectation with something bold and modern. By combining motion graphics with a high-intensity audio track, I aimed to spark curiosity and set a tone of urgency that pulls learners into the content. Absolutely — here’s the revised **Final Thoughts** section with your point expanded. It emphasizes the contrast with traditional e-learning intros and reinforces the value of your creative approach: Final Thoughts This submission is just a single-slide experience, but it’s designed to make an impact right from the beginning. In many e-learning courses, the first slide is often a static title screen, maybe a logo, a headline, and a stock image. While that’s functional, it often misses a valuable opportunity to emotionally engage the learner and signal the importance of the topic. With this project, I wanted to challenge that norm. By opening with kinetic text, rhythmic motion and intense stomp music, I created a visceral first impression that communicates urgency and relevance, especially important when the subject is something as critical (and often underestimated) as cybersecurity. This kind of introduction does more than just look cool. It tells the learner: Pay attention, this matters. And in a world where digital threats are constantly evolving, capturing attention from the very first moment is a key part of building awareness. Because in cybersecurity, awareness begins with attention and great learning starts with engagement. 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 BrewerySlider
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. ReviewSetting the state of an object to "Disabled" or "Hidden"
Has anyone bumped into an issue of not being able to use JavaScript to change the state of an object to the built-in "Disabled" or "Hidden" state? I'm able to set to "Normal" and any custom states, but for some reason, those two just do not work and pop an error in the console saying these are not valid states. See screenshot for an example: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.comPractice 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.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.
