displaing points problem

Question

infinitus 0 Junior Poster in Training

13 Years Ago

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>

javascript

2 Contributors
3 Replies
214 Views
13 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by infinitus

All 3 Replies

Taywin 312 Posting Virtuoso

13 Years Ago

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. :)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

infinitus 0 Junior Poster in Training · Answer 1 · 2011-03-07T23:57:58+00:00

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;			
         }

infinitus 0 Junior Poster in Training · Answer 2 · 2011-03-08T03:00:50+00:00

infinitus 0 Junior Poster in Training

13 Years Ago

ok managed to get points :) closed :)

displaing points problem

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers