Aufgaben-Python/index.html

913 lines
56 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 &amp; Software-Entwicklung</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="app-layout">
<aside class="app-sidebar">
<div class="sidebar-header">
<a href="./index.html" class="sidebar-brand-link">
<div class="sidebar-logo">🐍</div>
<div>
<div class="sidebar-title">Python Portal</div>
<div class="sidebar-subtitle">Lernplattform</div>
</div>
</a>
</div>
<div class="sidebar-quick-nav">
<a href="./index.html" class="sidebar-link">🏠 Startseite</a>
<a href="./index.html#tutorial" class="sidebar-link">📖 Tutorial &amp; Workflow</a>
<a href="./index.html#zertifikate" class="sidebar-link">🏆 Zertifikate</a>
</div>
<div class="sidebar-nav">
<div class="sidebar-group">
<div class="sidebar-group-title">
<span>🌱 1. Grundlagen</span>
<span style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 99px; font-size: 0.7rem;">G01–G10</span>
</div>
<div style="display: flex; flex-direction: column; gap: 2px;">
<a href="./lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🧮</span>
<span class="sidebar-link-text">G01. Taschenrechner</span>
</a>
<a href="./lehrpfad_1_grundlagen/02_variablen_und_datentypen/index.html" class="sidebar-link">
<span class="sidebar-link-icon">📦</span>
<span class="sidebar-link-text">G02. Variablen & Typen</span>
</a>
<a href="./lehrpfad_1_grundlagen/03_ein_und_ausgabe/index.html" class="sidebar-link">
<span class="sidebar-link-icon">💬</span>
<span class="sidebar-link-text">G03. Ein- & Ausgabe</span>
</a>
<a href="./lehrpfad_1_grundlagen/04_verzweigungen_und_bedingungen/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🚦</span>
<span class="sidebar-link-text">G04. Bedingungen (if)</span>
</a>
<a href="./lehrpfad_1_grundlagen/05_schleifen_und_wiederholungen/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🎡</span>
<span class="sidebar-link-text">G05. Schleifen (for/while)</span>
</a>
<a href="./lehrpfad_1_grundlagen/06_funktionen_und_module/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🪄</span>
<span class="sidebar-link-text">G06. Funktionen & Module</span>
</a>
<a href="./lehrpfad_1_grundlagen/07_listen_und_sequenzen/index.html" class="sidebar-link">
<span class="sidebar-link-icon">📋</span>
<span class="sidebar-link-text">G07. Listen & Sequenzen</span>
</a>
<a href="./lehrpfad_1_grundlagen/08_textverarbeitung_und_strings/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🔤</span>
<span class="sidebar-link-text">G08. String-Methoden</span>
</a>
<a href="./lehrpfad_1_grundlagen/09_dictionaries_und_sets/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🗃️</span>
<span class="sidebar-link-text">G09. Dicts & Sets</span>
</a>
<a href="./lehrpfad_1_grundlagen/10_comprehensions_datum_algorithmen/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🚀</span>
<span class="sidebar-link-text">G10. Comprehensions</span>
</a>
</div>
</div>
<div class="sidebar-group">
<div class="sidebar-group-title">
<span>🏗️ 2. OOP Einstieg</span>
<span style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 99px; font-size: 0.7rem;">00–06</span>
</div>
<div style="display: flex; flex-direction: column; gap: 2px;">
<a href="./lehrpfad_2_oop_einstieg/00_fehlersuche_und_grundlagen/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🔍</span>
<span class="sidebar-link-text">00. Fehlersuche & Debug</span>
</a>
<a href="./lehrpfad_2_oop_einstieg/01_einstieg_klassen/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🏗️</span>
<span class="sidebar-link-text">01. Einstieg in Klassen</span>
</a>
<a href="./lehrpfad_2_oop_einstieg/02_init_und_self/index.html" class="sidebar-link">
<span class="sidebar-link-icon">⚙️</span>
<span class="sidebar-link-text">02. Konstruktor & self</span>
</a>
<a href="./lehrpfad_2_oop_einstieg/03_methoden_und_verhalten/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🏎️</span>
<span class="sidebar-link-text">03. Methoden & Verhalten</span>
</a>
<a href="./lehrpfad_2_oop_einstieg/04_str_und_darstellung/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🧾</span>
<span class="sidebar-link-text">04. __str__ Darstellung</span>
</a>
<a href="./lehrpfad_2_oop_einstieg/04b_umstieg_vscode/index.html" class="sidebar-link">
<span class="sidebar-link-icon">💻</span>
<span class="sidebar-link-text">04b. VS Code Setup</span>
</a>
<a href="./lehrpfad_2_oop_einstieg/04c_git_und_versionskontrolle/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🌿</span>
<span class="sidebar-link-text">04c. Git-Versionskontrolle</span>
</a>
<a href="./lehrpfad_2_oop_einstieg/05_objekte_kombinieren/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🎵</span>
<span class="sidebar-link-text">05. Objekte kombinieren</span>
</a>
<a href="./lehrpfad_2_oop_einstieg/06_abschlussprojekt_tamagotchi/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🥚</span>
<span class="sidebar-link-text">06. Projekt: Tamagotchi</span>
</a>
</div>
</div>
<div class="sidebar-group">
<div class="sidebar-group-title">
<span>🚀 3. Fortgeschritten</span>
<span style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 99px; font-size: 0.7rem;">07–16</span>
</div>
<div style="display: flex; flex-direction: column; gap: 2px;">
<a href="./lehrpfad_3_fortgeschrittenes_oop/07_referenzen_und_speicher/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🧠</span>
<span class="sidebar-link-text">07. Referenzen & Speicher</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/08_operator_overloading_dunder/index.html" class="sidebar-link">
<span class="sidebar-link-icon">➕</span>
<span class="sidebar-link-text">08. Operator Overloading</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/09_eigene_unit_tests_schreiben/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🧪</span>
<span class="sidebar-link-text">09. Unit Tests & TDD</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/10_vererbung_und_super/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🧬</span>
<span class="sidebar-link-text">10. Vererbung & super()</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/11_polymorphie_und_interfaces/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🎭</span>
<span class="sidebar-link-text">11. Polymorphie</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/12_exceptions_und_fehlerbehandlung/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🛡️</span>
<span class="sidebar-link-text">12. Exceptions & Fehler</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/13_persistenz_json_und_csv/index.html" class="sidebar-link">
<span class="sidebar-link-icon">💾</span>
<span class="sidebar-link-text">13. Persistenz (JSON/CSV)</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/14_gui_mit_tkinter/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🖥️</span>
<span class="sidebar-link-text">14. Desktop-GUIs (Tkinter)</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/15_parameter_und_container/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🎒</span>
<span class="sidebar-link-text">15. Container & *args</span>
</a>
<a href="./lehrpfad_3_fortgeschrittenes_oop/16_master_abschlussprojekt/index.html" class="sidebar-link">
<span class="sidebar-link-icon">🏆</span>
<span class="sidebar-link-text">16. Master-Abschlussprojekt</span>
</a>
</div>
</div>
</div>
<div class="sidebar-footer">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="font-size: 0.85rem; font-weight: 700; color: white;" id="sidebar-level-text">⭐ Level 1</div>
<div style="font-size: 0.82rem; font-weight: 700; color: #38bdf8;" id="sidebar-xp-text">0 XP</div>
</div>
</div>
</aside>
<div class="app-main">
<header>
<div class="header-container">
<div class="header-badge">🐍 Python Nachhilfe- &amp; Selbstlern-Portal</div>
<h1>Vom Einsteiger zum Software-Entwickler</h1>
<p>3 didaktisch strukturierte Lehrpfade: Prozedurale Grundlagen &bull; Objektorientierung &bull; Professionelle Werkzeuge (Git, TDD, Tkinter, Persistenz)</p>
<nav class="nav-links" style="margin-top: 18px;">
<a href="#tutorial">📖 Anleitung &amp; Workflow</a>
<a href="#lehrpfad-1">🌱 1. Grundlagen</a>
<a href="#lehrpfad-2">🏗️ 2. OOP Einstieg</a>
<a href="#lehrpfad-3">🚀 3. Fortgeschritten</a>
<a href="#python-live-playground">⚡ Live-Playground</a>
<a href="#error-interpreter-widget">🩺 Fehler-Dolmetscher</a>
<a href="#zertifikate">🏆 Zertifikate</a>
</nav>
</div>
</header>
<main class="container">
<!-- Willkommen Card -->
<section class="card">
<h2>👋 Willkommen zu deiner Python-Lernreise!</h2>
<p>
Dieses interaktive Portal begleitet dich Schritt für Schritt von den allerersten Zeilen Code bis hin zu vollständigen, objektorientierten Desktop-Anwendungen. Jede Einheit bietet didaktische Alltagsanalogien, Subgoal-Schritte und <strong>automatische Unittests</strong> für sofortiges Feedback.
</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 20px 0;">
<div style="background: #f8fafc; border-left: 4px solid #059669; padding: 14px; border-radius: var(--radius-sm);">
<span class="track-badge track-1-badge">Lehrpfad 1</span>
<h4 style="margin: 4px 0; color: #065f46;">🌱 Grundlagen der Programmierung</h4>
<p style="font-size: 0.85rem; color: var(--text-muted); margin: 0;">Rechnen, Variablen, Bedingungen, Schleifen, Funktionen, Listen, Dictionaries &amp; Strings (G01–G10).</p>
</div>
<div style="background: #f8fafc; border-left: 4px solid #4f46e5; padding: 14px; border-radius: var(--radius-sm);">
<span class="track-badge track-2-badge">Lehrpfad 2</span>
<h4 style="margin: 4px 0; color: #312e81;">🏗️ Einstieg in OOP &amp; Tools</h4>
<p style="font-size: 0.85rem; color: var(--text-muted); margin: 0;">Klassen, __init__, Methoden, UML-Diagramme, VS Code, Git-Versionskontrolle &amp; Tamagotchi (00–06).</p>
</div>
<div style="background: #f8fafc; border-left: 4px solid #7c3aed; padding: 14px; border-radius: var(--radius-sm);">
<span class="track-badge track-3-badge">Lehrpfad 3</span>
<h4 style="margin: 4px 0; color: #4c1d95;">🚀 Fortgeschrittenes OOP &amp; GUIs</h4>
<p style="font-size: 0.85rem; color: var(--text-muted); margin: 0;">Speicher, Dunder-Methoden, Unit Tests (TDD), Vererbung, Exceptions, JSON, Tkinter &amp; Masterprojekt (07–16).</p>
</div>
</div>
<div class="box box-tipp">
<div class="box-title">📚 Lehrplan-Abstimmung:</div>
Alle Einheiten sind exakt auf das offizielle Unterrichtsskriptum abgestimmt. Detaillierter Leitfaden in <a href="LEHRPLAN.md" style="color: var(--primary); font-weight: bold;">LEHRPLAN.md</a>.
</div>
</section>
<!-- 📖 Schritt-für-Schritt Tutorial -->
<section class="card" id="tutorial" style="border-left: 4px solid var(--primary);">
<h2>📖 Schritt-für-Schritt-Tutorial: So lernst du mit dem Portal</h2>
<p>
Dieses Portal basiert auf dem <strong>PRIMM-Modell</strong> der Informatikdidaktik (Predict &bull; Read &bull; Investigate &bull; Modify &bull; Make):
</p>
<div style="display: flex; flex-direction: column; gap: 16px; margin-top: 18px;">
<div style="display: flex; gap: 14px; align-items: flex-start;">
<div style="background: var(--primary); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;">1</div>
<div>
<h4 style="margin: 0 0 4px 0; color: var(--text-main);">📥 Lokal nutzen oder online lernen</h4>
<p style="font-size: 0.9rem; color: var(--text-muted); margin: 0;">Du kannst das Repository lokal klonen (<code>git clone https://github.com/alexander-mueller/python-oop-lernportal.git</code>) oder die Seiten direkt offline per Doppelklick auf <code>index.html</code> öffnen.</p>
</div>
</div>
<div style="display: flex; gap: 14px; align-items: flex-start;">
<div style="background: var(--primary); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;">2</div>
<div>
<h4 style="margin: 0 0 4px 0; color: var(--text-main);">🧩 Kapitel lesen &amp; Parsons-Puzzle lösen (+25 XP)</h4>
<p style="font-size: 0.9rem; color: var(--text-muted); margin: 0;">Lies die Alltagsanalogie im Kapitel-Guide und bringe die durcheinandergeratenen Code-Zeilen im interaktiven Puzzle per Klick in die richtige Reihenfolge.</p>
</div>
</div>
<div style="display: flex; gap: 14px; align-items: flex-start;">
<div style="background: var(--primary); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;">3</div>
<div>
<h4 style="margin: 0 0 4px 0; color: var(--text-main);">💻 Startercode lösen &amp; Tests ausführen (+100 XP)</h4>
<p style="font-size: 0.9rem; color: var(--text-muted); margin: 0;">Öffne <code>aufgabe.py</code> im Editor, bearbeite die nummerierten Teilziele und teste deine Lösung im Terminal mit <code>python3 test_aufgabe.py</code>.</p>
</div>
</div>
<div style="display: flex; gap: 14px; align-items: flex-start;">
<div style="background: var(--primary); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;">4</div>
<div>
<h4 style="margin: 0 0 4px 0; color: var(--text-main);">🩺 Hilfe bei Fehlern</h4>
<p style="font-size: 0.9rem; color: var(--text-muted); margin: 0;">Kopiere rote Traceback-Fehlermeldungen aus dem Terminal in den untenstehenden <strong>Fehler-Dolmetscher</strong>, um verständliche Lösungsschritte auf Deutsch zu erhalten.</p>
</div>
</div>
</div>
</section>
<!-- 🔍 Live-Suche -->
<div class="search-bar-container">
<span style="font-size: 1.1rem;">🔍</span>
<input type="text" id="portal-search-input" class="search-input" placeholder="Kapitel oder Thema durchsuchen (z.B. Schleifen, Klassen, Git, Tkinter, Dunder, Exceptions)...">
<span id="search-results-count" style="font-size: 0.8rem; font-weight: 700; color: var(--primary); display: none;"></span>
</div>
<!-- LEHRPFAD 1 -->
<section>
<div class="section-header">
<div>
<h2 id="lehrpfad-1">🌱 Lehrpfad 1: Grundlagen der Programmierung</h2>
<div class="section-desc">Datentypen, Kontrollstrukturen, Funktionen und Datenstrukturen (G01–G10).</div>
</div>
<span class="track-badge track-1-badge">10 Kapitel</span>
</div>
<div class="roadmap-grid">
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">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> & print().</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/01_erste_schritte_taschenrechner/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G02</span>
<div class="roadmap-title">📦 Variablen & Datentypen</div>
<div class="roadmap-desc">Typen (<code>str</code>, <code>int</code>, <code>float</code>, <code>bool</code>), Typumwandlung (Casting) & Vermeidung typischer Typfehler.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/02_variablen_und_datentypen/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/02_variablen_und_datentypen/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/02_variablen_und_datentypen/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/02_variablen_und_datentypen/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G03</span>
<div class="roadmap-title">💬 Interaktive Ein- & Ausgabe</div>
<div class="roadmap-desc">Tastatureingaben mit <code>input()</code>, Textformatierung mit modernen f-Strings und Parametern.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/03_ein_und_ausgabe/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/03_ein_und_ausgabe/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/03_ein_und_ausgabe/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/03_ein_und_ausgabe/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G04</span>
<div class="roadmap-title">🚦 Verzweigungen & Bedingungen</div>
<div class="roadmap-desc">Entscheidungen treffen mit <code>if</code>, <code>elif</code>, <code>else</code>, Vergleichsoperatoren & logischen Verknüpfungen.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/04_verzweigungen_und_bedingungen/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/04_verzweigungen_und_bedingungen/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/04_verzweigungen_und_bedingungen/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/04_verzweigungen_und_bedingungen/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G05</span>
<div class="roadmap-title">🎡 Schleifen & Wiederholungen</div>
<div class="roadmap-desc">Zählschleifen <code>for ... in range()</code>, Bedingungsschleifen <code>while</code>, <code>break</code> & <code>continue</code>.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/05_schleifen_und_wiederholungen/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/05_schleifen_und_wiederholungen/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/05_schleifen_und_wiederholungen/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/05_schleifen_und_wiederholungen/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G06</span>
<div class="roadmap-title">🪄 Funktionen & Standardmodule</div>
<div class="roadmap-desc">Eigene Funktionen definieren mit <code>def</code>, <code>return</code>, Default-Parameter und Importe (<code>math</code>, <code>random</code>).</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/06_funktionen_und_module/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/06_funktionen_und_module/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/06_funktionen_und_module/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/06_funktionen_und_module/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G07</span>
<div class="roadmap-title">📋 Listen & Sequenzen</div>
<div class="roadmap-desc">Listen erstellen, Indexzugriff <code>[0]</code>, Slicing <code>[1:4]</code>, Methoden (<code>append</code>, <code>pop</code>) & Schleifen.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/07_listen_und_sequenzen/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/07_listen_und_sequenzen/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/07_listen_und_sequenzen/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/07_listen_und_sequenzen/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G08</span>
<div class="roadmap-title">🔤 Strings & Textverarbeitung</div>
<div class="roadmap-desc">String-Methoden (<code>split</code>, <code>join</code>, <code>strip</code>, <code>replace</code>), Groß/Klein und Zeichenanalysen.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/08_textverarbeitung_und_strings/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/08_textverarbeitung_und_strings/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/08_textverarbeitung_und_strings/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/08_textverarbeitung_und_strings/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G09</span>
<div class="roadmap-title">🗃️ Dictionaries & Mengen (Sets)</div>
<div class="roadmap-desc">Schlüssel-Wert-Paare <code>dict</code>, sicherer Zugriff mit <code>.get()</code>, eindeutige Mengen <code>set</code> & Operationen.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/09_dictionaries_und_sets/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/09_dictionaries_und_sets/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/09_dictionaries_und_sets/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/09_dictionaries_und_sets/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #059669;">
<div>
<span class="roadmap-number" style="background: #05966918; color: #059669;">G10</span>
<div class="roadmap-title">🚀 List Comprehensions & Datetime</div>
<div class="roadmap-desc">Kompakte List-Comprehensions, Datumsberechnungen mit <code>datetime</code> & grundlegende Algorithmen.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_1_grundlagen/10_comprehensions_datum_algorithmen/index.html" class="card-primary-btn" style="background: #059669;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_1_grundlagen/10_comprehensions_datum_algorithmen/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_1_grundlagen/10_comprehensions_datum_algorithmen/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_1_grundlagen/10_comprehensions_datum_algorithmen/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
</div>
</section>
<!-- LEHRPFAD 2 -->
<section>
<div class="section-header">
<div>
<h2 id="lehrpfad-2">🏗️ Lehrpfad 2: Einstieg in OOP &amp; Entwickler-Tools</h2>
<div class="section-desc">Klassen, Konstruktoren, Methoden, Komposition, VS Code, Git &amp; Tamagotchi (00–06).</div>
</div>
<span class="track-badge track-2-badge">9 Module</span>
</div>
<div class="roadmap-grid">
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">OOP 00</span>
<div class="roadmap-title">🔍 Fehlersuche & Debugging</div>
<div class="roadmap-desc">Typische Syntax-, Type- und Index-Fehler verstehen, Fehlermeldungen lesen und gezielt beheben.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/00_fehlersuche_und_grundlagen/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/00_fehlersuche_und_grundlagen/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_2_oop_einstieg/00_fehlersuche_und_grundlagen/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_2_oop_einstieg/00_fehlersuche_und_grundlagen/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">OOP 01</span>
<div class="roadmap-title">🏗️ Klassen & Baupläne</div>
<div class="roadmap-desc">Objektorientierung verstehen: Vom Bauplan zum fertigen Objekt (Instanz) im Speicher.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/01_einstieg_klassen/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/01_einstieg_klassen/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_2_oop_einstieg/01_einstieg_klassen/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_2_oop_einstieg/01_einstieg_klassen/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">OOP 02</span>
<div class="roadmap-title">⚙️ Konstruktor __init__ & self</div>
<div class="roadmap-desc">Objekte initialisieren, Instanzvariablen mit <code>self</code> anlegen und Parameter übergeben.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/02_init_und_self/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/02_init_und_self/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_2_oop_einstieg/02_init_und_self/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_2_oop_einstieg/02_init_und_self/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">OOP 03</span>
<div class="roadmap-title">🏎️ Methoden & Verhalten</div>
<div class="roadmap-desc">Objekten Fähigkeiten begeben: Methoden definieren, Zustand verändern und Werte berechnen.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/03_methoden_und_verhalten/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/03_methoden_und_verhalten/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_2_oop_einstieg/03_methoden_und_verhalten/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_2_oop_einstieg/03_methoden_und_verhalten/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">OOP 04</span>
<div class="roadmap-title">🧾 Schöne Ausgabe mit __str__</div>
<div class="roadmap-desc">Magische Dunder-Methode <code>__str__</code> für saubere Textausgaben beim Drucken mit <code>print()</code>.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/04_str_und_darstellung/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/04_str_und_darstellung/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_2_oop_einstieg/04_str_und_darstellung/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_2_oop_einstieg/04_str_und_darstellung/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">Tooling 04b</span>
<div class="roadmap-title">💻 Exkurs: Umstieg auf VS Code</div>
<div class="roadmap-desc">Vom Schul-IDLE zu einer modernen Entwicklerumgebung: Installation, Python-Extension & Terminal.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/04b_umstieg_vscode/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/04b_umstieg_vscode/vscode_test.py" download>💻 vscode_test.py</a>
<a href="lehrpfad_2_oop_einstieg/04b_umstieg_vscode/index.html">📖 Guide</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">Tooling 04c</span>
<div class="roadmap-title">🌿 Exkurs: Git & GitHub</div>
<div class="roadmap-desc">Versionskontrolle: Commits, Branches, Status und kollaboratives Arbeiten im Terminal.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/04c_git_und_versionskontrolle/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/04c_git_und_versionskontrolle/git_uebung.py" download>🌿 git_uebung.py</a>
<a href="lehrpfad_2_oop_einstieg/04c_git_und_versionskontrolle/README.md">📖 README</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">OOP 05</span>
<div class="roadmap-title">🎵 Objekte kombinieren (Komposition)</div>
<div class="roadmap-desc">Klassen interagieren lassen: Eine Playlist besitzt mehrere Songs, ein Warenkorb mehrere Artikel.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/05_objekte_kombinieren/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/05_objekte_kombinieren/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_2_oop_einstieg/05_objekte_kombinieren/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_2_oop_einstieg/05_objekte_kombinieren/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #4f46e5;">
<div>
<span class="roadmap-number" style="background: #4f46e518; color: #4f46e5;">Projekt 06</span>
<div class="roadmap-title">🥚 Abschlussprojekt: Tamagotchi</div>
<div class="roadmap-desc">Das große interaktive Terminal-Haustier: Hunger, Energie, Glück, Schlafen, Füttern & Spielen.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_2_oop_einstieg/06_abschlussprojekt_tamagotchi/index.html" class="card-primary-btn" style="background: #4f46e5;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_2_oop_einstieg/06_abschlussprojekt_tamagotchi/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_2_oop_einstieg/06_abschlussprojekt_tamagotchi/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_2_oop_einstieg/06_abschlussprojekt_tamagotchi/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
</div>
</section>
<!-- LEHRPFAD 3 -->
<section>
<div class="section-header">
<div>
<h2 id="lehrpfad-3">🚀 Lehrpfad 3: Fortgeschrittenes OOP &amp; GUIs</h2>
<div class="section-desc">Dunder-Methoden, Unit Tests (TDD), Vererbung, Exceptions, JSON, Tkinter &amp; Masterprojekt (07–16).</div>
</div>
<span class="track-badge track-3-badge">10 Module</span>
</div>
<div class="roadmap-grid">
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 07</span>
<div class="roadmap-title">🧠 Referenzen & Speicher (Stack/Heap)</div>
<div class="roadmap-desc">Veränderliche vs. unveränderliche Datentypen, <code>is</code> vs. <code>==</code>, flache und tiefe Kopien.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/07_referenzen_und_speicher/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/07_referenzen_und_speicher/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/07_referenzen_und_speicher/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/07_referenzen_und_speicher/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 08</span>
<div class="roadmap-title">➕ Operator Overloading & Dunder</div>
<div class="roadmap-desc">Klassen rechen- und vergleichbar machen mit <code>__add__</code>, <code>__eq__</code>, <code>__len__</code>.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/08_operator_overloading_dunder/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/08_operator_overloading_dunder/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/08_operator_overloading_dunder/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/08_operator_overloading_dunder/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 09</span>
<div class="roadmap-title">🧪 Eigene Unit Tests & TDD</div>
<div class="roadmap-desc">Software-Qualität sichern: Eigene Testsuiten mit <code>unittest</code> schreiben (Test-Driven Development).</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/09_eigene_unit_tests_schreiben/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/09_eigene_unit_tests_schreiben/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/09_eigene_unit_tests_schreiben/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/09_eigene_unit_tests_schreiben/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 10</span>
<div class="roadmap-title">🧬 Vererbung & super()</div>
<div class="roadmap-desc">Code wiederverwenden nach dem DRY-Prinzip: Basisklassen und abgeleitete Kindklassen.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/10_vererbung_und_super/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/10_vererbung_und_super/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/10_vererbung_und_super/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/10_vererbung_und_super/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 11</span>
<div class="roadmap-title">🎭 Polymorphie & Interfaces</div>
<div class="roadmap-desc">Vielgestaltigkeit: Gleiche Methodennamen bei unterschiedlichen Klassen (Duck Typing).</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/11_polymorphie_und_interfaces/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/11_polymorphie_und_interfaces/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/11_polymorphie_und_interfaces/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/11_polymorphie_und_interfaces/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 12</span>
<div class="roadmap-title">🛡️ Exceptions & Fehlerkontrolle</div>
<div class="roadmap-desc">Fehler abfangen mit <code>try/except/finally</code> und eigene Exception-Klassen definieren.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/12_exceptions_und_fehlerbehandlung/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/12_exceptions_und_fehlerbehandlung/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/12_exceptions_und_fehlerbehandlung/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/12_exceptions_und_fehlerbehandlung/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 13</span>
<div class="roadmap-title">💾 Datei-Persistenz: JSON & CSV</div>
<div class="roadmap-desc">Daten dauerhaft speichern und laden: Savegames, Konfigurationen und Tabellen-Export.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/13_persistenz_json_und_csv/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/13_persistenz_json_und_csv/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/13_persistenz_json_und_csv/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/13_persistenz_json_und_csv/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 14</span>
<div class="roadmap-title">🖥️ Desktop-GUIs mit Tkinter</div>
<div class="roadmap-desc">Grafische Benutzeroberflächen: Fenster, Buttons, Eingabefelder und Event-Handler.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/14_gui_mit_tkinter/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/14_gui_mit_tkinter/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/14_gui_mit_tkinter/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/14_gui_mit_tkinter/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Adv 15</span>
<div class="roadmap-title">🎒 Parameter (*args/**kwargs) & Container</div>
<div class="roadmap-desc">Variable Argumente, Unpacking und eigene Container-Klassen mit <code>__getitem__</code>.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/15_parameter_und_container/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/15_parameter_und_container/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/15_parameter_und_container/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/15_parameter_und_container/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
<div class="roadmap-card" style="border-left: 4px solid #7c3aed;">
<div>
<span class="roadmap-number" style="background: #7c3aed18; color: #7c3aed;">Master 16</span>
<div class="roadmap-title">🏆 Master-Abschlussprojekt</div>
<div class="roadmap-desc">Die Königsdisziplin: Eine vollständige Desktop-App mit MVC, Persistenz, Tests und GUI.</div>
</div>
<div class="card-actions">
<a href="lehrpfad_3_fortgeschrittenes_oop/16_master_abschlussprojekt/index.html" class="card-primary-btn" style="background: #7c3aed;">📖 Kapitel öffnen &rarr;</a>
<div class="card-sublinks">
<a href="lehrpfad_3_fortgeschrittenes_oop/16_master_abschlussprojekt/aufgabe.py" download>📄 aufgabe.py</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/16_master_abschlussprojekt/test_aufgabe.py" download>🧪 tests</a>
<a href="lehrpfad_3_fortgeschrittenes_oop/16_master_abschlussprojekt/musterloesung.py" download>💡 lösung</a>
</div>
</div>
</div>
</div>
</section>
<!-- 🎮 Gamification Dashboard -->
<section class="hud-card" id="gamification-hud">
<div class="hud-header">
<div class="hud-user">
<div class="hud-avatar" id="hud-avatar-icon">🐣</div>
<div>
<div class="hud-name" id="hud-user-name">Entwickler-Pass</div>
<div class="hud-title"><span id="hud-user-title">Code-Küken</span> &bull; <span class="hud-rank" id="hud-user-rank">Rang: Bronze</span></div>
</div>
</div>
<div class="hud-stats">
<div class="hud-stat-box">
<span class="hud-stat-value" id="hud-stat-level">1</span>
<span class="hud-stat-label">Level</span>
</div>
<div class="hud-stat-box">
<span class="hud-stat-value" id="hud-stat-xp">0 XP</span>
<span class="hud-stat-label">Erfahrung</span>
</div>
<div class="hud-stat-box">
<span class="hud-stat-value" id="hud-stat-solved">0 / 27</span>
<span class="hud-stat-label">Gelöst</span>
</div>
<div class="hud-stat-box">
<span class="hud-stat-value" id="hud-stat-streak">🔥 1 Tag</span>
<span class="hud-stat-label">Streak</span>
</div>
</div>
</div>
<div class="hud-progress-container">
<div class="hud-progress-labels">
<span>Fortschritt zum nächsten Level</span>
<span id="hud-progress-text">0 / 100 XP</span>
</div>
<div class="hud-progress-bar-bg">
<div class="hud-progress-bar-fill" id="hud-progress-bar" style="width: 0%;"></div>
</div>
</div>
<div class="hud-footer">
<div class="hud-cli-tip">
💻 Terminal-Befehl: <code>python3 profil.py</code> &bull; Gesamttest: <code>python3 test_all.py</code>
</div>
<button type="button" class="hud-btn" onclick="if(window.renderGamificationHUD) window.renderGamificationHUD();">
🔄 Status aktualisieren
</button>
</div>
</section>
<!-- ⚡ Live Python Playground -->
<section class="card" id="python-live-playground">
<h2>⚡ Interaktiver Python Live-Playground (Pyodide WebAssembly)</h2>
<p>Führe beliebigen Python-Code direkt im Browser aus – ohne Installation!</p>
<div class="code-container">
<div class="code-header">
<span>🐍 Python Code-Editor</span>
<button type="button" class="btn" id="btn-run-code" style="padding: 4px 12px; font-size: 0.8rem;">▶ Code ausführen</button>
</div>
<textarea id="playground-editor" style="width: 100%; height: 160px; background: #0b0f19; color: #f8fafc; font-family: var(--font-mono); font-size: 0.95rem; border: none; padding: 14px; outline: none; resize: vertical;"># Schreibe hier deinen Python-Code:
class Auto:
def __init__(self, marke, ps):
self.marke = marke
self.ps = ps
def hupen(self):
return f"{self.marke} hupt laut: Hup! Hup! 🚗💨 ({self.ps} PS)"
mein_auto = Auto("Porsche 911", 450)
print(mein_auto.hupen())
</textarea>
</div>
<div style="background: #060911; border-radius: var(--radius-sm); border: 1px solid var(--border-color); padding: 14px; margin-top: 10px;">
<div style="font-size: 0.8rem; font-weight: 700; color: #94a3b8; margin-bottom: 6px;">🖥️ Programmausgabe (Terminal):</div>
<pre id="playground-output" style="color: #38bdf8; min-height: 50px;">Klicke oben auf '▶ Code ausführen', um das Skript zu starten...</pre>
</div>
</section>
<!-- 🩺 Fehler-Dolmetscher -->
<section class="card" id="error-interpreter-widget">
<h2>🩺 Interaktiver Python Fehler-Dolmetscher</h2>
<p>Füge eine englische Fehlermeldung (Traceback) aus dem Terminal ein:</p>
<textarea id="error-input" placeholder="Beispiel: TypeError: unsupported operand type(s) for +: 'int' and 'str'" style="width: 100%; height: 90px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px; font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 10px;"></textarea>
<button type="button" class="btn" id="btn-interpret-error">🔍 Fehler übersetzen &amp; erklären</button>
<div id="error-result" style="display: none; margin-top: 15px; padding: 15px; border-radius: var(--radius-sm); background: #f0fdf4; border: 1px solid #bbf7d0;">
<h4 id="error-name" style="margin-top: 0; color: #166534;"></h4>
<p id="error-explanation" style="color: #1e293b; margin: 8px 0;"></p>
<div style="font-weight: 700; color: #166534; margin-top: 8px;">🛠️ So behebst du das Problem:</div>
<ul id="error-fixes" style="padding-left: 20px; color: #334155; margin-top: 4px;"></ul>
</div>
</section>
<!-- 🏆 Zertifikate -->
<section class="card" id="zertifikate">
<h2>🏆 Lehrpfad-Abschluss-Zertifikate</h2>
<p>Generiere offizielle, druckbare Zertifikate nach erfolgreichem Abschluss eines Lehrpfads:</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px;">
<button type="button" class="btn" onclick="if(window.openCertificate) window.openCertificate('lehrpfad_1');">📜 Zertifikat Lehrpfad 1</button>
<button type="button" class="btn" onclick="if(window.openCertificate) window.openCertificate('lehrpfad_2');">📜 Zertifikat Lehrpfad 2</button>
<button type="button" class="btn" onclick="if(window.openCertificate) window.openCertificate('lehrpfad_3');">📜 Zertifikat Lehrpfad 3</button>
<button type="button" class="btn" onclick="if(window.openCertificate) window.openCertificate('master');">👑 Master-Zertifikat</button>
</div>
</section>
</main>
</div>
</div>
<button type="button" class="sidebar-mobile-toggle"><span>☰ Menü</span></button>
<div class="sidebar-overlay"></div>
<!-- Scripts -->
<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>
<script src="assets/ui_enhancements.js"></script>
<script src="assets/sidebar.js"></script>
</body>
</html>