MINT lernen

Interaktive Webseite bauen

Zwei Textaufgaben mit Hinweisen und Erwartungshorizont — einen Vokabeltrainer planen und ein Zahlenratespiel reparieren.

Dein Fortschritt:
0 / 0 Aufgaben
1

Einen Vokabeltrainer planen

AFB I–II

Ein Vokabeltrainer soll ein deutsches Wort zeigen. Man tippt die englische Übersetzung ein und klickt „Prüfen“. Richtig: grüne Meldung und ein Punkt mehr. Falsch: rote Meldung mit der Lösung.

  1. Nenne für jede der drei Dateien, was in ihr umgesetzt wird.
  2. Entwirf das HTML-Gerüst des body mit sinnvollen ids.
  3. Beschreibe mit dem Muster „Ereignis → Zustand → Anzeige“, was bei einem Klick auf „Prüfen“ passiert.

Hinweise

Hinweis zu Aufgabe a)
Inhalt, Aussehen, Verhalten.
Hinweis zu Aufgabe b)
Welche Elemente braucht JavaScript später?
Hinweis zu Aufgabe c)
Welche Variable ist der Zustand?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

HTML: Wort-Anzeige, Eingabefeld, Knopf, Meldung, Punktestand. CSS: Farben (grün/rot über Klassen), Schriftgrößen, Abstände. JavaScript: Listener am Knopf, Eingabe lesen und vergleichen, Punkte zählen, Meldung und Punkte anzeigen.

Erwartungshorizont zu Aufgabe b)

z. B. <p id="wort">Hund</p> <input type="text" id="eingabe"> <button id="pruefen">Prüfen</button> <p id="meldung"></p> <p>Punkte: <span id="punkte">0</span></p>

Erwartungshorizont zu Aufgabe c)

Ereignis: Klick auf #pruefen ruft die Funktion auf. Zustand: Eingabe lesen und mit der Lösung vergleichen; bei richtig wird die Variable punkte um 1 erhöht. Anzeige: Meldungstext setzen, Klasse richtig bzw. falsch für die Farbe, Punktestand im span aktualisieren.

2

Zahlenraten

AFB II–III

Der Computer denkt sich eine Zahl von 1 bis 100, man rät per Eingabefeld. Math.floor(Math.random() * 100) + 1 liefert eine zufällige ganze Zahl von 1 bis 100. Emma schreibt:

knopf.addEventListener("click", raten);
function raten() {
  let geheim = Math.floor(Math.random() * 100) + 1;
  let tipp = Number(feld.value);
  if (tipp === geheim) {
    ausgabe.textContent = "Richtig!";
  } else if (tipp < geheim) {
    ausgabe.textContent = "Zu klein";
  } else {
    ausgabe.textContent = "Zu groß";
  }
}
  1. Beschreibe, was passiert, wenn man zweimal hintereinander 50 eingibt und prüft.
  2. Überprüfe das Programm und erkläre, warum man mit geschicktem Raten trotzdem nie sicher zum Ziel kommt.
  3. Entwickle eine verbesserte Fassung, die außerdem die Anzahl der Versuche zählt und bei einem Treffer ausgibt.

Hinweise

Hinweis zu Aufgabe a)
Wann wird die Geheimzahl erzeugt?
Hinweis zu Aufgabe b)
Kann man sich einer Zahl nähern, die sich ständig ändert?
Hinweis zu Aufgabe c)
Welche Werte müssen den Aufruf überleben?

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

Bei jedem Klick wird eine neue Zufallszahl erzeugt. Beide Rückmeldungen können deshalb verschieden sein, z. B. erst „Zu klein“, dann „Zu groß“ — obwohl dieselbe Zahl eingegeben wurde.

Erwartungshorizont zu Aufgabe b)

Die Geheimzahl ist eine lokale Variable in raten und wird bei jedem Aufruf neu gewürfelt. Hinweise wie „Zu klein“ beziehen sich immer auf eine andere Zahl; eine Suche durch Halbieren funktioniert so nicht, Treffer sind reiner Zufall.

Erwartungshorizont zu Aufgabe c)

let geheim = Math.floor(Math.random() * 100) + 1; und let versuche = 0; vor die Funktion. In raten: versuche = versuche + 1;, dann vergleichen; bei Treffer ausgabe.textContent = "Richtig nach " + versuche + " Versuchen!";