E. lecke (HTML5, CSS3, PHP5, JavaScript)

Részletesebben a "tesztelemekről":

• minden kérdés egy szövegsor legyen, de ebben lehetnek HTML parancsok (pl. kép, link, egy <br> amivel többsorossá tehető a megjelenítés, felsorolás, sorszámozott lista vagy akár egy komplett táblázat)
• a válaszok felépítése:
  - a válaszok is egysorosak
  - az első karakter mindegyik sorban egy tabulátor,
  - a válaszok közt csak egy helyes válasz lehet, ezt (a tab után) egy csillag jelölje (tehát a 2. karakter csillag)
• az utolsó válaszok után egy üres sor álljon

Az adatfájl magyarázattal

Az adatfájl magyarázat nélkül

Adatfájl beolvasása

   // Adatfájl beolvasása
   $t = array();
   $f = fopen ($inp,"r"); // $f - fájl azonosító
   while (!feof($f)) { array_push($t, chop(fgets($f,1024))); }
   fclose($f);

   $jojelzo = "*";   // ez jelzi a helyes választ
   $ind_ekerd = 5;   // első kérdés indexe (0,1,...)
   $BD = array('0','B','D','T','P','V');   // válaszok betűjele

Magyarázat soronként:

1. Az adatfájl sorait tároló üres tömb létrehozása
2. Az adatfájl megnyitása olvasásra (r - read), a "$f" azonosítja a fájl (így később nem kell megadni a nevét)
3. Elöltesztelő ciklus (while), míg nincs vége a fájlnak (feof):
   - a fájlt egy sorának olvasása (fgets), maximum 1024 byte-ot
   - sorvég levágása (chop)
   - a beolvasott sor beszúrása a $t tömb végére (array_push)
4. A nyitott fájl lezárása
5. A helyes választ jelző karaktert tesszük változóba
6. Az adatfájl elején címek, szerző, stb. szerepel, itt adjuk meg ezek számát
7. Egy hatelemű tömb definiálása, ezekkel a betűkkel jelöljük a válaszokat (az elsőt /0./ nem használjuk, tehát maximum 5 válasz lehet; a betűk hasonló hangzásúak /súgás ellen/)

Adatfájl elemzése

   $cim   = $t[0];   // teszt megnevezése 1.
   $info   = $t[1];   // információ
   $szerzo   = $t[2];   // szerző(i)
   $datum   = $t[3];   // dátuma
   $forras   = $t[4];   // forrása(i)

   $ansdb = '0'; $keydb = '0'; $trydb = '0';   // JavaScript változók "feje" 2.
   $kerdb = 0;   // kérdés sorszáma
   $ind = $ind_ekerd;   // ugrás az első kérdésre
   do { 3.
      $kerdb++;   // kérdések számolása 5.
      $ind++;   // első válaszra áll
      $valdb = 0;
      do { 4.
         $valdb++; 6.
         if (substr($t[$ind],1,1) == $jojelzo) { 7.
            $jossz = $valdb;
            $t[$ind] = substr($t[$ind],2); // tab és jelző le
         } else {
            $t[$ind] = substr($t[$ind],1); // tab le
         }
         $ind++; 8.
      } while ($t[$ind] != ''); // üres sornál kilép
      $ansdb .= ",$valdb"; 9.
      $keydb .= ",$jossz";
      $trydb .= ",0";
      $ind++;   // üres sor átlépése
   } while ($t[$ind] != ''); // a második üres sornál kilép

1. a teszt alapadatainak elhelyezése a "$t" tömbből egyedi változókba
2. az "ansdb","keydb","trydb" stringváltozók kezdőértékeinek beállítása (majd tömbökbe tesszük ezeket, de a 0. elemüket nem használjuk fel); a "$kerdb" numerikus változó beállítása; "$ind" beállítása 5-re (tehát az index az első kérdés sorára mutat)
3. külső ciklus – kérdésenként végzi az adminisztrációt (lásd 5. és 9. pont)
4. belső ciklus – üres sorig fut, tehát egy kérdéshez tartozó összes választ feldolgozza
5. változók növelése kérdésenként ($kerdb jelzi a kérdés sorszámát), illetve a belső ciklus "$valdb" kezdőértékének beállítása
6. változó növelése (ez a ciklusváltozó, a válasz sorszámát jelzi)
7. elágazás aszerint, hogy a válasz első (0.) "tab" karaktere után * van-e, ha igen, megjegyezzük ezen válasz sorszámát ($jossz); mindkét esetben leszedjük a felesleges "tab" illetve "*" karaktereket a sor elejéről
8. ciklusváltozó növelése (ez mindig arra a sorra mutat, amelyet szeretnénk feldolgozni)
9. a belső ciklusban gyűjtött adatok "hozzáragasztása" a megfelelő változók végéhez; ciklusváltozó növelése

JavaScript változók feltöltése/átadása

   echo "<script language='JavaScript'>\n";
   echo "\tvar numQ     = $kerdb ;\n";   // kérdések száma összesen
   echo "\tvar answers  = new Array( $ansdb ) ;\n";   // válaszok száma a kérdésenként
   echo "\tvar key      = new Array( $keydb ) ;\n";   // helyes válasz sorszáma kérdésenként
   echo "\tvar tryAgain = new Array( $trydb ) ;\n";   // hibaszámláláshoz kérdésenként
   echo "</script>\n";
   echo "<script language='JavaScript' src='index2.js'></script>\n";

1. JavaScript betét kezdetét jelző utasítás elhelyezése a HTML oldalba
2. a "$kerdb" PHP változó értékének átadása a "numQ" JavaScript változónak
3. az "$ansdb" PHP sztringváltozó (elemek vesszővel elválasztva) elhelyezése az "anwers" JavaScript tömbbe
4. az "$keydb" PHP sztringváltozó (elemek vesszővel elválasztva) elhelyezése a "key" JavaScript tömbbe
5. az "$trydb" PHP sztringváltozó (elemek vesszővel elválasztva) elhelyezése a "tryAgain" JavaScript tömbbe
6. JavaScript betét befejezését jelző utasítás elhelyezése a HTML oldalba
7. az "index2.js" külső JavaScript script program megadása

Nézzük meg a futó script (../quiz/index2.php?kd=minta) forrását, jól látható a fenti 7 utasítás hatása!

Form megjelenítése

   echo "<p class='h1'> $cim </p>\n"; 1.
   echo "<p class='h2'> $info </p>\n";

   echo "<div id='but'><a href='..'>Vissza a kezdőoldalra!</a></div>\n\n";
   echo "<form id='form' method='post'>\n";

   $at = explode(",",$ansdb); $kt = explode(",",$keydb);   // PHP tömbbe 2.
   $ind = $ind_ekerd;   // ugrás az első kérdésre
   for ( $i=1; $i<(1+$kerdb); $i++ ) { 3.
      $ii = $i; if ($i<10) { $ii = "&nbsp;".$i; } 5.
      echo "<p class='kerdes'><span class='ssz'>$ii.</span>$t[$ind]</p>\n"; 6.
      $ind++;
      echo "<table class='t1'>\n"; 7.
      echo "<col class='c1'><col class='c2'><col class='c3'>\n";
      for ( $j=1; $j<(1+$at[$i]); $j++ ) {   // válaszok 4.
         $inp = "<input type='radio' name='V$i' onclick='correct($i,$j);'>"; 8.
         echo "<tr>\n"; 9.
         echo "\t<td>$inp</td>\n\t<td>$t[$ind]</td>\n\t<td>$BD[$j]</td>\n";
         echo "</tr>\n";
         $ind++;
      }
      echo "</table>\n\n"; 10.
      $ind++;
   }
 echo "
 <div id='resub'> 11.
    <button type='reset'>Törlöm az előző válaszaimat!</button>   
    <button type='submit' onclick='showGrade();'>Rendben, jöhet az értékelés!</button>
 </div>

 </form> 12.
 <p class='h3'>$szerzo ($datum)</p>
 <p class='h4'>$forras</p>
 <div id='but'><a href='..'>Vissza a kezdőoldalra!</a></div><br>
 ";

1. cím, alcím, visszaugró link kiírása; "form" kezdete
2. sztringek tömbbe írása (vessző határolja az elemeket); index növelése
3. külső ciklus, amely egy-egy kérdést kezel
4. belső ciklus, a válaszok elemzésére/kiírására szolgál
5. kérdés előtti sorszám előállítása, ha egyjegyű, tesz elé egy nem "lenyelhető" space-t (&nbsp;)
6. aktuális kérdés kiírása (sorszámozva); index növelése (rááll az első válaszra)
7. válaszok táblázatba írásának előkészítése; három oszlop lesz, itt állítjuk be ezek jellemzőit
8. a válasz előtti rádiógomb elkészítése úgy, hogy majd rákattintva meghívja a "correct()" JavaScript függvényt (részletek az index2.js-ben)
9. a táblázat egy sorának kiírása (előbbi rádiógomb, válasz szövege, megfelelő betűjel)
10. táblázat zárása; index növelése
11. "reset" és "submit" gombok létrehozása, utóbbira kattintva meghívódik a "showGrade()" JavaScript függvény (részletek az index2.js-ben)
12. "form" vége; információk, visszalink kiírása