Last week we had our very own James Kingsley join us in a webinar about Storyline and HTML5. Part of the discussion included an overview of some JavaScript principles and an overview of some of the best practices for utilizing these tools in relation to Storyline.
[embed]https://youtu.be/fjf0VbZJVM8[/embed]
Due to the quantity of content in the webinar, we were unable to get to all of the questions that were asked. James has gone through the questions and answered several of them in an effort to ensure that the subject is adequately covered.
Q. Can you set screen title as a variable, and set presentation_title as the variable?
A. Yup
Q. I found elements couldn't, or were very difficult, to target because they were all in canvas tags and my guess is they were dynamically rendered. Has this changed or how do you work around it or am I off-base?
A. Right, elements on the slide are hard to find because SL randomly names them. The best solution I have is to look for them by their aria-label (accessibility text) http://elearningbrothers.com/emphasis-articulate-storyline-animations/
Q. I want the text removed on the "Prev" and "Next" buttons and replace them with a generic symbol.
A. I think it could down with complex jquery to append a new element inside the button. Or if your symbol is a standard UTF-8 character you could just replace the text. http://graphemica.com/%F0%9F%91%91
Q. Is there a best practice to name your layers or variables in SL to be accessed in JS.
A. Yes, but each team has their own. The key is consistency. I prefer to include what the object is in the name like: drag_cow, drop_barn, btn_jump
Q. I want to make sure I'm understanding this correctly: you develop the javascript to do what you want it to in the console and then you paste that javascript into the Trigger panel in Storyline, which will carry your change through to every published output. Is that the gist of what you're doing?
A. Right, I also test and debug code in the console rather than edit in the course and publish every iteration. This is particularly helpful when figuring out CSS attributes and you can see the effect right away.
Q. is there an easy way to add/inject custom JS code into the stock publish? (i.e., i have some functions in a JS file that i want to attach to every new project and include that file... w/o having to edit post-publish)
A. We have done this in the past. We edited the ‘template’ files in Storyline’s program directory. Everything in that folder gets published when you publish the course. In fact we made an install package that backed up the old files and replaced them with our new ones. That way all the companies developers could just run the install and every course from then on had their customizations in them. I haven’t tried this in SL3/320 yet but it should be the same principle. The folder is here: C:\Program Files (x86)\Articulate\360\Storyline\Content
Q. I'm still unclear on how you're getting the jquery into the storyline course…
A. Articulate uses jQuery in the player so they package it in there. You don’t need to load it cause they already did.
James also mentioned several websites that are useful for Storyline users working with HTML5:
- Free eLearning Brothers Library
- Free 30 Trial of ReviewMyElearning
- Sublime Text
- JS Beautifier
- jQuery
- W3 Schools
- Find elements by aria-label
- Random User
Let us know if you have had success with your HTML5 Storyline courses!
