BackBackNextNext
4.4 Adding a Progress Bar
  1. To add a progress bar to your course add the following to either the Footer or the Header entry under Appearance > Labels and Text.
<script type="text/javascript">
if ((document.getElementById) && (iPg > -1)){
str='<div style="text-align:left;">';
str+= '<div style="margin-left:auto;margin-right:auto;';
str+= 'text-align:left;width:300pt;border:2pt solid black;"><span ';
str+='id="timer" ';
str+=
'style="text-align:left;color:blue;background-color:#002e5d;font-size:10pt;">';
for (i=0;i<Math.round((iPg/iPgTot)*100);i++){str+='&nbsp;';}
str+='</span></div></div>';
document.write(str);
}
</script>


  1. To change the color of the box:
    1. Go to the line that reads: str+= 'text-align:left;width:300pt;border:2pt solid black;"><span ';
    1. Change the word "black" to the color of choice, or use the HTML hex tag to define the color of choice.
  1. To change the color of the bar:
    1. Go to the line that reads: 'style="text-align:left;color:blue;background-color:#002e5d;font-size:10pt;"&gt;';<br />
    1. Change the word "blue" to the color of choice, or use the HTML hex tag to define the color of choice.
  1. About HTML Hex tags
    1. On the web, all colors start with a # and then have six numbers. This is called an HTML color hex tag. You can find out any color's hex tag by going to this page: find out the color's hex tag
BackBackNextNext
Tips Using ReadyGo WCB
1. Questions
2. Hidden features
3. Page Tips
4. Course Tips
5. SmartPhone Tips
Bookmark Page
Go to Bookmark