Aufgaben-Python/workspace.html

593 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &rarr;</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/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/monaco_ide.js"></script>
<script>
const urlParams = new URLSearchParams(window.location.search);
const courseId = urlParams.get("course") || "python";
const trackFolder = urlParams.get("track") || "lehrpfad_1_grundlagen";
const chapterFolder = urlParams.get("chapter") || "01_erste_schritte_taschenrechner";
const chapterId = `${trackFolder}/${chapterFolder}`;
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() {
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 = "index.html#zertifikate";
}
};
}
}
async function loadWorkspaceData() {
try {
await loadCourseManifest();
setupNextChapterButton();
const activeLanguage = currentCourseManifest ? (currentCourseManifest.language || "python") : "python";
const runner = window.RunnerRegistry ? window.RunnerRegistry.get(activeLanguage) : null;
let basePath = `${trackFolder}/${chapterFolder}`;
if (courseId !== "python") {
basePath = `courses/${courseId}/${chapterFolder}`;
}
const currentChap = CHAPTERS_MANIFEST.find(c => c.folder === 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>
</body>
</html>