i'm having problem displaying number of points scored in a game
for every one right answer users scores 2 points... and i'm having little problem in displaying these points in a box below the game :(
can any one help me out on that one
thank you :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maths game</title>
<script language="JavaScript">
var kNumberOfProblems = 10;
var kTableIdForProblems = "practiceMathTableProblems";
var kTableIdForAnswers = "practiceMathTableAnswers";
var kTableIdForResults = "practiceMathTableResults";
var kMultiplication = 'x';
var kAddition = '+';
var kSubtraction = '-';
var kDivision = '\367';
var kNotAnswered = -1;
var kBiggestOperand = Math.floor(Math.random()*101);
var gStartTime = 0;
var gProblemArray = new Array();
function assert(isTrue, message) { if (!isTrue) { alert(message) } }
function myPop (string){
var generator=window.open('',
'name',
'width=400,height=100,toolbar=0,scrollbars=0,screenX=200,screenY=200,left=200,top=200');
generator.document.write('<html><head><title>Math Challenge!</title></head><body>');
generator.document.write(string);
generator.document.write('<center><a href="javascript:self.close()">Close</a></center>');
generator.document.write('</body></html>');
generator.document.close();
}
function requestPrintTest(operation){
if (document.getElementById) {
document.practiceMathForm.problem0.value = '';
document.practiceMathForm.problem1.value = '';
document.practiceMathForm.problem2.value = '';
document.practiceMathForm.problem3.value = '';
document.practiceMathForm.problem4.value = '';
document.practiceMathForm.problem5.value = '';
document.practiceMathForm.problem6.value = '';
document.practiceMathForm.problem7.value = '';
document.practiceMathForm.problem8.value = '';
document.practiceMathForm.problem9.value = '';
clearChildNodes(kTableIdForProblems);
clearChildNodes(kTableIdForAnswers);
clearChildNodes(kTableIdForResults);
if (navigator.product && navigator.product == "Gecko") {
setTimeout("printTest("+"'"+operation+"'"+")", 0);
}
else {
printTest(operation);
}
}
else {
alert("Sorry, dynamic table feature works with IE5 or later for Windows, and Netscape 6 or later.");
}
gStartTime = getCurrentTimeInSeconds();
}
function requestPrintResults(){
document.practiceMathForm.finishedButton.disabled=true;
if ('' != document.practiceMathForm.problem0.value)
gProblemArray[0].theirAnswer = document.practiceMathForm.problem0.value;
else
gProblemArray[0].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem1.value)
gProblemArray[1].theirAnswer = document.practiceMathForm.problem1.value;
else
gProblemArray[1].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem2.value)
gProblemArray[2].theirAnswer = document.practiceMathForm.problem2.value;
else
gProblemArray[2].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem3.value)
gProblemArray[3].theirAnswer = document.practiceMathForm.problem3.value;
else
gProblemArray[3].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem4.value)
gProblemArray[4].theirAnswer = document.practiceMathForm.problem4.value;
else
gProblemArray[4].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem5.value)
gProblemArray[5].theirAnswer = document.practiceMathForm.problem5.value;
else
gProblemArray[5].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem6.value)
gProblemArray[6].theirAnswer = document.practiceMathForm.problem6.value;
else
gProblemArray[6].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem7.value)
gProblemArray[7].theirAnswer = document.practiceMathForm.problem7.value;
else
gProblemArray[7].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem8.value)
gProblemArray[8].theirAnswer = document.practiceMathForm.problem8.value;
else
gProblemArray[8].theirAnswer = kNotAnswered;
if ('' != document.practiceMathForm.problem9.value)
gProblemArray[9].theirAnswer = document.practiceMathForm.problem9.value;
else
gProblemArray[9].theirAnswer = kNotAnswered;
if (document.getElementById) {
clearChildNodes(kTableIdForAnswers);
clearChildNodes(kTableIdForResults);
if (navigator.product && navigator.product == "Gecko") {
setTimeout("printResults()", 0);
}
else {
printResults();
}
}
else {
alert("Sorry, dynamic table feature works with IE5 or later for Windows, and Netscape 6 or later.");
}
}
function printTest(operation){
initializeMathProblemsArray(operation);
printChallengeProblems();
enableFinishedButton();
}
function getCurrentTimeInSeconds(){
return Math.round(new Date().valueOf()/1000);
}
function printResults(){
assert((0 != gStartTime), "Corrupt start time.");
var elapsedTimeSecs= getCurrentTimeInSeconds() - gStartTime + 1;
printAnswersAndResults(elapsedTimeSecs);
}
function initializeMathProblemsArray(operation){
var arrayIndex = 0, i, j;
switch (operation) {
case kAddition :
for (i = 0; i <= (kBiggestOperand+1); i++){
for (j = 0; j <= (kBiggestOperand+1); j++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:j, value2:i, operation:kAddition, answer:(i+j), theirAnswer:kNotAnswered};
}
}
break;
case kSubtraction :
for (i = 0; i <= kBiggestOperand; i++){
for (j = i; j <= kBiggestOperand; j++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:j, value2:i, operation:kSubtraction, answer:(j-i), theirAnswer:kNotAnswered};
}
}
break;
case kMultiplication :
for (i = 0; i <= kBiggestOperand; i++){
for (j = 0; j <= kBiggestOperand; j++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:j, value2:i, operation:kMultiplication, answer:(i*j), theirAnswer:kNotAnswered};
}
}
break;
case kDivision :
for (i = 1; i <= (kBiggestOperand-1); i++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:0, value2:i, operation:kDivision, answer:0, theirAnswer:kNotAnswered};
}
for (i = 1; i <= (kBiggestOperand-1); i++){
for (j = i; j <= (kBiggestOperand-1); j++, arrayIndex++){
gProblemArray[arrayIndex] = {value1:(i*j), value2:j, operation:kDivision, answer:i, theirAnswer:kNotAnswered};
}
}
break;
default:
alert("BUG: hey this ain't cool - bad operation.");
}
var ranNumber;
while(gProblemArray.length > kNumberOfProblems)
{
ranNumber = Math.round(Math.random()*(gProblemArray.length-1));
gProblemArray.splice(ranNumber, 1);
}
}
function printChallengeProblems(){
var br, u, tr, td, txt, txtBox, font;
var tbody = document.getElementById(kTableIdForProblems);
var frag = document.createDocumentFragment();
assert((kNumberOfProblems==gProblemArray.length), "printChallengeProblems: array has been corrupted?");
tr = document.createElement("tr");
for (var i = 0; i < kNumberOfProblems; i++) {
td = document.createElement("td");
td.setAttribute("align", "right");
font = document.createElement("font");
txt = document.createTextNode(gProblemArray[i].value1);
font.appendChild(txt);
td.appendChild(font);
br = document.createElement("br");
td.appendChild(br);
u = document.createElement("u");
font = document.createElement("font");
txt = document.createTextNode(gProblemArray[i].operation + " " + gProblemArray[i].value2);
font.appendChild(txt);
u.appendChild(font);
td.appendChild(u);
tr.appendChild(td);
}
frag.appendChild(tr);
if (!tbody.appendChild(frag)) {
alert("This browser doesn't support dynamic tables.");
}
}
function enableFinishedButton(){
document.practiceMathForm.finishedButton.disabled=false;
}
function printAnswersAndResults(elapsedTimeInSeconds){
var tbody, tr, td, txt, font, br;
var numRight = 0;
var points = 0;
tbody = document.getElementById(kTableIdForAnswers);
var frag = document.createDocumentFragment();
assert((kNumberOfProblems==gProblemArray.length), "printChallengeProblems: array has been corrupted?");
tr = document.createElement("tr");
for (var i = 0; i < kNumberOfProblems; i++){
td = document.createElement("td");
td.setAttribute("align", "right");
br = document.createElement("br");
td.appendChild(br);
font = document.createElement("font");
if(gProblemArray[i].theirAnswer == gProblemArray[i].answer) {
numRight++
points++
points = points + 1;
}
else {
font = document.createElement("font");
font.setAttribute("size", "-1");
font.setAttribute("color","red");
txt = document.createTextNode(gProblemArray[i].value1 +
gProblemArray[i].operation +
gProblemArray[i].value2 + "=" +
gProblemArray[i].answer);
font.appendChild(txt);
}
td.appendChild(font);
tr.appendChild(td);
}
frag.appendChild(tr);
if (!tbody.appendChild(frag)) {
alert("This browser doesn't support dynamic tables.");
}
tbody = document.getElementById(kTableIdForResults);
frag = document.createDocumentFragment();
assert((kNumberOfProblems>=numRight),"kNumberOfProblems<numRight!!!");
var percent = Math.round((numRight/kNumberOfProblems)*100);
var message;
if (100 == percent)
message = "Perfect!!!";
else if (100 > percent && 80 <= percent)
message = "Very Good!";
else if (80 > percent && 70 <= percent)
message = "Good!";
else if (70 > percent && 50 <= percent)
message = "Just ok!";
else
message = "You need more practice.";
tr = document.createElement("tr");
td = document.createElement("td");
td.setAttribute("align", "center");
td.setAttribute("colspan", kNumberOfProblems);
font = document.createElement("font");
font.setAttribute("size", "+1");
txt = document.createTextNode(numRight + " right out of " + kNumberOfProblems +
" in " + elapsedTimeInSeconds + " seconds. " + percent + "%! " + message);
font.appendChild(txt);
td.appendChild(font);
tr.appendChild(td);
frag.appendChild(tr);
if (!tbody.appendChild(frag)) {
alert("This browser doesn't support dynamic tables.");
}
}
function clearChildNodes(elemID) {
var elem = document.getElementById(elemID);
while (elem.childNodes.length > 0)
{
elem.removeChild(elem.firstChild);
}
}
</script>
<style type="text/css">
body {
background-color: #FFF;
background-image: url(BlackLeather.jpg);
color: #0F0;
}
#titleBar tr td font b {
color: #0F0;
}
</style>
</head>
<body onload="requestPrintTest('+');">
<table id="stars" width="100%" border="0" align="center" valign="top"><tr>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
</tr></table>
<table id="titleBar" width="100%" valign="top" align="center"><tr>
<td align="left"><font size="+2"><b>Maths Game</b></font></td>
</tr></table><br>
<form name="practiceMathForm">
<table align="center" width="90%" border="0">
<tbody id="practiceMathTableProblems"></tbody>
<tr>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem0"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem1"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem2"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem3"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem4"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem5"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem6"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem7"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem8"></td>
<td align="right" valign="top" width="10%"><input type"text" size="3" name="problem9"></td>
</tr>
<tbody id="practiceMathTableAnswers"></tbody>
</table>
<table align="center" width="90%" border="0">
<tbody id="practiceMathTableResults"></tbody>
</table><br>
<center>
<input name="finishedButton" type="button" value="I am finished!" onClick="requestPrintResults(); return false;">
</center>
<table width="100%" border="0" valign="bottom" align="center"><tr>
<td valign="center" align="center">
<input type="button" value="Addition" onClick="requestPrintTest('+'); return false;"></td>
<td valign="center" align="center">
<input type="button" value="Subtraction" onClick="requestPrintTest('-'); return false;"></td>
<td valign="center" align="center">
<input type="button" value="Multiplication" onClick="requestPrintTest('x'); return false;"></td>
<td valign="center" align="center">
<input type="button" value="Division" onClick="requestPrintTest('\367'); return false;"></td>
</tr></table>
</form>
<table id="stars2" width="100%" border="0" valign="bottom" align="center"><tr>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
<td valign="center"> </td>
</tr></table>
<td colspan="3" align="center"><font face="Arial, Helvetica, Sans Serif" size="3" color="#00FF00"><b>Points:</font> <input type="text" name="points" size="5" value="0"></td>
</tr>
</body>
</html>