0

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">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</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">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</td> 
   <td valign="center">&nbsp;</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>
2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by infinitus
0

You computed points in line 250 & 251, but you did not put the points back to your "points" input tag value?

By the way, there is a bug in your page. I didn't try to look at it but this is how I created it.
1.Open the page
2.Play through one game (click Finished button)
3.Click on 'Addition' to play another game (click Finished button)
4.Try to use 'F5' to refresh after the game finish, but it did nothing
5.Click on the browser address bar and press enter (force refresh for new value)
6.Got an alert message of "printChallengeProblems: array has been corrupted?"

Just to let you know so you could try to fix the problem that should not happen like that. :)

0

strange couse i dont have this kind of error... also i did put back points into input tag value

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;			
         }
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.