Projekt-Dokumentation Entwicklung eines Multiple Choice Spiels als Projekt zur Vorlesung Skriptsprachen (WS2003/2004)

Transkript

1 Projekt-Dokumentation Entwicklung eines Multiple Choice Spiels als Projekt zur Vorlesung Skriptsprachen (WS2003/2004) Marc Jesse Jürgen Wagner Matrikel-Nr Matrikel-Nr vorgelegt bei Dr. Michael Thies 11. März 2004 Universität Paderborn Fakultät für Elektrotechnik, Informatik und Mathematik

2 Inhaltsverzeichnis 1 Einleitung Aufgabenstellung Beschreibung des realisierten Systems Benutzerrollen Zustände Technische Realisierung Datenmodell Übersicht der Programmstruktur Zusammenfassung Was wurde erreicht? Erweiterungsmöglichkeit

3 1 Einleitung Im Rahmen der Vorlesung Skriptsprachen sollte eine dynamische Webanwendung als Projekt erstellt werden, in der die Inhalte der Vorlesung praktisch erprobt werden sollten. Wir hatten uns dazu entschlossen, als Projekt ein Multiple-Choice Spiel zu implementieren. Dieses haben wir mit der Skriptsprache PHP, HTML und einer mysql Datenbank realisiert. Darüber hinaus wurde CSS zur Formatierung eingesetzt und Javascript zur Anzeige von zusätzlichen Informationen. 1.1 Aufgabenstellung Das Multiple-Choice Quiz soll folgende Funktionalität bereitstellen: Besucher der Webanwendung müssen sich einen Zugang einrichten können, mit dem sie die geschützten Bereiche der Webanwendung benutzen können. Benutzer, die sich schon einen Zugang eingerichtet haben, müssen sich an- und abmelden können. Angemeldete Benutzer können das Ratespiel spielen. Die dabei erreichten Ergebnisse müssen in einer Statistik bzw. eigenen Bestenliste eingesehen werden können. Außerdem soll eine allgemeine Bestenliste vorhanden sein, in der die Rangliste der erfolgreichsten Spieler angezeigt wird. Die Fragen und Antworten, die den Benutzern während des Spiels gestellt werden, sowie der Schwierigkeitsgrad der Fragen sollen von den Benutzern selbst eingegeben werden. Während des Spiels erhält der Benutzer allerdings keine von seinen selbst gestellten Fragen. Für Benutzer, die Administratoren sind, muss außerdem die Möglichkeit bestehen unerwünschte Fragen zu ändern und gegebenenfalls zu löschen. 3

4 2 Beschreibung des realisierten Systems 2.1 Benutzerrollen In unserer Anwendung gibt es drei Benutzerrollen: 1. Nicht eingeloggte Benutzer 2. Eingeloggte Benutzer 3. Administratoren In Abbildung 2.1 ist das Use-Case Diagramm für nicht eingeloggte Benutzer dargestellt. Diese Benutzer haben lediglich Zugriff auf die allgemeine Home-Seite mit der Erklärung der Webanwendung, der Seite mit der Erklärung der Spielregeln, der allgemeinen Bestenliste (Ranking) und können sich über Login einloggen bzw. ein neues Login erstellen. Abbildung 2.1: Nicht eingeloggter Benutzer 4

5 Abbildung 2.2 zeigt das Use Case für eingeloggte Benutzer. Diese haben zusätzlich die Möglichkeit, ihre Benutzerdaten einzusehen bzw. zu ändern, ihre eigene Bestenliste (History) anzusehen, neue Fragen einzugeben und natürlich ein neues Spiel zu spielen. Abbildung 2.2: Eingeloggter Benutzer Administratoren sind - wie ebenfalls in Abbildung 2.2 dargestellt wird - eingeloggte Benutzer mit den zusätzlichen Funktionen der Administration. Sie können Benutzerdaten bearbeiten und sogar Benutzer löschen und die Daten von Fragen bearbeiten bzw. unerwünschte Fragen löschen.

6 2.2 Zustände Das realisierte System besteht aus den folgenden drei Bereichen: 1. Startbereich 2. Hauptbereich 3. Spezieller Bereich für Administratoren Abbildung 2.3: Der Startbereich Dabei überschneiden sich allerdings die Bereiche für die verschiedenen Benutzerrollen. Administratoren haben Zugriff auf alle Bereiche, angemeldete Benutzer hingegen nur auf den Startbereich und den Hauptbereich. Nicht angemeldete Benutzer haben lediglich Zugriff auf den in Abbildung 2.3 dargestellten Startbereich. Die Zustände Home und Spielregeln bestehen lediglich aus HTML- Seiten, die den Benutzer über die Webanwendungen bzw. das Spiel informieren. Im Zustand Allgemeines Ranking wird auch nicht angemeldeten Benutzern die allgemeine Bestenliste des Spiels angezeigt. Die Zustände Login und Neues Login erstellen bilden den Eintrittspunkt in den Bereich für die angemeldeten Benutzer.

7 Abbildung 2.4: Der Hauptbereich des Spiels Angemeldete Benutzer haben zusätzlich Zugriffsberechtigungen auf die in Abbildung 2.4 dargestellten Bereiche. Sie können sich ihre eigene Bestenliste (History) anzeigen lassen, im Zustand Neue Frage eine neue Frage in eingeben, die in der Datenbank gespeichert wird und ihre Benutzerdaten anzeigen lassen. Im Zustand Benutzerdaten kann die Adresse sowie das Passwort geändert werden. Nachname und Vorname können (z.b. bei falscher Eingabe) nur vom Administrator geändert werden. Der einmal gewählte Benutzername kann ebenfalls nicht geändert werden, da dieser eindeutig sein muss. Im Zustand Neues Spiel starten betritt ein Benutzer - wie in Abbildung 2.4 dargestellt - den Zustand Spielen. Im Zustand Spielen kann ein Benutzer durch Anklicken des Link Neues Spiel starten ein neues Spiel starten. In dem Zustand Spiel anzeigen wird die aus der Datenbank per Zufall ausgewählte Frage des Schwierigkeitsgrades, in dem sich der Spieler befindet, angezeigt. Insgesamt gibt es 10 Schwierigkeitsstufen, beginnend bei 1. Der Spieler hat die Auswahl aus 4 Antworten. Als Hilfe zur Beantwortung der Frage stehen dem Spieler drei verschiedene Joker zur Verfügung:? Der Spieler braucht die aktuelle Frage nicht zu beantworten und ihm wird statt-

8 dessen eine andere Frage vom gleichen Schwierigkeitsgrad gestellt. 50 Dem Spieler werden zwei falsche Antworten angezeigt Dem Spieler wird eine falsche Antwort angezeigt. 75 Jeder dieser drei Joker kann im Verlauf des Spiel höchstens einmal eingesetzt werden. Durch den Klick auf Frage auswerten werden die vom Spieler ausgewählte Antwort und die ID der Frage weitergegeben und es wird anhand dieser Daten überprüft, ob die Antwort des Spielers richtig oder falsch ist. Abbildung 2.5: Der Spielablauf Ist die Antwort falsch, wird der Spieler darüber informiert, dass er eine falsche Antwort gewählt hat und ihm wird die richtige Antwort auf die Frage angezeigt. In diesem Zustand hat der Spieler nur die Möglichkeit ein neues Spiel zu starten, denn die Variablen für die aktuellen Punkte des Spielers und den aktuelle Schwierigkeitsgrad der Frage des Spiels wurden zurückgesetzt. Ist die Antwort des Spielers richtig, wird dieser im Zustand Richtige Antwort darüber

9 informiert. Hier wird auch der aktuelle Schwierigkeitsgrad und die Punktzahl des Benutzers abhängig vom Schwierigkeitsgrad der beantworteten Frage erhöht. In diesem Zustand hat der Spieler zwei Möglichkeiten. Entweder er klickt auf den Nächste Frage-Button, um das Spiel fortzusetzen, oder er kann das Spiel beenden. Setzt der Spieler das Spiel fort und wurde der Schwierigkeitsgrad 10 noch nicht erreicht, dann gelangt er wieder in den Zustand Spiele anzeigen, in welchen ihm eine neue Frage des erhöhten Schwierigkeitsgrades gestellt wird. Beim Beenden des Spiels im Zustand Richtige Antwort gelangt der Spieler in den Zustand Punkte Information. Hier erhält er eine Information über die von ihm erreichten Punkte und kann über den Link Neues Spiel starten wieder in den Zustand Spielen gelangen, um ein neues Spiel zu spielen. Im Zustand Punkte Information werden die Daten des Spiels (erreichte Punktzahl, Datum,..) in der Datenbank gespeichert und die Spielvariablen (aktuelle Punkte und aktueller Schwierigkeitsgrad) zurückgesetzt. Beim Verlassen des Spielbereichs - wenn also z.b. im Menü der Link Benutzerdaten angeklickt wird - werden ebenfalls die Spielvariablen zurückgesetzt, so dass das Spiel nicht fortgesetzt werden kann, sondern nur ein neues Spiel gestartet werden kann. Abbildung 2.6: Zustandsmodell Administrator

10 Administratoren sind normale Benutzer, die zusätzliche Rechte besitzen. Das Zustandsmodell ist in Abbildung 2.6 dargestellt. Administratoren können alle Benutzerdaten der angemeldeten Benutzer einsehen. Im Zustand Benutzer bearbeiten erhält der Administrator eine Liste aller angemeldeten Benutzer. Aus dieser Liste kann der Administrator einen Benutzer x auswählen und gelangt so in den Zustand Benutzer x, in welchem er die Daten des Benutzers ändern kann oder diesen löschen kann. Durch einen Klick auf den Link Fragen bearbeiten gelangt der Administrator in den entsprechenden Zustand, in den ihm sämtliche Fragen sortiert nach dem Schwierigkeitsgrad der Frage angezeigt werden. Wie beim Zustand Benutzer bearbeiten kann er nun eine Frage i auswählen und gelangt so in den Zustand Frage, in welchem er entweder die Daten der Frage ändern oder diese löschen kann. Über den zurück-link im Administrator-Menü wird wieder das Hauptmenü - wie in Abbildung 2.4 dargestellt - angezeigt.

11 3 Technische Realisierung 3.1 Datenmodell Sämtliche Daten über Benutzer, Fragen der verschiedenen Kategorien und erreichte Punkte werden in der mysql-datenbank sksp 077 in verschiedenen Tabellen gespeichert. Wir wollen hier eine kurze Übersicht über die von uns verwendeten Tabellen geben. Tabelle benutzer Field Type Null Key Default Extra vorname varchar(100) nachname varchar(100) varchar(100) benutzername varchar(100) PRI passwort varchar(50) admin enum( FALSE, TRUE ) FALSE Die Tabelle benutzer speichert die Stammdaten des angemeldeten Benutzers. Der benutzername ist der Primärschlüssel der Tabelle. Wenn sich ein Benutzer ein neues Login erstellt, dann wird dieser Tabelle eine neue Zeile mit den Daten des Benutzers hinzugefügt. Standardmäßig wird das Attribut admin auf FALSE gesetzt, d.h. neue Benutzer sind keine Administratoren. Nur ein Administrator kann einem Benutzer zusätzliche Administratorrechte zuweisen. Tabelle fragen (fragen 1,..., fragen 10) Field Type Null Key Default Extra id int(11) PRI NULL auto increment frage varchar(255) antwort A varchar(100) antwort B varchar(100) antwort C varchar(100) antwort D varchar(100) antwort Richtig enum( A, B, C, D ) A benutzername varchar(100) anz Richtig int(11) YES 0 anz Falsch int(11) YES 0 In den fragen-tabellen werden die Daten einer Frage, d.h. der Fragetext, die vier Antwortmöglichkeiten, die richtige Antwort, der Benutzername des Benutzers, der die Frage 11

12 gestellt hat sowie die Anzahl der richtigen und falschen Antworten auf die Frage, gespeichert. Für jeden Schwierigkeitsgrad von 1 bis 10 gibt es eine eigene Tabelle. Der Primärschlüssel einer fragen-tabelle ist eine von der Datenbank vergebene eindeutige ID. Tabelle punkte Field Type Null Key Default Extra benutzername varchar(100) PRI punkte int(11) 0 anz Spiele int(11) 0 anz Fragen beantwortet int(11) 0 letztes Spiel datetime :00:00 In der Tabelle punkte wird für die allgemeine Bestenliste die Summe aller erreichten Punkte eines Benutzers und das Datum des letzten Spiels gespeichert. Außerdem wird die Anzahl der richtig beantworteten Fragen und die Anzahl der Spiele des Benutzers gespeichert. Primärschlüssel ist der Benutzername. Tabelle punkte benutzer Field Type Null Key Default Extra id int(11) PRI NULL auto increment punkte bigint(50) 0 anz fragen beantwortet int(11) 0 datum datetime :00:00 Für jeden Benutzer wird eine Tabelle punkte benutzername angelegt, in der die Spielergebnisse jedes vom Benutzer erfolgreich beendeten Spiels gespeichert werden. Gespeichert werden die erreichten Punkte, die Anzahl der Fragen, die in dem Spiel richtig beantwortetet wurden, sowie das Datum des Spiels. Der Primärschlüssel ist eine eindeutige ID. 3.2 Übersicht der Programmstruktur Für die technische Realisierung der Webanwendung haben wir hauptsächlich PHP, HTML und eine mysql-datenbank benutzt. Die Programmstruktur der Webanwendung zeigt die Abbildung 3.1. Dabei wird der gesamte Ablauf der Webanwendung in der index.php Datei gesteuert. Hier wird geprüft, welche Requestvariablen gesetzt sind und dann die entsprechenden Funktionen,die in der functions.php Datei implementiert sind, aufgerufen. Zum Beispiel wird bei einem Klick auf Login die Requestvariable login gesetzt und dann in der index.php-datei die Funktion show loginform() aus der functions.php-datei aufgerufen. Der Benutzer der Webanwendung ruft also eigentlich während der Benutzung der Anwendung immer wieder die index.php-datei (mit unterschiedlichen Requestvariablen)

13 auf, was durch den roten Pfeil in Abbildung 3.1 dargestellt ist. Die schwarzen Pfeile stellen Funktionsaufrufe bzw. das Einfügen der include Dateien dar. In der functions.php-datei gibt es Funktionen zur Verbindung mit der Datenbank und den Operationen auf der Datenbank. Kompliziertere Berechnungen, z.b beim Spielablauf, werden ebenfalls hauptsächlich hier ausgeführt. Hingegen wird das Layout der Webanwendung über HTML-Dateien generiert, die in Form von include-dateien vorliegen. Diese werden ebenfalls von den Funktionen aus der functions.php Datei eingefügt. Beispielsweise wird beim Aufruf show loginform() die Datei loginform.inc eingefügt, die das HTML-Formular für das Loginformular beinhaltet. Das Hauptlayout wird durch Einbindung der header.inc Datei für den Kopf der Seite Abbildung 3.1: Die Programmstruktur mit den Menüleisten und dem Logo sowie der footer.inc Datei für das Ende der Seite mit der Copyrightangabe aufgebaut. Für die Darstellung wird zusätzlich das kurze Stylesheet style.css benutzt. Zwischen dem Einbinden dieser include-dateien werden dann die include Dateien für die einzelnen Zustände der Anwendung (Login, Spielen, Benutzerdaten bearbeiten...) eingebunden. Auf diese Weise konnte der Programmcode möglichst gut vom Inhalt und Layout der Anwendung getrennt werden, auch wenn dies nicht in allen Fällen möglich war. Bei-

14 spielsweise finden innerhalb einiger include-dateien auch Funktionsaufrufe statt, um sich Daten von der Datenbank zu holen, die für die Ausgabe benötigt werden. Zur Anzeige von Informationen über eine Frage die während des Spiels beantwortet werden soll, wird Javascript benutzt. Die Funktion show frage info(), die ein Popup-Fenster mit den Informationen über die Frage öffnet, wird im Skriptbereich der header.inc Datei definiert. Die Session-Verwaltung für eingeloggte Benutzer haben wir mit Hilfe von PHP- Mechanismen realisiert. Dabei wird bei jedem Einloggen eines Benutzers eine neue Session gestartet und Sessionvariablen für den Benutzernamen und das Passwort angelegt. Diese Variablen werden während der Benutzung der Anwendung gebraucht, um die Zugangsberechtigung zu den einzelnen Bereichen des Mitgliederbereichs zu überprüfen. Für das Spiel werden ebenfalls Sessionvariablen angelegt, z.b. die aktuellen Punkte des Benutzers oder den aktuellen Schwierigkeitsgrad für die Frage, die dem Benutzer gestellt werden soll. Diese werden nach Beenden des Spiels wieder auf ihre Standardwerte zurückgesetzt.

15 4 Zusammenfassung 4.1 Was wurde erreicht? Wir haben mit Hilfe der Skriptsprache PHP und einer mysql Datenbank eine dynamische Webanwendung erstellt. Dabei haben wir die in der Vorlesung vorgestellten Konzepte benutzt. Das von uns erstellte Multiple-Choice Spiel names Das Multiple Choice Quiz erfüllt alle geforderten Funktionen der Aufgabenstellungen. Die Webanwendung ist unter installiert. http : //www wbs.upb.de/sksp/sksp 077/quiz/index.php 4.2 Erweiterungsmöglichkeit Als Erweiterung wäre noch ein zusätzlicher Joker denkbar, der - basierend auf den bisherigen Antworten anderer Benutzer auf eine Frage - dem Spieler mit einer gewissen Wahrscheinlichkeit einen Hinweis auf die richtige Antwort geben kann. Zu Beginn (wenn also eine Frage noch nie beantwortet wurde) würden alle Antworten einer Frage auf die Wahrscheinlichkeit 0.25 gesetzt werden. Wenn ein Benutzer diese Frage spielt, würde seine Antwort die Wahrscheinlichkeit für diese Antwortmöglichkeit erhöhen und die der anderen drei Antwortmöglichkeiten verringen. Um einen solchen Joker zu realisieren müsste man entweder die fragen-tabellen um vier Spalten erweitern, in denen die Anzahl der abgegebenen Antworten für die vier Antwortmöglichkeiten von A bis D abgespeichert werden, oder aber man würde eine neue Tabelle erstellen, die für jede Frage eine eindeutige ID als Schlüsselattribut besitzt und die Anzahlen der Antwortmöglichkeiten A bis D speichert. Aus Zeitgründen konnten wir einen solchen Joker unserem Spiel nicht mehr hinzufügen. 15