Forum Discussion
Bootstrap Progress Meter
I recently discovered some progress meters on the w3schools.com website and wondered if I could leverage them in a StorLine project. The meters are part of a library of code called Bootstrap. I had no idea what bootstrap was, but I discovered on the site that "Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites." Sounded like a good thing to leverage. Here is how I went about it:
- I located the code for several bootstrap meters here on the w3schools site. There are 2 parts to the code, the first goes in the head of your html document and the second creates the actual bar/meter. I copied both parts.
- In StoryLine (3 or 360) I added a trigger to fire at the 1st slide's timeline start that executes JavaScript. The script essentially adds the required html code to the header of the HTML5 player document then adds the code that creates the actual progress bar/meter directly in the StoryLine player.
Here is the code:
// Load required bootstrap references into a variable to facilitate appending the html player document.
var appendHeader = '<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>';// Append the header with the code contained in the variable.
$('head').append(appendHeader);// Load the required progress bar html code into a single variable.
var progressBar = '<div class="progress" style="width:200px; position: absolute; margin: auto; right: 0; left: 0; top: 0px; bottom: 0px"><div class="progress-bar progress-bar-success progress-bar-striped active" id="my_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div></div>';// Add the code to the html player document after the title.
$(".presentation-title").after(progressBar); - Added 2 variables in SL: one to track progress as a number between 0 and 100 and another to track the color of the bar (red or green).
- For this demo, I added 2 buttons to modify both the variables in the prior step and to execute some code that uses these variables to modify/adjust the progress meter. Button one 1st adds 5 to the progress variable and then executes the following JS:
// Establish StoryLine player connection and get current completion and current color of the bar
var player=GetPlayer();
var myProgress = player.GetVar("Progress");
var barColor = player.GetVar("Color");// Check the color of the bar and change it to green if it is currently red.
// Progress-bar-success is the green bar and progress-bar-danger is the red one.
function toggleColor() {
$("#my_progress").toggleClass("progress-bar-success");
$("#my_progress").toggleClass("progress-bar-danger");
};
if (barColor == "Red"){
toggleColor();
};// Update the progress bar with the new value.
$('.progress-bar').css('width', myProgress+'%').attr('aria-valuenow', myProgress);player.SetVar("Color", "Green");
Button 2 is identical to button 1 except that it subtracts 5 from the progress variable and changes the meter to red if it is green. The code is identical to above except it replaces the word red with green and the word green with red.
Link to YouTube video instructions.
Link to published file for review.
Feel free to reach out to me with any questions.
- TristanHunt3Community Member
This is very cool!
Do you think it would be possible to place underneath the player?
- OwenHoltSuper Hero
Absolutely.
Replace this: $(".presentation-title").after(progressBar);
with this: $("div.controls-group").after(progressBar);For some unknown reason, this breaks the color change so you also need to change the code on your buttons.
On BOTH buttons, replace this:
function toggleColor() {
$("#my_progress").toggleClass("progress-bar-success");
$("#my_progress").toggleClass("progress-bar-danger");
};
With this:
function toggleColor() {
$("div.progress-bar").toggleClass("progress-bar-success");
$("div.progress-bar").toggleClass("progress-bar-danger");
};See attached SL3 file.
- JoanneChenSuper Hero
Hi Owen, this is cool, I can see a lot of extension by using this. Thanks for sharing your file and also introducing the websit! I could learn a lot from there!
- NancyWoinoskiSuper Hero
Hey Own, I've bookmarked this post for later investigation, but just out of curiosity have you found a way to make the progress meter more visual?
- OwenHoltSuper Hero
How do you mean?
- NancyWoinoskiSuper Hero
Hi, right now the progress is numeric. Just thought it would be cool if you could display it as an actual progress bar.
- njeanneLapointeCommunity Member
Hi,
Any adaption for Storyline 2? I am in the middle of development and I don't want to upgrade during this crunch time.
- OwenHoltSuper Hero
StoryLine 2 instructions to place this in the top of the player:
In step 2 of my original post...
- locate the following line of code
$("div.controls-group").after(progressBar); - and replace it with this one
$("#timer_section").after(progressBar);
Everything else stays the same but please remember that this will only work in the HTML5 document, it does not work in the default Flash file.
StoryLine 2 instructions to place this in the bottom of the player:
The following will place the meter at the bottom of the page but ONLY if you are not using the built in slide progress meter.
In step 2 of my original post...
- locate the following line of code
$("div.controls-group").after(progressBar); - and replace it with this one
$("#control-progress.controlbar-button").after(progressBar);
Everything else stays the same but please remember that this will only work in the HTML5 document, it does not work in the default Flash file.
- locate the following line of code
- OwenHoltSuper Hero
It should be... that is strange. What are you seeing? There should be a bar in the player along the top that fills in green as you progress and red as it decreases.
- NancyWoinoskiSuper Hero
I will have to try it again but I did not see a progress bar at the top of the screen. I just saw a percentage ie, 10%, 20% etc
just checked it on my iPhone and the top does not display. Is the progress bar in the player? If so, that might be why it is not showing on iPad or iPhone.
- OwenHoltSuper Hero
That would be exactly why. I should have added the disclaimer: This solution does not play well with the mobile player.
- NiteshKumar-34eCommunity Member
Is it possible? progress bar can come on stage area.
- OwenHoltSuper Hero
The stage is a protected area for objects created in StoryLine. I do not (currently) believe it possible to add this particular form of progress meter to the stage via JavaScript.
- JohnWillisCommunity Member
Hi Nitesh,
I just had a quick go at getting the progress bar on the slide itself, you can do this by changing
$("div.controls-group").after(progressBar);
to
$(".main-window-slide-container").after(progressBar);
This will appear dead centre of the screen so you will need to amend the positioning to allow you to move it where you would like it but it's dead centre on mine. - Hope this helps.
- NiteshKumar-34eCommunity Member
I have changed the absolute position of progress bar but it doesn't effect.
Here is my code:
var progressBar = '<div class="progress" style="width:200px; position: absolute; margin: auto; right: 0; left: 0; top: 120px; bottom: 0px"><div class="progress-bar progress-bar-success progress-bar-striped active" id="my_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div></div>';
- MalathiKandadaiCommunity Member
This may be a Storyline newbie's crazy idea, if the code base being used can be pasted in a HTML page.
And if that HTML page is called as small web object (scrolling locked) in Master/all slides of the Storyline project the progress bar could be placed in the stage area.
Would that work you think Owen? Maybe try it out Nitesh?
- OwenHoltSuper Hero
That would do it. Nice indirect way of adding it, Malathi. The JS would be little more complex to pass variable information down to the iframe, but I think it could be done.
- MalathiKandadaiCommunity Member
Thanks Owen good to hear this.
BTW how are you going with your anti- corruption policy course.