mindflux/src/main/resources/static/finalflux/ap2-fiae/oop.html

<!DOCTYPE html>
<html lang="de" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>OOP - FinalProtocol AP2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/theme.css?v=3">
  <link rel="stylesheet" href="/css/finalflux.css">
  <script src="/js/theme.js?v=3"></script>
</head>
<body class="finalflux-page">
<div class="mf-theme-float"><button class="mf-theme"></button></div>
<main>
  <a href="/finalflux" class="back-link">Zurück zu FinalProtocol</a>
  <h1>OOP</h1>

  <section>
    <h2>Lernfokus</h2>
    <p>AP2 Anwendungsentwicklung: Objektorientierung sicher anwenden – Daten kapseln, Typen über Vererbung und Interfaces gliedern und Beziehungen bewusst als „ist-ein" oder „hat-ein" modellieren.</p>
    <ul class="key-list">
      <li>Kapselung mit Sichtbarkeiten sowie Getter/Setter richtig einsetzen.</li>
      <li>Überschreiben und Überladen samt dynamischer Bindung sicher unterscheiden.</li>
      <li>Interfaces, abstrakte Klassen und Komposition gezielt gegeneinander abwägen.</li>
    </ul>
  </section>

  <section>
    <h2>Kapselung</h2>
    <p>Kapselung (Information Hiding) verbirgt die inneren Daten einer Klasse und gibt sie nur über kontrollierte Methoden frei.</p>
    <ul class="key-list">
      <li><strong>Sichtbarkeiten:</strong> <code>private</code> nur in der eigenen Klasse, <code>protected</code> zusätzlich für Unterklassen/Paket, <code>public</code> überall.</li>
      <li><strong>Getter/Setter:</strong> steuern Lese- und Schreibzugriff; der Setter kann Werte <em>validieren</em>, bevor sie gesetzt werden.</li>
      <li><strong>Nur lesbar:</strong> Attribut <code>private</code> lassen und nur einen Getter (keinen Setter) anbieten.</li>
    </ul>
    <p class="merksatz"><strong>Merksatz:</strong> Attribute <code>private</code>, Zugriff über Methoden – so behält die Klasse die Kontrolle über ihre Daten.</p>
  </section>

  <section>
    <h2>Vererbung</h2>
    <p>Vererbung modelliert eine „ist-ein"-Beziehung: Die Unterklasse übernimmt Attribute und Methoden der Oberklasse und erweitert sie.</p>
    <ul class="key-list">
      <li><strong>Ober-/Unterklasse:</strong> die Subklasse erbt und darf geerbte Methoden <em>überschreiben</em>.</li>
      <li><strong><code>super</code>:</strong> ruft Konstruktor bzw. Methode der Oberklasse auf, um deren Teil des Objekts zu initialisieren.</li>
      <li><strong>Überschreiben (override):</strong> gleiche Signatur, neue Implementierung in der Unterklasse.</li>
    </ul>
    <p class="merksatz"><strong>Merksatz:</strong> „ist-ein" heißt Vererbung – ein Hund <em>ist ein</em> Tier, ein Auto <em>ist kein</em> Motor.</p>
  </section>

  <section>
    <h2>Polymorphie: Überladen &amp; Überschreiben</h2>
    <p>Polymorphie erlaubt, verschiedene Objekte einheitlich über einen gemeinsamen Obertyp zu behandeln.</p>
    <ul class="key-list">
      <li><strong>Überladen (overloading):</strong> gleicher Name, andere Parameterliste, gleiche Klasse – der Compiler wählt zur <em>Compilezeit</em>.</li>
      <li><strong>Überschreiben (overriding):</strong> Unterklasse ersetzt geerbte Methode – der echte Objekttyp entscheidet zur <em>Laufzeit</em> (dynamische Bindung).</li>
      <li><strong>Nutzen:</strong> eine Liste von <code>Form</code>-Objekten zeichnen, ohne den konkreten Typ zu kennen.</li>
    </ul>
    <p class="merksatz"><strong>Merksatz:</strong> Überladen entscheidet der Compiler (Parameter), Überschreiben die Laufzeit (Objekttyp).</p>
  </section>

  <section>
    <h2>Interfaces, abstrakte Klassen &amp; Komposition</h2>
    <p>Für Struktur und Wiederverwendung stehen mehrere Werkzeuge bereit, die du bewusst wählst.</p>
    <ul class="key-list">
      <li><strong>Interface:</strong> reiner Vertrag; eine Klasse kann <em>mehrere</em> Interfaces implementieren (<code>implements Comparable, Serializable</code>).</li>
      <li><strong>Abstrakte Klasse:</strong> nicht instanziierbar, bringt aber Zustand und fertige Methoden mit; nur <em>eine</em> Basisklasse.</li>
      <li><strong>Komposition:</strong> „hat-ein" – ein Objekt enthält ein anderes als Attribut, lose gekoppelt und flexibel.</li>
    </ul>
    <p class="merksatz"><strong>Merksatz:</strong> „Favor composition over inheritance" – lieber ein Motor-Objekt <em>enthalten</em> als tief von einer fragilen Basisklasse erben.</p>
  </section>

  <section>
    <h2>Prüfungsmodus</h2>
    <p>Dieser ProtocolCheck führt dich durch die wichtigsten AP2-Aspekte dieses Themas. Du kannst Antworten prüfen, Fragen überspringen und bekommst am Ende eine Auswertung nach Kategorie.</p>
  </section>

  <section class="finalflux-test" data-finalflux-test aria-live="polite">
    <div class="test-meta">
      <span data-question-counter>Frage 1</span>
      <span data-score-counter>0 richtig</span>
    </div>
    <div class="category-block">
      <p class="eyebrow">Kategorie</p>
      <h2 data-category-title>OOP</h2>
      <p data-category-hint>AP2-Training</p>
    </div>
    <div class="question-card">
      <h3 data-question-text></h3>
      <div data-answer-options class="answer-options"></div>
      <div data-answer-feedback class="fluxcheck-result"></div>
    </div>
    <div class="test-actions">
      <button type="button" data-check-answer>Antwort prüfen</button>
      <button type="button" data-skip-question class="secondary">Überspringen</button>
      <button type="button" data-next-question class="secondary" disabled>Weiter</button>
    </div>
  </section>

  <section data-test-result class="finalflux-panel" hidden>
    <h2>Auswertung</h2>
    <p data-result-summary></p>
    <ul data-category-summary class="key-list"></ul>
    <div class="finalflux-actions">
      <button type="button" data-restart-test>Test neu starten</button>
      <a href="/finalflux">Zurück zur Übersicht</a>
    </div>
  </section>
</main>

<script src="/js/finalflux-test.js" data-questions-src="/finalflux/questions/ap2_fiae_oop.json" defer></script>
</body>
</html>