AP5 FinalProtocol AP2-Ausbau: 10 Themen / 200 Fragen (FISI + FIAE)

Je Fachrichtung 5 neue Themen a 20 Fragen, nach dem bestehenden Skelett
(Lernfokus + Inhaltssektionen + Pruefungsmodus, data-questions-src) und JSON-
Schema {title, questions:[{category,hint,text,answers[3],correct,explanation}]}:

- FISI: netzwerkplanung, it-sicherheit, virtualisierung, monitoring-backup,
  skripting.
- FIAE: sql, uml, oop, algorithmen, testverfahren.

Jede Datei: 20 Fragen, 5 Kategorien a 4, correct ausgewogen rotierend (7/7/6),
Erklaerungen benennen die Distraktoren-Fallen, "du"-Ansprache, echte Umlaute
(UTF-8). Navigation in finalflux.html um je 5 Links erweitert (Bestand bleibt).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WFxcjtc9HNP4VECT6Ur1tE

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

@@ -0,0 +1,112 @@
+<!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>