Scherzfragen
48 Scherzfragen zum Miträtseln — die Lösung erscheint erst auf Knopfdruck.
Unser User Juli10000 schickte uns diese große Sammlung von Scherzfragen — kurze Rätselfragen, deren Lösung fast immer ein Wortspiel ist. Rein JavaScript-technisch gehört das Script zu den einfachsten im Archiv, aber genau deshalb eignet es sich gut zum Lernen: Ihr seht hier, wie man eine lange Frage-Antwort-Liste mit ein paar Zeilen Code aufbaut, statt jede Frage einzeln ins HTML zu tippen.
Die Bedienung ist denkbar einfach: Unter jeder Frage sitzt ein Knopf „Lösung". Ein Klick blendet die Antwort direkt unter der Frage ein, ein weiterer Klick verbirgt sie wieder — so könnt ihr erst selbst raten, bevor ihr nachschaut. Im Original öffnete jede Lösung ein eigenes alert()-Fenster; die modernisierte Fassung zeigt sie stattdessen in der Seite an.
Scherzfragen leben vom Doppelsinn: Ein Wort wie „Fleischwolf" oder „Zaunkönig" wird wörtlich genommen, und genau daraus entsteht die Pointe. Deshalb funktionieren viele dieser Fragen nur auf Deutsch — übersetzt geht das Wortspiel verloren.
Wer lieber richtige Witze mag, findet nebenan die Witze des Tages; wer sein Wissen ernsthafter testen will, kann sich am Quiz versuchen.
So funktioniert das Script
Das Script besteht aus zwei Teilen: einer Datenliste mit allen Fragen und Antworten sowie einer Schleife, die daraus die Absätze und Knöpfe im Browser zusammenbaut. Das HTML selbst enthält nur einen leeren Container <div id="sf-liste"></div> — alles andere erzeugt JavaScript. Der Vorteil: Für 48 Fragen müsste man sonst fast 100 Absätze von Hand schreiben.
const fragen = [
{ f: "Was ist der Unterschied zwischen einem Bäcker und einem Teppich?",
a: "Der Bäcker muss morgens früh um halb 4 aufstehen. …" },
// … weitere Einträge …
];Die Daten stecken in einem Array (einer Liste) aus Objekten. Jedes Objekt hat zwei Eigenschaften: f für die Frage und a für die Antwort. So bleiben Inhalt und Technik sauber getrennt — wer eine Frage ändern will, muss nur diese Liste anfassen und keinen einzigen HTML-Tag.
fragen.forEach(function (eintrag, i) {
const frage = document.createElement("p");
frage.textContent = (i + 1) + ") " + eintrag.f;forEach ruft die übergebene Funktion einmal pro Listeneintrag auf und liefert dabei den Eintrag selbst (eintrag) und seine Position i mit. Weil Arrays bei 0 zu zählen beginnen, wird für die sichtbare Nummer i + 1 ausgegeben. Die Nummerierung entsteht also automatisch — löscht oder ergänzt ihr eine Frage, stimmen alle Nummern trotzdem weiter.
const antwort = document.createElement("strong");
antwort.textContent = " " + eintrag.a;
antwort.hidden = true;
knopf.addEventListener("click", function () {
antwort.hidden = !antwort.hidden;
});Die Antwort wird sofort als <strong>-Element angelegt, aber mit hidden = true unsichtbar geschaltet — hidden ist eine eingebaute Eigenschaft, die jedes HTML-Element verstecken kann. Der Klick-Handler dreht den Wert mit dem Ausrufezeichen (! bedeutet „nicht") jeweils um: aus versteckt wird sichtbar und umgekehrt. So funktioniert derselbe Knopf zum Einblenden und zum Verbergen.
zeile.appendChild(knopf);
zeile.appendChild(antwort);
liste.appendChild(frage);
liste.appendChild(zeile);appendChild hängt ein erzeugtes Element an ein anderes an — erst Knopf und Antwort in die Antwortzeile, dann Frage und Antwortzeile in den Container. Weil die Texte per textContent gesetzt werden, ist das auch sicher: Selbst Sonderzeichen in einer Antwort werden als Text angezeigt und nicht als HTML interpretiert.
Zum Anpassen: Eigene Scherzfragen ergänzt ihr, indem ihr der Liste ein weiteres Objekt nach dem Muster { f: "Frage?", a: "Antwort." } hinzufügt — Komma zwischen den Einträgen nicht vergessen. Die Nummerierung und die Knöpfe erledigt das Script von selbst.
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.