Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Kolorowanie Poprawnych odpowiedzi (input radio)
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
szodro
21.10.2012, 16:32:34
Witam. Piszę z takim problemem. Zrobilem poniższy quiz. Działa on zwyczajnie - wybieramy odpowiedź. Na koniec zlicza nam punkty w %.
Potrzebowalbym do tego dodac część skryptu, która kolorowała by na koniec poprawne odpowiedzi na zielono, zaś błędne na czerwono.
Robilem to na różne sposoby, jednak nie działą :/. Mógłby mi ktoś pomóc to zmodyfikować?




[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.  
  6. <script>
  7.  
  8.  
  9.  
  10.  
  11. function tester(form) {
  12.      var percent;
  13.      var correct = 0;    
  14.  
  15.      if (form[0].checked == true) correct++;  
  16.      if (form[6].checked == true) correct++; 
  17.      if (form[10].checked == true) correct++; 
  18.      if (form[12].checked == true) correct++;
  19.      if (form[19].checked == true) correct++;
  20.  
  21.      percent = (correct / 5) * 100;
  22.  
  23.      if (percent == 100) alert("Uzyskales " + percent + "%. Dobra Robota!");
  24.  
  25.  
  26.  
  27.  
  28.  
  29.      if (percent < 100) alert("Zdobiles  " + correct + " na 5 poprawnych odpowiedzi dajac ( " + percent + "% )");
  30. }
  31.  
  32. </script>
  33.  
  34.  
  35.  
  36. </head>
  37. <body>
  38. <h1>Quiz z Datami</h1>
  39.  
  40. <FORM onSubmit="tester(this); return false;">
  41.  
  42. <br><b>1. W ktorym roku byl Chrzest Polski  <br></b>
  43. <INPUT TYPE="radio" NAME="No1"  >966            <br>
  44. <INPUT TYPE="radio" NAME="No1">996			 <br>
  45. <INPUT TYPE="radio" NAME="No1">896			 <br>
  46. <INPUT TYPE="radio" NAME="No1">886			 <br>
  47.  
  48. <br><b>2. Wydarzenie 2           <br></b>
  49. <INPUT TYPE="radio" NAME="No2">False             <br>
  50. <INPUT TYPE="radio" NAME="No2">False             <br>
  51. <INPUT TYPE="radio" NAME="No2">True              <br>
  52. <INPUT TYPE="radio" NAME="No2">False             <br>
  53.  
  54. <br><b>3.  Wydarzenie 3      <br></b>
  55. <INPUT TYPE="radio" NAME="No3">False              <br>
  56. <INPUT TYPE="radio" NAME="No3">False              <br>
  57. <INPUT TYPE="radio" NAME="No3">True               <br>
  58. <INPUT TYPE="radio" NAME="No3">False              <br>
  59.  
  60. <br><b>4.  Wydarzenie 4   <br></b>
  61. <INPUT TYPE="radio" NAME="No4">True              <br>
  62. <INPUT TYPE="radio" NAME="No4">False                 <br>
  63. <INPUT TYPE="radio" NAME="No4">False              <br>
  64. <INPUT TYPE="radio" NAME="No4">False              <br>
  65.  
  66. <br><b>5.  Wydarzenie 5  <br></b>
  67. <INPUT TYPE="radio" NAME="No5">False              <br>
  68. <INPUT TYPE="radio" NAME="No5">False              <br>
  69. <INPUT TYPE="radio" NAME="No5">False              <br>
  70. <INPUT TYPE="radio" NAME="No5">True                <br>
  71.  
  72. <INPUT TYPE="Submit" VALUE="GOTOWE"> <INPUT TYPE="Reset" VALUE="WYCZYSC">
  73. <br>
  74.  
  75.  
  76.  
  77.  
  78. </body>
  79. </html> 
  80.  
  81.  
  82.  
  83.  
[HTML] pobierz, plaintext
lukasz1985
21.10.2012, 20:24:28
Pola radio muszą się w czymś znajdować, np w divach, żeby móc pokolorować poprawne odpowiedzi, spróbuj według tego, co jest poniżej.


[JAVASCRIPT] pobierz, plaintext 
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5.     <head>
  6.  
  7.  
  8.  
  9.         <script>
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.             function tester(form) {
  20.  
  21.                 var percent;
  22.  
  23.                 var correct = 0;    
  24.                 if (form[0].checked == true) 
  25.                 {
  26.                     form[0].parentNode.style.backgroundColor = 'green'
  27.                     correct++;  
  28.                 } else {
  29.                     form[0].parentNode.style.backgroundColor = 'red'
  30.  
  31.                 }
  32.                 if (form[6].checked == true){
  33.                     form[6].parentNode.style.backgroundColor = 'red'
  34.                     correct++; 
  35.                 } else {
  36.                     form[6].parentNode.style.backgroundColor = 'greem'
  37.  
  38.                 }
  39.                 if (form[10].checked == true) {
  40.                     correct++; 
  41.                     form[10].parentNode.style.backgroundColor = 'green'
  42.                 } else {
  43.                     form[10].parentNode.style.backgroundColor = 'red'
  44.                 }
  45.                 if (form[12].checked == true) {
  46.                     form[12].parentNode.style.backgroundColor = 'green'
  47.                     correct++
  48.                 } else {
  49.                     form[12].parentNode.style.backgroundColor = 'red'
  50.  
  51.                 }
  52.                 //                if (form[19].checked == true) {
  53.                 //                    correct++;
  54.                 //                    form[19].parentNode.style.backgroundColor = 'red'
  55.                 //    
  56.                 //                }
  57.  
  58.                 console.log(form[0])
  59.  
  60.                 percent = (correct / 5) * 100;
  61.  
  62.  
  63.  
  64.                 if (percent == 100) alert("Uzyskales " + percent + "%. Dobra Robota!");
  65.  
  66.  
  67.  
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76.                 if (percent < 100) alert("Zdobiles  " + correct + " na 5 poprawnych odpowiedzi dajac ( " + percent + "% )");
  77.  
  78.             }
  79.  
  80.  
  81.  
  82.         </script>
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.     </head>
  91.  
  92.     <body>
  93.  
  94.         <h1>Quiz z Datami</h1>
  95.  
  96.  
  97.  
  98.         <form onSubmit="tester(this); return false;">
  99.  
  100.  
  101.  
  102.             <br><b>1. W ktorym roku byl Chrzest Polski  <br></b>
  103.  
  104.             <div><INPUT TYPE="radio" NAME="No1">966<br></div>
  105.  
  106.             <div><INPUT TYPE="radio" NAME="No1">996<br></div>
  107.  
  108.             <div><INPUT TYPE="radio" NAME="No1">896<br></div>
  109.  
  110.             <div><INPUT TYPE="radio" NAME="No1">886<br></div>
  111.  
  112.  
  113.             <br><b>1. W ktorym roku byl Chrzest Polski  <br></b>
  114.  
  115.             <div><INPUT TYPE="radio" NAME="No2">966<br></div>
  116.  
  117.             <div><INPUT TYPE="radio" NAME="No2">996<br></div>
  118.  
  119.             <div><INPUT TYPE="radio" NAME="No2">896<br></div>
  120.  
  121.             <div><INPUT TYPE="radio" NAME="No2">886<br></div>
  122.  
  123.             <br><b>1. W ktorym roku byl Chrzest Polski  <br></b>
  124.  
  125.             <div><INPUT TYPE="radio" NAME="No3">966<br></div>
  126.  
  127.             <div><INPUT TYPE="radio" NAME="No3">996<br></div>
  128.  
  129.             <div><INPUT TYPE="radio" NAME="No3">896<br></div>
  130.  
  131.             <div><INPUT TYPE="radio" NAME="No3">886<br></div>
  132.  
  133.             <br><b>1. W ktorym roku byl Chrzest Polski  <br></b>
  134.  
  135.             <div><INPUT TYPE="radio" NAME="No4">966<br></div>
  136.  
  137.             <div><INPUT TYPE="radio" NAME="No4">996<br></div>
  138.  
  139.             <div><INPUT TYPE="radio" NAME="No4">896<br></div>
  140.  
  141.             <div><INPUT TYPE="radio" NAME="No4">886<br></div>
  142.  
  143.  
  144.             <INPUT TYPE="Submit" VALUE="GOTOWE"> <INPUT TYPE="Reset" VALUE="WYCZYSC">
  145.  
  146.             <br>
  147.  
  148.  
  149.         </form>
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.     </body>
  157.  
  158. </html> 
  159.  
  160.  
  161.  
[JAVASCRIPT] pobierz, plaintext
szodro
22.10.2012, 14:31:36
Chłopie, dzięki. Jesteś wielki. Pozmieniałem i dodałem te 5 pytanie i jest git smile.gif
Walcze teraz z licznikiem, który odlicza czas od np. 30 sekund do 0 i przekierowuje (w java script nie html haha.gif) i mam wszystko co potrzebuje smile.gif
Jeszcze raz dzieki
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.