372 lines
14 KiB
HTML
372 lines
14 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 */
|
|
.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.95rem;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.workspace-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Workspace Split Screen Layout */
|
|
.workspace-body {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 42% 58%;
|
|
height: calc(100vh - 52px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Left Pane: Theory & Tasks */
|
|
.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.85rem;
|
|
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: 24px;
|
|
}
|
|
|
|
/* Right Pane: Code Editor & Terminal */
|
|
.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; }
|
|
|
|
/* 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 wird geladen...</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;">▶ Code ausführen</button>
|
|
<button type="button" class="btn" id="btn-run-tests" style="padding: 6px 16px; font-size: 0.84rem; background: #10b981;">🧪 Tests starten</button>
|
|
<button type="button" class="btn btn-secondary" id="btn-show-solution" style="padding: 6px 12px; font-size: 0.84rem; background: #1e293b; color: white; border: none;">💡 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.9rem; color: var(--text-muted);">Folge diesen strukturierten Schritten in <code>aufgabe.py</code>:</p>
|
|
<div id="subgoals-list-container"></div>
|
|
</div>
|
|
|
|
<div class="pane-content" id="tab-content-puzzle" style="display: none;">
|
|
<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" 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' oder '🧪 Tests starten'...</div>
|
|
</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>
|
|
// Tab Switcher
|
|
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";
|
|
}
|
|
|
|
// URL Parameters
|
|
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}`;
|
|
|
|
// Load Chapter Files
|
|
async function loadWorkspaceData() {
|
|
try {
|
|
const [aufgabeCode, testCode, loesungCode, htmlDoc] = await Promise.all([
|
|
fetch(`${trackFolder}/${chapterFolder}/aufgabe.py`).then(r => r.text()),
|
|
fetch(`${trackFolder}/${chapterFolder}/test_aufgabe.py`).then(r => r.text()),
|
|
fetch(`${trackFolder}/${chapterFolder}/musterloesung.py`).then(r => r.text()).catch(() => ""),
|
|
fetch(`${trackFolder}/${chapterFolder}/index.html`).then(r => r.text()).catch(() => "")
|
|
]);
|
|
|
|
document.getElementById("workspace-chapter-name").innerText = chapterFolder.replace(/_/g, " ").toUpperCase();
|
|
|
|
// Extract theory content from chapter index.html
|
|
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;
|
|
|
|
// Extract Subgoals
|
|
const subgoals = aufgabeCode.match(/# 🎯 TEILZIEL.*$/gm) || [];
|
|
const subContainer = document.getElementById("subgoals-list-container");
|
|
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}">
|
|
<label class="task-label" for="sub_check_${idx}"><strong>${s.replace('#', '').trim()}</strong></label>
|
|
</div>
|
|
`).join("");
|
|
} else {
|
|
subContainer.innerHTML = "<p style='color: var(--text-muted);'>Keine nummerierten Teilziele vorhanden.</p>";
|
|
}
|
|
}
|
|
|
|
// Musterlösung Button
|
|
document.getElementById("btn-show-solution")?.addEventListener("click", () => {
|
|
if (confirm("Möchtest du einen Blick in die Musterlösung werfen? Versuche zuerst, es selbst zu lösen!")) {
|
|
const w = window.open("", "_blank");
|
|
w.document.write(`<pre style="background:#0b0f19;color:#f8fafc;padding:20px;font-family:monospace;font-size:14px;">${loesungCode}</pre>`);
|
|
}
|
|
});
|
|
|
|
// Initialize Monaco IDE
|
|
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 der Einheit: ${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function interpretWorkspaceError() {
|
|
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.name}</h4>
|
|
<p style="margin: 6px 0; color: #1e293b;">${info.explanation}</p>
|
|
<strong>Tipps:</strong>
|
|
<ul style="padding-left: 20px; margin-top: 4px;">
|
|
${info.fixes.map(f => `<li>${f}</li>`).join("")}
|
|
</ul>
|
|
`;
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", loadWorkspaceData);
|
|
</script>
|
|
</body>
|
|
</html>
|