From 5c5e64aac9ffac26e985ca994e6f0a2d2b22b0c3 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Mon, 2 Nov 2026 14:13:12 +0100
Subject: [PATCH]

---
 .../uebungen/u01_bibverwaltung/index.html     | 18 +++++++++--
 .../uebungen/u02_extraction/index.html        | 21 +++++++++++--
 07_js-debug/uebungen/u03_dry/index.html       | 31 +++++++++++++++----
 .../u04_dry-benutzerzugang/index.html         | 23 +++++++++++---
 .../uebungen/u05_error-format-date/index.html | 11 ++++---
 .../uebungen/u06_error-benutzer/index.html    | 13 ++++++--
 .../uebungen/u07_check-temperature/index.html | 11 ++++---
 .../uebungen/u08_benutzer-anzeigen/index.html | 16 +++++-----
 .../uebungen/u09_parse-user-data/index.html   |  8 +++--
 9 files changed, 116 insertions(+), 36 deletions(-)

diff --git a/07_js-debug/uebungen/u01_bibverwaltung/index.html b/07_js-debug/uebungen/u01_bibverwaltung/index.html
index 5ca7b90..02e136f 100644
--- a/07_js-debug/uebungen/u01_bibverwaltung/index.html
+++ b/07_js-debug/uebungen/u01_bibverwaltung/index.html
@@ -1,12 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
     <title>Exercise: Nested If-Statements</title>
   </head>
   <body>
-    <h1>Exercise: Nested If-Statements</h1>
+    <main>
+      <div class="container py-5">
+        <h1>Exercise: Nested If-Statements</h1>
+        <hr />
+        <div class="alert alert-primary">
+          <h2>Übung 1: Bibliotheksverwaltung</h2>
+          <p>
+            In dieser Übung besteht deine Aufgabe darin, die verschachtelten if-Anweisungen mit Hilfe der Inversion zu
+            vereinfachen. In der nächsten Übung, in der du auch die Extraktion verwendest, wird deine Lösung verwendet.
+            Verwende für diese Übung also nur die Inversion.
+          </p>
+        </div>
+      </div>
+    </main>
 
     <script>
       'use strict';
diff --git a/07_js-debug/uebungen/u02_extraction/index.html b/07_js-debug/uebungen/u02_extraction/index.html
index 5ca7b90..b7d3fe2 100644
--- a/07_js-debug/uebungen/u02_extraction/index.html
+++ b/07_js-debug/uebungen/u02_extraction/index.html
@@ -1,12 +1,29 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
     <title>Exercise: Nested If-Statements</title>
   </head>
   <body>
-    <h1>Exercise: Nested If-Statements</h1>
+    <main>
+      <div class="container py-5">
+        <h1>Exercise: Nested If-Statements</h1>
+        <hr />
+        <div class="alert alert-primary">
+          <h2>Übung 2: Bibliotheksverwaltung – Extraktion</h2>
+          <p>
+            Diese Übung setzt voraus, dass du die Übung Bibliotheksverwaltung abgeschlossen hast. Du kannst deine eigene
+            Lösung oder eine Musterlösung für die Übung verwenden.
+          </p>
+          <p>
+            Diesmal machst du den Code lesbarer und übersichtlicher, indem du die Kernlogik in separate Funktionen
+            extrahierst. Erstelle eine neue Datei, kopiere den Code hinein und wende das Extraktionskonzept an.
+          </p>
+        </div>
+      </div>
+    </main>
 
     <script>
       'use strict';
diff --git a/07_js-debug/uebungen/u03_dry/index.html b/07_js-debug/uebungen/u03_dry/index.html
index 8c49d10..6f26b86 100644
--- a/07_js-debug/uebungen/u03_dry/index.html
+++ b/07_js-debug/uebungen/u03_dry/index.html
@@ -1,12 +1,31 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Exercise: Don't Repeat Yourself (DRY)</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
+    <title>Übung 3: DRY</title>
   </head>
   <body>
-    <h1>Exercise: Don't Repeat Yourself (DRY)</h1>
+    <main>
+      <div class="container py-5">
+        <h1>Exercise: Don't Repeat Yourself (DRY)</h1>
+        <hr />
+        <div class="alert alert-primary">
+          <h2>Übung 3: DRY</h2>
+          <p>
+            In dieser Übung überarbeitest du einen Teil des Codes nach dem DRY-Prinzip (Don't Repeat Yourself). Du
+            arbeitest mit einem Skript, das Wetterberichte für mehrere Städte protokolliert, einschließlich zusätzlicher
+            Wetterdaten wie der Windgeschwindigkeit. Deine Aufgabe ist es, Code-Wiederholungen zu vermeiden, indem du
+            Arrays, Schleifen und Funktionen verwendest.
+          </p>
+          <p>
+            Erstelle eine zusätzliche <code>formatWeatherReport(report)</code> Funktion, die ein Wetterberichtsobjekt
+            als Parameter annimmt. Sie sollte einen formatierten Wetterberichtstring zurückgeben.
+          </p>
+        </div>
+      </div>
+    </main>
 
     <script>
       'use strict';
@@ -19,7 +38,7 @@
         const description1 = 'Sunny';
         const windSpeed1 = 10;
         console.log(
-          `Weather in ${city1}: ${temperature1}°F, ${humidity1}% humidity, ${description1}, Wind Speed: ${windSpeed1} mph`
+          `Weather in ${city1}: ${temperature1}°F, ${humidity1}% humidity, ${description1}, Wind Speed: ${windSpeed1} mph`,
         );
 
         // Weather Report 2
@@ -29,7 +48,7 @@
         const description2 = 'Partly Cloudy';
         const windSpeed2 = 7;
         console.log(
-          `Weather in ${city2}: ${temperature2}°F, ${humidity2}% humidity, ${description2}, Wind Speed: ${windSpeed2} mph`
+          `Weather in ${city2}: ${temperature2}°F, ${humidity2}% humidity, ${description2}, Wind Speed: ${windSpeed2} mph`,
         );
 
         // Weather Report 3
@@ -39,7 +58,7 @@
         const description3 = 'Rainy';
         const windSpeed3 = 12;
         console.log(
-          `Weather in ${city3}: ${temperature3}°F, ${humidity3}% humidity, ${description3}, Wind Speed: ${windSpeed3} mph`
+          `Weather in ${city3}: ${temperature3}°F, ${humidity3}% humidity, ${description3}, Wind Speed: ${windSpeed3} mph`,
         );
       }
 
diff --git a/07_js-debug/uebungen/u04_dry-benutzerzugang/index.html b/07_js-debug/uebungen/u04_dry-benutzerzugang/index.html
index 147d1a1..3279491 100644
--- a/07_js-debug/uebungen/u04_dry-benutzerzugang/index.html
+++ b/07_js-debug/uebungen/u04_dry-benutzerzugang/index.html
@@ -1,13 +1,28 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Advanced If-Else Statements (Enhanced Nesting)</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
+    <title>Übung 4: Benutzerzugang verwalten</title>
   </head>
   <body>
-    <h1>Advanced If-Else Statements (Enhanced Nesting)</h1>
-
+    <main>
+      <div class="container py-5">
+        <h1>Advanced If-Else Statements (Enhanced Nesting)</h1>
+        <hr />
+        <div class="alert alert-primary">
+          <h2>Übung 4: Benutzerzugang verwalten</h2>
+          <p>
+            In dieser Übung ist es deine Aufgabe, den folgenden Code zu vereinfachen und dabei alle Techniken und
+            Prinzipien anzuwenden, die du bisher gelernt hast. Der vorgegebene Code simuliert ein
+            Benutzerverwaltungssystem mit verschiedenen Berechtigungen und Zuständen. Dein Ziel ist es, die Funktion
+            <code>manageUserAccess</code> zu überarbeiten, um die Logik sauberer und lesbarer zu machen, indem du die
+            Komplexität der verschachtelten Bedingungen reduzierst.
+          </p>
+        </div>
+      </div>
+    </main>
     <script>
       'use strict';
 
diff --git a/07_js-debug/uebungen/u05_error-format-date/index.html b/07_js-debug/uebungen/u05_error-format-date/index.html
index 6b5b78a..69972a4 100644
--- a/07_js-debug/uebungen/u05_error-format-date/index.html
+++ b/07_js-debug/uebungen/u05_error-format-date/index.html
@@ -1,15 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Übung 05: FormatDate Fehler</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <title>Übung 05: formatDate Fehler</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">
-        <h1>Übung 05: FormatDate Fehler</h1>
+        <div class="alert alert-primary">
+          <h2>Übung 05: formatDate Fehler</h2>
+          <p>Die Kommentare zeigen das erwartete Ergebnis.</p>
+        </div>
       </div>
     </main>
     <script>
diff --git a/07_js-debug/uebungen/u06_error-benutzer/index.html b/07_js-debug/uebungen/u06_error-benutzer/index.html
index 9261022..d45bae8 100644
--- a/07_js-debug/uebungen/u06_error-benutzer/index.html
+++ b/07_js-debug/uebungen/u06_error-benutzer/index.html
@@ -1,15 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Übung 6: Benutzer erstellen</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <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">
-        <h1>Übung 6: Benutzer erstellen</h1>
+        <div class="alert alert-primary">
+          <h2>Übung 6: Benutzer erstellen</h2>
+          <p>
+            Nehmen wir eine anspruchsvollere Syntaxfehlerübung in Angriff. Diese Übung enthält mehrere Syntaxfehler, die
+            über den gesamten Code verteilt sind. Dein Ziel ist es, alle Syntaxfehler zu identifizieren und zu beheben,
+            damit der Code korrekt ausgeführt werden kann.
+          </p>
+        </div>
       </div>
     </main>
     <script>
diff --git a/07_js-debug/uebungen/u07_check-temperature/index.html b/07_js-debug/uebungen/u07_check-temperature/index.html
index 6e37278..e07e84f 100644
--- a/07_js-debug/uebungen/u07_check-temperature/index.html
+++ b/07_js-debug/uebungen/u07_check-temperature/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
@@ -9,14 +9,15 @@
   <body>
     <main>
       <div class="container py-5">
-        <h1>Übung 7: checkTemperature Fehler</h1>
-        <p>Versuche, den Code auszuführen, den Fehler zu identifizieren und ihn zu beheben.</p>
+        <div class="alert alert-primary">
+          <h2>Übung 7: checkTemperature Fehler</h2>
+          <p>Versuche, den Code auszuführen, den Fehler zu identifizieren und ihn zu beheben.</p>
+        </div>
       </div>
     </main>
     <script>
       'use strict';
 
-
       function checkTemperature(temperature) {
         const threshold = 30;
         const message;
@@ -24,7 +25,7 @@
         if (temperature > threshold) {
           message = "It's too hot outside!";
         } else {
-          message = "The temperature is just right.";
+          message = 'The temperature is just right.';
         }
 
         console.log(message);
diff --git a/07_js-debug/uebungen/u08_benutzer-anzeigen/index.html b/07_js-debug/uebungen/u08_benutzer-anzeigen/index.html
index ab63182..b6727c4 100644
--- a/07_js-debug/uebungen/u08_benutzer-anzeigen/index.html
+++ b/07_js-debug/uebungen/u08_benutzer-anzeigen/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
@@ -9,12 +9,14 @@
   <body>
     <main>
       <div class="container py-5">
-        <h1>Übung 8: Benutzer anzeigen</h1>
-        <p>
-          Der folgende Code enthält mehrere Referenzfehler, die über verschiedene Teile des Codes verteilt sind. Deine
-          Aufgabe ist es, alle Referenzfehler zu identifizieren und zu beheben, um sicherzustellen, dass der Code
-          korrekt läuft.
-        </p>
+        <div class="alert alert-primary">
+          <h2>Übung 8: Benutzer anzeigen</h2>
+          <p>
+            Der folgende Code enthält mehrere Referenzfehler, die über verschiedene Teile des Codes verteilt sind. Deine
+            Aufgabe ist es, alle Referenzfehler zu identifizieren und zu beheben, um sicherzustellen, dass der Code
+            korrekt läuft.
+          </p>
+        </div>
       </div>
     </main>
     <script>
diff --git a/07_js-debug/uebungen/u09_parse-user-data/index.html b/07_js-debug/uebungen/u09_parse-user-data/index.html
index 0d4a6b4..ee36d49 100644
--- a/07_js-debug/uebungen/u09_parse-user-data/index.html
+++ b/07_js-debug/uebungen/u09_parse-user-data/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
@@ -9,8 +9,10 @@
   <body>
     <main>
       <div class="container py-5">
-        <h1>Übung 9: parseUserData Fehler</h1>
-        <p>Die Kommentare zeigen das erwartete Ergebnis.</p>
+        <div class="alert alert-primary">
+          <h2>Übung 9: parseUserData Fehler</h2>
+          <p>Die Kommentare zeigen das erwartete Ergebnis.</p>
+        </div>
       </div>
     </main>
     <script>