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+=' ';}
str+='</span></div></div>';
document.write(str);
}
</script>
- To change the color of the box:
Go to the line that reads: str+= 'text-align:left;width:300pt;border:2pt solid black;"><span ';
- Change the word "black" to the color of choice, or use the HTML hex tag to define the color of choice.
- To change the color of the bar:
- Go to the line that reads: 'style="text-align:left;color:blue;background-color:#002e5d;font-size:10pt;">';<br />
- Change the word "blue" to the color of choice, or use the HTML hex tag to define the color of choice.
- About HTML Hex tags
- 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
