Forum Discussion
Bootstrap Progress Meter
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.
- KristinaZamb0706 years agoCommunity Member
Thank you John for pitching in i will try this =0] i'll let you know all how this goes