Scrolling Panels in E-Learning #273: Challenge | Recap
A common design challenge for course designers is finding ways to break down and organize content into small, digestible chunks. Tabs ...
Published 5 years ago
Version 1.0
Blog Post
A conversation style example for this week's scrolling panel challenge.
Depending on the position of the scrolling panel, the text on screen changes, and finally when the viewer reaches the end of the scrolling panel, a pop-up opens.
Demo:
https://preethiraviswork.s3.ap-south-1.amazonaws.com/Scrolling+Panel+%23273/story_html5.html
Source File:
https://1drv.ms/u/s!Au1gvyveDBYQumrQOj2lJvphwdLa?e=Sab1U0
Depending on the position of the scrolling panel, the text on screen changes, and finally when the viewer reaches the end of the scrolling panel, a pop-up opens.
Demo:
https://preethiraviswork.s3.ap-south-1.amazonaws.com/Scrolling+Panel+%23273/story_html5.html
Source File:
https://1drv.ms/u/s!Au1gvyveDBYQumrQOj2lJvphwdLa?e=Sab1U0
This makes great use of that very familiar act of scrolling through a WhatsApp conversation.
Would be interested to learn more about the variables that power this. Impressive.
Would be interested to learn more about the variables that power this. Impressive.
- Thanks, Jonathan. It's the power of javascript + variable. Here is the javascript that captures the scrollbar movement.
var x = document.getElementsByClassName("scrollarea-area");
x[0].scrollTop = 0;
var height = x[0].scrollHeight - x[0].offsetHeight;
x[0].onscroll = function(){
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop);
};
I had created trigger in storyline for the variable 'num'. Everytime, the scrollbar moves, the variable 'num' value changes. Based on the 'num' value, the text state i changed.- Thanks for sharing! Good to know!
- Thanks for explaining that because I was wondering how you triggered the scrolling.
- Hey Preethi - thanks again for sharing your JavaScript. I've used it myself in a second demo, below.
It's interesting how it generates a different min/max number when you run it on your local drive, a web server and on a mobile device. The last one is obvious, as it's a smaller screen, but I was surprised at such a big difference when running it locally and on a server.
Perhaps there is a way to obtain the maximum scroll number for a particular screen/device and use this as the basis for the triggers, making it more compatible across devices?- I believe it's because the code snippet provided by Preethi was slightly 'unfinished', in that there was a height variable declared to calculate the scroll object but this was not actually called upon within the main function.
When setting the variable in Storyline if we instead said
player.SetVar("num",x[0].scrollTop/height*100);
We would be converting the slider position into a percentage, whereby the very top of the slider would be 0 and the bottom would be 100 across any screen size.
What this doesn't account for however is if the user changes their screen 'window' size during the activity (e.g. if they were on their phone and switched from portrait to landscape mode)
We can however account for this using the .resize event handler in JQuery! So the final code would look something like this:
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);
};
(Create a variable in Storyline called 'height' to see the value dynamically change when the browser window is resized)
From my own tests this seems to work, but I'd appreciate others giving it a go and feeding back their results.
NOTE: Articulate removed the JQuery library from Storyline published output in early 2020, so you will need to add this line into your story.html file -
https://articulate.com/support/article/Storyline-How-to-Reference-the-jQuery-Library
(Around line 15)
