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
@@ -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 & Grundlagen, Debugging & Problemlösung sowie Praxis & 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></></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 & 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>
|
||||
Reference in New Issue
Block a user