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:

  1. 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.
  2. 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);

  3. 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).
  4. 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.

29 Replies
Kristina Zambrano

Hello Owen thanks for sharing, I am creating a eLearning with progress bar but i can't seem to find any of the examples here but yours is close enough to what i have done so far, my question tho is there anyway to like lock the bar to when you click the go back (red in your example) to not restart? and keep the progress intact? where ever you left it out?

Thanks in advance for the input and the help

John Willis

Hi Kristina,

This can be done, by removing the following from the code in the javascript for each slide where your progress will change.

// 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");

 

If you remove the text that is bold and underlined this will remove the colour change.

 

Then you just need to amend the trigger you use to adjust the variable. This can be done by adding the condition at the end that says change the variable to '10' if the variable "Progress" is less than '10'

That way it will only update the progress when progress has increased. I've added a picture to this post with the exact settings I've used.

 

If you look back at the post I added my project file that will only increase the progress even when going back through slides.

 

Hope this helps.