1 Einleitung Was ist ein Quiz? Ein lokales Quizsystem Ein textbasiertes serverseitiges Quizsystem... 9

Transkript

1 Inhaltsverzeichnis 1 Einleitung Was ist ein Quiz? Ein lokales Quizsystem Worum geht es? Ein Ja-Nein-Quiz auf Basis von Javascript Ein textbasiertes serverseitiges Quizsystem Worum geht es? Ein PHP-Quiz auf Basis von Objektorientierung Ein datenbankbasiertes Client-Server-Quizsystem Eingabeformular Der Fragebogen Das Endlosquiz Highscoretabelle Selbstlernendes Quiz Zusammenfassung Quellenverzeichnis

2 Was ist ein Quiz? 1 Einleitung Quizzes sind schon seit jeher ein beliebtes Mittel zur Unterhaltung. Sowohl im im Radio als auch im Fernsehen werden sie gerne verfolgt. Die Quoten der Millionenshow belegen dies. Jeder spielt und rätselt gerne mit. Ansporn hierbei sind Preise, die man mit richtigen Antworten auf die jeweiligen Fragen gewinnen kann. Es ist immer ein gewisser Reiz dabei, sein Allgemeinwissen zu überprüfen. Quizsysteme können aber auch abseits ihres Unterhaltungswertes in der Schule eingesetzt werden. Bereits die Erstellung von Fragen und (mehreren) Antwortmöglichkeiten zu einem bestimmten Stoffgebiet seitens der Schüler stellt eine neue, interessante Art des Unterrichts dar. Gute Fragenpools anzufertigen ist keine leichte Aufgabe und fördert den Denkprozess. Auch als Ersatz für schriftliche, auf Papier stattfindende Tests können webbasierte Quizzes sehr gut dienen. Durch Speichern der Antworten in einer zentralen Datenbank lassen sich aussagekräftige Auswertungen erstellen und für den Fragesteller bzw. Prüfer ergeben sich interessante Rückschlüsse auf die Schwierigkeitsgrade der Fragen. Das ist auch Teil meiner Arbeit. In dieser Fachbereichsarbeit möchte ich nun verschiedene Quizlösungen für das Internet vorstellen. Darunter auch durchaus solche, die im Schulunterricht bereits Verwendung finden und finden könnten, um erlerntes Wissen zu überprüfen. Ausgehend von einem für einen Informatiker! - relativ primitiven Quiz, das nur auf dem Rechner des Benutzers abläuft, möchte ich ein informatisch interessanteres Quiz vorstellen, das die Möglichkeiten der Objektorientierung der Sprache PHP aufzeigt. Als Highlight stelle ich ein client-serverbasiertes Quiz auf PHP-MYSQL Basis dar, das "selbstlernend" ist, was bedeutet, dass in Abhängigkeit der Antworten einer (großen) Population die Schwierigkeitsgrade der Fragen vom System automatisch ermittelt werden. Diese Arbeit erhebt nicht den Anspruch, ein Lehrbuch für die verwendeten Sprachen HTML, Javascript und PHP sowie eine Einführung in die verwendete Datenbank zu sein

3 Was ist ein Quiz? 2 Was ist ein Quiz? Quizzes sind Frage/Antwort-Spiele, die man aus dem Radio, aus dem Fernsehen oder als Brettspiele kennt. Es gibt verschiedenste Arten von Quizzes. Die einfachste Form stellt das Ja/Nein-Quiz dar. Die gestellten Fragen werden können mit Ja oder Nein beantwortet werden bzw. die Aussagen richtig oder falsch sein. Solche Fragebögen werden auch binäre Quizzes genannt ( 1 richtig oder 0 falsch). Die zweite große Kategorie sind Quizzes mit mehreren Antwortmöglichkeiten Multiple Choice. Diese Art wird z.b. auch in Fernsehquizshows verwendet. Nach ähnlichem Muster funktionieren auch viele Wissenstests und Prüfungen zum Erwerb verschiedener produkt- und firmenspezifischer Zertifikate. Im Informatikunterricht an Schulen können Quizsysteme nicht nur als Werkzeug selbst, sondern auch, bei der Erstellung von Quizzes im Zuge des Unterrichtes, als Vermittler vieler informatischer Konzepte eingesetzt werden

4 Ein textbasiertes serverseitiges Quizsystem 3 Ein lokales Quizsystem 3.1 Worum geht es? Die erste Realisierungsmöglichkeit von webbasierten Quizsystemen, die ich vorstellen will, findet sich in einer lokalen, clientseitigen Lösung. Als Programmiersprache wird Javascript, mit dem man sehr einfache, grundlegende Frage/Antwortspiele erstellen kann, verwendet. Die Verwendung der Auszeichnungssprache HTML ist selbstverständlich. Nur mit HTML alleine ist aber keine Funktionalität möglich. Der Nachteil dieser Lösung ist, dass die Daten (Fragen und Antworten) mit dem Design (HTML) und der Funktionalität verquickt und nicht sauber getrennt sind. 3.2 Ein Ja-Nein-Quiz auf Basis von Javascript Das folgende, erste Beispiel stellt die einfachste Form eines Quizzes dar. Die Aussagen, die mit richtig oder falsch zu beantworten sind, werden im Quellcode selbst hinterlegt. Dem Benutzer wird nur ein Auswertungs- und ein Zurücksetzungsbutton als Benutzeroberfläche angeboten. Das Userinterface - 4 -

5 Ein textbasiertes serverseitiges Quizsystem Die Grobstruktur 1. Wahl der Antworten (HTML) 2. Auswertung (Javascript) 3. Ausgabe der Punktzahl (Javascript) quiz_javascript.html 01 <html> 02 <head> 03 <title>quiz mit Javascript</title> 04 <link rel=stylesheet type="text/css" href="style.css"> 05 <script language="javascript"> 06 var fragen = new Array(0,0,0,0,0); 07 var punktzahl = 0; 08 function auswerten() { 09 punktzahl = 0; 10 for(var i = 0; i < 5; i++) { 11 punktzahl = punktzahl + parseint(fragen[i]); 12 } 13 alert('sie haben ' + punktzahl + ' Fragen richtig beantwortet.'); 14 } 15 function zuruecksetzen() { 16 for(var i = 0; i < 5; i++) { 17 fragen[i] = 0; 18 } 19 punktzahl = 0; 20 } 21 </script> 22 </head> 23 <body> 24 <form name="quiz"> 25 <table border="0" align="center" cellspacing="2" cellpadding="6"> 26 <tr><td class="ueber" colspan="3">einfaches quiz mit javascript</td></tr> 27 <tr><td class="fill" colspan="3"></td></tr> 28 <tr> 29 <td>die Übertragungsrate im LAN beträgt höchstens 100 MBit/Sekunde.</td> 30 <td><input type= radio name="a1" value="0" onclick="fragen[0]=this.value">richtig</td> - 5 -

6 Ein textbasiertes serverseitiges Quizsystem 31 <td><input type= radio name="a1" value="1" onclick="fragen[0]=this.value">falsch</td> 32 </tr> 33 <tr> 34 <td>das A in ADSL steht für asynchron</td> 35 <td><input type= radio name="a2" value="0" onclick="fragen[1]=this.value">richtig</td> 36 <td><input type= radio name="a2" value="1" onclick="fragen[1]=this.value">falsch</td> 37 </tr> 38 <tr> 39 <td>ein Modem wandelt analoge Signale in digitale Signale um und umgekehrt.</td> 40 <td><input type= radio name="a3" value="1" onclick="fragen[2]=this.value">richtig</td> 41 <td><input type= radio name="a3" value="0" onclick="fragen[2]=this.value">falsch</td> 42 </tr> 43 <tr> 44 <td>es gibt weltweit 13 Root-Server</td> 45 <td><input type= radio name="a4" value="1" onclick="fragen[3]=this.value">richtig</td> 46 <td><input type= radio name="a4" value="0" onclick="fragen[3]=this.value">falsch</td> 47 </tr> 48 <tr> 49 <td>ein HUB regelt den Datentransfer besser als ein Switch.</td> 50 <td><input type= radio name="a5" value="0" onclick="fragen[4]=this.value">richtig</td> 51 <td><input type= radio name="a5" value="1" onclick="fragen[4]=this.value">falsch</td> 52 </tr> 53 <tr><td class="fill" colspan="3"></td></tr> 54 <tr><td class="cen" colspan="3"> 55 <input type="button" value="auswerten" onclick="auswerten()"> 56 <input type="reset" value="zurücksetzen" onclick="zuruecksetzen()"> 57 </td><tr> 58 </table> 59 </form> 60 </body> 61 </html> Im Javascript-Teil, gekennzeichnet vom <script> Tag (Zeile 05-21), befinden sich die beiden Funktionen, auswerten() und zuruecksetzen(), die über die Buttons (55, 56) aufgerufen werden. Zuerst werden jedoch noch die Variablen deklariert. In dem Array fragen werden sozusagen die Antworten des Quizzes gespeichert. Dies geschieht mit der Anweisung onclick= fragen[0]=this.value (30,31;35,36;..) der Radiobuttons (a1-a5). Bei Klick auf einen dieser Buttons, also bei Beantwortung der Fragen, wird dem Array der Wert 1 (value= 1 ) oder 0 (value= 0 ) übermittelt - 1 für eine richtige Antwort und 0 für eine falsche. Mit Drücken des Auswerten-Buttons (55) wird die auswerten()-funktion aufgerufen. In dieser wird mit Hilfe einer For-Schleife (10-12) der Inhalt des fragen-arrays mit Hilfe der Variablen - 6 -

7 Ein textbasiertes serverseitiges Quizsystem punktzahl zugesammengezählt und somit die Anzahl der richtigen Fragen ermittelt. Ausgegeben wird die Punktzahl dann mittels einer alert-box (13). Nach einem Durchspielen des Quizzes kann dieses mit dem zweiten Button wieder zurückgesetzt werden. Hierbei wird die Funktion zuruecksetzen(), die die Variablen wieder auf ihren Ursprungswert stellt, aufgerufen. Zusätzlich löscht der Button alle Formularveränderungen, in diesem Fall die Markierungen der Radiobuttons, da er ein spezieller reset -Button ist - <input type= reset...> (56). Dafür müssen die Elemente aber zwischen den <form> Tags (24,59) stehen. Um das Aussehen von Webseiten einfacher und schneller zu ändern, können vordefinierte Formate entweder in der HTML-Seite selbst oder, wie in diesem Quiz, in einer externen Datei (04) in Form einer CSS-Stylesheet-Datei 1 angegeben werden. style.css 62 body {background-color:aliceblue;} 63 table {background-color:lightskyblue; border-collapse:collapse; width:600;} 64 td {border:thin solid black; font-family:verdana; font-size:10pt; color:black; font-weight:bold;} 65.cen {text-align:center; vertical-align:middle;} 66.fill {background-color:peachpuff; height:17;} 67.ueber {font-family:verdana; font-size:14pt; color:black; fontweight:bold; text-align:center; vertical-align:middle;} Man kann HTML-Tags bestimmte Eigenschaften zuweisen (62-64) oder neue eigene, sogenannte Klassen erstellen (65-67). Diese werden dann mit class= [Formatname] in den Tags verwendet. Beispiel (26): <tr><td class="ueber" colspan="3">einfaches quiz mit javascript</td></tr> Somit ist das erste Quiz schon voll funktionstüchtig und kommt mit nur wenigen Zeilen Programmiercode aus. Es kann auch noch erweitert werden indem man z.b. einen Button für die richtige Lösung hinzufügt. 1 Nähere Informationen zu CSS finden sich z.b. ausführlich bei Stefan Münz unter

8 Ein textbasiertes serverseitiges Quizsystem <input type="button" value="lösung anzeigen" onclick="loesung()"> Durch Drücken des Buttons wird wieder eine Funktion, loesung(), aufgerufen, die in den Javascriptteil eingefügt werden muss. function loesung() { window.document.quiz.a1[1].checked = 'true'; window.document.quiz.a2[1].checked = 'true'; window.document.quiz.a3[0].checked = 'true'; window.document.quiz.a4[0].checked = 'true'; window.document.quiz.a5[1].checked = 'true'; } Formularelemente wie die Radiobuttons (a1-a5) können mit Javascript als Objekt angesprochen werden, wenn sie sich auch in einem Formular, in diesem Fall mit dem Namen quiz (siehe 24), befinden. Zwei Buttons es gibt zu jeder Frage zwei Möglichkeiten - werden zu einem Array zusammengefasst und über den Index, der Zahl in der eckigen Klammer, angesprochen. Mit der Eigenschaft checked, der der Wert true zugewiesen wird, werden die richtigen Radiobuttons markiert. Dieses bestechend einfache Ja-Nein-Quiz ist sehr kompakt, das Design, die Daten und die Funktionalität sind in einer Datei, in einem HTML-File, gespeichert. Das Problem ist, dieses mit neuen Fragen und Antworten zu versehen, also den Aufgabenkatalog zu versehen. Dies ist in dieser Form einem Laien nicht zuzumuten, weil er nicht weiß, wo die Änderungen anzubringen sind und er sich im HTML- und Javascript-Code nicht zurechtfindet. Für den praktischen Einsatz, wenn es für einige Einsatzbereiche bereits fertige Quizzes in dieser Form gibt, stellen sie aber taugliche Mittel für die schnelle Überprüfung von Wissen für dar. Allerdings werden die Antworten nicht gespeichert. Im nächsten Beispiel gehe ich einen Schritt weiter und stelle ein Quiz vor, das zwar die Antworten auch nicht speichert, aber es zumindest einem Laien gestattet, neue Fragen- und Antwortenkataloge einfach mit einem Editor zu erstellen

9 4 Ein textbasiertes serverseitiges Quizsystem 4.1 Worum geht es? War das obige Quiz im wesentlichen clientbasiert, wobei die gesamte, mit Javascript angereicherte HTML-Quizdatei vom Server auf den Client geladen wird und dort zur Ausführung gelangt, ist es beim nächsten Beispiel wesentlich anders. Und das in zweierlei Hinsicht. Erstens sind Daten und Funktionalität sauber getrennt und zweitens läuft das Programm auf dem Server ab. Die dabei verwendete serverseitige Sprache ist PHP 2, eine sehr mächtige Sprache, die in den letzten Jahren einen großen Aufschwung genommen hat. 4.2 Ein PHP-Quiz auf Basis von Objektorientierung Dieses zweite server- und clientseitige Quiz, das ich vorstellen möchte, vermittelt auch den Aspekt der Objektorientierung. Wie in gängigen Programmiersprachen wie C++ und Java ist es auch in PHP möglich, Klassen und somit Objekte zu erstellen. Ein Klasse eine Zusammenfassung von Daten und Funktionen, auch Methoden genannt. Aus dieser werden Objekte erzeugt, die die Eigenschaften der Klasse erhalten. Man spricht dann von einem Objekt als Instanz einer Klasse. Ein anschauliches Beispiel für eine Klasse ist z.b. die Klasse Fenster in einem Betriebssystem. Ein Objekt dieser Klasse ist eine konkrete Ausprägung, ein Exemplar der Klasse Fenster mit ganz konkreten Eigenschaften wie Beschriftung, Position eineseits und konkreten Methoden wie Vergößern, Verkleinern und Verschieben andererseits. Klassen sind sozusagen Objektfabriken oder Vorlagen für Objekte. Struktur: class Klasse { var $Variable1; var $Variable2; function FunktionA() { } function FunktionB() { } } $Objekt = new Klasse(); 2 PHP Hypertext Preprozesor, eine rekursive Definition - 9 -

10 Wichtig für Verwendung der Klassenfunktion ist die Zeigervariable $this. Sie steht für den Namen des Objektes, der ja bei jedem neu erzeugten Objekt anders ist und somit nicht festgelegt werden kann. In diesem Quiz werden die Multiple-Choice-Fragen aus einer ini-datei, die auf dem Server liegt, ausgelesen. In Folge der Auswertung wird zu jeder Frage auch ein kleiner Kommentar abgegeben. Untenstehend sehen Sie einen Auszug aus der strukturierten, mit wohldefinierten "Tags" [General], [Question],... versehenen Textdatei mit den Fragen und Antworten. Diese Datei kann mit jedem Editor geschrieben werden, muss aber auf dem Server gemeinsam mit der PH-Programmdatei liegen, also hochgeladen werden. grundlagen.ini (Daten-Datei mit den Fragen und Antworten)

11 Userinterface Nachfolgend sehen sie das Listing, den Quellcode (Source), der die Funktionalität durch eine geeignete Klasse und den zugehörigen Methoden bereitstellt. Diese Datei ist als Bibliotheksdatei zu interpretieren. quiz.php 01 <?php 02 class Quiz 03 { 04 function open($filename) 05 { 06 $fn = $filename; 07 $this->data = parse_ini_file($fn, true); 08 } 09 function display() 10 { 11 $qcount = $this->data['general']['questions']; 12 printf ('<div class="quiz"><h2>%s</h2>', $this- >data['general']['title']); 13 printf ('<form class="quiz" action="%s" method="post">', $_SERVER['REQUEST_URI']); 14 for($i=1; $i<=$qcount; $i++){ 15 $dat = $this->get_question($i); 16 printf("<p><small><b>%s. %s</b></small>\r\n", $i, $dat[0]); 17 for($j=1; $j<count($dat); $j++){ 18 printf('<br><small><input type="radio" name="q%s" value="%s">%s</small>', $i, $j, $dat[$j]); 19 } 20 echo "</p>\r\n"; 21 } 22 echo '<p align="center"><input type="submit" name="submit" value="fertig! Ergebnisse anschauen."></p>'; 23 echo '</form></div>'; 24 }

12 26 function get_question($num) 27 { 28 $sect = $this->data['question'.$num]; 29 $result[] = $sect['question']; 30 for($i=1;$i<=$sect['options'];$i++){ 31 $result[] = $sect["option$i"]; 32 } 33 return $result; 34 } 35 function check() 36 { 37 $score = 0; 38 $qcount = $this->data['general']['questions']; 39 printf ('<div class="quiz"><h2>ergebnisse - %s</h2>', $this->data['general']['title']); 40 for($i=1;$i<=$qcount;$i++){ 41 if($this->get_answer($i)){ 42 $score++; 43 } 44 } 45 echo '<br>'; 46 printf ("<p>du hast <strong>%s von %s</strong> 47 Fragen richtig beantwortet.</p>\r\n", $score, $qcount); 48 echo '<br></div>'; 49 } 50 function get_answer($num) 51 { 52 $opt = $_POST["q$num"]; 53 $ans = $this->data["question$num"]['answer']; 54 $stat = ($opt == $ans)? 'Richtig!' : 'Falsch!'; 55 echo("<small>"); 56 printf ('<p><b>%s. %s</b><br>', $num, $this->data["question$num"]['question']); 57 printf ('Deine Antwort: <strong>%s</strong><br>', $this->data["question$num"]["option$opt"]); 58 printf ('Richtige Antwort: <strong>%s</strong><br>', $this->data["question$num"]["option$ans"]); 59 printf ("%s</p>\r\n", $this->data["question$num"]['details']); 60 echo("</small>"); 61 return ($opt == $ans); 62 } 63 } 64?> In der Klasse Quiz befinden sich fünf Klassenfunktionen. In der ersten Funktion open($filename) (04) wird mit parse_int_file 3 eine ini-datei in die Variable $this->data als assoziatives Array gelesen (07). Bei einem assoziativen Array wird der Inhalt anstatt mit einem Index mit einem eindeutigen Begriff angesprochen. Mit dem Parameter true wird ein mehrdimensionales Array erzeugt. 3 Eine Dokumentation dieser mächtigen Funktion findet sich z.b. unter

13 Die nächste Funktion display() (09) ist für die Ausgabe der Fragen zuständig. In Zeile 11 wird die Fragenanzahl in $qcount gespeichert. Danach wird mit der printf()-funktion der Titel des Quizzes ausgegeben (12). %s ist in printf() der Platzhalter für die Variablen, die erst am Ende der Anweisung stehen, hier eben der Titel mit $this->data[ General ][ title ]. Das Formular beginnt in Zeile 13. In der for-schleife (14-21) werden die Fragen mit ihren Antwortmöglichkeiten auf den Bildschirm geschrieben. Dazu wird in der 15. Zeile bereits die Funktion get_question($num) (25) verwendet. Diese Funktion übergibt einer Variablen, hier $dat, die Fragen und ihre Antwortmöglichkeiten in Form eines Arrays. Die Frage wird dann in Zeile 16 auf dem Bildschirm angezeigt. Die Antwortmöglichkeiten werden in einer weiteren for-schleife (17-19), in der auch die Radiobuttons erstellt werden, ausgegeben. In der 22. und 23. Zeile wird noch ein Submit-Button und der End-Tag des Formulars angehängt. Mit der check()-funktion (34) wird die Auswertung durchgeführt. In dieser befindet sich eine for-schleife, die mit get_answer($num), die gewählte (55) und die richtige Antwort (56) jeder Frage ausgibt. In $_POST (50) sind die Werte der Radiobuttons und somit die vom Benutzer ausgewählte Antwort zu finden. Diese wird mit Antwortnummer aus der ini-datei verglichen und das Ergebnis des Vergleiches als Rückgabewert der Funktion verwendet (59). Ist die Antwort richtig und so auch der return-wert true, wird die Variable $score um erhöht (40, 41). Die Anzahl der Punkte wird am Ende von check() der Seite angehängt (45). Das Ablaufschema WEBSERVER PHP-File grundlagen.php Klassenbibliothek quiz.php CLIENT mit Internetbrowser Bildschirm mit Quiz- Funktionalität Datendatei (Fragen, Antworten) grundlagen.ini

14 Es bleibt noch das Bindeglied zwischen Server und Datendatei anzusehen, nämlich das PHP- File grundlagen.php, das über die Klassenbibliothek quiz.php auf die Datendatei grundlagen.ini zugreift und das Quiz an den Client überträgt grundlagen.php 01 <html> 02 <head> 03 <title>example</title> 04 <style type="text/css"> 05 DIV.quiz H2 { font-family: Verdana,sans-serif; text-align: center; } 06 DIV.quiz P { margin: 1em; font:.9em Verdana,sans-serif; } 07 DIV.quiz B { background: #EEE; border-bottom: solid 1px black; padding-left:.2em; letter-spacing: 1px; } 08 </style> 09 </head> 10 <body> 11 <?php 12 $id = 'grundlagen'; 13 require_once 'Quiz.php'; 14 $q = new Quiz; 15 $q->open("$id.ini"); 16 if(isset($_post['submit'])){ 17 $q->check(); 18 } else { 19 $q->display(); 20 } 21?> 22 </body> 23 </html> Dieses "Haupt"-Programm ist nun denkbar kurz. Der require_once-befehl (75) greift nun auf die Klassendefinition in der php-datei, die die Quiz Klasse beinhaltet, zu. In Zeile 76 wird das Objekt $q erzeugt, mit der nun die obenbeschriebenen Funktionen durchgeführt werden können. Der große Vorteil bei dieser Art eines clientseitigen Quizzes ist, dass es viel leichter anpassbar ist. Wenn ein neues Quiz erstellt werden soll, ist einfach die Variable $id auszutauschen und auf eine andere Fragen-Antworten-Datei zu verweisen. Es ist auch leicht möglich, mehrere Instanzen eines Quizzes mit unterschiedlichen Fragen und Antworten zusammenzustellen. Dazu ist nur wie in Zeile 14 beschrieben, eine neues Quiz mit z.b. $r = new Quiz zu erzeugen und mit den gleichen Methoden aus der Klassendatei quiz.php bereitzustellen

15 5 Ein Client-Server-Quizsystem Unter dem Client-Server-Prinzp versteht man die Bereitstellung von Daten auf einem zentralen Rechner (Server). Der Zugriff auf diese Daten erfolgt über ein Userinterface auf dem Client. Hierbei ist im Regelfall ein Internet-Browser 4 notwendig. Die Funktionalität wird durch den Server bewerkstelligt, der Client wird nur zur Ausgabe verwendet. Client-Server-Quizsysteme bieten gegenüber lokalen, clientbasierten Frage/Antwort-Spielen viele Vorteile. Da sich die Fragen mit Antworten extern in einer zentralen Datenbank befinden, ist es dem Benutzer nicht mehr möglich, die Lösung im Quelltext zu finden. Weiters können zufällige Fragezusammenstellungen dynamisch, ohne Änderung der Webseite, erzeugt werden. Der Fragenpool selbst lässt sich komfortabel mit einer Eingabeseite mit neuen Fragen erweitern. Die Speicherung der Antworten lässt natürlich viele Auswertungen und Quizstatistiken zu. Die Datenbank, die sich im Hintergrund befindet, besteht aus vier Tabellen. Eine für die Fragen, eine für die verschiedenen Wissensgebiete, eine für die Benutzer, und eine für die Statistik, in der jede Fragenbeantwortung gespeichert wird. Tabelle fragen 4 Die bekanntesten Browser sind der Internet-Explorer und der Netscape Navigator bzw. Mozilla

16 In der Tabelle fragen bekommt jede Frage im Feld nr eine eindeutige Nummer zugewiesen. Das geschieht automatisch, da die auto_increment Option für das Feld aktiviert ist. Wird eine neue Frage in der Tabelle gespeichert, erhält sie die nächste Nummer. Das nr-feld ist somit auch das Schlüsselfeld (PRIMARY KEY) der Tabelle. In autor ist der Verfasser der Frage hinterlegt und in zeit im timestamp Format wann die Frage eingetragen wurde. Im Feld gnr liegt die Nummer des Wissensgebietes der Frage, in frage der Fragetext selbst und in a1 bis a4 die vier Antwortmöglichkeiten. Das Feld richtig liefert die richtige Antwort zur jeweiligen Frage und in f_beant wird die Anzahl der Falschbeantwortungen gespeichert. Tabelle gebiete In dieser Tabelle sind die Wissenskategorien gespeichert. Im Feld nr, das wiederum als Schlüsselfeld verwendet wird, befindet sich die Nummer und in gebiet der Kategoriennamen. Tabelle,users Das Feld nr lässt, wieder durch Autowert und somit Schlüsselfeld, jeden Benutzer eindeutig bestimmbar. In user ist der, von ihm ausgewählte, Name gespeichert. Das Feld frage in dieser Tabelle hinterlegt die aktuelle Fragennummer des Benutzers

17 Tabelle stat In dieser Statistik Tabelle wird die Frage anhand der Fragennummer fnr, der Benutzer, mit der Usernummer unr, und die Art der Antwort, richtig oder falsch, (Feld beant), gespeichert. Neue Quizfragen können bequem mit dem folgenden Eingabeformular eingetragen werden. 4.1 Eingabeformular Das Userinterface Abfolge 1. Eingabe des Daten (HTML) 2. Überprüfung der Eingabe (Javascript) Wenn Eingabe vollständig: 1. Speichern der Daten in Datenbank (PHP) 2. Link zur Neueingabe (HTML) Wenn Eingabe unvollständig: Wiederholung der Eingabe (HTML)

18 eingabe.php 01 <html> 02 <head> 03 <title>neue Frage</title> 04 <link rel=stylesheet type="text/css" href="style.css"> 05 <script language="javascript"> 06 function check() { 07 var form = document.forms["form"]; 08 for(var i = 0; i < form.elements.length; i++) { 09 if(form.elements[i].value == "") { 10 alert("bitte alle Felder ausfuellen!"); 11 return false; 12 } 13 } 14 for(var i = 0; i < 4; i++) { 15 if(form.richtig[i].checked == true) { 16 return true; 17 } 18 } 19 alert("bitte alle Felder ausfuellen!"); 20 return false; 21 } 22 </script> 23 </head> 24 <body onload="javascript:history.forward(1)"> 25 <?php 26 mysql_connect("localhost", "root", ""); 27 mysql_select_db("quiz_neu"); 28 if ($eintragen) { 29 if (mysql_query("insert INTO fragen (frage, a1, a2, a3, a4, richtig, gnr, autor) VALUES ('$frage', '$a1', '$a2', '$a3', '$a4','$richtig', '$gebiet', '$autor');")) { 30 echo "Deine Frage wurde eingetragen. Vielen Dank!<br><br>"; 31 echo "<a href='eingabe.php'>neue Frage eintragen</a>"; 32 exit(); 33 } else { 34 echo "Eintragung ist leider fehlgeschlagen.<br><br>"; 35 echo "<a href='eingabe.php'>nocheinmal probieren.</a>"; 36 exit(); 37 } 38 } 39?> 40 <form name="form" action="eingabe.php" method="post" onsubmit="return check()"> 41 <table border="0" bgcolor="#b0e1ff" width="500" align="center" cellspacing="1" cellpadding="6"> 42 <tr height="50"><td colspan="2" class="ueber">meine neue Euro Frage:</td></tr> 43 <tr><td colspan="2" class="fill"></td></tr> 44 <tr><td colspan="2" class="cen"><textarea name="frage" cols="50" rows="4"></textarea></td></tr> 45 <tr class="cen"> 46 <td>antwortmöglichkeiten:</td> 47 <td>richtig:</td> 48 </tr> 49 <tr class="cen"> 50 <td width="65%">a <input type="text" name="a1" size="35"></td> 51 <td><input type="radio" name="richtig" value="1"></td> 52 </tr> 53 <tr class="cen"> 54 <td width="65%">b <input type="text" name="a2" size="35"></td>

19 55 <td><input type="radio" name="richtig" value="2"></td> 56 </tr> 57 <tr class="cen"> 58 <td width="65%">c <input type="text" name="a3" size="35"></td> 59 <td><input type="radio" name="richtig" value="3"></td> 60 </tr> 61 <tr class="cen"> 62 <td width="65%">d <input type="text" name="a4" size="35"></td> 63 <td><input type="radio" name="richtig" value="4"></td> 64 </tr> 65 <tr> 66 <td colspan="2" class="cen">gebiet: 67 <select name="fach" size="1"> 68 <?php 69 $a_gebiet=mysql_query("select nr, gebiet FROM gebiete ORDER BY gebiet"); 70 while($gebiet=mysql_fetch_row($a_gebiet)) { 71 echo ("<option value='".$gebiet[0]."'>".$gebiet[1]."</option>"); 72 } 73?> 74 </select> 75 </td> 76 </tr> 77 <tr><td colspan="2" class="cen">username: <input type="text" name="autor" size="14"></td></tr> 78 <tr><td colspan="2" class="fill"></td></tr> 79 <tr height="50"><td colspan="2" align="center"><input type="submit" value="frage eintragen!" name="eintragen"></td></tr> 80 </table> 81 </form> 82 </body> 83 </html> Zu Beginn wird mit dem mysql_connect(serveradresse, Username, Passwort)-Befehl (26) die Verbindung zum MySQL-Server aufbaut. Mysql_select_db(Datenbankname) (27) wählt die Datenbank aus, so dass die MySQL-Abfragen sich auch auf diese beziehen. Die Fragen mit ihren Antwortmöglichkeiten werden in ein Formular eingegeben (40-81). Hierbei werden die Gebiete, die dem Benutzer über einer Listbox, die mit dem <select>-tag (67, 74) erstellt wird, zur Auswahl stehen, aus der Datenbank ausgelesen (69-72). Mit mysql_query() wird eine Abfrage an die Datenbank geschickt (69). In diesem Fall ist es ein SELECT-Abfrage, mit der man bestimmte Datensätze ausgeben kann. Die mysql_fetch_row()-funktion liefert den ausgewählten Datensatz aus der Tabelle gebiete (FROM gebiete) alphabetisch geordnet (ORDER BY gebiet) als Array ($gebiet). In $gebiet[0] werden die Gebietsnummern und in $gebiet[1] die -bezeichnungen gespeichert. Mit Hilfe der while-schleife werden nun so lange <option>-tags mit dem echo-befehl (71) geschrieben bis mysql_fetch_row() keine neuen Datensätze mehr liefert

20 Nach dem Ausfüllen des Formulars wird über Submit-Button die Frage eingetragen. Zuerst wird aber noch sichergestellt, dass auch alle Felder ausgefüllt werden. Dazu wird bei Klick des Buttons eine Javascript-Funktion ausgeführt. Das geschieht mit der Anweisung onsubmit= (40). In der Funktion check() werden die Elemente des Formulars, die in Javascript als Array document.forms[formularname].elements[elementindex] angesprochen werden können, auf ihren Inhalt value überprüft. Dafür wird eine for-schleife verwendet, in der, falls ein Element keinen Inhalt besitzt,,false als Rückgabewert der Funktion zurückgegeben wird (11). Somit wird die weitere Ausführung des Formulars, ein Selbstaufruf der php-seite action= eingabe.php (40), unterbrochen und es kommt eine Aufforderung zum vollständigen Ausfüllen des Formulars mittels einer Alarmbox alert(text) (10). Wurde aber in jedes Feld eingetragen, wird true zurückgegeben (16) und somit die Eingabeseite noch einmal ausgeführt. Bei Neuaufruf der Seite ist nun die Variable $eintragen durch Klicken des Buttons automatisch erzeugt worden und somit wird die if-anweisung (28), im Gegensatz als bei einem erstmaligen Aufruf, nicht übersprungen. Der Insert-Befehl (29) fügt einer Tabelle neue Datensätze hinzu. In diesem Fall wird eine neue Frage mit den vier Antwortmöglichkeiten, der richtigen Antwort, dem Wissensgebiet sowie dem Verfasser der Tabelle angehängt. Alle Elemente des Formulars sind dabei mit dem Elementnamen als Variablen in php ansprechbar. 4.2 Der Fragebogen Im ersten Beispiel eines Client-Server-Quizzes werden dem Benutzer eine festgelegte Anzahl von Multiple-Choice-Fragen, die zufällig aus der Datenbank ausgelesen werden, gestellt. Mit Klick auf den Button wird die Lösung des Fragebogens sowie die Punktzahl des Spielers gezeigt. Die Beantwortung der Fragen, richtig oder falsch, wird für eine Auswertung mitprotokolliert. Dazu wird zu Beginn des Quizzes über eine Anmeldeseite nach einem Nickname des Benutzers gefragt

21 Das Userinterface LOGIN Die Grobstruktur 1. Eingabe des Benutzernamens (HTML) 2. Überprüfung der Eingabe (Javascript) Wenn ein Benutzername ausgewählt wurde: Weiterleitung zum Quiz (HTML) Wenn kein Benutzername ausgewählt wurde: Wiederholung der Eingabe (HTML) login.php 01 <html> 02 <head> 03 <title>quizlogin</title> 04 <link rel=stylesheet type="text/css" href="style.css"> 05 <script language="javascript"> 06 function check() { 07 var form = document.forms["form"]; 08 for(var i = 0; i < form.elements.length; i++) { 09 if(form.elements[i].value == "") { 10 alert("bitte einen Namen auswaehlen!"); 11 return false; 12 } 13 } 14 return true; 15 } 16 </script> 17 </head> 18 <body> 19 <form name="form" action="fragebogen.php method="post" onsubmit="return check()"> 20 <table border="0" align="center" cellspacing="2" cellpadding="6"> 21 <tr><td class="ueber">quizlogin</td></tr> 22 <tr><td class="fill"></td></tr> 23 <tr><td class="cen"> 24 Willkommen zum Wissensfragebogen!<br>Tragen sie hier bitte einen Nickname ihrer Wahl ein um fortzufahren. 25 </td></tr> 26 <tr><td class="fill"></td></tr> 27 <tr><td class="cen">

22 28 Ihr Username:<br><input type="text" name="user" size="15" maxlength="19"> 29 </td></tr> 30 <tr><td class="fill"></td></tr> 31 <tr><td class="cen"> 32 <input type="submit" value="weiter" name="login"> 33 </tr></td> 34 </table> 35 </form> 36 </body> 37 </html> Nach Überprüfen der Eingabe durch die check()-funktion (06) wird die Quizseite geöffnet (19), in der nun die Variable $login durch Drücken des Buttons (32) sowie der Username als $user (28) vorhanden ist. Userinterface Die Abfolge Wenn das Login stattgefunden hat: 1. Auswahl und Ausgabe der Fragen (PPH) 2. Wahl der Antworten durch den Benutzer (HTML) 3. Überprüfung der Antworten (PHP) 4. Update der Statistik (PHP) 5. Ausgabe der Punktzahl (PHP) Wenn Login nicht stattgefunden hat: Link zum Login (HTML)

23 fragebogen.php 01 <html> 02 <head> 03 <title>fragebogen</title> 04 <link rel=stylesheet type="text/css" href="style.css"> 05 </head> 06 <body onload="javascript:history.forward(1)"> 07 <?php 08 mysql_connect("localhost", "root", ""); 09 mysql_select_db("quiz_neu"); 10 $limit=15; 11 if ($login) { 12 $zeit = date('ymdhis', time()); 13 mysql_query("insert into users (user, zeit) VALUES ('$user', '$zeit');") or die ("Insert fehlgeschlagen"); 14 $a_user = mysql_query("select nr FROM users WHERE (user = '$user') and (zeit = '$zeit');") or die ("User nicht gefunden"); 15 $row = mysql_fetch_row($a_user); 16 $unr = $row[0]; 17 echo "<form name='form' action='$php_self' method='post'>"; 18 echo "<table border='0' align='center' cellspacing='2' cellpadding='4'>"; 19 echo "<tr><td class='ueber'>wissensfragebogen</td></tr>"; 20 echo "<tr><td class='fill'></td></tr>"; 21 $a_fra = mysql_query("select nr, frage, a1, a2, a3, a4, richtig, gnr, autor FROM fragen ORDER BY rand() LIMIT $limit;"); 22 $z=0; 23 while($row = mysql_fetch_row($a_fra)) { 24 $z++; 25 $fnr[$z] = $row[0]; 26 $frage = $row[1]; 27 $a1 = $row[2]; 28 $a2 = $row[3]; 29 $a3 = $row[4]; 30 $a4 = $row[5]; 31 $richt = $row[6]; 32 $gnr = $row[7]; 33 $autor = $row[8]; 34 mysql_query("insert into stat (fnr, unr) VALUES ('$fnr[$z]', '$unr');") or die ("stat-insert fehlgeschlagen"); 35 echo "<tr><td><p>frage $z<br>"; 36 $a_gebiet = mysql_query("select gebiet FROM gebiete WHERE nr = '$gnr';"); 37 $row = mysql_fetch_row($a_gebiet); 38 $gebiet = $row[0]; 39 echo "<font class='klku'>(kategorie: $gebiet, Autor: $autor, Fragenr $fnr[$z])</font></p>"; 40 echo "<font class='ueber2'>$frage</font></td></tr>"; 41 echo "<tr><td>"; 42 echo "<input type='radio' name='ant[$z]' value='1'>$a1<br>"; 43 echo "<input type='radio' name='ant[$z]' value='2'>$a2<br>"; 44 echo "<input type='radio' name='ant[$z]' value='3'>$a3<br>"; 45 echo "<input type='radio' name='ant[$z]' value='4'>$a4<br>"; 46 echo "</td></tr><tr><td class='fill'></td></tr>"; 47 } 48 echo "<tr><td class='cen'>"; 49 echo "<input type='submit' value='fragen beantworten' name='quiz'>"; 50 echo "<input type='hidden' name='unr' value='$unr'>";

24 51 echo "</tr></td>"; 52 } 53 elseif ($quiz) { 54 echo "<form name='form' action='login2.php'>"; 55 echo "<table border='0' align='center' cellspacing='2' cellpadding='4'>"; 56 echo "<tr><td class='ueber'>loesung</td></tr>"; 57 echo "<tr><td class='fill'></td></tr>"; 58 $a_stat = mysql_query("select fnr FROM stat WHERE unr = '$unr'"); 59 $z=0; 60 $punkte = 0; 61 while($stat = mysql_fetch_row($a_stat)) { 62 $nr=$stat[0]; 63 $z++; 64 $a_fra = mysql_query("select nr, frage, a1, a2, a3, a4, richtig, gnr, autor FROM fragen WHERE nr = '$nr';"); 65 $row = mysql_fetch_row($a_fra); 66 $fnr[$z] = $row[0]; 67 $frage = $row[1]; 68 $richt = $row[6]; 69 $gnr = $row[7]; 70 $autor = $row[8]; 71 if ($ant[$z]!=0) { 72 $antwort = $row[$ant[$z] + 1]; 73 } else { 74 $antwort = ""; 75 } 76 $richtig = $row[$richt + 1]; 77 echo "<tr><td><p>frage $z<br>"; 78 $a_gebiet = mysql_query("select gebiet FROM gebiete WHERE nr = $gnr;"); 79 $row = mysql_fetch_row($a_gebiet); 80 $gebiet = $row[0]; 81 echo "<font class='klku'>(kategorie: $gebiet, Autor: $autor, Fragenr $fnr[$z])</font></p>"; 82 echo "<font class='ueber2'>$frage</font></td></tr>"; 83 echo "<tr><td>"; 84 echo "Ihre Antwort: $antwort<br>"; 85 echo "Richtige Antwort: $richtig<br>"; 86 if ($ant[$z]==$richt) { 87 $punkte++; 88 mysql_query("update stat SET beant = 'r' WHERE (fnr = '$fnr[$z]') and (unr = '$unr');") or die("update fehlgeschlagen"); 89 } else { 90 mysql_query("update stat SET beant = 'f' WHERE (fnr = '$fnr[$z]') and (unr = '$unr');") or die("update fehlgeschlagen"); 91 mysql_query("update fragen SET f_beant = f_beant + 1 WHERE nr = '$fnr[$z]';") or die("f_beant-update fehlgeschlagen"); 92 } 93 echo "</td></tr><tr><td class='fill'></td></tr>"; 94 } 95 echo "<tr><td class='ueber2'>sie haben $punkte Fragen richtig beantwortet.</td></tr>"; 96 echo "<tr><td class='fill'></td></tr>"; 97 echo "<tr><td class='cen'>"; 98 echo "<a href='login2.php'>zurück zum Login</a>"; 99 echo "</tr></td>"; 100 } else { 101 echo "Sie müssen sich zuerst einloggen.<br><br>";

25 102 echo "<a href='login2.php'>zum login</a>"; 103 exit(); 104 } 105?> 106 </table> 107 </form> 108 </body> 109 </html> Bei Aufruf der Seite wird überprüft ob sich der Benutzer auch über die Loginseite angemeldet hat (11). Hat er das, wird der User mit dem INSERT-Befehl in der user-tabelle gespeichert (13). Danach wird die Usernummer in die Variable $unr gesichert (14-16). Das gesamte Formular inklusive Tabelle wird mit echo hinausgeschrieben (17-20;...). In Zeile 21 wird die Abfrage formuliert, die zufällige Fragen (ORDER BY rand()) liefert. Die Anzahl der Datensätze werden mit LIMIT festgelegt. $limit wird zu Beginn des Skripts auf 15 gestellt (10), somit werden insgesamt 15 Fragen ausgegeben. In Zeile 34 werden in die stat-tabelle alle gestellten Fragen mit ihrer Nummer gespeichert. Die Gebietsnummern der Fragen werden in den Zeilen wieder in den Gebietsnamen umgewandelt. Zur Auswahl der richtigen Antwort werden wieder Radiobuttons verwendet. Diese werden im Namen mit der Zählervariablen $z versehen (ant[$z], 42-45) und können in PHP dann auch als Array angesprochen werden. Die Usernummer $unr muss noch in einem versteckten Formularelement (hidden, 50) eintragen werden, damit sie bei Neuaufruf der Seite, das durch Klicken des Buttons geschieht, nicht verloren geht. Nach dem Klick ist die Variable $quiz, entsprechend dem Buttonnamen, erstellt worden. Dadurch wird der Inhalt der zweiten if-anweisung (53) durchgegangen. Die zuvor in die Datenbank eingetragenen Fragenummern werden aus der Statistiktabelle stat wieder ausgelesen (58). In Zeile 71 wird überprüft ob eine Antwort ausgewählt wurde, sprich die Variable des Radiobuttons nicht leer bzw. null ist. Wurde eine Antwort gewählt, wird der Antworttext in $antwort geschrieben (72). Wurde keine Wahl getroffen, bleibt $antwort leer (74). Der Text der richtigen Antwort wird in der Zeile 76 in Variable $richtig eingetragen. Statt den vier Antwortmöglichkeiten werden nun bei der Auswertung $antwort und $richtig ausgegeben (84, 85). Stimmt die Antwort, erhält der Benutzer wird seine Punktzahl mit $punkte++ um eins erhöht (87) sowie in der stat-tabelle die Frage als richtig beantwortet r vermerkt (88). Ist die Antwort jedoch nicht richtig wird sie als falsch beantwortet f eingetragen (90) und auch ihr Schwierigkeitsgrad wird erhöht (91). Zu guter Letzt wird in der Zeile 95 die Anzahl der richtig beantworteten Fragen ($punkte) hinausgeschrieben und ein Link zurück zum Login erscheint

26 4.3 Das "Endlosquiz" In diesem Quiz wird in der Art einer Millionenshow nur eine Frage auf einmal gestellt. Wird diese richtig beantwortet, erscheint die nächste Frage. Sobald eine Frage falsch beantwortet wurde, wird das Quiz beendet und eine Highscoretabelle ausgegeben. Userinterface Abfolge Wenn Login stattgefunden hat: 1. Auswahl und Ausgabe der Frage (PHP) 2. Wahl der Antwort durch den Benutzer (HTML) 3. Überprüfung ob Auswahl getroffen wurde (Javascript) 4. Vergleich der gewählten Antworten (PHP) Wenn Antwort richtig: 1. Update der Statistik (PHP) 2. Nächste Frage (PHP) Wenn Antwort falsch: 1. Update der Statistik (PHP) 2. Quizende und Link zum Login (HTML) Wenn Login nicht stattgefunden hat: Link zum Login (HTML) endlos.php 01 <html> 02 <head> 03 <title>endlosquiz</title> 04 <link rel=stylesheet type="text/css" href="style.css"> 05 <script language="javascript">

27 06 function check() { 07 var form = document.forms["form"]; 08 for(var i = 0; i < 4; i++) { 09 if(form.antwort[i].checked == true) { 10 return true; 11 } 12 } 13 alert("bitte eine Auswahl treffen"); 14 return false; 15 } 16 </script> 17 </head> 18 <body onload="javascript:history.forward(1)"> 19 <?php 20 mysql_connect("localhost", "root", ""); 21 mysql_select_db("quiz_neu"); 22 if ($login) { 23 $zeit = date('ymdhis', time()); 24 mysql_query("insert into users (user, frage, zeit) VALUES ('$user', 1, '$zeit');") or die ("Insert fehlgeschlagen"); 25 $a_user = mysql_query("select nr FROM users WHERE (user = '$user') and (zeit = '$zeit');") or die ("User nicht gefunden"); 26 $row = mysql_fetch_row($a_user); 27 $unr = $row[0]; 28 } elseif ($quiz) { 29 if ($antwort==$richtig) { 30 mysql_query("insert into stat (fnr, unr, beant) VALUES ('$fnr', '$unr', 'r');"); 31 mysql_query("update users SET frage = frage + 1 WHERE nr = '$unr';") or die("fragennr-update fehlgeschlagen"); 32 } else { 33 $punkte = $user_frage-1; 34 mysql_query("insert into stat (fnr, unr, beant) VALUES ('$fnr', '$unr', 'f');") or die ("stat-insert fehlgeschlagen"); 35 mysql_query("update fragen SET f_beant = f_beant + 1 WHERE nr = '$fnr';") or die("f_beant-update fehlgeschlagen"); 36 echo "Sie haben $punkte Fragen richtig beantwortet.<br><br>"; 37 echo "<a href='stat.php'>zum Ranking</a>"; 38 exit(); 39 } 40 } else { 41 echo "Sie müssen sich zuerst einloggen.<br><br>"; 42 echo "<a href='login.php'>zum login</a>"; 43 exit(); 44 } 45 $akt_user = mysql_query("select nr, user, frage, zeit FROM users WHERE nr = '$unr';"); 46 $row = mysql_fetch_row($akt_user); 47 $user_frage = $row[2]; 48 $a_fra = mysql_query("select nr, frage, a1, a2, a3, a4, richtig, gnr, autor FROM fragen ORDER BY rand();"); 49 $row = mysql_fetch_row($a_fra); 50 $fnr = $row[0]; 51 $frage = $row[1]; 52 $a1 = $row[2]; 53 $a2 = $row[3]; 54 $a3 = $row[4]; 55 $a4 = $row[5]; 56 $richt = $row[6]; 57 $gnr = $row[7]; 58 $autor = $row[8];

28 59?> 60 <form name="form" action="endlos.php" method="post" onsubmit="return check()"> 61 <table border="0" align="center" cellspacing="2" cellpadding="4"> 62 <tr><td class="ueber">endlosquiz</td></tr> 63 <tr><td class="fill"></td></tr> 64 <tr><td> 65 <?php 66 echo "<p>ihre $user_frage. Frage<br>"; 67 $a_gebiet = mysql_query("select gebiet FROM gebiete WHERE nr = $gnr;"); 68 $row = mysql_fetch_row($a_gebiet); 69 $gebiet = $row[0]; 70 echo "<font class='klku'>(kategorie: $gebiet, Autor: $autor, Fragenr $fnr)</font></p>"; 71 echo "<font class='ueber2'>$frage</font>"; 72?> 73 </td></tr> 74 <tr><td class="fill"></td></tr> 75 <tr><td> 76 <input type="radio" name="antwort" value="1"> 77 <?php echo "$a1"?><br> 78 <input type="radio" name="antwort" value="2"> 79 <?php echo "$a2"?><br> 80 <input type="radio" name="antwort" value="3"> 81 <?php echo "$a3"?><br> 82 <input type="radio" name="antwort" value="4"> 83 <?php echo "$a4"?><br> 84 </td></tr> 85 <tr><td class="fill"></td></tr> 86 <tr><td class="cen"> 87 <input type="submit" value="frage beantworten" name="quiz"> 88 <input type="hidden" name="unr" value="<? echo "$unr"?>"> 89 <input type="hidden" name="fnr" value="<? echo "$fnr"?>"> 90 <input type="hidden" name="richtig" value="<? echo "$richt"?>"> 91 <input type="hidden" name="user_frage" value="<? echo "$user_frage"?>"> 92 </tr></td> 93 </table> 94 </form> 95 </body> 96 </html> Bei dem Neudurchlauf der Seite wird die ausgewählte Antwort mit der Lösung verglichen (29). Damit die Variablen auch bei einem Neuaufruf vorhanden sind, müssen sie im Formularteil verwendet werden. Dazu werden sie in einem versteckten Feld hidden ausgegeben (88-91). Stimmt die gewählte Antwort des Benutzers, wird eine neue Frage zufällig aus der Datenbank gezogen (48). Stimmt die Antwort jedoch nicht, wird die Anzahl der richtig beantworteten Fragen ausgegeben (36) und das Quiz wird beendet (38). Danach kann sich der Benutzer eine Highscoreliste, in der die besten zehn Spieler eingetragen sind, ansehen

29 4.4 Highscoretabelle stat.php 01 <html> 02 <head> 03 <link rel=stylesheet type="text/css" href="style.css"> 04 <?php 05 mysql_connect("localhost", "root", ""); 06 mysql_select_db("quiz_neu"); 07?> 08 </head> 09 <body> 10 <table border="0" align="center" cellspacing="1" cellpadding="6"> 11 <tr><td class="ueber" colspan="3">top Ten</td></tr> 12 <tr><td class="fill" colspan="3"></td></tr> 13 <tr> 14 <td class="ueber2">username</td> 15 <td class="ueber2">datum</td> 16 <td class="ueber2">punkte</td> 17 </tr> 18 <?php 19 $a_stat=mysql_query("select user, date_format(zeit,'am %d.%m.%y um %T'), frage 20 FROM users 21 ORDER BY frage desc 22 LIMIT 10"); 23 while($row = mysql_fetch_row($a_stat)) { 24 echo "<tr><td class='cen'>$row[0]</td><td class='cen'>$row[1]</td> <td class='cen'>$row[2]</td></tr>"; 25 } 26?> 27 <tr><td class="fill" colspan="3"></td></tr> 28 <tr><td class="cen" colspan="3"> <a href='login2.php'>zurück zum Login</a></td></tr> 29 </table> 30 </body> 31 </html> In Zeile 19 bis 22 wird die Abfrage formuliert, die Datensätze ausgibt. Mit der date_format()- Funktion wird die Zeit, die im timestamp-format gespeichert wurde, formatiert. Die Datensätze werden nach der Anzahl der beantworteten Fragen absteigend sortiert (21). Mit LIMIT 10 werden nur die ersten zehn Datensätze ausgewählt

30 4.5 Das selbstlernende Quiz Wie auch schon bei dem vorherigen Client-Server-Quizsystem werden auch bei diesem die Fragen zufällig gezogen. Das Besondere bei diesem System ist jedoch, dass die Fragen dennoch immer schwerer werden. Dies wird erreicht, indem man die Fragen nach ihrem Schwierigkeitsgrad ordnet, sie in Pakete zusammengefasst und aus jedem dieser Bereiche eine zufällig ausgewählt. Damit dies funktioniert, muss es aber eine fixe Anzahl an Fragen, die gestellt werden, geben. Diese kann aber jederzeit im Quelltext geändert werden. In diesem Beispiel werden 15 Fragen gestellt, danach ist das Quiz beendet. Userinterface Abfolge Wenn das Login stattgefunden hat: 1. Auswahl und Ausgabe der Frage (PHP) 2. Wahl der Antwort durch den Benutzer (HTML) 3. Überprüfung, ob Auswahl getroffen wurde (Javascript) 4. Vergleich der gewählten Antworten (PHP) Wenn Antwort richtig: 1. Update der Statistik (PHP) 2. Nächste Frage (PHP) Wenn alle Fragen beantwortet sind: Quizende und Link zum Login (HTML)

31 Wenn Antwort falsch: 1. Update der Statistik (PHP) 2. Quizende und Link zum Login (HTML) Wenn Login nicht stattgefunden hat: Link zum Login (HTML) slquiz.php 01 <html> 02 <head> 03 <title>selbstlernende Quiz</title> 04 <link rel=stylesheet type="text/css" href="style.css"> 05 <script language="javascript"> 06 function check() { 07 var form = document.forms["form"]; 08 for(var i = 0; i < 4; i++) { 09 if(form.antwort[i].checked == true) { 10 return true; 11 } 12 } 13 alert("bitte eine Auswahl treffen"); 14 return false; 15 } 16 </script> 17 </head> 18 <body onload="javascript:history.forward(1)"> 19 <?php 20 mysql_connect("localhost", "root", ""); 21 mysql_select_db("quiz_neu"); 22 $level=15; 23 if ($login) { 24 $zeit = date('ymdhis', time()); 25 mysql_query("insert into users (user, frage, zeit) VALUES ('$user', 1, '$zeit');") or die ("Insert fehlgeschlagen"); 26 $a_user = mysql_query("select nr FROM users WHERE (user = '$user') and (zeit = '$zeit');") or die ("User nicht gefunden"); 27 $row = mysql_fetch_row($a_user); 28 $unr = $row[0]; echo "usernr = $unr"; 29 } elseif ($quiz) { 30 if ($antwort==$richtig) { 31 mysql_query("insert into stat (fnr, unr, beant) VALUES ('$fnr', '$unr', 'r');") or die ("stat-insert fehlgeschlagen"); 32 mysql_query("update users SET frage = frage + 1 WHERE nr = '$unr';") or die("fragennr-update fehlgeschlagen"); 33 if ($user_frage==$level) { 34 echo "<class='ueber2'>herzliche Gratulation! Sie haben alle $level Fragen richtig beantwortet.</class><br><br>"; 35 echo "<a href='login.php'>zurück zum Login.</a>"; 36 exit(); 37 } 38 } else { 39 mysql_query("insert into stat (fnr, unr, beant) VALUES ('$fnr', '$unr', 'f');") or die ("stat-insert fehlgeschlagen"); 40 mysql_query("update fragen SET f_beant = f_beant + 1 WHERE nr = '$fnr';") or die("f_beant-update fehlgeschlagen"); 41 echo "Leider falsch..<br><br>";

32 42 echo "<a href='login.php'>nochmal probieren!</a>"; 43 exit(); 44 } 45 } else { 46 echo "Sie müssen sich zuerst einloggen.<br><br>"; 47 echo "<a href='login.php'>zum login</a>"; 48 exit(); 49 } 50 $akt_user = mysql_query("select nr, user, frage, zeit FROM users WHERE nr = '$unr';"); 51 $row = mysql_fetch_row($akt_user); 52 $user_frage = $row[2]; 53 $a_fra = mysql_query("select * FROM fragen;"); 54 $alle_fragen = mysql_num_rows($a_fra); 55 $bereich = $alle_fragen / $level; 56 $b = intval($bereich); 57 $f_min = $b * ($user_frage - 1) + 1; 58 $f_max = $b * $user_frage; 59 mt_srand((double)microtime()* ); 60 $f = (mt_rand() % $f_max) + $f_min; 61 $a_fra = mysql_query("select nr, frage, a1, a2, a3, a4, richtig, gnr, autor FROM fragen ORDER BY f_beant asc;"); 62 $z = 0; 63 while($row = mysql_fetch_row($a_fra)) { 64 $z++; 65 if ($z==$f) { 66 $fnr = $row[0]; 67 $frage = $row[1]; 68 $a1 = $row[2]; 69 $a2 = $row[3]; 70 $a3 = $row[4]; 71 $a4 = $row[5]; 72 $richt = $row[6]; 73 $gnr = $row[7]; 74 $autor = $row[8]; 75 } 76 } 77?> 78 <form name="form" action="slquiz.php" method="post" onsubmit="return check()"> 79 <table border="0" align="center" cellspacing="2" cellpadding="4"> 80 <tr><td class="ueber"> 81 the self-learning quiz 82 </td></tr> 83 <tr><td class="fill"></td></tr> 84 <tr><td> 85 <?php 86 echo "<p>frage $user_frage<br>"; 87 $a_gebiet = mysql_query("select gebiet FROM gebiete WHERE nr = $gnr;"); 88 $row = mysql_fetch_row($a_gebiet); 89 $gebiet = $row[0]; 90 echo "<font class='klku'>(kategorie: $gebiet, Autor: $autor, Frage $fnr von $alle_fragen)</font></p>"; 91 echo "<font class='ueber2'>$frage</font>"; 92?> 93 </td></tr> 94 <tr><td class="fill"></td></tr> 95 <tr><td> 96 <input type="radio" name="antwort" value="1"> 97 <?php echo "$a1"?><br> 98 <input type="radio" name="antwort" value="2"> 99 <?php echo "$a2"?><br>

33 100 <input type="radio" name="antwort" value="3"> 101 <?php echo "$a3"?><br> 102 <input type="radio" name="antwort" value="4"> 103 <?php echo "$a4"?><br> 104 </td></tr> 105 <tr><td class="fill"></td></tr> 106 <tr><td class="cen"> 107 <input type="submit" value="frage beantworten" name="quiz"> 108 <input type="hidden" name="unr" value="<? echo "$unr"?>"> 109 <input type="hidden" name="fnr" value="<? echo "$fnr"?>"> 110 <input type="hidden" name="richtig" value="<? echo "$richt"?>"> 111 <input type="hidden" name="user_frage" value="<? echo "$user_frage"?>"> 112 </tr></td> 113 </table> 114 </form> 115 </body> 116 </html> In Zeile 54 wird mittels der mysql_num_rows([abfrage])-funktion, die die Anzahl der Datensätze innerhalb einer beliebigen Abfrage zurückgibt, die Summe der sich in der Datenbank befindenden Fragen in die Variable $alle_fragen gespeichert. Diese Variable dividiert durch die Zahl der Fragen, die dem Benutzer gestellt werden, ergibt die Größe des Fragenbereiches (55). Die Variable $level wurde in Zeile 22 auf 15 gestellt; somit werden im Quiz 15 Fragen gestellt. Da das Ergebnis der Division ($bereich, 55) nur selten ganzzahlig sein wird, muss es mit der intval([variable])-funktion zu einer Ganzzahl (engl. Integer - int), die Variable heißt nun $b, umgewandelt werden (56). Mit der Größe des Fragenpaketes - $b - und der aktuellen Frage des Users - $user_frage (52) - wird nun das Minimum und das Maximum ausgerechnet ($f_min und $f_max; 57,58). Beide Werte werden gebraucht um eine zufällig ausgewählte Frage innerhalb des Fragenbereiches zu ermitteln. Der Zufallszahlengenerator wird dazu in Zeile 59 mit dem Befehl mt_srand((double)microtime()* ); initialisiert. In der darauffolgenden Zeile (60) wird die Zufallszahl ($f) erzeugt. Die Fragen werden in der Abfrage $a_fra mit der Anweisung "ORDER BY f_beant asc" absteigend nach dem Schwierigkeitsgrad f_beant sortiert. Die while-schleife (63-75) wird solange durchlaufen, bis $f gleich $z (65) ist und so die gewählte Frage gefunden ist. Die Daten der Frage werden ausgelesen und in Variablen gespeichert (66-74). Im Formularteil werden sie wieder ausgegeben