Ich sehe was

So funktioniert das Script

Das Script kommt mit erstaunlich wenig aus: zwei Listen, eine Zufallszahl und zwei kurze Funktionen. Die eine stellt die Frage, die andere prüft die Antwort. Alles steckt in einer sofort ausgeführten Funktion, damit die kurzen Variablennamen keinem anderen Script auf der Seite in die Quere kommen.

const x = ["Haus", "Haustür", "Schornstein", "Baumstamm", …];
const y = ["braun", "schwarz", "schwarz", "braun", …];

Das sind zwei Arrays — nummerierte Listen. Die eine enthält die Gegenstände, die andere ihre Farben, und zwar an derselben Stelle: Position 0 ist das braune Haus, Position 2 der schwarze Schornstein. Man nennt das parallele Listen; sie sind der einfachste Weg, zwei zusammengehörende Datenreihen zu verwalten. Wichtig ist nur, dass ihr beide Listen immer gemeinsam ändert, sonst rutscht die Zuordnung durcheinander.

const xy = x.length;
let yx = Math.floor(Math.random() * xy);

x.length ist die Anzahl der Einträge, hier also 11. Weil die Nummerierung bei 0 beginnt, laufen die gültigen Positionen von 0 bis 10 — die 11 selbst gibt es nicht. Deshalb ist hier Math.floor genau richtig: Es schneidet die Nachkommastellen ab und liefert damit nie mehr als 10. Mit Math.round würde gelegentlich eine 11 herauskommen, und das Script griffe ins Leere.

function xder() {
  frage.textContent = "Ich sehe was was du nicht siehst, und das ist " + y[yx];
}

xder() stellt die Frage. Sie nimmt die aktuelle Zufallsposition yx und holt sich daraus die Farbe aus der zweiten Liste. Die Lösung — der Gegenstand an derselben Position in der ersten Liste — bleibt dabei unsichtbar im Speicher. Die Funktion wird an zwei Stellen aufgerufen: einmal beim Laden und dann bei jeder richtigen Antwort.

if (w === x[yx] || w === x[yx].toLowerCase()) {
  ausgabe.textContent = "Richtig!";
  yx = Math.floor(Math.random() * xy);
  feld.value = "";
  xder();
}

Die Prüfung erlaubt zwei Schreibweisen: das Wort genau wie in der Liste („Haus") oder komplett kleingeschrieben („haus"). Das senkrechte Doppelstrich-Zeichen || heißt „oder" — es genügt, wenn eine der beiden Bedingungen zutrifft. Bei einem Treffer wird sofort eine neue Position ausgewürfelt, das Eingabefeld geleert und die nächste Frage gestellt.

xder();
document.getElementById("isw-pruefen").addEventListener("click", test);

Zum Schluss zwei Zeilen Aufbau: Die erste Frage wird gestellt, und der Knopf bekommt seinen Zuhörer. Weil das Script unter dem Markup steht, existieren Bild, Feld und Knopf bereits, wenn diese Zeilen laufen.

Zum Anpassen: Das Bild steht im HTML und lässt sich dort austauschen. Danach müsst ihr beide Listen neu füllen — für jeden Gegenstand einen Eintrag in x und die passende Farbe an derselben Stelle in y. Die Listen dürfen beliebig lang sein, x.length rechnet die Anzahl von selbst aus. Wollt ihr auch Antworten wie „HAUS" gelten lassen, vergleicht ihr stattdessen w.toLowerCase() === x[yx].toLowerCase().