Quiz der anderen Art
Sechs Fragen, ein Lückentext: Aus euren Antworten baut das Script eine kleine Nachrichtenmeldung zusammen — mit meist unfreiwillig komischem Ergebnis.
Potterfans hat mal wieder ein Script geschickt. Dabei handelt es sich um eine Art Quiz, das gar kein richtiges Quiz ist: Nach einem Klick auf den Start-Knopf werden euch sechs Fragen gestellt — von leichtem Kopfrechnen bis zu Erdkunde-Wissen. Ob eure Antworten stimmen, verrät euch aber keine Punktzahl, sondern der Text, der am Ende erscheint.
Der Trick: Eure sechs Antworten werden in einen vorbereiteten Lückentext eingesetzt, einen angeblichen Ausschnitt aus der Tagesschau. Die unterstrichenen Wörter darin sind eure Eingaben — je nachdem, was ihr eingebt, liest sich die Meldung halbwegs vernünftig oder herrlich absurd. So sieht das Ergebnis bei jedem Durchlauf anders aus. Das Prinzip kennt man aus dem Partyspiel „Mad Libs", bei dem Wörter blind in eine Geschichte eingesetzt werden.
Kleine Zeitkapsel am Rande: Das Script stammt aus dem Jahr 2008, als eine der Fragen nach dem Beruf von Angela Merkel noch tagesaktuell war — wir haben sie originalgetreu gelassen.
Ein klassisches Frage-Antwort-Quiz mit Auswertung findet ihr unter Quiz, weitere Kopfnüsse gibt es bei den Scherzfragen. Vom selben Einsender stammt übrigens auch der Dreisatz-Rechner im Fach Mathematik.
Quiz der etwas anderen Art
Die sechs Fragen erscheinen in Dialogfenstern des Browsers; der fertige Text landet danach hier.
So funktioniert das Script
Das Script ist angenehm überschaubar: Eine einzige Funktion stellt nacheinander die sechs Fragen, merkt sich die Antworten in Variablen und setzt sie zum Schluss in den Lückentext ein. Verbunden wird sie mit dem Start-Knopf — das Original erzeugte Knopf und Ausgabebereich noch per document.write(), heute stehen beide einfach als ganz normales HTML auf der Seite.
const zwei = prompt("Welcher Staat ist am Mittelmeer?", "Sp");
const fuenf = prompt("Wie heißen die Personen in Rathäusern?", "P");prompt() öffnet ein kleines Eingabefenster und liefert den eingetippten Text zurück, der hier gleich in einer Variablen landet. Interessant ist der zweite Parameter: Er belegt das Eingabefeld vor. Potterfans nutzt das als Hilfestellung — bei der Mittelmeer-Frage steht schon „Sp" im Feld, die erwartete Antwort beginnt also mit diesen Buchstaben. Eine charmante Art, Tipps zu geben, ohne die Lösung zu verraten.
document.getElementById("qda-ergebnis").innerHTML =
"Ausschnitt aus der Tagesschau. Die Wahlen in <u>" + drei +
"</u>, der Hauptstadt von <u>" + zwei + "</u>, brachten ...";Hier entsteht der Lückentext: Mit dem +-Operator werden feste Textstücke und die sechs Antwort-Variablen zu einem langen Text zusammengeklebt und per innerHTML in die Ergebnisfläche geschrieben. Jede Antwort steckt dabei in <u>…</u>-Tags und erscheint dadurch unterstrichen — so erkennt man auf einen Blick, welche Wörter aus den eigenen Eingaben stammen. Man beachte auch die Dramaturgie: Die Antworten tauchen im Text in anderer Reihenfolge auf, als sie abgefragt wurden.
document.getElementById("qda-start").addEventListener("click", starteQuiz);Zum Schluss wird die Funktion mit dem Knopf verbunden: addEventListener("click", …) sorgt dafür, dass starteQuiz() bei jedem Klick läuft. Das Script steht dafür unter dem Markup, damit Knopf und Ergebnisfläche bereits existieren, wenn es ausgeführt wird.
Zum Anpassen: Genau hier liegt der Reiz dieses Scripts — schreibt euren eigenen Lückentext! Ersetzt die Fragen in den prompt()-Aufrufen und baut den Ausgabetext passend um; mit weiteren Variablen (const sieben = prompt(…)) lässt sich das Quiz beliebig verlängern. Je harmloser die Fragen und je absurder der Text, desto größer der Spaß.
Script für die eigene Homepage
Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.