668 lines
27 KiB
HTML
668 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IT-Praxisportal Web-IDE | Interaktiver Arbeitsbereich</title>
|
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
|
<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%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.workspace-topbar {
|
|
padding: 0 10px;
|
|
height: 48px;
|
|
}
|
|
#editor-save-indicator {
|
|
display: none !important;
|
|
}
|
|
.workspace-title a {
|
|
display: none;
|
|
}
|
|
.workspace-title span:first-of-type {
|
|
display: none;
|
|
}
|
|
#workspace-chapter-name {
|
|
max-width: 140px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 0.82rem;
|
|
}
|
|
.workspace-actions button {
|
|
padding: 5px 8px !important;
|
|
font-size: 0.78rem !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Topbar -->
|
|
<div class="workspace-topbar">
|
|
<div class="workspace-title">
|
|
<a href="dashboard.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="dashboard.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/app_auth.js"></script>
|
|
<script src="assets/parsons.js"></script>
|
|
<script src="assets/code_guard.js"></script>
|
|
<script src="assets/runners/runner_registry.js"></script>
|
|
<script src="assets/runners/python_runner.js"></script>
|
|
<script src="assets/runners/js_runner.js"></script>
|
|
<script src="assets/runners/sql_runner.js"></script>
|
|
<script src="assets/runners/shell_runner.js"></script>
|
|
<script src="assets/runners/powershell_runner.js"></script>
|
|
<script src="assets/runners/html_css_runner.js"></script>
|
|
<script src="assets/runners/go_runner.js"></script>
|
|
<script src="assets/runners/java_runner.js"></script>
|
|
<script src="assets/runners/rust_runner.js"></script>
|
|
<script src="assets/runners/csharp_runner.js"></script>
|
|
<script src="assets/runners/cpp_runner.js"></script>
|
|
<script src="assets/courses_manifest.js"></script>
|
|
<script src="assets/monaco_ide.js"></script>
|
|
|
|
<script>
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const courseId = urlParams.get("course") || "python";
|
|
let trackFolder = urlParams.get("track") || (courseId === "python" ? "lehrpfad_1_grundlagen" : "");
|
|
let chapterFolder = urlParams.get("chapter") || "";
|
|
let chapterId = "";
|
|
|
|
let CHAPTERS_MANIFEST = [];
|
|
let currentCourseManifest = null;
|
|
|
|
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";
|
|
}
|
|
|
|
async function loadCourseManifest() {
|
|
if (window.COURSES_MANIFEST && window.COURSES_MANIFEST[courseId]) {
|
|
currentCourseManifest = window.COURSES_MANIFEST[courseId];
|
|
const list = [];
|
|
(currentCourseManifest.tracks || []).forEach(tr => {
|
|
(tr.chapters || []).forEach(ch => {
|
|
list.push({
|
|
track: tr.id,
|
|
folder: ch.folder,
|
|
title: ch.title,
|
|
taskFile: ch.taskFile || "aufgabe.py",
|
|
testFile: ch.testFile || "test_aufgabe.py"
|
|
});
|
|
});
|
|
});
|
|
CHAPTERS_MANIFEST = list;
|
|
return;
|
|
}
|
|
try {
|
|
const res = await fetch(`courses/${courseId}/course.json`);
|
|
if (res.ok) {
|
|
currentCourseManifest = await res.json();
|
|
const list = [];
|
|
(currentCourseManifest.tracks || []).forEach(tr => {
|
|
(tr.chapters || []).forEach(ch => {
|
|
list.push({
|
|
track: tr.id,
|
|
folder: ch.folder,
|
|
title: ch.title,
|
|
taskFile: ch.taskFile || "aufgabe.py",
|
|
testFile: ch.testFile || "test_aufgabe.py"
|
|
});
|
|
});
|
|
});
|
|
CHAPTERS_MANIFEST = list;
|
|
}
|
|
} catch (e) {
|
|
console.warn("Konnte course.json nicht laden, nutze Fallback-Manifest:", e);
|
|
}
|
|
}
|
|
|
|
async function setupNextChapterButton() {
|
|
const currentIndex = CHAPTERS_MANIFEST.findIndex(c => c.folder === chapterFolder);
|
|
const nextChapter = (currentIndex >= 0 && currentIndex < CHAPTERS_MANIFEST.length - 1) ? CHAPTERS_MANIFEST[currentIndex + 1] : null;
|
|
|
|
const nextBtn = document.getElementById("btn-next-chapter");
|
|
if (nextBtn) {
|
|
nextBtn.onclick = () => {
|
|
if (nextChapter) {
|
|
window.location.href = `workspace.html?course=${courseId}&track=${nextChapter.track}&chapter=${nextChapter.folder}`;
|
|
} else {
|
|
window.location.href = "dashboard.html#zertifikate-section";
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
async function loadWorkspaceData() {
|
|
// 🔒 Strikter Zugangsschutz für den Alpha-Test
|
|
if (window.AUTH && typeof window.AUTH.requireAuth === "function") {
|
|
if (!window.AUTH.requireAuth({
|
|
allowClose: false,
|
|
title: "🔒 Anmeldung für die Web-IDE erforderlich",
|
|
message: "Um deinen Code-Editor zu laden und interaktiv zu programmieren, melde dich bitte mit deinem Test-Account an."
|
|
})) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
await loadCourseManifest();
|
|
|
|
// Dynamische Ermittlung des aktuellen Kapitels
|
|
if (!chapterFolder && CHAPTERS_MANIFEST.length > 0) {
|
|
chapterFolder = CHAPTERS_MANIFEST[0].folder;
|
|
} else if (!chapterFolder) {
|
|
chapterFolder = "01_erste_schritte_taschenrechner";
|
|
}
|
|
|
|
const currentChap = CHAPTERS_MANIFEST.find(c => c.folder === chapterFolder) || CHAPTERS_MANIFEST[0];
|
|
if (currentChap) {
|
|
chapterFolder = currentChap.folder;
|
|
if (currentChap.track && !trackFolder) trackFolder = currentChap.track;
|
|
}
|
|
if (!trackFolder) trackFolder = "lehrpfad_1_grundlagen";
|
|
|
|
chapterId = (courseId === "python") ? `${trackFolder}/${chapterFolder}` : `${courseId}/${chapterFolder}`;
|
|
|
|
setupNextChapterButton();
|
|
|
|
const activeRunnerId = currentCourseManifest ? (currentCourseManifest.runner || currentCourseManifest.language || "python") : "python";
|
|
const runner = window.RunnerRegistry ? (window.RunnerRegistry.get(activeRunnerId) || window.RunnerRegistry.get(currentCourseManifest?.language) || null) : null;
|
|
|
|
let basePath = `${trackFolder}/${chapterFolder}`;
|
|
if (courseId !== "python") {
|
|
basePath = `courses/${courseId}/${chapterFolder}`;
|
|
}
|
|
|
|
let taskFile = (currentChap && currentChap.taskFile) ? currentChap.taskFile : (runner ? `aufgabe${runner.fileExtension}` : "aufgabe.py");
|
|
let testFile = (currentChap && currentChap.testFile) ? currentChap.testFile : (runner ? runner.testFileExtension : "test_aufgabe.py");
|
|
let loesungFile = (currentChap && currentChap.taskFile && currentChap.taskFile.startsWith("Aufgabe")) ? `Musterloesung${runner ? runner.fileExtension : ".java"}` : (runner ? `musterloesung${runner.fileExtension}` : "musterloesung.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(`${basePath}/${taskFile}`).then(r => r.ok ? r.text() : "// Aufgabe konnte nicht geladen werden"),
|
|
testFile ? fetch(`${basePath}/${testFile}`).then(r => r.ok ? r.text() : "") : Promise.resolve(""),
|
|
fetch(`${basePath}/${loesungFile}`).then(r => r.ok ? r.text() : "").catch(() => ""),
|
|
fetch(`${basePath}/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(/^(?:#|\/\/|\s*\*|<!--)\s*🎯\s*TEILZIEL\s*\d+[^:\n]*:\s*(.+)$/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*\*|<!--)\s*/, '').replace(/\s*-->\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";
|
|
});
|
|
|
|
await loadCourseManifest();
|
|
setupNextChapterButton();
|
|
|
|
// 5. Monaco IDE initialisieren mit modularer Sprache
|
|
const lang = currentCourseManifest ? (currentCourseManifest.language || "python") : "python";
|
|
window.initWorkspace({
|
|
chapterId: chapterId,
|
|
starterCode: aufgabeCode,
|
|
testCode: testCode,
|
|
solutionCode: loesungCode
|
|
}, lang);
|
|
|
|
} 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>
|
|
<script src="assets/course_sidebar.js"></script>
|
|
</body>
|
|
</html>
|