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

<!DOCTYPE html>
<html lang="de" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>UML - 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=4">
  <link rel="stylesheet" href="/css/finalflux.css">
  <script src="/js/theme.js?v=5"></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>UML</h1>

  <section>
    <h2>Lernfokus</h2>
    <p>AP2 Anwendungsentwicklung: Systeme mit UML modellieren – Struktur im Klassendiagramm, Abläufe in Sequenz- und Aktivitätsdiagrammen und die Anforderungssicht im Use-Case-Diagramm.</p>
    <ul class="key-list">
      <li>Klassen mit Attributen, Methoden und Sichtbarkeiten +/-/# lesen und notieren.</li>
      <li>Beziehungen sicher unterscheiden: Assoziation, Aggregation vs. Komposition, Vererbung samt Multiplizitäten.</li>
      <li>Dynamik im Sequenz- und Aktivitätsdiagramm sowie Akteure und include/extend im Use-Case-Diagramm einordnen.</li>
    </ul>
  </section>

  <section>
    <h2>Klassendiagramm</h2>
    <p>Eine Klasse wird als Rechteck mit drei Fächern gezeichnet: oben der Name, in der Mitte die Attribute, unten die Methoden.</p>
    <ul class="key-list">
      <li><strong>Sichtbarkeiten:</strong> <code>+</code> public (überall), <code>-</code> private (nur eigene Klasse), <code>#</code> protected (auch Unterklassen).</li>
      <li><strong>Attribut-Notation:</strong> <code>name : Typ</code> – der Typ steht in UML <em>hinter</em> dem Namen, nicht davor wie in Java.</li>
      <li><strong>Methode:</strong> erkennbar an den runden Klammern hinter dem Namen, z. B. <code>berechneSumme()</code>.</li>
    </ul>
    <p class="merksatz"><strong>Merksatz:</strong> Minus heißt privat, Raute heißt protected – nie verwechseln.</p>
  </section>

  <section>
    <h2>Beziehungen &amp; Multiplizitäten</h2>
    <p>Linien zwischen Klassen zeigen, wie Objekte zusammenhängen; die Multiplizität sagt, wie viele Objekte je Ende beteiligt sind.</p>
    <ul class="key-list">
      <li><strong>Aggregation:</strong> schwache „hat"-Beziehung, <em>leere</em> Raute am Ganzen – die Teile bestehen auch allein.</li>
      <li><strong>Komposition:</strong> starke Existenzabhängigkeit, <em>gefüllte</em> Raute am Ganzen – ohne das Ganze verschwinden die Teile.</li>
      <li><strong>Vererbung:</strong> durchgezogene Linie mit hohlem Dreieckspfeil zur Oberklasse. <strong>Multiplizität:</strong> <code>1</code> genau eins, <code>0..1</code> optional, <code>1..*</code> mindestens eins.</li>
    </ul>
    <p class="merksatz"><strong>Merksatz:</strong> Gefüllte Raute = Komposition (existenzabhängig), leere Raute = Aggregation (lose „hat").</p>
  </section>

  <section>
    <h2>Sequenzdiagramm</h2>
    <p>Das Sequenzdiagramm zeigt den zeitlichen Nachrichtenaustausch zwischen Objekten – die Zeit läuft von oben nach unten.</p>
    <ul class="key-list">
      <li><strong>Lebenslinie:</strong> gestrichelte Senkrechte unter dem Objekt, zeigt dessen Existenz über die Zeit.</li>
      <li><strong>Aktivierungsbalken:</strong> schmales Rechteck auf der Lebenslinie – das Objekt führt gerade eine Operation aus.</li>
      <li><strong>Nachrichten:</strong> synchron = durchgezogene Linie mit gefüllter Spitze (Sender wartet); asynchron = offene Spitze (Sender läuft weiter); Antwort = gestrichelt.</li>
    </ul>
    <p class="merksatz"><strong>Merksatz:</strong> Gefüllte Pfeilspitze = synchron und warten, offene Spitze = asynchron und weiterlaufen.</p>
  </section>

  <section>
    <h2>Aktivitäts- &amp; Use-Case-Diagramm</h2>
    <p>Das Aktivitätsdiagramm modelliert Abläufe, das Use-Case-Diagramm die Anforderungen aus Sicht der Akteure.</p>
    <ul class="key-list">
      <li><strong>Aktivität:</strong> Start = gefüllter Kreis, Ende = Kreis mit Ring, Aktion = abgerundetes Rechteck, Entscheidung = Raute, Parallelität = fork/join-Balken.</li>
      <li><strong>Use Case:</strong> Akteur = Strichmännchen außerhalb der Systemgrenze (Rahmen), Use Case = Ellipse innerhalb.</li>
      <li><strong>include vs. extend:</strong> <code>&lt;&lt;include&gt;&gt;</code> bindet immer verpflichtend ein, <code>&lt;&lt;extend&gt;&gt;</code> ergänzt nur unter einer Bedingung (optional).</li>
    </ul>
    <p class="merksatz"><strong>Merksatz:</strong> Raute = Entscheidung (ein Zweig), Balken = Parallelität (mehrere Zweige gleichzeitig).</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>UML</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_uml.json" defer></script>
</body>
</html>