Dynamic Progress Bars in Storyline – JavaScript in Storyline 360 #3

August 14, 2022

For the longest time, we’ve manually created progress bars in Storyline. If you do this based Storyline’s built-in “Project.Progress” variable, you can change the state of your progress bar when the Timeline starts. This however means A LOT of triggers and A LOT of states. (Up to 100 of each if it increases in 1% increments). We’ve seen in some instances that courses can take a while to load each slide as it has to load 100 different images each time.

To get around this we’ve created a dynamic progress bar using JavaScript.

You can click on the images below to enlarge them in a new tab! 🙂

How to:

Step 1: By default, the built-in Storyline variables are not accessible in JavaScript and so to get started, we need to create a variable we can access in our JavaScript. Open the variables panel, and create a new variable called “Progress” which is a Number with a default value of 0. Be warned this is case sensitive.

 

 

Step 2: Go to your Slide Master (View > Slide Master or press F3) and add a trigger that Sets “Progress” to the value of “Project.Progress”, when the Timeline starts on this slide.

 

Step 3: We now need to create the container which will house the progress bar. We can do this by creating a shape and then using JavaScript to target that shape. Your progress bar will adopt the same size as this container, so be sure to make it the size you want your progress bar to be. Create a rectangle and give it a colour that you can see against the background.

 

Step 4: Next we need to add the JavaScript code. Add a trigger that ‘Executes JavaScript when the Timeline starts on this slide’. Open the JavaScript editor and add the following code:

 

/* CHANGE THESE VARIABLES */
const myDiv = document.querySelector('[data-model-id="#"]'); // "data-model-id" OF SL RECTANGLE
const bgColour = "#F6F9FB"; // BACKGROUND COLOUR.
const barColour = "#FCCE4B"; // PROGRESS COLOUR.
const compColour = "#F15F4F"; // COMPLETED COLOUR (will not change if empty).
const borderRad = "100px"; // BORDER RADIUS.
const progress = "Progress"; // PROGRESS VARIABLE (Case Sensitive).

/* DO NOT CHANGE BELOW UNLESS INTENDED */
const player = GetPlayer();
let scale = player.GetVar(progress);
let testElement = !!document.getElementById("pBar"); // Test to see if the bar already exists.
if (!testElement) { // If bar doesn't exist

    //Create the background element for the Progress Bar
    let bgBar = document.createElement("div");
    bgBar.id = "bgBar";
    bgBar.style.width = "100%";
    bgBar.style.height = "100%";
    bgBar.style.backgroundColor = bgColour;
    bgBar.style.position = "absolute";
    bgBar.style.top = "0px";
    bgBar.style.borderRadius = borderRad;
    myDiv.appendChild(bgBar);

    // Create the progress element of the Progress Bar
    let pBar = document.createElement("div");
    pBar.id = "pBar";
    pBar.style.width = scale + "%";
    pBar.style.height = "100%";
    pBar.style.backgroundColor = barColour;
    pBar.style.position = "absolute";
    pBar.style.top = "0px";
    pBar.style.borderRadius = borderRad;
    myDiv.appendChild(pBar);

} else { // If it does exist
    document.getElementById('pBar').style.width = scale + "%"; // Update the width
}
if (scale == 100 && compColour) {
    document.getElementById('pBar').style.backgroundColor = compColour;
}

 

Step 5: This won’t work straight away, as we haven’t told our code how to identify our container, and we can only do that by checking a data attribute Storyline generates in the code, so we’ll do this by Publishing and Viewing our course, and then open the course in a browser like Google Chrome, right-click outside of the course and then click Inspect (or click F12). This will open up the Inspection tools, and you will be able to see the HTML code.

 

 

Step 6: This is where things get a little tricky to explain, if you find yourself getting stuck here, watch the video at the bottom of the page, it’s much easier to follow.

The block of code that is highlighted is a ‘Child element’ of the ‘Parent element’ we need to identify, and to do this we need to work our way UP the HTML code. Start by clicking the Select tool in the top left of the inspection tools.

In the HTML, click the block of code directly above what is highlighted. At first, you should see the focus remain on your container, repeat this step until that focus changes to a different object.

Once that focus has changed, go back down one so the focus switches back to the container and you should 🤞 be in the right place. If not, now might be a good time to check out that video! Feel free to leave a like and a comment 👍❤️

 

Step 7: If you have the correct element selected, look for an attribute inside that block of code that looks like ‘data-model-id=”5ofJOHz68wc” ‘. Double click inside the quotation marks and copy the string. You can now close your browser, and go back to e

 

Step 8: Go back to your Slide Master in Storyline, open the JavaScript editor for the trigger we set up in Step 4 and paste the string inside the data-model-id variable in the code.

 

Step 9: Now, if your container is a different colour to your player/background, now’s a good time to make it the same colour as its background as we no longer need to see it. It’s important that you DO NOT remove the fill colour completely, as this will stop the progress bar from functioning correctly.

 

Step 10: Publish your course, and enjoy your dynamic progress bar!

Customising your bar:

If you would like to change the style of your progress bar, open the JavaScript editor and you will see a variety of variables at the top of the code. These variables can be tweaked to change how the progress bar looks. Change the value inside the quotation marks to update them.

• bgColour controls the colour of the background bar.
• barColour controls the colour of the progress bar as it fills.
• compColour controls the colour of the progress bar once it’s completed, if you leave this empty, the bar won’t change.
• borderRad controls the border radius of the progress bar (0px being rectangular).
• SLVariable tells the code what variable to get the progress percentage from, this is case sensitive, so it’s important that it’s exactly the same as the variable you are using in Storyline. By default, we’ve set it up to equal the “Project.Progress” variable. This will cause your progress bar to show the progress of the entire project. But if you switch this to “Scene.Progress” that bar will only show the progress you have made in that scene.

 

Watch our video tutorial