Programmieren Sie einen einfachen Quiz!

Quizduell.png
QuizduellRunden.png
QuizduellGewonnen.png
QuizduellStart.png
QuizduellKategorien.png
z.B. einen Quiz
Vereinfachte Regeln bedeutet, dass nicht alle Features realisiert werden müssen,
z.B. Statistik, mehrere Spiele, Kategorienauswahl und Timeout können erst einmal entfallen!
Im Konzept und für die Seite mit den Spielregeln müssen sich z.B. überlegen, ob
  • die Spieler die gleichen Fragen bekommen sollen,
  • wie viele Fragen präsentiert werden,
  • ob die Spieler abwechselnd an der Reihe sind oder abwechselnd etc.
Erstellen Sie zusätzlich zwei weitere Seiten mit
  • einer Spielanleitung sowie
  • einem Impressum
und verlinken Sie diese Seiten auf Ihrer Spielseite!

Zeitplan

Datum
Thema
Hausaufgabe
19.5.14
Einführung in das Projekt, Erstellung des Konzepts und ggf. der HTML-Seiten
Fertigstellung und Einreichung des Konzepts
26.5.14
Freigabe der Konzepte, Programmierung der HTML-Seiten inkl. CSS und ggf. Javascript
Fertigstellung HTML, CSS
2.6.14
Abgabe HTML/CSS, Freigabe der HTML/CSS- Seiten,
Javascript-Programmierung, Schwierigkeiten klären
Fortsetzung Programmierung
9.6.14
fällt aus wg. Pfingsten
Fortsetzung Programmierung
16.6.14
Fertigstellung der Projekte, Präsentation und und Bewertung


Bewertungskriterien

Generelle Bewertungskriterien siehe http://javascriptbasics.wikispaces.com/Bewertungskriterien
Spezielle Bewertungskriterien für dieses Projekt:
Entwurf und Quelltext
maximal 100 Punkte ereichbar
Punkte

Konzept entsprechend Vorgaben
(s. Kapitel Konzept), ca. 2 DIN A4 Seiten
20

Übersichtlichkeit,
korrektes Einrücken,
sinnvolle Variablenbezeichner,
Kommentare vorhanden
10

Ausschliesslich Seiten-Formatierung
mittels CSS
5

CSS
Quelltext-Auslagerung
2

Javascript
Quelltext-Auslagerung
2

Bildgröße ggf. maximal
200x200 Pixel
1
Funktion und Benutzerführung



Spiel funktioniert, Programm läuft
(Punktabzug für Fehler,
0P. wenn nicht lauffähig)
10

Anzahl der Spiele, Punktestand und Highscore
werden ggf. entsprechend Konzept angezeigt
10

Intuitive, leichte Bedienbarkeit mit
wenigen Eingabeaufforderungen
10

Korrektes Impressum sowie zutreffende
Spielanleitung sind vorhanden und ohne
Rechtschreibfehler
10
Gestaltung



Alle Texte sind gut lesbar
(Größen! Farbwahl!)
Formularelemente müssen ggf. korrekt
beschriftet und übersichtlich angeordnet sein,
harmonische Farbgestaltung mit Farben,
welche im Farbkreis nebeneinander liegen.
10

Einheitliches Aussehen aller zum Projekt
gehörigen Seiten. Mindestens 3 Seite vorhanden
entsprechend Vorgabe. Eigener Stil erkennbar.
Keine abgekupferten Seiten aus dem Internet.
10

Konzept

Im Konzept wird z.B. folgendes beschrieben ...
  1. Legen Sie vor Beginn der Arbeit schriftlich fest, welche Spielregeln für Ihr Programm gelten!
  2. Wie viele Spieler können sich beteiligen?
  3. Müssen sich die Mitspieler anmelden oder gibt es Bezeichnungen wie z.B. Spieler1 bzw. Spieler2?
  4. Werden die fortlaufenden Spiele nummeriert angezeigt?
  5. Wie viele Spiele können gleichzeitig ausgeführt werden?
  6. Wie wird er Punktestand ermittelt? Gibt es eine Highscore-Anzeige?
  7. Gibt es Fragekategorien (Freizeit, Politik, Sport, ...)?
  8. Wie viele Fragen gibt es? Wie viele Antwortmöglichkeiten gibt es zu jeder Frage?
  9. Wie lange hat der Spieler Zeit zu antworten? Gibt es einen Timeout, wenn nicht rechtzeitig geantwortet wurde?

Das Konzept beschreibt darüberhinaus, wie das zukünftige Spiel aussehen soll.
Es enthält Angaben z.B. zu
  1. verwendeten Formularen
  2. Schaltflächen
  3. benötigten Daten
  4. farblicher Gestaltung
  5. Größen von Bereichen in Pixeln
  6. ggf. Anzahl benötigter HTML-Seiten
  7. ...

Daten

Ein Quiz ist nur richtig gut, wenn der Fragenkatalog beliebig erweitert werden kann.
Hierfür wird die folgende Ablage von Fragen, Auswahlmöglichkeiten und Lösungen vorgeschlagen:

Erweiterbares Fragen-Array:
var fragen = new Array( "Welche der folgenden ist keine spielbare Rasse im Spiel 'World of Warcraft'"
                      , "Wie heisst das Google-Smartphone, das im Herbst 2013 vorgestellt wurde?"
                      , "Wie heißt die Allradtechnik von Audi?"
                      );
Auswahl-Array mit jeweils vier Antworten zu jeder Frage:
var auswahl = new Array( "Dämon",           "Zwerg",         "Troll",    "Pandare"
                       , "Flexus 6",        "Nexus 5",       "Lexus 3",  "Plexus 4"
                       , "All Wheel Drive", "4 Wheel Drive", "Quattro",  "Audi hat kein Allradsystem"
                       );
Lösungs-Array mit den Indexen der richtigen Antwort-Felder zu den 3 Fragen:
var loesungen = new Array( 0, 5, 10 );

Tipps
  • Halten Sie das Konzept möglichst einfach, z.B. immer nur ein Spiel zur Zeit, maximal 2 Spieler, ...!
  • Voraussetzungen zur Lösung dieser Aufgabe: HTML, CSS, Formulare, Zufallszahlen, Arrays, ...
  • Gehen Sie schrittweise vor! Überlegen Sie sich, wie Sie das Programm nach und nach aufbauen!

Seiten mit Javascript-Quiz-Beispielen (und Ideen für Fragestellungen)

  1. Anregungen für Quizspiele gibt es z.B. hier: http://www.quizshow-trainingslager.de/
  2. http://www.zeit.de/studium/uni-leben/2014-02/studium-generale-grafikdesign-2?&neu.x=0&neu.y=0
    Ein mögliches Quiz-Formular sieht hier im Quelltext so ungefähr wie folgt aus:
    ...
    <h1>Welche der folgenden Schriften hat keine Serifen?</h1>
    <form name="quiz">
      <p><input type="radio" id="input_1" name="answer" value="1">Didot</p>
      <p><input type="radio" id="input_2" name="answer" value="2">Baskerville</p>
      <p><input type="radio" id="input_3" name="answer" value="3">Futura</p>
      <input type="hidden" name="correct" value="3">
      <p><button id="weiter" name="weiter">Weiter</button></p>
    </form>
    ...