Forum Discussion
Progress bar with javascript not working in new versions
Hi PetraZellweger not sure if you'd be interested, but this is a progress bar that I have developed. It uses a WebObject to and imports an HTML page that is used to display the progress bar. The progress is calculated on the built-in variable Menu.Progress, which calculates progress based on visited slides. The style of the progress bar is controlled by some Storyline defined variables:
-
pbBorderWidth
-
pbBorderColor
-
pbBorderRadius
-
pbFillColor
When you import the WebObject, you just defined the size (height and width) and position that you want. The HTML page in the WebObject then initialises the style of the progress bar (once), and updates the progress as the user progresses.
Note: This progress bar is based on the percentage of the module complete (visited slides), therefore if the user navigates backwards, the progress bar will not go backwards. If 80% of the slides are visited, then the progress bar will remain at 80% even when navigating backwards.
I've attached a Storyline example, as well as the index.html to import as the WebObject. Once the WebObject is imported, it is bundled in your Storyline file and is no longer linked to the file that was imported.
Update: It's not letting me attach the HTML file used for the WebObject, so I'm just putting the HTML page source code here:
<!DOCTYPE html>
<html lang="en" id="pbiframe">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar</title>
<style>
* { margin:0; padding:0; overflow:hidden; }
#wrapper, #progressbar { box-sizing: border-box; position: absolute; background-color: transparent; }
#wrapper { width:100vw; height:100vh; border-style:solid; }
#progressbar { height:100vh; width:0%;}
</style>
</head>
<body>
<div id="wrapper"><div id="progressbar" data-initialised="false"></div></div>
<script>
REBUS = (function(){
return {
init: function (progressbar, wrapper) {
const player = parent.GetPlayer();
const borderWidth = player.GetVar('pbBorderWidth');
const borderColor = player.GetVar('pbBorderColor');
const borderRadius = player.GetVar('pbBorderRadius');
const pbFillColor = player.GetVar('pbFillColor');
wrapper.style.borderColor = borderColor;
wrapper.style.borderWidth = borderWidth;
wrapper.style.borderRadius = borderRadius;
progressbar.style.backgroundColor = pbFillColor;
},
updateProgressBar: function (progressbar)
{
const player = parent.GetPlayer();
// Get player vars
const progress = player.GetVar('_playerVars.#menuProgress').replace('%', '');
// set the width of the progress bard
progressbar.style.width = Number(progress) + '%';
}
}
})();
const progressbar = document.getElementById('progressbar');
const wrapper = document.getElementById('wrapper');
// initialise the progress bar
if(progressbar.dataset.initialised === 'false') {
REBUS.init(progressbar, wrapper);
progressbar.dataset.initialised = 'true';
}
// update the progress bar
REBUS.updateProgressBar(progressbar);
</script>
</body>
</html>
Thanks for sharing Sam!
Using the Webobject method makes it hard to share the Storyline file as a template with other team members, since they all have to put the index.html file on their harddrive and then change the path to this file in the WebObject.
Is there an a way implement the code into the Storyline project so the extra steps aren't needed?
Hi VicovandenEv121, using a WebObject bundles the HTML file in the project. Once inserted, you could delete the index.html file and it still exists in the Storyline file. Sharing the Storyline file with the WebObject includes the bundled files. This is why I use this method as it is set and forget. No pre/post publish edits required, no linking to files on your system