ProgressBar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>DOM demo: Move complex element </title>
<style type="text/css">
body    { font:100% sans-serif;    }
.t1    { border-collapse: collapse;  }

#td2ID {
    height:20px;  width:0px; 
    background-color: green;
    }
#td3ID {
    height:20px;  width:500px; 
    background-color: red;
    }
</style>
<script type="text/javascript">

//Global vars:
var oTD1,oTD2,oTD3,oTD4;
var correct = 1;
var wrong = 3;

function doProgress() {
    var n = correct + wrong;
    var Lpct = parseInt((correct/n)*100);
    var Rpct = 100 - Lpct;
    oTD1.firstChild.nodeValue = Lpct + '%';
    oTD2.style.width=5*Lpct + 'px';
    oTD3.style.width=5*Rpct + 'px';
    oTD4.firstChild.nodeValue = Rpct + '%';
}

function doAnswer(a) {
    correct += a;
    doProgress();
}   

window.onload = function() {
    oTD1 = document.getElementById("td1ID");
    oTD2 = document.getElementById("td2ID");
    oTD3 = document.getElementById("td3ID");
    oTD4 = document.getElementById("td4ID");
    doProgress();
}
</script>
</head>
<body >
<table class="t1" border="1">
    <tr>
        <td id="td1ID"> </td>
        <td id="td2ID"></td>
        <td id="td3ID"></td>
        <td id="td4ID"> </td>
    </tr>
</table>
<p>
    <input type="button" value="Answer Right" onclick="doAnswer(1)">
</p>
</body></html>