Aufgaben-Python/g04_verzweigungen_und_bedingungen/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kapitel G04: Bedingungen & Verzweigungen</title>
  <link rel="stylesheet" href="../assets/style.css">
</head>
<body>

  <header>
    <div class="header-container">
      <nav class="nav-links">
        <a href="../index.html">🏠 Zur Kursübersicht</a>
        <span>&rsaquo;</span>
        <a href="../g03_ein_und_ausgabe/index.html">&larr; Kapitel G03</a>
        <span>&rsaquo;</span>
        <span style="color: white; font-weight: 600;">Kapitel G04</span>
        <span>&rsaquo;</span>
        <a href="../g05_schleifen_und_wiederholungen/index.html">Kapitel G05 &rarr;</a>
      </nav>
      <div class="header-badge">Grundlagen G04 &bull; Schulabgleich 08.0</div>
      <h1>Bedingungen &amp; Verzweigungen 🛤️🔀</h1>
      <p>Lerne, wie dein Code mit <code>if</code>, <code>elif</code> und <code>else</code> intelligente Entscheidungen trifft und wie du logische Operatoren meisterst.</p>
    </div>
  </header>

  <main class="container">

    <!-- 1. Analogie & Einführung -->
    <section class="card">
      <h2>1. Die Eisenbahn-Weichen-Analogie 🚂</h2>
      
      <p>
        Code wird standardmäßig von oben nach unten Zeile für Zeile ausgeführt. Doch oft soll ein Programm je nach Situation einen anderen Pfad einschlagen: Ein Kinokassen-System berechnet für Kinder einen anderen Preis als für Erwachsene.
      </p>

      <div class="box box-analogie">
        <div class="box-title">🛤️ Das Eisenbahngleis &amp; die Weichen:</div>
        Stell dir den Programmlauf wie einen Zug vor, der auf ein Weichensystem zufährt:
        <br>1. <strong>Das Signal (Bedingung):</strong> Die Weiche prüft: <em>"Ist das Alter unter 12?"</em>
        <br>2. <strong>Grünes Signal (True):</strong> Der Zug biegt auf das Kindertarif-Gleis ab und führt dessen Code aus.
        <br>3. <strong>Rotes Signal (False):</strong> Der Zug fährt weiter zur nächsten Weiche (<code>elif</code>).
        <br>4. <strong>Das Ausweichgleis (else):</strong> Wenn keines der Signale grün war, nimmt der Zug das Standardgleis.
        <br>5. <strong>Weiterfahrt:</strong> Hinter der Weichenanlage laufen alle Gleise wieder auf der Hauptstrecke zusammen!
      </div>
    </section>

    <!-- 2. Syntax & Vergleichsoperatoren -->
    <section class="card">
      <h2>2. Syntax von <code>if / elif / else</code> &amp; Vergleichsoperatoren</h2>

      <p>
        In Python werden Verzweigungen mit Doppelpunkt <code>:</code> eingeleitet und der zugehörige Codeblock muss <strong>genau 4 Leerzeichen</strong> eingerückt sein.
      </p>

      <div class="code-container">
        <div class="code-header">
          <div class="code-dots">
            <span class="code-dot dot-red"></span>
            <span class="code-dot dot-yellow"></span>
            <span class="code-dot dot-green"></span>
          </div>
          <span>Kino-Tarif-Weiche</span>
        </div>
        <pre><span class="kw">if</span> <span class="var">alter</span> < <span class="num">12</span>:
    <span class="var">preis</span> = <span class="num">6.00</span>   <span class="cm"># 4 Leerzeichen Einrückung</span>
<span class="kw">elif</span> <span class="var">alter</span> >= <span class="num">65</span>:
    <span class="var">preis</span> = <span class="num">8.50</span>
<span class="kw">elif</span> <span class="var">ist_student</span>:
    <span class="var">preis</span> = <span class="num">9.50</span>
<span class="kw">else</span>:
    <span class="var">preis</span> = <span class="num">12.00</span></pre>
      </div>

      <div class="box box-warning">
        <div class="box-title">⚠️ Häufige Fehlerquelle: = vs. ==</div>
        - <code>=</code> (einfaches Istgleich) ist eine <strong>Zuweisung</strong>: <code>punkte = 10</code>.<br>
        - <code>==</code> (doppeltes Istgleich) ist ein <strong>Vergleich</strong>: <code>if punkte == 10:</code>.
      </div>

      <h3>Die 6 Vergleichsoperatoren:</h3>
      <div style="overflow-x: auto; margin: 15px 0;">
        <table style="width: 100%; border-collapse: collapse; text-align: left; background: white; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm);">
          <thead>
            <tr style="background: var(--primary); color: white;">
              <th style="padding: 10px 14px;">Operator</th>
              <th style="padding: 10px 14px;">Bedeutung</th>
              <th style="padding: 10px 14px;">Beispiel</th>
              <th style="padding: 10px 14px;">Ergebnis</th>
            </tr>
          </thead>
          <tbody>
            <tr style="border-bottom: 1px solid var(--border-color);">
              <td style="padding: 8px 14px;"><code>==</code></td>
              <td style="padding: 8px 14px;">Gleich</td>
              <td style="padding: 8px 14px;"><code>5 == 5</code></td>
              <td style="padding: 8px 14px;"><strong style="color: var(--success);">True</strong></td>
            </tr>
            <tr style="border-bottom: 1px solid var(--border-color);">
              <td style="padding: 8px 14px;"><code>!=</code></td>
              <td style="padding: 8px 14px;">Ungleich</td>
              <td style="padding: 8px 14px;"><code>5 != 3</code></td>
              <td style="padding: 8px 14px;"><strong style="color: var(--success);">True</strong></td>
            </tr>
            <tr style="border-bottom: 1px solid var(--border-color);">
              <td style="padding: 8px 14px;"><code>&lt;</code> / <code>&gt;</code></td>
              <td style="padding: 8px 14px;">Kleiner als / Größer als</td>
              <td style="padding: 8px 14px;"><code>10 &lt; 20</code></td>
              <td style="padding: 8px 14px;"><strong style="color: var(--success);">True</strong></td>
            </tr>
            <tr>
              <td style="padding: 8px 14px;"><code>&lt;=</code> / <code>&gt;=</code></td>
              <td style="padding: 8px 14px;">Kleiner gleich / Größer gleich</td>
              <td style="padding: 8px 14px;"><code>18 &gt;= 18</code></td>
              <td style="padding: 8px 14px;"><strong style="color: var(--success);">True</strong></td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    <!-- 3. Logische Operatoren & Wahrheitstabellen -->
    <section class="card">
      <h2>3. Logische Operatoren &amp; Wahrheitstabellen 🧪</h2>

      <p>
        Bedingungen lassen sich mit <code>and</code>, <code>or</code> und <code>not</code> kombinieren:
      </p>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; margin: 15px 0;">
        
        <!-- AND Tabelle -->
        <div style="background: white; border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; box-shadow: var(--shadow-sm);">
          <h4 style="color: var(--primary); margin-bottom: 8px;"><code>and</code> (Beide wahr)</h4>
          <table style="width: 100%; border-collapse: collapse; font-size: 0.88rem;">
            <thead>
              <tr style="background: var(--primary-light);">
                <th style="padding: 4px 6px;">A</th>
                <th style="padding: 4px 6px;">B</th>
                <th style="padding: 4px 6px;">A and B</th>
              </tr>
            </thead>
            <tbody>
              <tr><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px; color: var(--success); font-weight: bold;">True</td></tr>
              <tr><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px; color: var(--danger);">False</td></tr>
              <tr><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px; color: var(--danger);">False</td></tr>
              <tr><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px; color: var(--danger);">False</td></tr>
            </tbody>
          </table>
        </div>

        <!-- OR Tabelle -->
        <div style="background: white; border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; box-shadow: var(--shadow-sm);">
          <h4 style="color: var(--secondary); margin-bottom: 8px;"><code>or</code> (Mind. eins wahr)</h4>
          <table style="width: 100%; border-collapse: collapse; font-size: 0.88rem;">
            <thead>
              <tr style="background: #e0f2fe;">
                <th style="padding: 4px 6px;">A</th>
                <th style="padding: 4px 6px;">B</th>
                <th style="padding: 4px 6px;">A or B</th>
              </tr>
            </thead>
            <tbody>
              <tr><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px; color: var(--success); font-weight: bold;">True</td></tr>
              <tr><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px; color: var(--success); font-weight: bold;">True</td></tr>
              <tr><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px; color: var(--success); font-weight: bold;">True</td></tr>
              <tr><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px; color: var(--danger);">False</td></tr>
            </tbody>
          </table>
        </div>

        <!-- NOT Tabelle -->
        <div style="background: white; border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; box-shadow: var(--shadow-sm);">
          <h4 style="color: var(--purple); margin-bottom: 8px;"><code>not</code> (Verneinung)</h4>
          <table style="width: 100%; border-collapse: collapse; font-size: 0.88rem;">
            <thead>
              <tr style="background: var(--purple-light);">
                <th style="padding: 4px 6px;">A</th>
                <th style="padding: 4px 6px;">not A</th>
              </tr>
            </thead>
            <tbody>
              <tr><td style="padding: 4px 6px;">True</td><td style="padding: 4px 6px; color: var(--danger); font-weight: bold;">False</td></tr>
              <tr><td style="padding: 4px 6px;">False</td><td style="padding: 4px 6px; color: var(--success); font-weight: bold;">True</td></tr>
            </tbody>
          </table>
        </div>

      </div>

      <div class="box box-tipp">
        <div class="box-title">💡 Tipp: Klammern setzen für klare Lesbarkeit</div>
        Genau wie in der Mathematik gilt: Klammern <code>(...)</code> binden stärker und machen deinen Code absolut unmissverständlich!<br>
        <code>darf_fahren = (groesse &gt;= 140) or (groesse &gt;= 120 and begleitung)</code>
      </div>
    </section>

    <!-- 4. Deine Aufgaben -->
    <section class="card">
      <h2>4. 📝 Deine Aufgaben in <code>aufgabe.py</code></h2>

      <p>Öffne <code>g04_verzweigungen_und_bedingungen/aufgabe.py</code> und setze folgende 4 Funktionen um:</p>

      <ul class="task-list">
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="t1">
          <label for="t1" class="task-label">
            <strong>TODO 1: <code>ticket_preis(alter: int, ist_student: bool) -> float</code></strong><br>
            Berechne den Kinopreis: <code>alter &lt; 12</code> &rarr; 6.00 €, <code>alter &gt;= 65</code> &rarr; 8.50 €, sonst bei <code>ist_student == True</code> &rarr; 9.50 €, sonst &rarr; 12.00 €.
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="t2">
          <label for="t2" class="task-label">
            <strong>TODO 2: <code>schulnote_text(punkte: int) -> str</code></strong><br>
            Notenspiegel: Ungültig bei <code>&lt; 0</code> oder <code>&gt; 100</code> ("Ungültige Punktezahl"), ab 90 ("Sehr gut"), ab 75 ("Gut"), ab 60 ("Befriedigend"), ab 50 ("Genügend"), sonst ("Nicht genügend").
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="t3">
          <label for="t3" class="task-label">
            <strong>TODO 3: <code>ist_schaltjahr(jahr: int) -> bool</code></strong><br>
            Prüfe die Schaltjahr-Regel: Durch 4 teilbar, aber nicht durch 100 (außer wenn durch 400 teilbar).
          </label>
        </li>
        <li class="task-item">
          <input type="checkbox" class="task-checkbox" id="t4">
          <label for="t4" class="task-label">
            <strong>TODO 4: <code>kann_achterbahn_fahren(groesse_cm: int, begleitung_erwachsen: bool) -> bool</code></strong><br>
            Freizeitpark-Zulassung: Ab 140 cm immer erlaubt (True). Zwischen 120 und 139 cm nur mit erwachsener Begleitung (True). Unter 120 cm nie erlaubt (False).
          </label>
        </li>
      </ul>

      <h3>💡 Lösungshinweise (Aufklappen bei Bedarf)</h3>

      <details>
        <summary>🔍 Tipp zu TODO 2 (Reihenfolge der Notenstufen)</summary>
        <div class="details-content">
          <p>Prüfe zuerst die ungültigen Werte (<code>punkte &lt; 0 or punkte &gt; 100</code>). Danach kannst du bequem von oben nach unten mit <code>&gt;= 90</code>, <code>&gt;= 75</code> usw. prüfen!</p>
          <div class="code-container">
            <pre><code>if punkte < 0 or punkte > 100:
    return "Ungültige Punktezahl"
elif punkte >= 90:
    return "Sehr gut"
# ...</code></pre>
          </div>
        </div>
      </details>

      <details>
        <summary>🔍 Tipp zu TODO 3 (Modulo % &amp; Schaltjahre)</summary>
        <div class="details-content">
          <p>Mit dem Modulo-Operator <code>%</code> prüfst du die Teilbarkeit (Restwert der Division ist 0):</p>
          <div class="code-container">
            <pre><code>if (jahr % 4 == 0 and jahr % 100 != 0) or (jahr % 400 == 0):
    return True
return False</code></pre>
          </div>
        </div>
      </details>
    </section>

    <!-- 5. Testen & Navigation -->
    <section class="card">
      <h2>5. 🧪 Automatische Tests &amp; Überprüfung</h2>
      <p>Führe das Testskript im Terminal aus:</p>
      <div class="code-container">
        <div class="code-header">
          <span>Terminal</span>
        </div>
        <pre><code>python3 test_aufgabe.py</code></pre>
      </div>

      <p>Oder teste das interaktive Programm mit eigenen Eingaben:</p>
      <div class="code-container">
        <div class="code-header"><span>Interaktiver Test</span></div>
        <pre><code>python3 aufgabe.py</code></pre>
      </div>

      <div class="footer-nav">
        <a href="../g03_ein_und_ausgabe/index.html" class="btn btn-secondary">&larr; Zurück zu Kapitel G03</a>
        <a href="../g05_schleifen_und_wiederholungen/index.html" class="btn">Weiter zu Kapitel G05: Schleifen &rarr;</a>
      </div>
    </section>

  </main>


  <!-- Lokale Gamification-Scripts (funktionieren auch offline per Doppelklick via file://) -->
  <script src="../assets/gamification_data.js"></script>
  <script src="../assets/gamification.js"></script>
</body>
</html>