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

1. JavaScript is powerful to extend the capabilities of Storyline.
2. AI tools like CoPilot, and ChatGPT will create code for you if you ask what you want it to do correctly. 
3. 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. 
4. The eLearning Heroes forum is invaluable when you get stuck on this. 

 

Jean Marrapodi
jean.marrapodi@umb.com