Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [2024/03/07 19:13]
Ivo Blöchliger [Zahlenraten]
+++ lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [2024/04/05 12:30]
Ivo Blöchliger [Interaktion mit HTML]
@@ Line 1: / Line 1: @@
 ====== Interaktion mit HTML ======
-Der HTML-Code einer Webseite kann mit JavaScript komplett kontrolliert werden, d.h. verändert, ergänzt, geschlöscht oder erzeugt werden. Auch sind Reaktionen auf Benutzereingaben möglich.
+Der HTML-Code einer Webseite kann mit JavaScript komplett kontrolliert werden, d.h. verändert, ergänzt, gelöscht oder erzeugt werden. Auch sind Reaktionen auf Benutzereingaben möglich.
 ===== Einführungsbeispiel =====
@@ Line 25: / Line 25: @@
 </html>
 </code>
 <code javascript intro.js>
 let anzahl = 0;
@@ Line 44: / Line 45: @@
 Voraussetzung: Sie haben den die Aufgabe [[lehrkraefte:blc:informatik:ffprg1-2024:random#buchstaben_in_woertern_vertauschen|Verwürfeln eines Texts]] schon gelöst oder zumindest gut verstanden.
   * Legen Sie ein neues Verzeichnis an. Darin speichern Sie folgende HTML-Datei:
-<code html>
+<code html index.html>
-<!DOCTYPE html index.html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
@@ Line 63: / Line 64: @@
 </html>
 </code>
-</WRAP>
-Die JavaScript-Datei enthält den Code zum [[lehrkraefte:blc:informatik:ffprg1-2024:random#buchstaben_in_woertern_vertauschen|Verwürfeln eines Texts]] plus folgende Funktion:
+Die JavaScript-Datei ''buchstabensalat.js'' enthält den Code zum [[lehrkraefte:blc:informatik:ffprg1-2024:random#buchstaben_in_woertern_vertauschen|Verwürfeln eines Texts]] plus folgende Funktion:
 <code javascript buchstabensalat.js>
 //
@@ Line 72: / Line 72: @@
 //
 //
-function verwuerfeln() {
+function verwuerfeln() { // Wird aufgerufen, wenn der Knopf gedrückt wird.
     let eingabe = document.getElementById("eingabe");
     let ausgabe = document.getElementById("ausgabe");
@@ Line 86: / Line 86: @@
 <WRAP todo>
   * Legen Sie ein neues Verzeichnis ''zahlenraten'' an und darin zwei Dateien ''index.html'' und ''raten.js''.
+  * Kopieren Sie folgende html-Datei:
+<code html index.html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="raten.js"></script>
+    <title>Zahlenraten</title>
+</head>
+<body>
+    <h1>Zahlenraten</h1>
+    <p>Ich habe mir eine Zufallszahl zwischen 0 und 99 gemerkt. Errate Sie!</p>
+    <p><input type="number" id="raten"><button onclick="pruefen()">Prüfen!</button></p>
+    <p id="ergebnis"></p>
+</body>
+</html>
+</code>
+  * Die JavaScript-Datei könnte wie folgt aussehen:
+<code javascript raten.js>
+// Globale Variablen
+let geheim = 0;
+let anzahl = 0;
+function neueZahl() {
+    // Zugriff auf globale Variablen
+    geheim = Math.floor(Math.random()*100);
+    anzahl = 0;
+}
+function pruefen() {
+    let raten = document.getElementById('raten');
+    let ergebnis = document.getElementById('ergebnis');
+    // Umwandlung in eine Zahl, weil value immer ein String ist.
+    let zahl = Number(raten.value);
+    //
+    // soll eine entsprechende Meldung im «ergbnis» angezeigt werden.
+    //
+}
+// Am Anfang eine neue Zufallszahl bestimmen
+neueZahl();
+</code>
+<hidden Lösungsvorschlag>
+<code javascript raten.js>
+// Globale Variablen
+let geheim = 0;
+let anzahl = 0;
+function neueZahl() {
+    // Zugriff auf globale Variablen
+    geheim = Math.floor(Math.random()*1000);
+    anzahl = 0;
+}
+function pruefen() {
+    let raten = document.getElementById('raten');
+    let ergebnis = document.getElementById('ergebnis');
+    // Umwandlung in eine Zahl, weil value immer ein String ist.
+    let zahl = Number(raten.value);
+    anzahl++;
+    if (zahl<geheim) {
+        ergebnis.innerText = `Deine Zahl ist zu klein. Anzahl Versuche: ${anzahl}`;
+    } else if (zahl>geheim) {
+        ergebnis.innerText = `Deine Zahl ist zu gross. Anzahl Versuche: ${anzahl}`;
+    } else {
+        ergebnis.innerText = `Super! Du hast die Zahl nach ${anzahl} Versuchen gefunden!`;
+        neueZahl();
+    }
+}
+neueZahl();
+</code>
+</hidden>
+**Bonus** Überlegen Sie sich eine optimale Strategie und berechnen Sie, wie viele Züge höchstens nötig sind, um aus $n$ Zahlen die richtige mit Sicherheit zu finden.
+**Hardcore** Berechnen Sie exakt, wie viele Versuche **durchschnittlich** nötig sind, um (mit optimaler Strategie) die korrekte Zahl aus $n$ Zahlen zu erraten.
 </WRAP>