Forum Discussion
Scene Progress bars using javascript
Hello,
I am using this JavaScript to control a progress bar "5xxf4t4A2ET" (from the Chrome inspect elements) below. I am trying to add another progress bar using another element name "6PhUXotDWKQ".
When I add a second JavaScript to control "6PhUXotDWKQ", nothing works anymore.
What do I need to change in the JS so I can control 2 progress bar?
Source used for 1 progress bar: https://www.youtube.com/watch?v=k0-G_mhtLR4
Javascript:
/* CHANGE THESE VARIABLES */
const myDiv = document.querySelector('[data-model-id="5xxf4t4A2ET"]'); // "data-model-id" OF SL RECTANGLE
const bgColour = "#D9D9D9"; // BACKGROUND COLOUR.
const barColour = "#008A00"; // PROGRESS COLOUR.
const compColour = ""; // COMPLETED COLOUR (will not change if empty).
const borderRad = "0px"; // BORDER RADIUS.
const progress = "Topic1_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;
}
Oops, you need to modify one additional line to make it work as intended.
const progress = "Topic1_Progress"; // PROGRESS VARIABLE (Case Sensitive).For each version of the script (for each bar), assign a new variable name, if you want the bars to show different progress levels. Topic1..., Topic2..., etc.
I mocked up a quick demo slide with 3 bars. Click to ovals to move the bars.
Demo: https://360.articulate.com/review/content/727f8af0-8928-4cd0-8ef5-c1232f613ce8/review
I attached the .story file.
Note, there are a number of ways to improve this code to make it more flexible, and also make it so you only need one version on the master slide to handle any number of bars. Just switch out some of the static variables with Storyline variables and set those before triggering the script.
Do share a sample file... as is this is hard to debug.
When I activate the second trigger in the trigger panel, the first JS stops working.
What does "nothing works" mean exactly. I haven't had time to test, but it may be because this is checking for an existing progress bar with the fixed ID of "pBar". Trying to use this code to add a second bar will still find the first bar with this ID label. You also have conflicting "bgBar" ids. Maybe try appending the data-model-id that you are specifying in the first line to the end of the "pBar" and "bgBar" strings, so it remains unique.
Try changing the beginning like this:
const id = "5xxf4t4A2ET"; // "data-model-id" OF SL RECTANGLE const myDiv = document.querySelector('[data-model-id="' + id + '"]');Then replace any "pBar" strings with "pBar-"+id
and "bgBar" with "bgBar-"+id
After that, you can change the id in line 1, and it will create unique pBar or bgBar ids
Keep in mind that the data-model-id may get changed internally due to a SL update or some other circumstance, which would break your code.
As an FYI, with the new community, we created a JavaScript group that may be a better resource for you in terms of getting JS help.
You can join the group here. join the group hereThank you for the reply. I mean that the JavaScript trigger 1 is working correctly and the Progress bar 1 is triggered. When I activate the JavaScript trigger 2, the Progress bar 1 and any others do not work.
i will try your solution.Oops, you need to modify one additional line to make it work as intended.
const progress = "Topic1_Progress"; // PROGRESS VARIABLE (Case Sensitive).For each version of the script (for each bar), assign a new variable name, if you want the bars to show different progress levels. Topic1..., Topic2..., etc.
I mocked up a quick demo slide with 3 bars. Click to ovals to move the bars.
Demo: https://360.articulate.com/review/content/727f8af0-8928-4cd0-8ef5-c1232f613ce8/review
I attached the .story file.
Note, there are a number of ways to improve this code to make it more flexible, and also make it so you only need one version on the master slide to handle any number of bars. Just switch out some of the static variables with Storyline variables and set those before triggering the script.
Thank you Nathan!!! You solved my issue and helped me accomplish what I wanted to do.
