I usually take Sunday evenings pretty easy when it comes to work. This week however I couldn’t help but get fired up about some really nifty code that was shared on the Articulate eLearning Heroes forum which seemingly allowed course developers to track the vertical position of a Scrolling Panel in Articulate Storyline!

This in itself opens up so many creative options for developing interactive infographics in Storyline, performing animations and effects to play on screen at just the right point during the user’s interaction with the learning object. See our own use of this for this week’s eLearning Heroes challenge below.

The code itself (shared by user Preethi R) was not completely perfect however, as it did not account for when a user may resize their browser window, or change the orientation of their mobile device, which in effect changes the screen offset value when calculating the overall height of the stage.

We can however account for this with a bit of JQuery, using the .resize event handler! The good news is applying this code to your own project is really straight forward, and does not require a vast amount of pre-existing JavaScript or JQuery knowledge.

Just include the following Execute JavaScript block when your timeline starts in your project:

var x = document.getElementsByClassName("scrollarea-area");

$(window).resize(function(){
var newHeight = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
var height = newHeight;
player.SetVar("height",newHeight);
});

x[0].onscroll = function(){
var height = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop/height*100);
player.SetVar("height",height);
};

And then just be sure to include the JQuery library in your story.html file (around Line 15), as Articulate had removed this library from Storyline earlier in the year:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

For an example of what this code can do, check out our eLearning Heroes Challenge entry below:

Chris Hodgson

Chris Hodgson

Chris Hodgson is a Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports SMEs and large firms through the process of integrating eLearning into their organisation. Chris has over 10 years experience working in Higher Education, Independent Training Provider Sector and Charity Sector learning and development.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.