1. Aktuelle Seite:  
  2. Home
  3. Unterricht
  4. Aufgabenfeld C
  5. Informatik
  6. Javascript
  7. Quiz programmieren 2

Quiz programmieren 2

Programmieren mit JavaScript

Siehe dir die Lösung zu Quiz 01 an, erstelle eine neue Datei mit dem Namen Quiz-02.html, in die du dann erst den HTML-Code von der letzen Stunde und dann die JavaScript-Funktionen aus der Lösung einfügst.

Eine neue Frage vorgeben

Neue Fragen müssen folgende Informationen enthalten:

  • Frage
  • Antwortmöglichkeit 1
  • Antwortmöglichkeit 2
  • Antwortmöglichkeit 3
  • Antwortmöglichkeit 4
  • Nummer der richtigen Antwort

Diese Gruppe von Informationen beeichnet man auch als Datensatz. In einer Tabelle würde man das entsprechend als eine Zeile ansehen. 

Die einfachste Methode, solche Datensätze zu speichern, ist es, in einer Zeile jeweils einen Datensatz zu speichern und die einzelnen Daten mit einem bestimmten Symbol zu trennen. Häufig wird hierfür ein Komma oder ein Semikolon verwendet. Solche Dateien werden dann auch als CSV-Dateien (Comma seperated values) bezeichnet. Prinzipiell kann aber jedes beliebige Zeichen, dass innerhalb der Daten nicht vor kommt, verwendet werden. Hier ein Beispiel für einen so kodierten Datensatz:

Wo findet man ein Mainboard?;am Strand;im Computer;in der Küche;im Baumarkt;2

Um diese Zeilen in ein verarbeitbares Format zu bringen, kann man die Zeile mit der Anweisung aDatensatz =vZeile.split(';') aufspalten. Man erhält dann ein Datenfeld (Array), das die folgenden Werte enthält:

  • aDatensatz[0] enthält Wo findet man ein Mainboard?
  • aDatensatz[1] enthält am Strand
  • aDatensatz[2] enthält im Computer
  • aDatensatz[3] enthält in der Küche
  • aDatensatz[4] enthält im Baumarkt
  • aDatensatz[5] enthält 2 (die Nummer der richtigen Antwort aDatensatz[2])

Mit Datenfeldern kann man Informationen leichter organisieren. 

  • Datenfelder bestehen aus einer Gruppe von Informationen, die der Zeile einer Tabelle entsprechen.
  • Datenfelder werden in Variablen des Typs Array abgelegt: var aArray = new Array ();
  • Der Zugriff auf die einzelnen Elemente erfolgt mit einer Nummerierung, die mit Null startet.
  • Datenfelder werden können direkt zugewiesen oder mit der Anweisung split(';') erzeugt werden: aDatensatz = vZeile.split(';');

Aufgabe 1: Um das Quiz verschiedene Fragen anzeigen zu lassen, soll nun die Anzeige der Frage in der Funktion weiter() zu einer Funktion zeige_Frage(vFrage) umgeschrieben werden werden. Die Funktion muss dann nur noch einen Aufruf der neuen Funktion enthalten:

zeige_Frage('Wo findet man ein Mainboard?;am Strand;im Computer;in der Küche;im Baumarkt;2');

  • Die Funktion soll also die Frage als Textzeile mit Daten, die mit ; getrennt sind, übernehmen, dann 
  • die Textzeile dann mit der Split-Funktion in ein Datenfeld umwandeln und schließlich
  • die Daten den passenden Formularfeldern zuweisen. 
  • Außerdem muss noch irgendwie festgehalten werden, welche Antwort die richtige ist. Lege dazu außerhalb der Funktion eine Variable vRichtigeAntwort an und weise ihr innerhalb der Funktion den passenden Wert (hier die aDatensatz[5]) zu.

Weitere Fragen stellen

Um weitere Fragen stellen zu können, brauchen wir weitere Datensätze. In der oben abgebildeten Tabelle müssten also weitere Zeilen hinzugefügt werden. 

Diese Datensätze könnte man aus einer Textdatei zeilenweise einlesen und dann entsprechend verarbeiten. In JavaScript ist das jedoch leider nicht so ohne weiteres möglich. Wir behelfen uns hier damit, die Fragen in einem vordefinierten Array abzulegen und sie von dort aus abzurufen. Übernimm die unten angegebenen Fragen in dein Programm: 

var aFragen = new Array(„Seit wann gibt es keinen Kaiser mehr in Deutschland?;seit 1914;seit 1916;seit 1918;seit 1933;3“, „Wer war Franz Kafka?;Ein Sänger;Ein Schriftsteller;Ein Musiker;Ein Maler;2“, „Wie schnell kann ein Elefant bei Gefahr laufen?;ca 30 km/h;ca 40 km/h;ca 50 km/h;ca. 60 km/h;2“, „Wie hieß der erste Hund im Weltall?;Kira;Lusi;Nora;Laika;4“, „Aus welcher Stadt stammen die Beatles?;London;Liverpool;Glasgow;Manchester;2“,„Wie heißt die Hauptstadt Indiens?;Mumbay;Neu-Dehli;Bangkok;Basra;2“);

Was hier so schrecklich unübersichtlich aussieht ist nichts anderes als ein Datensatz aFragen, der sechs Fragen mit zugehörigen Antworten und der Lösung enthält. Nach dem gleichen Schema wie bei Aufgabe 1 kannst du diese Datensätze auslesen. 

aFragen[0] enthält die Zeile Seit wann gibt es keinen Kaiser mehr in Deutschland?;seit 1914;seit 1916;seit 1918;seit 1933;3aFragen[1] enthält die Zeile Wer war Franz Kafka?;Ein Sänger;Ein Schriftsteller;Ein Musiker;Ein Maler;2

Genau diese Art von Zeile kann die in Aufgabe 1 erstellte Funktion zeige_Frage(vZeile) bereits verarbeiten.

Aufgabe 2: Das Programm soll nun verschiedene Fragen anzeigen können.

  • Lege dazu eine Variable vRunde als Zähler an. Diese muss global sein und bei Programmstart den Wert 0 erhalten.
  • Ändere in der Funktion next() den Aufruf der Funktion zeige_Frage() in zeige_Frage(aFragen[vRunde]).
  • Anschließend muss der Wert der Variable vRunde um den Wert 1 erhöht werden.
  • Überlege dir, was das Programm tun soll, wenn die letzte Frage bereits gestellt wurde. Versuche, eine Lösung umzusetzen.