Dev Lab: server-autoritatives Entwicklerlabor mit 6 Mechaniken + 189 Aufgaben

Dev Lab bündelt mehrere Disziplinen (SQL, Java/Debugging, Git, HTML, CSS, Regex,
PHP, REST) in 11 Spielen mit zusammen 189 Aufgaben. Im Gegensatz zur ersten,
rein clientseitigen Skizze jetzt server-autoritativ, DB-gestützt und im Admin
pflegbar – mit echter Mechanik-Vielfalt statt überall Lückentext:
cloze (Lücke tippen), choice (Multiple Choice), order (Bausteine zusammensetzen),
spot (Bug anklicken), match (Paare zuordnen), regex (Muster schreiben mit
Live-Treffer-Vorschau).

Prüfung und Score ausschließlich serverseitig – die Lösungen verlassen nie das
Backend; Eingabe-Platzhalter sind neutrale Labels (Lösungs-Leak behoben).
Fehler-Mechanik mit Versuchen + Hinweis + Auflösung, kein Game-Over; Score über
die generische game_scores-Tabelle (Kennung devlab, deck=Spiel-Slug).

- Entities DevLabGame/DevLabTask (JSON-payload) + Flyway V8__devlab.sql
- DevLabService mit sechs Mechanik-Checkern; API /api/devlab/** (CSRF-ausgenommen,
  devlab in KNOWN_GAMES)
- Admin /admin/devlab (Spiele + Aufgaben pflegen); polymorphe Frontend-Engine
  devlabgame.js + DB-getriebener Hub devlab.js
- Inhalte aus devlab/content.json (idempotenter Seeder); ersetzt die erste
  clientseitige Dev-Lab-Skizze (devlab.js/devlabgame.js/-game.html/-game.css neu)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
AliceDarkest
2026-06-30 16:32:03 +02:00
parent 55a09cb093
commit b88962da6f
28 changed files with 6542 additions and 2 deletions
@@ -47,6 +47,7 @@
<a th:href="@{/admin/mindmatch}" class="admin-card">🧩 MindMatch-Decks verwalten</a>
<a th:href="@{/admin/techtacular}" class="admin-card">🎯 TechTacular-Fragen verwalten</a>
<a th:href="@{/admin/syntaxsaga}" class="admin-card">📜 Syntax-Saga-Missionen verwalten</a>
<a th:href="@{/admin/devlab}" class="admin-card">⚗️ Dev-Lab-Aufgaben verwalten</a>
</div>
<p style="margin-top:1.1rem; color:var(--muted);">
Hier entsteht noch Großes... ✨ Bleib dran!
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="de" data-theme="dark"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="${game.title} + ' – Dev Lab'">Dev-Lab-Spiel</title>
<link rel="stylesheet" href="/css/theme.css">
<script src="/js/theme.js"></script>
<style>
.dlg { max-width: 1000px; margin: 0 auto; padding: 0 1rem; width: 100%; }
.dlg .grid2 { display: grid; grid-template-columns: 160px 1fr; gap: 0.7rem; }
.dlg .field { margin-bottom: 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dlg .field > label { color: var(--accent); font-weight: 700; font-size: 0.85rem; }
.dlg textarea.mf-input { font-family: "JetBrains Mono", monospace; resize: vertical; min-height: 8rem; font-size: 0.82rem; }
.dlg .task { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--secondary); border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; box-shadow: var(--g-soft); }
.dlg .task-head { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; flex-wrap: wrap; }
.dlg .ttype { background: var(--glow-w); color: var(--accent); font-weight: 800; border: 1px solid var(--border-accent); border-radius: 7px; padding: 0.14rem 0.55rem; font-size: 0.78rem; font-family: monospace; }
.dlg .tprompt { color: var(--heading); font-weight: 600; }
.dlg .hint { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.8rem; line-height: 1.5; }
.dlg .hint code { color: var(--accent); }
.dlg .empty { color: var(--danger); }
.dlg details { margin-top: 0.5rem; }
.dlg summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }
@media (max-width: 600px) { .dlg .grid2 { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="mf-theme-float"><button class="mf-theme"></button></div>
<div class="mf-container" style="max-width:1040px">
<div class="mf-page-head">
<a th:href="@{/admin/devlab}" class="mf-back">⟵ Zurück zur Spieleliste</a>
</div>
<header style="margin-bottom:1.4rem">
<div class="mf-eyebrow">Dev Lab · Spiel</div>
<h1 style="color:var(--heading); font-size:1.75rem; font-weight:800; margin-top:.35rem" th:text="'⚗️ ' + ${game.title}">Spiel</h1>
<p style="color:var(--muted); margin-top:.3rem">
<span th:text="'/' + ${game.slug}">/slug</span> ·
<span th:text="${game.path}">syntax</span> ·
<span th:text="${game.language}">SQL</span>
</p>
</header>
<main class="dlg">
<h4 style="color:var(--accent); margin:0 0 0.7rem; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem">Aufgaben</h4>
<div class="task" th:each="t : ${game.tasks}">
<div class="task-head">
<span><span class="ttype" th:text="${t.type}">cloze</span> <span class="tprompt" th:text="${t.prompt}">Titel</span></span>
<form th:action="@{'/admin/devlab/tasks/' + ${t.id} + '/delete'}" method="post" onsubmit="return confirm('Aufgabe löschen?');">
<input type="hidden" name="gameId" th:value="${game.id}">
<button type="submit" class="mf-btn danger">✕ Löschen</button>
</form>
</div>
<details>
<summary>Bearbeiten (JSON-Payload)</summary>
<form th:action="@{'/admin/devlab/tasks/' + ${t.id} + '/update'}" method="post" style="margin-top:.6rem">
<input type="hidden" name="gameId" th:value="${game.id}">
<div class="grid2">
<div class="field"><label>Punkte</label><input class="mf-input" type="number" name="points" th:value="${t.points}" min="10" max="1000"></div>
<div class="field"><label>Titel</label><input class="mf-input" type="text" name="prompt" th:value="${t.prompt}" required></div>
</div>
<div class="field"><label>Payload (JSON)</label><textarea class="mf-input" name="payload" th:text="${t.payload}" required></textarea></div>
<button type="submit" class="mf-btn">💾 Speichern</button>
</form>
</details>
</div>
<p th:if="${game.tasks.isEmpty()}" class="empty">Noch keine Aufgaben – unten hinzufügen. Ohne Aufgaben erscheint das Spiel nicht.</p>
<div class="mf-panel accent" style="margin-top:1.6rem">
<h4>Aufgabe hinzufügen</h4>
<p class="hint">Typ wählen und den passenden <strong>JSON-Payload</strong> eintragen. Pflichtfelder je Typ:
<code>cloze</code>: codeTemplate (<code>{{1}}</code>…), gaps[{position, placeholder, hint, caseSensitive, solutions[]}] ·
<code>choice</code>: question, options[], correctIndex ·
<code>order</code>: instruction, items[] (richtige Reihenfolge) ·
<code>spot</code>: tokens[], bugIndex, fix ·
<code>match</code>: instruction, pairs[[l,r]…] ·
<code>regex</code>: instruction, samples[{text, shouldMatch}], pattern.
Optional überall: narrative, hint, successText. Platzhalter nie die Lösung!</p>
<form th:action="@{'/admin/devlab/games/' + ${game.id} + '/tasks'}" method="post">
<div class="grid2">
<div class="field"><label>Typ</label>
<select class="mf-select" name="type">
<option value="cloze">cloze – Lücke tippen</option>
<option value="choice">choice – Multiple Choice</option>
<option value="order">order – Zusammensetzen</option>
<option value="spot">spot – Bug finden</option>
<option value="match">match – Zuordnen</option>
<option value="regex">regex – Muster schreiben</option>
</select>
</div>
<div class="field"><label>Titel</label><input class="mf-input" type="text" name="prompt" placeholder="kurzer Aufgabentitel" required></div>
</div>
<div class="field" style="max-width:160px"><label>Punkte</label><input class="mf-input" type="number" name="points" value="100" min="10" max="1000"></div>
<div class="field"><label>Payload (JSON)</label><textarea class="mf-input" name="payload" placeholder='{ "question": "...", "options": ["A","B"], "correctIndex": 0, "hint": "...", "successText": "..." }' required></textarea></div>
<button type="submit" class="mf-btn">➕ Aufgabe speichern</button>
</form>
</div>
</main>
</div>
<footer class="mf-footer">
<a href="#">Support</a><a href="#">Feedback</a>
<a href="/nutzungsbedingungen">Nutzungsbedingungen</a><a href="/richtlinien">Richtlinien</a>
<a href="/datenschutz">Datenschutz</a><a href="/impressum">Impressum</a>
</footer>
</body>
</html>
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="de" data-theme="dark"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dev-Lab-Verwaltung – Admin</title>
<link rel="stylesheet" href="/css/theme.css">
<script src="/js/theme.js"></script>
<style>
.dla { max-width: 1000px; margin: 0 auto; padding: 0 1rem; width: 100%; }
.dla .new-game { margin-bottom: 1.6rem; }
.dla .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.dla .game {
display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between;
background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; box-shadow: var(--g-soft);
}
.dla .game.inactive { border-left-color: var(--danger); opacity: 0.7; }
.dla .game h2 { color: var(--heading); margin: 0; font-size: 1.05rem; }
.dla .slug { color: var(--accent); font-size: 0.78rem; font-family: monospace; }
.dla .badge { font-size: 0.66rem; text-transform: uppercase; padding: 0.14rem 0.45rem; border-radius: 7px; border: 1px solid var(--border-accent); color: var(--secondary); border-color: var(--secondary); }
.dla .badge.on { background: var(--glow-w); color: var(--accent); border-color: var(--border-accent); }
.dla .badge.off { background: rgba(255,95,107,.12); color: var(--danger); border-color: var(--danger); }
.dla .count { color: var(--muted); font-size: 0.85rem; }
.dla .actions { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.dla .field { margin-bottom: 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dla .field > label { color: var(--accent); font-weight: 700; font-size: 0.85rem; }
.dla .empty { color: var(--muted); }
@media (max-width: 600px) { .dla .grid2 { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="mf-theme-float"><button class="mf-theme"></button></div>
<div class="mf-container" style="max-width:1040px">
<div class="mf-page-head">
<a th:href="@{/admin}" class="mf-back">⟵ Zurück zum Admin-Dashboard</a>
</div>
<header style="margin-bottom:1.4rem">
<div class="mf-eyebrow">Dev Lab</div>
<h1 style="color:var(--heading); font-size:1.75rem; font-weight:800; margin-top:.35rem">⚗️ Dev-Lab-Verwaltung</h1>
</header>
<main class="dla">
<div class="mf-panel accent new-game">
<h4>Neues Spiel anlegen</h4>
<form th:action="@{/admin/devlab/games}" method="post">
<div class="grid2">
<div class="field"><label>Titel</label><input class="mf-input" type="text" name="title" placeholder="z. B. SQL Detective" required></div>
<div class="field"><label>Sprache/Domäne</label><input class="mf-input" type="text" name="language" placeholder="SQL / CSS / Git …"></div>
</div>
<div class="grid2">
<div class="field"><label>Pfad</label>
<select class="mf-select" name="path">
<option value="syntax">Syntax &amp; Grundlagen</option>
<option value="debugging">Debugging &amp; Problemlösung</option>
<option value="visual">Praxis &amp; Visualisierung</option>
</select>
</div>
<div class="field"><label>Beschreibung</label><input class="mf-input" type="text" name="description" placeholder="kurze Beschreibung"></div>
</div>
<button type="submit" class="mf-btn">➕ Spiel anlegen &amp; Aufgaben hinzufügen</button>
</form>
</div>
<div class="game" th:each="g : ${games}" th:classappend="${g.active} ? '' : 'inactive'">
<div>
<h2 th:text="${g.title}">Spiel</h2>
<span class="slug" th:text="'/' + ${g.slug}">/slug</span>
<span class="badge" th:text="${g.path}">syntax</span>
<span class="badge" th:if="${g.language}" th:text="${g.language}">SQL</span>
<span class="badge on" th:if="${g.active}">aktiv</span>
<span class="badge off" th:unless="${g.active}">inaktiv</span>
<span class="count" th:text="'· ' + ${g.taskCount} + ' Aufgaben'">· 0 Aufgaben</span>
</div>
<div class="actions">
<a class="mf-btn" th:href="@{'/admin/devlab/games/' + ${g.id}}">Aufgaben verwalten</a>
<form th:action="@{'/admin/devlab/games/' + ${g.id} + '/toggle'}" method="post">
<button type="submit" class="mf-btn outline" th:text="${g.active} ? 'Deaktivieren' : 'Aktivieren'">Toggle</button>
</form>
<form th:action="@{'/admin/devlab/games/' + ${g.id} + '/delete'}" method="post" onsubmit="return confirm('Spiel inkl. aller Aufgaben löschen?');">
<button type="submit" class="mf-btn danger">Löschen</button>
</form>
</div>
</div>
<p th:if="${games.isEmpty()}" class="empty">Noch keine Spiele. Lege oben das erste an.</p>
</main>
</div>
<footer class="mf-footer">
<a href="#">Support</a><a href="#">Feedback</a>
<a href="/nutzungsbedingungen">Nutzungsbedingungen</a><a href="/richtlinien">Richtlinien</a>
<a href="/datenschutz">Datenschutz</a><a href="/impressum">Impressum</a>
</footer>
</body>
</html>
@@ -176,6 +176,7 @@
brain:'<path d="M28 8c-9-5-22 0-23 11-7 2-9 12-3 18-3 7 2 15 10 16 3 6 13 7 18 2M28 8c9-5 22 0 23 11 7 2 9 12 3 18 3 7-2 15-10 16-3 6-13 7-18 2M28 8v45M16 22c6 2 6 10 0 13M40 22c-6 2-6 10 0 13M12 40c7 0 10 5 10 11M44 40c-7 0-10 5-10 11"/>',
code:'<path d="M22 16L8 28l14 12M42 16l14 12-14 12"/>',
terminal:'<rect x="6" y="10" width="52" height="44" rx="4"/><path d="M16 26l9 6-9 6M32 40h14"/>',
lab:'<path d="M26 8h12"/><path d="M30 8v18L16 48c-2.3 3.7.4 8.5 4.8 8.5h22.4c4.4 0 7.1-4.8 4.8-8.5L34 26V8"/><path d="M23 43h18"/><path d="M25 49h14"/><path d="M25 32l-4 4 4 4"/><path d="M39 32l4 4-4 4"/><path d="M30 42l4-12"/>',
lock:'<rect x="12" y="28" width="40" height="28" rx="5"/><path d="M20 28v-7a12 12 0 0 1 24 0v7M32 39v6"/>',
sword:'<path d="M48 8l4 4-22 22-4-4zM26 30l8 8M30 26l8 8M22 38l-6 6 6 6 6-6M16 44l-6 6"/>',
bug:'<rect x="20" y="20" width="24" height="30" rx="12"/><path d="M32 20v-6M24 12l4 6M40 12l-4 6M20 30h-8M52 30h-8M20 40H10M54 40H44M20 50l-7 7M44 50l7 7"/>',
@@ -185,6 +186,7 @@
const GAMES = [
['MindMatch','brain','Trainiere dein Gedächtnis mit IT-Begriffen in einem klassischen Memory-Spiel.','/mindmatch'],
['TechTacular','code','Das IT-Quizduell im Jeopardy-Stil – teste dein Wissen in verschiedenen Kategorien.','/techtacular'],
['Dev Lab','lab','Das Entwicklerlabor bündelt Java, SQL, CSS, PHP, HTML, Git, REST und Regex.','/devlab'],
['Syntax Saga','terminal','Interaktive IT-Geschichten mit Lückentexten – wie ein Textadventure zum Mitdenken.','/syntaxsaga'],
['Code Escape Room','lock','Entkomme mit IT-Rätseln aus digitalen Räumen – sei schnell und clever.','/comingsoon'],
['Service Clash','sword','Der chaotische Admin-Alltag als Spiel – meistere Anfragen & halte Systeme am Laufen!','/comingsoon'],
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dev Lab Spiel – Mindflux</title>
<link rel="stylesheet" href="/css/theme.css">
<script src="/js/theme.js"></script>
<link rel="stylesheet" href="/css/devlabgame.css?v=3">
</head>
<body class="dlg-body" th:attr="data-game=${gameSlug}">
<div class="dlg-shell">
<header class="dlg-header">
<a href="/devlab" class="dlg-back">⟵ Dev Lab</a>
<div class="dlg-head-title">
<p id="dlg-language" class="mf-eyebrow">Dev Lab</p>
<h1 id="dlg-title">Spiel wird geladen…</h1>
</div>
<div class="dlg-header-tools">
<button type="button" class="mf-theme"></button>
<a href="/logout" class="dlg-logout">Logout</a>
</div>
</header>
<div class="dlg-bar">
<div class="dlg-bar-group">
<span class="dlg-stat">Aufgabe <b id="dlg-task-no">– / –</b></span>
<span class="dlg-stat">Punkte <b id="dlg-score">0</b></span>
<span class="dlg-stat">Zeit <b id="dlg-time">0:00</b></span>
<span class="dlg-stat">Bestwert <b id="dlg-best">–</b></span>
</div>
<div class="dlg-bar-group">
<span id="dlg-mech" class="mf-badge">–</span>
</div>
</div>
<main class="dlg-stage">
<section class="dlg-card">
<div class="dlg-card-head">
<span id="dlg-kind" class="mf-badge">Aufgabe</span>
<span id="dlg-points" class="dlg-points">100</span>
</div>
<h2 id="dlg-prompt"></h2>
<p id="dlg-narrative" class="dlg-narrative"></p>
<p id="dlg-instruction" class="dlg-instruction"></p>
<div id="dlg-playfield" class="dlg-playfield"></div>
<p id="dlg-feedback" class="dlg-feedback" aria-live="polite"></p>
<p id="dlg-success" class="dlg-success" hidden></p>
<div class="dlg-actions">
<button id="dlg-check" class="mf-btn" type="button">Prüfen</button>
<button id="dlg-hint" class="mf-btn ghost" type="button">Hinweis</button>
<button id="dlg-reveal" class="mf-btn outline" type="button" hidden>Auflösung</button>
<button id="dlg-next" class="mf-btn" type="button" hidden>Weiter</button>
</div>
</section>
<aside class="dlg-side mf-panel accent">
<h2 id="dlg-side-title">Mission Log</h2>
<p id="dlg-description" class="dlg-description"></p>
<div class="dlg-progress">
<span>Fortschritt</span>
<div class="mf-bar"><i id="dlg-progress" style="width:0"></i></div>
</div>
<p id="dlg-best-line" class="dlg-best"></p>
</aside>
</main>
</div>
<div id="dlg-result" class="dlg-overlay" hidden>
<div class="dlg-result-card">
<h2>Disziplin abgeschlossen 🎉</h2>
<p id="dlg-result-stars" class="dlg-result-stars">★★★</p>
<p class="dlg-result-score">Score: <strong id="dlg-result-score">0</strong> / <span id="dlg-result-max">0</span></p>
<p id="dlg-result-detail" class="dlg-result-detail"></p>
<p id="dlg-result-high" class="dlg-result-high" hidden>🏆 Neuer Bestwert!</p>
<div class="dlg-result-actions">
<button id="dlg-again" class="mf-btn" type="button">Nochmal</button>
<a href="/devlab" class="mf-btn outline">Zur Spielsammlung</a>
</div>
</div>
</div>
<script src="/js/devlabgame.js?v=3" defer></script>
</body>
</html>
+122
View File
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dev Lab - Mindflux</title>
<link rel="stylesheet" href="/css/theme.css">
<script src="/js/theme.js"></script>
<link rel="stylesheet" href="/css/devlab.css?v=2">
</head>
<body class="dl-body">
<div class="mf-shell no-right dl-shell">
<aside class="mf-sidebar">
<a th:href="@{/dashboard}" class="mf-logo">
<span class="mark"></span>
<span class="txt"><b>MINDFLUX</b><span>KNOWLEDGE. CODE. WIN.</span></span>
</a>
<nav class="mf-nav">
<a th:href="@{/dashboard}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
Dashboard
</a>
<a th:href="@{/devlab}" class="active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 2h6"/><path d="M10 2v6l-5 9a3 3 0 0 0 2.6 4.5h8.8A3 3 0 0 0 19 17l-5-9V2"/><path d="M8 15h8"/><path d="M9 18h6"/></svg>
Dev Lab
</a>
<a th:href="@{/progress}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg>
Statistiken
</a>
</nav>
<div class="dl-lab-status mf-panel accent">
<h4>Laborstatus</h4>
<div class="mf-bar"><i style="width:42%"></i></div>
<p>3 Trainingspfade · 12 Spiele · Konzept umgesetzt</p>
</div>
</aside>
<header class="mf-topbar dl-topbar">
<div class="mf-hello">
<p class="mf-eyebrow">Entwicklerlabor</p>
<h1>Dev Lab</h1>
<p>Ein zentraler Hub für die Spiele aus Syntax, Debugging und visueller Praxis.</p>
</div>
<div class="mf-tools">
<button type="button" class="mf-theme"></button>
<a class="mf-iconbtn" href="/logout" aria-label="Logout" style="color:var(--danger)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
</div>
</header>
<main class="mf-main dl-main">
<section class="dl-hero mf-panel accent">
<div>
<p class="mf-eyebrow">Dev-Lab-Ausbildungszentrum</p>
<h2>Wähle einen Trainingspfad und starte ein Spiel.</h2>
<p>Die Spiele sind nach Fähigkeit gruppiert: Syntax &amp; Grundlagen, Debugging &amp; Problemlösung sowie Praxis &amp; Visualisierung.</p>
</div>
<div class="dl-tube" aria-hidden="true">
<svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M36 8h24"/>
<path d="M42 8v36L19 91c-6 12 3 27 17 27h24c14 0 23-15 17-27L54 44V8"/>
<path d="M31 87h34"/>
<path d="M35 100h26"/>
<path d="M34 69l-8 7 8 7"/>
<path d="M62 69l8 7-8 7"/>
<path d="M44 92l8-30"/>
</svg>
<span>{}</span><span>&lt;/&gt;</span><span>[]</span><span>0101</span>
</div>
</section>
<section class="dl-workbench">
<div class="dl-stations mf-panel">
<div class="dl-panel-head">
<h2>Trainingspfade</h2>
<span class="mf-badge">3 Pfade</span>
</div>
<div id="dl-stations" class="dl-station-grid" aria-label="Trainingspfade"></div>
</div>
<aside class="dl-world mf-panel accent" aria-live="polite">
<div class="dl-world-head">
<span id="dl-world-icon" class="dl-world-icon">{}</span>
<div>
<p id="dl-world-type" class="mf-eyebrow">Grundlagenpfad</p>
<h2 id="dl-world-title">Syntax &amp; Grundlagen</h2>
</div>
</div>
<p id="dl-world-copy" class="dl-world-copy"></p>
<div class="dl-progression">
<div><span>Level</span><b id="dl-levels">0</b></div>
<div><span>XP</span><b id="dl-xp">0</b></div>
<div><span>Badge</span><b id="dl-badge">-</b></div>
</div>
<div class="dl-mechanics" id="dl-mechanics"></div>
<div class="dl-panel-head dl-games-head">
<h3>Spiele</h3>
<span id="dl-game-count" class="mf-badge">0 Spiele</span>
</div>
<div id="dl-games" class="dl-game-list"></div>
</aside>
</section>
</main>
</div>
<footer class="mf-footer">
<a href="#">Support</a>
<a href="#">Feedback</a>
<a href="/nutzungsbedingungen">Nutzungsbedingungen</a>
<a href="/richtlinien">Richtlinien</a>
<a href="/datenschutz">Datenschutz</a>
<a href="/impressum">Impressum</a>
</footer>
<script src="/js/devlab.js?v=2" defer></script>
</body>
</html>