Aufgaben-Python/index.html

558 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Lernportal: Grundlagen, OOP & Software-Entwicklung</title>
<link rel="stylesheet" href="assets/style.css">
<style>
.track-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.track-1-badge { background: #dbeafe; color: #1e40af; }
.track-2-badge { background: #e0e7ff; color: #4338ca; }
.track-3-badge { background: #dcfce7; color: #166534; }
.section-header {
margin: 40px 0 15px 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
}
.section-header h2 {
margin: 0;
font-size: 1.45rem;
color: var(--text-main);
}
.section-desc {
color: var(--text-muted);
font-size: 0.95rem;
margin-top: 4px;
}
</style>
</head>
<body>
<header>
<div class="header-container">
<div class="header-badge">🐍 Python Nachhilfe- &amp; Selbstlern-Portal</div>
<h1>Vom Einsteiger zum Software-Entwickler</h1>
<p>3 strukturierte Lehrpfade: Prozedurale Grundlagen &bull; Objektorientierung &bull; Professionelle Werkzeuge (Git, TDD, Tkinter)</p>
</div>
</header>
<main class="container">
<!-- Willkommen Card -->
<section class="card">
<h2>👋 Willkommen zu deiner interaktiven Python-Lernreise!</h2>
<p>
Dieses Portal begleitet dich Schritt für Schritt von den ersten Schritten in Python bis hin zu vollständigen Desktop-Apps mit grafischer Oberfläche. Alle Aufgaben sind mit verständlichen Erklärungen, Alltags-Analogien, visuellen Beispielen und <strong>automatischen Tests</strong> für sofortiges Feedback ausgestattet.
</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin: 20px 0;">
<div style="background: #f8fafc; border-left: 4px solid #3b82f6; padding: 15px; border-radius: var(--radius-sm);">
<span class="track-badge track-1-badge">Lehrpfad 1</span>
<h4 style="margin: 0 0 6px 0; color: #1e3a8a;">🌱 Grundlagen der Programmierung</h4>
<p style="font-size: 0.88rem; color: var(--text-muted); margin: 0;">Für Einsteiger oder zur Wiederholung: Rechnen, Variablen, Bedingungen, Schleifen, Funktionen, Listen, Dictionaries &amp; Strings (G01–G10).</p>
</div>
<div style="background: #f8fafc; border-left: 4px solid #6366f1; padding: 15px; border-radius: var(--radius-sm);">
<span class="track-badge track-2-badge">Lehrpfad 2</span>
<h4 style="margin: 0 0 6px 0; color: #312e81;">🏗️ Einstieg in OOP &amp; Tools</h4>
<p style="font-size: 0.88rem; color: var(--text-muted); margin: 0;">Klassen, Baupläne, <code>__init__</code>, Methoden, UML-Diagramme, VS Code Umstieg, Git-Versionskontrolle &amp; Tamagotchi-Projekt (00–06).</p>
</div>
<div style="background: #f8fafc; border-left: 4px solid #22c55e; padding: 15px; border-radius: var(--radius-sm);">
<span class="track-badge track-3-badge">Lehrpfad 3</span>
<h4 style="margin: 0 0 6px 0; color: #14532d;">🚀 Fortgeschrittenes OOP, Container &amp; GUIs</h4>
<p style="font-size: 0.88rem; color: var(--text-muted); margin: 0;">Speicher-Referenzen, Dunder-Methoden, Unit Tests (TDD), Vererbung, Polymorphie, Exceptions, JSON, Tkinter, Container &amp; Masterprojekt (07–16).</p>
</div>
</div>
<div class="box box-tipp">
<div class="box-title">📚 Schulabgleich &amp; Lehrplan:</div>
Alle Kapitel sind 1:1 mit dem offiziellen Skriptum des Informatik-Unterrichts abgestimmt. Detaillierter Leitfaden in <a href="LEHRPLAN.md" style="color: var(--primary); font-weight: bold;">LEHRPLAN.md</a>.
</div>
</section>
<!-- LEHRPFAD 1: GRUNDLAGEN -->
<section>
<div class="section-header">
<div>
<h2>🛣️ Lehrpfad 1: Grundlagen der Programmierung (Prozedural)</h2>
<div class="section-desc">Die unverzichtbare Basis: Datentypen, Kontrollstrukturen, Funktionen und Datenstrukturen.</div>
</div>
<span class="track-badge track-1-badge">10 Kapitel &bull; G01 bis G10</span>
</div>
<div class="roadmap-grid">
<!-- G01 -->
<a href="lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G01</span>
<div class="roadmap-title">🧮 Python als Taschenrechner</div>
<div class="roadmap-desc">Zahlen (<code>int</code>, <code>float</code>), Grundrechenarten, Ganzzahldivision <code>//</code>, Modulo <code>%</code>, Potenzen <code>**</code> &amp; <code>print()</code>.</div>
</div>
<div class="roadmap-footer"><span>Kapitel G01 öffnen &rarr;</span></div>
</a>
<!-- G02 -->
<a href="lehrpfad_1_grundlagen/02_variablen_und_datentypen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G02</span>
<div class="roadmap-title">📦 Variablen &amp; Datentypen</div>
<div class="roadmap-desc">Speicherboxen, die 4 Basisdatentypen (<code>int</code>, <code>float</code>, <code>str</code>, <code>bool</code>), Type Casting &amp; Type Hints.</div>
</div>
<div class="roadmap-footer"><span>Kapitel G02 öffnen &rarr;</span></div>
</a>
<!-- G03 -->
<a href="lehrpfad_1_grundlagen/03_ein_und_ausgabe/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G03</span>
<div class="roadmap-title">💬 Interaktive Ein- &amp; Ausgabe</div>
<div class="roadmap-desc">Benutzereingaben mit <code>input()</code>, Textumwandlung und moderne formatierte <code>f-Strings</code> (z.B. <code>{preis:.2f} €</code>).</div>
</div>
<div class="roadmap-footer"><span>Kapitel G03 öffnen &rarr;</span></div>
</a>
<!-- G04 -->
<a href="lehrpfad_1_grundlagen/04_verzweigungen_und_bedingungen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G04</span>
<div class="roadmap-title">🚦 Bedingungen &amp; Verzweigungen</div>
<div class="roadmap-desc">Entscheidungen treffen mit <code>if</code>, <code>elif</code>, <code>else</code>, Vergleichs- und Logikoperatoren (<code>and</code>, <code>or</code>, <code>not</code>).</div>
</div>
<div class="roadmap-footer"><span>Kapitel G04 öffnen &rarr;</span></div>
</a>
<!-- G05 -->
<a href="lehrpfad_1_grundlagen/05_schleifen_und_wiederholungen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G05</span>
<div class="roadmap-title">🎡 Schleifen &amp; Wiederholungen</div>
<div class="roadmap-desc">Zählschleifen mit <code>for in range(...)</code>, Bedingungsschleifen mit <code>while</code>, <code>break</code> &amp; <code>continue</code>.</div>
</div>
<div class="roadmap-footer"><span>Kapitel G05 öffnen &rarr;</span></div>
</a>
<!-- G06 -->
<a href="lehrpfad_1_grundlagen/06_funktionen_und_module/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G06</span>
<div class="roadmap-title">🪄 Eigene Funktionen &amp; Module</div>
<div class="roadmap-desc">Wiederverwendbarer Code mit <code>def</code>, <code>return</code>, Parametern, Scope und Modulen (<code>math</code>, <code>random</code>).</div>
</div>
<div class="roadmap-footer"><span>Kapitel G06 öffnen &rarr;</span></div>
</a>
<!-- G07 -->
<a href="lehrpfad_1_grundlagen/07_listen_und_sequenzen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G07</span>
<div class="roadmap-title">📋 Listen &amp; Sequenzen</div>
<div class="roadmap-desc">Elemente speichern, Indexzugriff, Slicing (<code>[1:4]</code>), Listen-Methoden (<code>append</code>, <code>pop</code>) &amp; <code>sum/len/min/max</code>.</div>
</div>
<div class="roadmap-footer"><span>Kapitel G07 öffnen &rarr;</span></div>
</a>
<!-- G08 -->
<a href="lehrpfad_1_grundlagen/08_textverarbeitung_und_strings/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G08</span>
<div class="roadmap-title">🔤 Textverarbeitung &amp; Strings</div>
<div class="roadmap-desc">String-Methoden wie <code>.strip()</code>, <code>.replace()</code>, <code>.split()</code>, <code>.join()</code> und Palindrom-Analyse.</div>
</div>
<div class="roadmap-footer"><span>Kapitel G08 öffnen &rarr;</span></div>
</a>
<!-- G09 -->
<a href="lehrpfad_1_grundlagen/09_dictionaries_und_sets/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G09</span>
<div class="roadmap-title">🗃️ Dictionaries &amp; Sets</div>
<div class="roadmap-desc">Schlüssel-Wert-Paare (<code>{key: val}</code>), sicheres <code>.get()</code>, Telefonbuch-Suche &amp; Mengen (<code>set</code>) ohne Duplikate.</div>
</div>
<div class="roadmap-footer"><span>Kapitel G09 öffnen &rarr;</span></div>
</a>
<!-- G10 -->
<a href="lehrpfad_1_grundlagen/10_comprehensions_datum_algorithmen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
<div>
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G10</span>
<div class="roadmap-title">🚀 Comprehensions &amp; Algorithmen</div>
<div class="roadmap-desc">List Comprehensions (<code>[x for x in ...]</code>), <code>datetime</code> für Kalenderberechnungen &amp; Min/Max-Suche.</div>
</div>
<div class="roadmap-footer"><span>Kapitel G10 öffnen &rarr;</span></div>
</a>
</div>
</section>
<!-- LEHRPFAD 2: EINSTIEG IN OOP & WERKZEUGE -->
<section>
<div class="section-header">
<div>
<h2>🛣️ Lehrpfad 2: Einstieg in OOP &amp; Entwickler-Werkzeuge</h2>
<div class="section-desc">Der Übergang zur Objektorientierung: Baupläne, Methoden, UML, VS Code &amp; Git.</div>
</div>
<span class="track-badge track-2-badge">Kapitel 00 bis 06</span>
</div>
<div class="roadmap-grid">
<!-- Kapitel 0 -->
<a href="lehrpfad_2_oop_einstieg/00_fehlersuche_und_grundlagen/index.html" class="roadmap-card" style="border-left: 4px solid var(--purple);">
<div>
<span class="roadmap-number" style="background: var(--purple-light); color: var(--purple);">Warm-up 00</span>
<div class="roadmap-title">🔍 Fehlersuche &amp; Bugs</div>
<div class="roadmap-desc">Tracebacks von unten lesen, Einrückungen (IndentationError), Typfehler und Detektiv-Aufgabe.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 1 -->
<a href="lehrpfad_2_oop_einstieg/01_einstieg_klassen/index.html" class="roadmap-card">
<div>
<span class="roadmap-number">Kapitel 01</span>
<div class="roadmap-title">🐶 Die erste Klasse</div>
<div class="roadmap-desc">Bauplan vs. Objekt, Instanziierung, Punktnotation und Type Hints am Fahrrad- &amp; Haustier-Beispiel.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 2 -->
<a href="lehrpfad_2_oop_einstieg/02_init_und_self/index.html" class="roadmap-card">
<div>
<span class="roadmap-number">Kapitel 02</span>
<div class="roadmap-title">💳 Konstruktor & self</div>
<div class="roadmap-desc">Wie <code>__init__</code> Objekte startklar macht, was <code>self</code> bedeutet und erste UML-Klassendiagramme.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 3 -->
<a href="lehrpfad_2_oop_einstieg/03_methoden_und_verhalten/index.html" class="roadmap-card">
<div>
<span class="roadmap-number">Kapitel 03</span>
<div class="roadmap-title">⚔️ Methoden & Verhalten</div>
<div class="roadmap-desc">Objekte führen Aktionen aus! Interaktion zwischen Objekten in Rennautos und RPG-Heldenduellen.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 4 -->
<a href="lehrpfad_2_oop_einstieg/04_str_und_darstellung/index.html" class="roadmap-card">
<div>
<span class="roadmap-number">Kapitel 04</span>
<div class="roadmap-title">🧾 Schöne Textausgabe</div>
<div class="roadmap-desc">Wie man <code>print(objekt)</code> mit <code>__str__</code> lesbar macht und Rechnungsdruck im Warenkorb.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 4b -->
<a href="lehrpfad_2_oop_einstieg/04b_umstieg_vscode/index.html" class="roadmap-card" style="border-left: 4px solid var(--secondary);">
<div>
<span class="roadmap-number" style="background: #e0f2fe; color: #0284c7;">Exkurs 04b</span>
<div class="roadmap-title">🚀 Installation &amp; Setup VS Code</div>
<div class="roadmap-desc">Installationsanleitung (Win/Mac/Linux), Plugins (Error Lens, Python), Shortcuts &amp; Terminal.</div>
</div>
<div class="roadmap-footer"><span>VS Code Guide &rarr;</span></div>
</a>
<!-- Kapitel 4c (Git) -->
<a href="lehrpfad_2_oop_einstieg/04c_git_und_versionskontrolle/index.html" class="roadmap-card" style="border-left: 4px solid var(--success);">
<div>
<span class="roadmap-number" style="background: var(--success-light); color: var(--success);">Exkurs 04c</span>
<div class="roadmap-title">🌿 Git &amp; Versionskontrolle</div>
<div class="roadmap-desc">Die Programmier-Zeitmaschine: Spielstände (Commits) sichern, Diffs in VS Code, Terminal &amp; Push.</div>
</div>
<div class="roadmap-footer"><span>Git Guide &rarr;</span></div>
</a>
<!-- Kapitel 5 -->
<a href="lehrpfad_2_oop_einstieg/05_objekte_kombinieren/index.html" class="roadmap-card">
<div>
<span class="roadmap-number">Kapitel 05</span>
<div class="roadmap-title">🎵 Assoziation & Komposition</div>
<div class="roadmap-desc">Objekte verwalten andere Objekte: Song-Suche, Längenberechnung und Filter in Spotify-Playlists.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 6 -->
<a href="lehrpfad_2_oop_einstieg/06_abschlussprojekt_tamagotchi/index.html" class="roadmap-card">
<div>
<span class="roadmap-number">Kapitel 06</span>
<div class="roadmap-title">🥚 Mini-Projekt: Tamagotchi</div>
<div class="roadmap-desc">Kombiniere alles in einem voll spielbaren, interaktiven virtuellen Haustier für dein Terminal!</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
</div>
</section>
<!-- LEHRPFAD 3: FORTGESCHRITTENES OOP -->
<section>
<div class="section-header">
<div>
<h2>🛣️ Lehrpfad 3: Fortgeschrittenes OOP, Testing &amp; Desktop-GUIs</h2>
<div class="section-desc">Professionelle Softwaretechnik: Speicherverwaltung, Vererbung, TDD-Tests, Persistenz und GUIs.</div>
</div>
<span class="track-badge track-3-badge">Kapitel 07 bis 16</span>
</div>
<div class="roadmap-grid">
<!-- Kapitel 7 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/07_referenzen_und_speicher/index.html" class="roadmap-card" style="border-left: 4px solid var(--success);">
<div>
<span class="roadmap-number" style="background: var(--success-light); color: var(--success);">Kapitel 07</span>
<div class="roadmap-title">🌳 Referenzen &amp; Stammbäume</div>
<div class="roadmap-desc">Speicherbereiche im RAM, Aliasing (<code>b = a</code>), <code>is</code> vs. <code>==</code> und Familienstammbäume.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 8 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/08_operator_overloading_dunder/index.html" class="roadmap-card" style="border-left: 4px solid var(--secondary);">
<div>
<span class="roadmap-number" style="background: #e0f2fe; color: #0284c7;">Kapitel 08</span>
<div class="roadmap-title">➕ Operator Overloading &amp; Dunder</div>
<div class="roadmap-desc">Eigene Klassen rechenbar machen mit <code>__add__</code>, <code>__mul__</code>, <code>__eq__</code> für 2D-Vektoren &amp; Wegstrecken.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 9 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/09_eigene_unit_tests_schreiben/index.html" class="roadmap-card" style="border-left: 4px solid var(--primary);">
<div>
<span class="roadmap-number" style="background: var(--primary-light); color: var(--primary);">Kapitel 09</span>
<div class="roadmap-title">🧪 Eigene Unit Tests &amp; TDD</div>
<div class="roadmap-desc">Schreibe eigene Testsuiten mit <code>unittest</code>, <code>self.assertEqual()</code>, <code>assertRaises()</code> und lerne TDD.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 10 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/10_vererbung_und_super/index.html" class="roadmap-card" style="border-left: 4px solid var(--primary);">
<div>
<span class="roadmap-number" style="background: var(--primary-light); color: var(--primary);">Kapitel 10</span>
<div class="roadmap-title">🧬 Vererbung &amp; super()</div>
<div class="roadmap-desc">DRY-Prinzip, Basis- &amp; Kindklassen, <code>super().__init__()</code>, Methoden erweitern &amp; Fahrzeugflotten.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 11 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/11_polymorphie_und_interfaces/index.html" class="roadmap-card" style="border-left: 4px solid var(--secondary);">
<div>
<span class="roadmap-number" style="background: #e0f2fe; color: #0284c7;">Kapitel 11</span>
<div class="roadmap-title">🎭 Polymorphie &amp; Interfaces</div>
<div class="roadmap-desc">Vielgestaltigkeit, Duck Typing, abstrakte Basisklassen (<code>ABC</code>), Geometrie-Engine &amp; Zeichenflächen.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 12 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/12_exceptions_und_fehlerbehandlung/index.html" class="roadmap-card" style="border-left: 4px solid var(--danger);">
<div>
<span class="roadmap-number" style="background: var(--danger-light); color: var(--danger);">Kapitel 12</span>
<div class="roadmap-title">🛡️ Exceptions &amp; Fehlerbehandlung</div>
<div class="roadmap-desc">Robuste Fehlerkontrolle mit <code>try-except-else-finally</code>, <code>raise</code> und eigene Fehlerklassen im Banking.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 13 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/13_persistenz_json_und_csv/index.html" class="roadmap-card" style="border-left: 4px solid var(--primary);">
<div>
<span class="roadmap-number" style="background: var(--primary-light); color: var(--primary);">Kapitel 13</span>
<div class="roadmap-title">💾 Datei-Persistenz: JSON &amp; CSV</div>
<div class="roadmap-desc">Dauerhaftes Speichern &amp; Laden: Savegames mit <code>to_dict()</code>/<code>from_dict()</code>, <code>json.dump</code> und CSV-Export.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 14 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/14_gui_mit_tkinter/index.html" class="roadmap-card" style="border-left: 4px solid var(--purple);">
<div>
<span class="roadmap-number" style="background: var(--purple-light); color: var(--purple);">Kapitel 14</span>
<div class="roadmap-title">🖥️ Desktop-GUIs mit Tkinter</div>
<div class="roadmap-desc">Fenster, Buttons, Labels, Grid-Layout, Event-Loop und MVC-Architektur im interaktiven Zähler &amp; Rechner.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 15 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/15_parameter_und_container/index.html" class="roadmap-card" style="border-left: 4px solid var(--success);">
<div>
<span class="roadmap-number" style="background: var(--success-light); color: var(--success);">Kapitel 15</span>
<div class="roadmap-title">🎒 Parameter &amp; Eigene Container</div>
<div class="roadmap-desc">Variable Argumente (<code>*args</code>, <code>**kwargs</code>), Unpacking und Container-Dunder (<code>len</code>, <code>[]</code>, <code>in</code>, <code>iter</code>) im Gaming-Inventar.</div>
</div>
<div class="roadmap-footer"><span>Kapitel öffnen &rarr;</span></div>
</a>
<!-- Kapitel 16 -->
<a href="lehrpfad_3_fortgeschrittenes_oop/16_master_abschlussprojekt/index.html" class="roadmap-card" style="border-left: 4px solid #f59e0b; background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);">
<div>
<span class="roadmap-number" style="background: #fef3c7; color: #b45309; font-weight: bold;">🏆 Kapitel 16 &bull; Masterprojekt</span>
<div class="roadmap-title">🐾 PetCare &amp; Tierheim-Manager</div>
<div class="roadmap-desc">Das große Meisterstück: MVC-Architektur, Vererbung, Polymorphie, JSON-Savegames, CSV-Export &amp; Tkinter Desktop-App!</div>
</div>
<div class="roadmap-footer" style="color: #b45309; font-weight: bold;">Meisterstück starten &rarr;</div>
</a>
</div>
</section>
<!-- AUSFÜHRLICHE TEST-ANLEITUNG -->
<section class="card" style="margin-top: 35px; border-left: 5px solid var(--primary);">
<h2>🧪 Wie benutze ich die Tests? (Komplette Test-Anleitung)</h2>
<p>
In der professionellen Softwareentwicklung schreibt man zu jedem Code automatische <strong>Unit Tests</strong>.
Das Geniale daran: <strong>Du musst nie raten, ob deine Lösung stimmt!</strong> Das Testskript überprüft deine Funktionen in Sekundenbruchteilen mit vielen verschiedenen Testfällen.
</p>
<h3>1. Einen Test für ein einzelnes Kapitel ausführen</h3>
<p>Öffne das Terminal in VS Code mit <kbd>Strg</kbd> + <kbd>`</kbd> (Mac: <kbd>Cmd</kbd> + <kbd>`</kbd>). Wechsle in den jeweiligen Kapitelordner und starte das Testskript:</p>
<div class="code-container">
<div class="code-header">
<span>Terminal (Beispiel für Grundlagen G01)</span>
</div>
<pre><code>cd g01_erste_schritte_taschenrechner
python3 test_aufgabe.py</code></pre>
</div>
<h3>2. Wie lese ich das Testergebnis?</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 15px 0;">
<div style="background: var(--success-light); border: 1px solid var(--success); border-radius: var(--radius-sm); padding: 14px;">
<h4 style="color: var(--success); margin-bottom: 6px;">✅ Alles bestanden (OK)</h4>
<pre style="padding: 6px; font-size: 0.82rem; background: rgba(0,0,0,0.05); color: #064e3b; border-radius: 4px;"><code>Ran 4 tests in 0.002s
OK</code></pre>
<p style="font-size: 0.88rem; margin: 6px 0 0 0; color: #064e3b;">Perfekt! Alle Anforderungen sind erfüllt. Du bist bereit für das nächste Kapitel!</p>
</div>
<div style="background: var(--warning-light); border: 1px solid var(--warning); border-radius: var(--radius-sm); padding: 14px;">
<h4 style="color: var(--warning); margin-bottom: 6px;">❌ Falsches Ergebnis (FAIL)</h4>
<pre style="padding: 6px; font-size: 0.82rem; background: rgba(0,0,0,0.05); color: #78350f; border-radius: 4px;"><code>AssertionError: 25 != 40
berechne_endstand falsch</code></pre>
<p style="font-size: 0.88rem; margin: 6px 0 0 0; color: #78350f;">Dein Code stürzt nicht ab, aber liefert einen falschen Wert (z.B. falsche Rechenformel).</p>
</div>
<div style="background: var(--danger-light); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: 14px;">
<h4 style="color: var(--danger); margin-bottom: 6px;">💥 Absturz / Syntax (ERROR)</h4>
<pre style="padding: 6px; font-size: 0.82rem; background: rgba(0,0,0,0.05); color: #7f1d1d; border-radius: 4px;"><code>AttributeError: 'Fahrrad'
object has no attribute 'gang'</code></pre>
<p style="font-size: 0.88rem; margin: 6px 0 0 0; color: #7f1d1d;">Ein Attribut oder Methodenname fehlt oder ist falsch geschrieben (z.B. Tippfehler).</p>
</div>
</div>
<h3>3. Gesamten Kursfortschritt auf einen Klick prüfen</h3>
<p>Du möchtest wissen, wie viele Kapitel du schon gelöst hast? Führe im Hauptordner <code>Aufgaben-Python</code> einfach folgenden Befehl aus:</p>
<div class="code-container">
<div class="code-header">
<span>Terminal (Hauptordner)</span>
</div>
<pre><code>python3 test_all.py</code></pre>
</div>
<div class="box box-tipp">
<div class="box-title">💡 Die 3 goldenen Regeln beim Arbeiten mit Tests:</div>
<ol style="margin-left: 20px; margin-top: 6px;">
<li style="margin-bottom: 6px;"><strong>Immer <code>return</code> statt nur <code>print()</code>:</strong> Tests prüfen das, was eine Funktion mit <code>return</code> zurückliefert. Ein <code>print()</code> zeigt es zwar auf dem Bildschirm an, reicht dem Test aber nicht!</li>
<li style="margin-bottom: 6px;"><strong>Exakte Namen beachten:</strong> Wenn die Aufgabe <code>def addieren(a, b):</code> verlangt, darf die Funktion nicht <code>def Addieren</code> heißen (Python unterscheidet Groß- und Kleinschreibung).</li>
<li style="margin-bottom: 6px;"><strong>Fehlermeldungen von unten nach oben lesen:</strong> Ganz unten steht immer genau, was nicht gepasst hat!</li>
</ol>
</div>
</section>
<!-- Live Python-Playground (Pyodide WebAssembly) -->
<section id="python-live-playground"></section>
<!-- Interaktiver Traceback-Dolmetscher -->
<section id="error-interpreter-widget"></section>
<!-- Lehrpfad-Zertifikate Card -->
<section class="card" style="border-left: 5px solid #d97706; background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);">
<h2>🏆 Offizielle Lehrpfad-Abschlusszertifikate</h2>
<p>
Sobald du einen Lehrpfad oder das gesamte Portal abgeschlossen hast, kannst du dir hier dein persönliches, ausdruckbares <strong>Abschluss-Zertifikat</strong> mit deinen freigeschalteten Leistungsnachweisen generieren!
</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 15px;">
<button onclick="window.zeigeZertifikatModal(1)" class="btn" style="background: #1e40af; justify-content: center;">
🌱 Zertifikat Lehrpfad 1
</button>
<button onclick="window.zeigeZertifikatModal(2)" class="btn" style="background: #4338ca; justify-content: center;">
🏗️ Zertifikat Lehrpfad 2
</button>
<button onclick="window.zeigeZertifikatModal(3)" class="btn" style="background: #15803d; justify-content: center;">
🚀 Zertifikat Lehrpfad 3
</button>
<button onclick="window.zeigeZertifikatModal('master')" class="btn" style="background: #b45309; justify-content: center; font-weight: bold;">
👑 Master-Zertifikat
</button>
</div>
</section>
<!-- FAQ & Troubleshooting Card -->
<section class="card">
<h2>🩺 Häufige Fragen & Troubleshooting</h2>
<details>
<summary>❌ Fehlermeldung: <code>TypeError: ... takes 0 positional arguments but 1 was given</code></summary>
<div class="details-content">
<p><strong>Ursache:</strong> Du hast bei einer Methode in deiner Klasse das <code>self</code> im Methodenkopf vergessen!</p>
<p><strong>Lösung:</strong> Schreibe <code>def meine_methode(self):</code> statt <code>def meine_methode():</code>.</p>
</div>
</details>
<details>
<summary>❌ Fehlermeldung: <code>AttributeError: 'NoneType' object has no attribute '...'</code></summary>
<div class="details-content">
<p><strong>Ursache:</strong> Eine Funktion oder Methode hat nichts zurückgegeben (also <code>None</code>), und du versuchst, darauf zuzugreifen.</p>
<p><strong>Lösung:</strong> Prüfe, ob du am Ende der Methode das <code>return ...</code> vergessen hast!</p>
</div>
</details>
<details>
<summary>❌ Wie wechsle ich im Terminal zwischen den Ordnern hin und her?</summary>
<div class="details-content">
<p><strong>In einen Unterordner hinein:</strong> <code>cd lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner</code></p>
<p><strong>Einen Ordner nach oben zurück:</strong> <code>cd ..</code></p>
<p><strong>Inhalt des aktuellen Ordners auflisten:</strong> <code>ls</code> (oder <code>dir</code> auf Windows)</p>
</div>
</details>
</section>
</main>
<!-- Lokale Didaktik- & Gamification-Scripts (funktionieren auch offline per Doppelklick via file://) -->
<script src="assets/gamification_data.js"></script>
<script src="assets/gamification.js"></script>
<script src="assets/interpreter.js"></script>
<script src="assets/certificate.js"></script>
<script src="assets/parsons.js"></script>
<script src="assets/runner.js"></script>
</body>
</html>