BackBackNextNext
3.1 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 # and then have six numbers. If you want a specific color you can go to this page to : find out the color's hex tag