Circular Progress Bar?
June 13, 2017 12:00 AM
Any ideas on a circular progress bar? Obviously, I could just put a different image on each page, but I'd be interested in seeing if there's an easier way to do it. (I'm not too interested in having the text percentage, more the image part.)
Discussion (5)
:-) Found the sample i was referring too, but as it is part of a bigger project i cannot share freely, have to cut and paste things. @Darrel... didnot check yours yet, will sure do.. ( if its complete ;-) no missing jQuery or other assets ;-) I do like SVG if only for broadening my own horizon.. Do think i will make a setup with all options for this i can think off :-)
How about this? I think I have everything in the library object (.awo). Just drop it in the title level of your project and move the progress bar wherever you want it.
With SVG is an option, i know i have a sample of that somewhere..searching it now ;-)
Dude, just implemented this in a course. Works great. I even added a variable to track if a page is visited, then set that as the number to divide to prevent the circle from bouncing all over the place in a non-linear course.
My addition:
Make a variable such as _visitedPageCount = 0
Make an OnShowAction that adds 1 to _visitedPageCount if ThisPage = Not Yet Started.
Then edit RadialJS var y:
document.addEventListener("DOMContentLoaded", function(event) {
var x = VarPagesInChapter.getValue();
var y = Var_visitedPageCount.getValue();
var progress = Math.round(y/x*100);
document.getElementById('pct').innerHTML = progress+'%';
document.getElementById('radial').classList.add('p'+progress);
});
undefined
One thing that bothers me though is that my progress bar only seems to update to the previous pages progress count. For example if I'm on page 3, even though my visited page variable records 3, my progress circle only seems to reflect that I've completed 2 pages. If you refresh the page the circle catches up. Any ideas? I tried window.Event but that seems to be a mistake.
Discussions have been disabled for this post