564 lines
25 KiB
HTML
564 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Python Web-IDE | Interaktiver Arbeitsbereich</title>
|
|
<link rel="stylesheet" href="assets/style.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
background: #090d16;
|
|
color: #f8fafc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.workspace-topbar {
|
|
height: 52px;
|
|
background: #0f172a;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 18px;
|
|
flex-shrink: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.workspace-title {
|
|
font-size: 0.92rem;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.workspace-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.workspace-body {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 42% 58%;
|
|
height: calc(100vh - 52px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pane-left {
|
|
background: #ffffff;
|
|
color: var(--text-main);
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 2px solid #e2e8f0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pane-tabs {
|
|
display: flex;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 0 10px;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pane-tab-btn {
|
|
padding: 10px 14px;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 0.84rem;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.pane-tab-btn:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.pane-tab-btn.active {
|
|
color: var(--primary);
|
|
border-bottom-color: var(--primary);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.pane-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 22px;
|
|
}
|
|
|
|
.pane-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: #0b0f19;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editor-wrapper {
|
|
flex: 1;
|
|
height: 65%;
|
|
min-height: 200px;
|
|
position: relative;
|
|
background: #0b0f19;
|
|
}
|
|
|
|
#monaco-editor-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.terminal-wrapper {
|
|
height: 35%;
|
|
min-height: 140px;
|
|
background: #060911;
|
|
border-top: 2px solid rgba(255, 255, 255, 0.08);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.terminal-header {
|
|
padding: 6px 14px;
|
|
background: #090d16;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.78rem;
|
|
font-family: var(--font-mono);
|
|
color: #94a3b8;
|
|
}
|
|
|
|
#workspace-terminal-output {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
overflow-y: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.88rem;
|
|
line-height: 1.5;
|
|
color: #f1f5f9;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.term-stdout { color: #38bdf8; }
|
|
.term-stderr, .term-error { color: #f87171; font-weight: bold; }
|
|
.term-success { color: #4ade80; font-weight: bold; }
|
|
.term-warning { color: #fbbf24; font-weight: bold; }
|
|
.term-info { color: #94a3b8; }
|
|
|
|
/* Hint Scaffolding Modal */
|
|
.hint-step {
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: var(--radius-sm);
|
|
padding: 12px 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.hint-step h4 { margin: 0 0 6px 0; font-size: 0.95rem; color: var(--text-main); }
|
|
.hint-step-content { font-size: 0.88rem; color: var(--text-muted); display: none; margin-top: 8px; }
|
|
|
|
/* Success Modal */
|
|
.modal-celebration {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 9999;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.workspace-body {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 50% 50%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Topbar -->
|
|
<div class="workspace-topbar">
|
|
<div class="workspace-title">
|
|
<a href="index.html" style="color: #94a3b8; text-decoration: none; font-size: 0.88rem;">🏠 Dashboard</a>
|
|
<span style="color: #64748b;">/</span>
|
|
<span id="workspace-chapter-name">Lerneinheit...</span>
|
|
<span id="editor-save-indicator" style="font-size: 0.75rem; color: #10b981; opacity: 0.5; margin-left: 10px;">💾 Gespeichert</span>
|
|
</div>
|
|
|
|
<div class="workspace-actions">
|
|
<button type="button" class="btn" id="btn-run-code" style="padding: 6px 14px; font-size: 0.84rem; background: #0284c7;" title="Tastenkürzel: Strg+Enter">▶ Code ausführen</button>
|
|
<button type="button" class="btn" id="btn-run-tests" style="padding: 6px 16px; font-size: 0.84rem; background: #10b981;" title="Tastenkürzel: Strg+Shift+Enter">🧪 Tests starten</button>
|
|
<button type="button" class="btn btn-secondary" id="btn-show-hints" style="padding: 6px 12px; font-size: 0.84rem; background: #1e293b; color: white; border: none;">💡 Tipps & Lösung</button>
|
|
<button type="button" class="btn btn-secondary" id="btn-reset-code" style="padding: 6px 10px; font-size: 0.84rem; background: transparent; color: #94a3b8; border: none;" title="Auf Startercode zurücksetzen">🔄</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Split Screen Body -->
|
|
<div class="workspace-body">
|
|
|
|
<!-- Left Pane -->
|
|
<div class="pane-left">
|
|
<div class="pane-tabs">
|
|
<button type="button" class="pane-tab-btn active" onclick="switchTab('theorie')">📖 Theorie & Analogie</button>
|
|
<button type="button" class="pane-tab-btn" onclick="switchTab('subgoals')">🎯 Teilziele</button>
|
|
<button type="button" class="pane-tab-btn" id="tab-btn-puzzle" onclick="switchTab('puzzle')">🧩 Puzzle (+25 XP)</button>
|
|
<button type="button" class="pane-tab-btn" id="tab-btn-interpreter" onclick="switchTab('interpreter')">🩺 Dolmetscher</button>
|
|
</div>
|
|
|
|
<div class="pane-content" id="tab-content-theorie">
|
|
<div id="theory-loader" style="color: var(--text-muted);">Lade didaktische Erklärung...</div>
|
|
</div>
|
|
|
|
<div class="pane-content" id="tab-content-subgoals" style="display: none;">
|
|
<h3 style="margin-top: 0; font-size: 1.15rem; color: var(--text-main);">🎯 Nummerierte Teilziele (Subgoals)</h3>
|
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Hake deine gelösten Schritte ab:</p>
|
|
<div id="subgoals-list-container"></div>
|
|
</div>
|
|
|
|
<div class="pane-content" id="tab-content-puzzle" style="display: none;">
|
|
<h3 style="margin-top: 0; font-size: 1.15rem; color: var(--text-main);">🧩 Parsons-Puzzle: Code ordnen</h3>
|
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Bringe die Zeilen in die logisch richtige Reihenfolge, bevor du programmierst!</p>
|
|
<div id="puzzle-container"></div>
|
|
</div>
|
|
|
|
<div class="pane-content" id="tab-content-interpreter" style="display: none;">
|
|
<h3 style="margin-top: 0; font-size: 1.15rem; color: var(--text-main);">🩺 Python Fehler-Dolmetscher</h3>
|
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Füge eine Traceback-Fehlermeldung ein:</p>
|
|
<textarea id="workspace-error-input" placeholder="Fehlermeldung hier einfügen..." style="width: 100%; height: 90px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px; font-family: var(--font-mono); font-size: 0.88rem;"></textarea>
|
|
<button type="button" class="btn" style="margin-top: 8px;" onclick="interpretWorkspaceError()">🔍 Übersetzen & Erklären</button>
|
|
<div id="workspace-error-result" style="display: none; margin-top: 14px; padding: 12px; background: #f0fdf4; border-radius: var(--radius-sm); border: 1px solid #bbf7d0;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Pane -->
|
|
<div class="pane-right">
|
|
<div class="editor-wrapper">
|
|
<div id="monaco-editor-container"></div>
|
|
</div>
|
|
|
|
<div class="terminal-wrapper">
|
|
<div class="terminal-header">
|
|
<span>🖥️ Terminal / Test-Ausgabe</span>
|
|
<button type="button" id="btn-clear-terminal" style="background: transparent; border: none; color: #94a3b8; font-size: 0.75rem; cursor: pointer;">🧹 Leeren</button>
|
|
</div>
|
|
<div id="workspace-terminal-output">Klicke oben auf '▶ Code ausführen' (Strg+Enter) oder '🧪 Tests starten' (Strg+Shift+Enter)...</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Graduated Hint Scaffolding Modal -->
|
|
<div class="modal-celebration" id="hints-modal-overlay">
|
|
<div class="certificate-container" style="max-width: 540px; padding: 26px; text-align: left;">
|
|
<h3 style="margin-top: 0; color: var(--text-main); font-size: 1.3rem;">💡 4-Stufen-Hilfesystem</h3>
|
|
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 16px;">Versuche zuerst Stufe 1 und 2, um die Lösung selbst zu erarbeiten:</p>
|
|
|
|
<div class="hint-step">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h4>1. 💡 Konzept & Leitfrage</h4>
|
|
<button class="btn btn-secondary" style="padding: 4px 10px; font-size: 0.78rem;" onclick="toggleHint('hint-1')">Aufklappen</button>
|
|
</div>
|
|
<div id="hint-1" class="hint-step-content">Lies die Aufgabenstellung sorgfältig. Welche Ein- und Ausgabetypen verlangt die Funktion? Gibt es Randfälle wie leere Eingaben oder Division durch 0?</div>
|
|
</div>
|
|
|
|
<div class="hint-step">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h4>2. 🔧 Syntax & Python-Befehle</h4>
|
|
<button class="btn btn-secondary" style="padding: 4px 10px; font-size: 0.78rem;" onclick="toggleHint('hint-2')">Aufklappen</button>
|
|
</div>
|
|
<div id="hint-2" class="hint-step-content">Verwende <code>return</code> am Ende deiner Funktionen. Bei Klassen denke an <code>def __init__(self, ...):</code> und nutze <code>self.attribut</code>.</div>
|
|
</div>
|
|
|
|
<div class="hint-step">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h4>3. 🧩 Struktur-Gerüst (Pseudocode)</h4>
|
|
<button class="btn btn-secondary" style="padding: 4px 10px; font-size: 0.78rem;" onclick="toggleHint('hint-3')">Aufklappen</button>
|
|
</div>
|
|
<div id="hint-3" class="hint-step-content"><pre id="hint-pseudocode" style="background:#0b0f19;color:#f8fafc;padding:10px;border-radius:4px;font-family:monospace;font-size:0.85rem;margin:0;"></pre></div>
|
|
</div>
|
|
|
|
<div class="hint-step" style="border-left: 3px solid var(--primary);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h4>4. 📖 Vollständige Musterlösung</h4>
|
|
<button class="btn btn-secondary" style="padding: 4px 10px; font-size: 0.78rem;" onclick="toggleHint('hint-4')">Lösung anzeigen</button>
|
|
</div>
|
|
<div id="hint-4" class="hint-step-content"><pre id="hint-solution" style="background:#0b0f19;color:#f8fafc;padding:10px;border-radius:4px;font-family:monospace;font-size:0.85rem;margin:0;max-height:200px;overflow-y:auto;"></pre></div>
|
|
</div>
|
|
|
|
<div style="text-align: right; margin-top: 14px;">
|
|
<button class="btn" onclick="document.getElementById('hints-modal-overlay').style.display = 'none';">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Modal -->
|
|
<div class="modal-celebration" id="success-modal-banner">
|
|
<div class="certificate-container" style="max-width: 480px; text-align: center; padding: 32px;">
|
|
<div style="font-size: 3rem; margin-bottom: 10px;">🎉 🏆 🌟</div>
|
|
<h2 style="margin: 0 0 10px 0; color: var(--text-main); font-size: 1.6rem;">Kapitel gemeistert!</h2>
|
|
<p style="color: var(--text-muted); font-size: 1rem; margin-bottom: 24px;">Alle Tests wurden erfolgreich bestanden. Du hast <strong>+100 XP</strong> verdient!</p>
|
|
|
|
<div style="display: flex; gap: 10px; justify-content: center;">
|
|
<a href="index.html" class="btn btn-secondary" style="padding: 10px 18px;">Zurück zum Dashboard</a>
|
|
<button type="button" class="btn" id="btn-next-chapter" style="padding: 10px 22px;">Nächstes Kapitel →</button>
|
|
</div>
|
|
</div>
|
|
</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/monaco_ide.js"></script>
|
|
|
|
<script>
|
|
// Manifest aller Kapitel für sequentielle Navigation
|
|
const CHAPTERS_MANIFEST = [
|
|
{ track: "lehrpfad_1_grundlagen", folder: "01_erste_schritte_taschenrechner", title: "G01. Taschenrechner" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "02_variablen_und_datentypen", title: "G02. Variablen & Typen" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "03_ein_und_ausgabe", title: "G03. Ein- & Ausgabe" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "04_verzweigungen_und_bedingungen", title: "G04. Bedingungen" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "05_schleifen_und_wiederholungen", title: "G05. Schleifen" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "06_funktionen_und_module", title: "G06. Funktionen & Module" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "07_listen_und_sequenzen", title: "G07. Listen" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "08_textverarbeitung_und_strings", title: "G08. Strings" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "09_dictionaries_und_sets", title: "G09. Dicts & Sets" },
|
|
{ track: "lehrpfad_1_grundlagen", folder: "10_comprehensions_datum_algorithmen", title: "G10. Comprehensions" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "00_fehlersuche_und_grundlagen", title: "OOP 00. Debugging" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "01_einstieg_klassen", title: "OOP 01. Klassen" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "02_init_und_self", title: "OOP 02. Konstruktor" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "03_methoden_und_verhalten", title: "OOP 03. Methoden" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "04_str_und_darstellung", title: "OOP 04. __str__" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "04b_umstieg_vscode", title: "Tooling 04b. VS Code" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "04c_git_und_versionskontrolle", title: "Tooling 04c. Git" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "05_objekte_kombinieren", title: "OOP 05. Komposition" },
|
|
{ track: "lehrpfad_2_oop_einstieg", folder: "06_abschlussprojekt_tamagotchi", title: "Projekt 06. Tamagotchi" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "07_referenzen_und_speicher", title: "Adv 07. Speicher" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "08_operator_overloading_dunder", title: "Adv 08. Dunder" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "09_eigene_unit_tests_schreiben", title: "Adv 09. TDD Tests" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "10_vererbung_und_super", title: "Adv 10. Vererbung" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "11_polymorphie_und_interfaces", title: "Adv 11. Polymorphie" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "12_exceptions_und_fehlerbehandlung", title: "Adv 12. Exceptions" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "13_persistenz_json_und_csv", title: "Adv 13. Persistenz" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "14_gui_mit_tkinter", title: "Adv 14. Tkinter" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "15_parameter_und_container", title: "Adv 15. Container" },
|
|
{ track: "lehrpfad_3_fortgeschrittenes_oop", folder: "16_master_abschlussprojekt", title: "Master 16. Abschlussprojekt" }
|
|
];
|
|
|
|
function switchTab(tabId) {
|
|
document.querySelectorAll(".pane-tab-btn").forEach(b => b.classList.remove("active"));
|
|
document.querySelectorAll(".pane-content").forEach(c => c.style.display = "none");
|
|
|
|
const targetBtn = event.target;
|
|
const targetContent = document.getElementById("tab-content-" + tabId);
|
|
if (targetBtn) targetBtn.classList.add("active");
|
|
if (targetContent) targetContent.style.display = "block";
|
|
}
|
|
|
|
function toggleHint(id) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.style.display = el.style.display === "block" ? "none" : "block";
|
|
}
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const trackFolder = urlParams.get("track") || "lehrpfad_1_grundlagen";
|
|
const chapterFolder = urlParams.get("chapter") || "01_erste_schritte_taschenrechner";
|
|
const chapterId = `${trackFolder}/${chapterFolder}`;
|
|
|
|
// Nächstes Kapitel ermitteln
|
|
const currentIndex = CHAPTERS_MANIFEST.findIndex(c => c.folder === chapterFolder);
|
|
const nextChapter = (currentIndex >= 0 && currentIndex < CHAPTERS_MANIFEST.length - 1) ? CHAPTERS_MANIFEST[currentIndex + 1] : null;
|
|
|
|
document.getElementById("btn-next-chapter")?.addEventListener("click", () => {
|
|
if (nextChapter) {
|
|
window.location.href = `workspace.html?track=${nextChapter.track}&chapter=${nextChapter.folder}`;
|
|
} else {
|
|
window.location.href = "index.html#zertifikate";
|
|
}
|
|
});
|
|
|
|
async function loadWorkspaceData() {
|
|
try {
|
|
let taskFile = "aufgabe.py";
|
|
let testFile = "test_aufgabe.py";
|
|
|
|
if (chapterFolder === "04b_umstieg_vscode") {
|
|
taskFile = "vscode_test.py";
|
|
testFile = "";
|
|
} else if (chapterFolder === "04c_git_und_versionskontrolle") {
|
|
taskFile = "git_uebung.py";
|
|
testFile = "";
|
|
}
|
|
|
|
const promises = [
|
|
fetch(`${trackFolder}/${chapterFolder}/${taskFile}`).then(r => r.ok ? r.text() : "# Aufgabe konnte nicht geladen werden"),
|
|
testFile ? fetch(`${trackFolder}/${chapterFolder}/${testFile}`).then(r => r.ok ? r.text() : "") : Promise.resolve(""),
|
|
fetch(`${trackFolder}/${chapterFolder}/musterloesung.py`).then(r => r.ok ? r.text() : "").catch(() => ""),
|
|
fetch(`${trackFolder}/${chapterFolder}/index.html`).then(r => r.ok ? r.text() : "").catch(() => "")
|
|
];
|
|
|
|
const [aufgabeCode, testCode, loesungCode, htmlDoc] = await Promise.all(promises);
|
|
|
|
document.getElementById("workspace-chapter-name").innerText = chapterFolder.replace(/_/g, " ").toUpperCase();
|
|
|
|
// 1. Theorie-Inhalt
|
|
if (htmlDoc) {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(htmlDoc, "text/html");
|
|
const mainContent = doc.querySelector("main.container") || doc.body;
|
|
document.getElementById("tab-content-theorie").innerHTML = mainContent.innerHTML;
|
|
}
|
|
|
|
// 2. Subgoals (Exakte Regex ohne Duplikate)
|
|
const subgoals = aufgabeCode.match(/^# 🎯 TEILZIEL \d+ \(TODO \d+\): (.+)$/gm) || [];
|
|
const subContainer = document.getElementById("subgoals-list-container");
|
|
const savedSubgoals = JSON.parse(localStorage.getItem(`subgoals_${chapterId}`) || "{}");
|
|
|
|
if (subgoals.length > 0) {
|
|
subContainer.innerHTML = subgoals.map((s, idx) => `
|
|
<div class="task-item" style="margin-bottom: 8px;">
|
|
<input type="checkbox" class="task-checkbox" id="sub_check_${idx}" ${savedSubgoals[idx] ? 'checked' : ''}>
|
|
<label class="task-label" for="sub_check_${idx}"><strong>${s.replace(/^#\s*/, '')}</strong></label>
|
|
</div>
|
|
`).join("");
|
|
|
|
subContainer.querySelectorAll(".task-checkbox").forEach((cb, idx) => {
|
|
cb.addEventListener("change", () => {
|
|
savedSubgoals[idx] = cb.checked;
|
|
localStorage.setItem(`subgoals_${chapterId}`, JSON.stringify(savedSubgoals));
|
|
});
|
|
});
|
|
} else {
|
|
subContainer.innerHTML = "<p style='color: var(--text-muted); font-size: 0.88rem;'>Keine nummerierten Teilziele in dieser Einheit.</p>";
|
|
}
|
|
|
|
// 3. Dynamisches Parsons-Puzzle generieren
|
|
const puzzleContainer = document.getElementById("puzzle-container");
|
|
if (loesungCode && puzzleContainer) {
|
|
const lines = loesungCode
|
|
.split("\n")
|
|
.filter(l => l.trim().length > 0 && !l.trim().startsWith("#") && !l.trim().startsWith('"""'))
|
|
.slice(0, 8);
|
|
|
|
if (lines.length >= 3) {
|
|
puzzleContainer.innerHTML = `
|
|
<div class="parsons-puzzle" data-lines='${JSON.stringify(lines)}' data-solution='${JSON.stringify(lines)}' data-xp="25">
|
|
<div class="parsons-target-area" style="min-height: 120px; background: #0b0f19; padding: 10px; border-radius: 4px; margin-bottom: 10px; font-family: monospace; font-size: 0.85rem; color: #f8fafc;">
|
|
<div style="color: #64748b; font-size: 0.8rem;">Klicke auf die Zeilen unten, um sie in die richtige Reihenfolge zu bringen:</div>
|
|
</div>
|
|
<div class="parsons-source-area" style="display: flex; flex-direction: column; gap: 6px;"></div>
|
|
<button class="btn" style="margin-top: 12px; font-size: 0.82rem;" onclick="checkParsonsPuzzle()">🧩 Puzzle prüfen (+25 XP)</button>
|
|
<div class="parsons-feedback" style="margin-top: 8px; font-size: 0.85rem; display: none;"></div>
|
|
</div>
|
|
`;
|
|
initDynamicParsons(lines);
|
|
}
|
|
}
|
|
|
|
// 4. Hints Modal befüllen
|
|
document.getElementById("hint-solution").innerText = loesungCode || "# Keine Musterlösung verfügbar";
|
|
document.getElementById("hint-pseudocode").innerText = aufgabeCode.replace(/def [a-zA-Z0-9_]+\([^)]*\):[\s\S]*?return[^\n]*/g, "def ...:\n # Logik hier\n return ergebnis");
|
|
|
|
document.getElementById("btn-show-hints")?.addEventListener("click", () => {
|
|
document.getElementById("hints-modal-overlay").style.display = "flex";
|
|
});
|
|
|
|
// 5. Monaco IDE initialisieren
|
|
window.initWorkspace({
|
|
chapterId: chapterId,
|
|
starterCode: aufgabeCode,
|
|
testCode: testCode,
|
|
solutionCode: loesungCode
|
|
});
|
|
|
|
} catch (err) {
|
|
document.getElementById("tab-content-theorie").innerHTML = `<div class="box box-danger">Fehler beim Laden: ${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function initDynamicParsons(correctLines) {
|
|
const sourceArea = document.querySelector(".parsons-source-area");
|
|
const targetArea = document.querySelector(".parsons-target-area");
|
|
if (!sourceArea || !targetArea) return;
|
|
|
|
const shuffled = [...correctLines].sort(() => Math.random() - 0.5);
|
|
sourceArea.innerHTML = "";
|
|
|
|
shuffled.forEach((line) => {
|
|
const item = document.createElement("div");
|
|
item.className = "parsons-line";
|
|
item.style.cssText = "background: #f1f5f9; color: #1e293b; padding: 6px 10px; border-radius: 4px; border: 1px solid #cbd5e1; cursor: pointer; font-family: monospace; font-size: 0.85rem;";
|
|
item.innerText = line;
|
|
item.onclick = () => {
|
|
if (item.parentElement === sourceArea) {
|
|
targetArea.appendChild(item);
|
|
item.style.background = "#1e293b";
|
|
item.style.color = "#38bdf8";
|
|
} else {
|
|
sourceArea.appendChild(item);
|
|
item.style.background = "#f1f5f9";
|
|
item.style.color = "#1e293b";
|
|
}
|
|
};
|
|
sourceArea.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function checkParsonsPuzzle() {
|
|
const targetArea = document.querySelector(".parsons-target-area");
|
|
const feedback = document.querySelector(".parsons-feedback");
|
|
const selected = Array.from(targetArea.querySelectorAll(".parsons-line")).map(el => el.innerText);
|
|
|
|
if (selected.length === 0) {
|
|
feedback.style.display = "block";
|
|
feedback.style.color = "var(--danger)";
|
|
feedback.innerText = "Klicke zuerst die Codezeilen an!";
|
|
return;
|
|
}
|
|
|
|
feedback.style.display = "block";
|
|
feedback.style.color = "var(--success)";
|
|
feedback.innerHTML = "🎉 Großartig! Puzzle korrekt gelöst (+25 XP)!";
|
|
if (window.addXP) window.addXP(25, chapterId + "_puzzle");
|
|
}
|
|
|
|
window.interpretWorkspaceError = function () {
|
|
const errText = document.getElementById("workspace-error-input").value;
|
|
const resContainer = document.getElementById("workspace-error-result");
|
|
if (window.INTERPRETER && window.INTERPRETER.translate) {
|
|
const info = window.INTERPRETER.translate(errText);
|
|
resContainer.style.display = "block";
|
|
resContainer.innerHTML = `
|
|
<h4 style="margin-top: 0; color: #166534;">${info.title || info.name}</h4>
|
|
<p style="margin: 6px 0; color: #1e293b;">${info.explanation}</p>
|
|
<strong>Tipps:</strong>
|
|
<ul style="padding-left: 20px; margin-top: 4px;">
|
|
${(info.causes || []).map(c => `<li>${c}</li>`).join("")}
|
|
<li><strong>Reparatur:</strong> ${info.fix}</li>
|
|
</ul>
|
|
`;
|
|
}
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", loadWorkspaceData);
|
|
</script>
|
|
</body>
|
|
</html>
|