For years I have been playing with JavaScript hacks solutions for Storyline. The biggest drawback to most of them was that they wouldn’t work with the Flash version of the course. But now, one of the cool things about Articulate Storyline 3 and 360 is the option to publish only for HTML5. This opens the door to all kinds of stuff. :-)
As you read this post, play with the demo here. It includes live examples of all the solutions I discuss in this post, plus some others.
We can use custom JavaScript to affect elements in the player and on the slides. And Articulate has built the awesome jQuery JavaScript library into the player, which means we no longer have to add it manually when we want to use it. If you are not familiar with jQuery you should really check it out. It wraps complicated JavaScript functionality into simpler commands that work across most browsers.
Menu Display
Let’s start with an example of affecting the menu on the left side of the player. The following line of code will hide the menu:
$('.area-secondary').hide()
In that line we are using jQuery ($) to select the content on the left side of the player (‘.area-secondary’) and then telling jQuery to hide it. You may be wondering how I knew the left side of the player was called ‘.area-secondary’. I used Chrome’s Element Inspector to get details about the object on the player and slides. If you would like to learn more about that, be sure to check out my upcoming webinar, How to Hack Storyline’s HTML5 Output.
Now that we have it hidden, we’ll probably need to show it again. That line of code looks almost the same:
$('.area-secondary').show()
That will simply hide/show the menu. We can place those bits of JavaScript on triggers or buttons with Storyline to hide/show the menu. In the demo, I have attached,those to the Simple "Hide/Show” buttons on slide two.
We can add a bit more logic to that code to create a function that checks to see what the menu’s current state is and toggle it appropriately. While we are at it, let’s animate the menu rather than just instantly pop it open/closed.
if ($('.area-secondary').is(":visible")){
$('.area-secondary').fadeOut()
}else{
$('.area-secondary').fadeIn()
}
In that example, we are using jQuery’s shortcuts to animate an element fading in/out. And in the first line we are using jQuery to check if the element is currently visible. Those are on slide two of the demo as well.
We can also use jQuery’s .animate() to create smoother and more complex animations; the demo course includes a very cool example of animating the menu in and out. In the demo, I refer to it as the “fancy toggle.”
Next Button Tricks
We can use this same technique to affect other elements of the player, such as the Next button. Tired of putting a bouncing arrow pointed at the Next button at the end of each slide? Let’s use some JavaScript to draw the learner’s attention to the button.
After some digging and trial and error, I discovered that the Next button can be identified by the CSS class '.slide-control-button-next'. In the code below, we will select the Next button and then make it blink white three times:
var item = $('.slide-control-button-next')
var default_color = $(item).css("background")
$(item).css("background", "white")
setTimeout(function(){$(item).css("background", default_color)}, 500)
setTimeout(function(){$(item).css("background", "white")}, 1000)
setTimeout(function(){$(item).css("background", default_color)}, 1500)
setTimeout(function(){$(item).css("background", "white")}, 2000)
setTimeout(function(){$(item).css("background", default_color)}, 2500)
You can see that in action on slide three of the demo, click the “Blink White” button.
In that example, I am using jQuery to get the current background color of the button so we can set it back when we are done. Then I am using a JavaScript function to set timers which will run our code after a small delay. The code within the timers sets the background color to white and the original color alternately. You could place that code on a trigger at the end of your slide.
The demo course has two other examples of ways you could affect the Next button; fading it in/out, and changing the text on the button itself.
As I mentioned in the beginning of this post, you can apply these solutions to elements on the slide as well. But it’s a bit more complicated. The trouble with accessing elements on the slide is that Storyline generates random names for them; no matter what you name them. But I have found a way to consistently find elements when I need to. That will be the subject of my next blog post.
If you would like to learn more about these and other Storyline JavaScript solutions be sure to check out my upcoming webinar How to Hack Storyline’s HTML5 Output.
James Kingsley has worked in the eLearning Industry for over 15 years. He has won several awards for combining technologies to produce better eLearning. He is an Articulate MVP. James is the Senior Technology Architect for eLearning Brothers and the Co-Founder of ReviewMyElearning.com. You can follow him on Twitter or connect with him on LinkedIn for additional tips and examples.
