SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Javascript table color

    Hi i need help.
    I've a tableand i want
    Hi,I immediately explain my problem.
    I have a table for color by sending on a button that is connected to a page javascript.
    The table is colorful but not the color remains on the page, if I put an alert box after the function table is colorful, I clicl ok sull'alert box and the color disappears someone knows why?
    This is the code of index.htm:
    HTML Code:
    <html>
     <head >
      <title>Questionario</title>
      <style type="text/css">
        h1      {color: #FFCC00;  font-size: 25px;  font-family: Verdana; }
        
        button  {width: 120px;  height: 35px; border: 0;  cursor: pointer;  Text-align:center;  font:bold 20px/30px "Trebuchet MS",Arial,sans-serif;
                background: #55CB00 url(base.png) no-repeat 0 0;color:#FFF
                }
    
        button:hover{background-position: 0 -35px;color: #FFC}
        button:active{background-position: 0 -70px;color: #FFF}
            
       td { background-color: #FFFFAF; font-size: 12px; font-family: Verdana; }
      </style>
    
    
     <SCRIPT LANGUAGE="JavaScript" src="questionario.js">
    
    </SCRIPT>
    
    
     </head>
    <body onload="importXML();" "background="sfondo1.jpg" body vlink="white"body link="white">
    
    <form method='post' name='form1' id='form1' >
    
    <h2><h1 align="center"> Questionario</h1></h2>
    <hr>
    <div id="Stampa"></div>
    <div id="Stampa1"></div>
    <hr>
    <h1 align="center">
    
    <button input type="submit" name="invia" id="invia" value="Invia" onclick='controllo(); ' >Correggi</button>
    <button><input type="reset" value="Reset">Reset</button></h1>
    </form>
    
    
    
    
    <form action="index.html">
    <h1 align="center">
    <button input type="submit" value="Cambia Materia"><font size=2>Cambia Materia</font></button>
    </form>
    
    
    
    </body>
    </html>
    the js take a xml node and print the value on the radio button..
    and this the code of controllo.js:
    Code:
    var caci,risp;
    xmlDoc = null;
    culo=0;
    c=0;
    c1="#FFFAF";
    c2="#FFFAF";
    c3="#FFFAF";
    c4="#FFFAF";
    base="#FFFFFF";
    base2="#FFFF66";
    que="#99CCFF";
    sbagliato = "#FF3300";
    giusto = "#00FF00";
    var kammy = new Array(4);
    
    
    function importXML()
    {
    
    var XMLFile = "file.xml";
    	if (document.implementation && document.implementation.createDocument)
    	{
    		xmlDoc = document.implementation.createDocument("", "", null);
    		xmlDoc.onload = Visual;
    		xmlDoc.load(XMLFile);
    
    	}
    	else if (window.ActiveXObject)
    	{
    		xmlDoc = new ActiveXObject("MSXML2.DOMDocument");
    		xmlDoc.onreadystatechange = function () {
    			if (xmlDoc.readyState == 4) Visual()
    		};
    		xmlDoc.load(XMLFile);
    
     	}
    	else
    	{
    		alert('Your browser can't handle this script');
    		return;
    	}
    }
    
    
    
    
    
    function Visual()
    {
    
      var x = xmlDoc.getElementsByTagName("domanda").length;
      var y = xmlDoc.getElementsByTagName("domanda");
      var text = "";
      for (i=0; i < x;i++)
      {
      if((i&#37;2)==0){c1=base2;c2=base2;c3=base2;c4=base2;}else{c1=base;c2=base;c3=base;c4=base;}
       
      
    	text += "<table bgcolor='#F9F9F9' align='center' width='50%' border='1' bordercolor='#CCCCCC'>"
    	text += "<tr>"
    	text += "<td colspan='2'background='testo.jpg'>"
    	text += "<b><font color=white>" + y[i].childNodes[0].nodeValue + "</font></b>"
        text +=  "</td>"     
        text +=  "</td>"
    		text += "<tr>"
    			text += "<td style='background-color:"+c1+";'width='50%'><input type='radio' class='caselle' value=\"1\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp1")[0].childNodes[0].nodeValue + "</td>"
    			text += "<td style='background-color:"+c2+";'width='50%'><input type='radio' class='caselle' value=\"2\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp2")[0].childNodes[0].nodeValue + "</td>"
    			text += "</tr>"  
    			text += "<tr>"
    			text += "<td style='background-color:"+c3+";'width='50%'><input type='radio' class='caselle' value=\"3\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp3")[0].childNodes[0].nodeValue +" </td>"
    			text += "<td style='background-color:"+c4+";'width='50%'><input type='radio' class='caselle' value=\"4\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp4")[0].childNodes[0].nodeValue +" </td>"
    			text += "</tr>"
    	
    			kammy[i] = y[i].getElementsByTagName("risp5")[0].childNodes[0].nodeValue;
    	text += "</table>"
    	text += "<br>"
    	}
    	text+="</body></html>";
    Stampa.innerHTML = text;
    return;
    }	
    
    function controllo()	
    {
    var text="";
    vet = new Array(2);
    vet[0]="risp"
    vet[1]=1;
    ciao = vet.join("");
    var x = xmlDoc.getElementsByTagName("domanda");
    var y = xmlDoc.getElementsByTagName("domanda").length;
    cascii = document.getElementsByName(ciao).length;
    f=0,caci=0,i=0, z=0, n=0,nr=0;
    
    for (vet[1]=1, i=0; vet[1] <= y;vet[1]++, ciao = vet.join(""), i++,f++)
    {	 
    	text += "<table bgcolor='#F9F9F9' align='center' width='50%' border='1' bordercolor='#CCCCCC'>"
    	text += "<tr>"
    	text += "<td colspan='2'background='testo.jpg'>"
    	text += "<b><font color=white>" + x[i].childNodes[0].nodeValue + "</font></b>"
        text +=  "</td>"     
        text +=  "</td>"
    	scelta=0;
      	for (j=0; j<cascii; j++)
    		{
    			if(document.getElementsByName(ciao)[j].checked==true)//controlla se la casella &#232; spuntata
    			{
    				scelta=document.getElementsByName(ciao)[j].value;
    			}
    		}
        if(scelta==0)//controllo se almeno una &#232; selezionata, se &#232; selezionata scelta avr&#224; un valore diverso da 0
        { nr++;c1="orange";c2="orange";c3="orange";c4="orange"; }
        else
    	{   	
    	if(scelta!=kammy[f])  { n++;
    			if (scelta==1){c1=sbagliato;}else{   if((i%2)==0){c1=base2;}else{c1=base;}}// rosso = #FF3300
          if (scelta==2){c2=sbagliato;}else{   if((i%2)==0){c2=base2;}else{c2=base;}}
          if (scelta==3){c3=sbagliato;}else{   if((i%2)==0){c3=base2;}else{c3=base;}}
          if (scelta==4){c4=sbagliato;}else{   if((i%2)==0){c4=base2;}else{c4=base;}}
    	}//se scelta &#232; diversa da kammy(ke &#232; quella giusta) si incrementa n(sbagliate)
    	if(scelta==kammy[f])  { z++;
    				if (scelta==1){c1=giusto;}else{if((i%2)==0){c1=base2;}else{c1=base;}}// rosso = #FF3300
            if (scelta==2){c2=giusto;}else{if((i%2)==0){c2=base2;}else{c2=base;}}
            if (scelta==3){c3=giusto;}else{if((i%2)==0){c3=base2;}else{c3=base;}}
            if (scelta==4){c4=giusto;}else{if((i%2)==0){c4=base2;}else{c4=base;}}
    	}//se scelta &#232; uguale a kammy(ke &#232; quella giusta) si incrementa z(giuste)	
    	}
    
    		if(kammy[f]==1){c1=giusto} // verde = #00FF00
    		if(kammy[f]==2){c2=giusto}
    		if(kammy[f]==3){c3=giusto}
    		if(kammy[f]==4){c4=giusto}
    		
    			text += "<tr>"
    			text += "<td style='background-color:"+c1+";'width='50%'><input type='radio' class='caselle' value=\"1\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp1")[0].childNodes[0].nodeValue + "</td>"
    			text += "<td style='background-color:"+c2+";'width='50%'><input type='radio' class='caselle' value=\"2\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp2")[0].childNodes[0].nodeValue + "</td>"
    			text += "</tr>"  
    			text += "<tr>"
    			text += "<td style='background-color:"+c3+";'width='50%'><input type='radio' class='caselle' value=\"3\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp3")[0].childNodes[0].nodeValue +" </td>"
    			text += "<td style='background-color:"+c4+";'width='50%'><input type='radio' class='caselle' value=\"4\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp4")[0].childNodes[0].nodeValue +" </td>"
    			text += "</tr>"
    				text += "</table>"
    	text += "<br>"
    	
    }
    text += "<hr>"
    	text += "<table bgcolor='#F9F9F9' align='center' width='500' border='1' bordercolor='#CCCCCC'>"
    	text += "<tr>"
    	text += "<td style='background-color:"+giusto+";'><center><b>Risposte corrette</b></td>"
    	text += "<td style='background-color:"+sbagliato+";'><center><b>Risposte sbagliate</b></td>"
    	text += "<td style='background-color:orange'><center><b>Risposte non selezionate</b></td>"
    	text += "</tr>"
    	text +="<tr><td style='background-color:"+giusto+";'><center>"+z+"</td>"
    	text +="<td style='background-color:"+sbagliato+";'><center>"+n+"</td>"
    	text +="<td style='background-color:orange'><center>"+nr+"</td>"
    	text += "</table>"
    
    text+="</body></html>";
    alert(text);
    Stampa.innerHTML = text;
    alert(Stampa);
    return;
    }
    and this is the xml :
    Code:
    <Informatica>
    <domanda>
    	Il nome dell'ultimo sistema operativo microsoft?
    	<risp1>Vista</risp1>
          <risp2>Longhorn</risp2>
          <risp3>2008</risp3>
          <risp4>2007</risp4>
    	  <risp5>1</risp5>
    	</domanda>
     </Informatica>
    sorry for my english but i'm italian.
    For question contact me.
    Last edited by KakashiZombie; Jun 3, 2008 at 10:42.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •