2026-06-24 15:06:38 +02:00
parent 3da605979d
commit 3d73f1617b
33 changed files with 1359 additions and 69 deletions
--- a/01_grundlagen/uebungen/u30_quiz-dark-side.html
+++ b/01_grundlagen/uebungen/u30_quiz-dark-side.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <div class="alert alert-primary">
+          <h1>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
+
+          <p>
+            Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
+          </p>
+          <p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
+          <p>
+            Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
+            <code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
+          </p>
+          <p>
+            Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
+            Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
+            wenn das Spiel seine Antwort Wenn als falsch quittiert.
+          </p>
+          <p>
+            Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
+            Prüfung der if-Bedingung.
+          </p>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const QUESTION_1 = 'Welcher Operator hat eine höhere Priorität: * oder + ?';
+      const SOLUTION_1 = '*';
+
+      const QUESTION_2 = 'Was ist das deutsche Wort für if?';
+      const SOLUTION_2_1 = 'wenn';
+      const SOLUTION_2_2 = 'falls';
+
+      const QUESTION_3 = 'Geben Sie bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
+      const SOLUTION_3_1 = 8;
+      const SOLUTION_3_2 = 15;
+
+      const outputEl = document.querySelector('.output');
+
+      const username = prompt('Bitte geben Sie ihren Vornamen ein: ');
+      alert(`Willkommen beim Spiel, die dunkle Seite von JS, ${username}!`);
+
+      const playerFitness = prompt(
+        `${username}, fühlen Sie sich bereit gegen die dunkle Seite von JS anzutreten? Bitte antworten Sie mit ja oder nein (y/n)`,
+      )
+        .trim()
+        .toLowerCase();
+
+      if (playerFitness === 'ja' || playerFitness === 'y') {
+        alert('Okay, mögen die Spiele beginnen');
+
+        const answer1 = prompt(QUESTION_1).trim().toLowerCase();
+        if (answer1 === SOLUTION_1) {
+          alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
+        } else {
+          alert(`${username}, leider lagst du falsch. Die dunkle Seite von JS hat gewonnen!`);
+        }
+
+        const answer2 = prompt(QUESTION_2).trim().toLowerCase();
+        if (answer2 === SOLUTION_2_1 || answer2 === SOLUTION_2_2) {
+          alert(`Richtige Antwort, ${username}! Die helle Seite ist weiterhin stark in dir!`);
+        } else {
+          alert(`${username}, leider lagst du falsch. Die dunkle Seite wächst in dir!`);
+        }
+
+        const answer3 = Number(prompt(`${username}! ${QUESTION_3}`));
+        if (answer3.length >= SOLUTION_3_1 && answer3.length <= SOLUTION_3_2) {
+          alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
+        } else {
+          alert(`${username}, leider lagst du falsch. Die dunkle Seite ist stark in dir!`);
+        }
+      } else {
+        alert(`${username}, die dunkle Seite ist stark in dir!`);
+      }
+    </script>
+  </body>
+</html>