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 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:
#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! 😀
Order a Tree
I took an example from this page Storyline 360: JavaScript Best Practices and Examples to open a new email with pre-filled information because that is something that will be useful for us going forward. Choose the tree with the buttons which will bring up the order button for that tree. Pretty basic. Order a Tree
