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.)
🙂 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 🙂
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.
Make a variable such as _visitedPageCount = 0
Make an OnShowAction that adds 1 to _visitedPageCount if ThisPage = Not Yet Started.
var x = VarPagesInChapter.getValue();
var y = Var_visitedPageCount.getValue();
var progress = Math.round(y/x*100);
document.getElementById(‘pct’).innerHTML = progress+’%’;
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.