diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json index 39914df..0a0ba73 100644 --- a/lessons/00-welcome.json +++ b/lessons/00-welcome.json @@ -7,8 +7,8 @@ "difficulty": "beginner", "lessons": [ { - "id": "welcome", - "title": "Welcome!", + "id": "get-started", + "title": "Get Started", "description": "Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required!

What you'll learn:
• HTML - Semantic elements, forms, tables, SVG (HTML Block & Inline, HTML Forms, HTML Tables)
• CSS - Selectors, box model, flexbox, animations (CSS Selectors, CSS Box Model, CSS Flexbox)
• Responsive Design - Media queries and mobile-first layouts

How it works:
1. Read the task in the left panel
2. Write code in the editor
3. See live results in the preview
4. Get instant feedback with hints

Keyboard shortcuts: Ctrl+Z to undo, Ctrl+Shift+Z to redo

More resources:
• HTML over JS - Native HTML vs JavaScript solutions
• Web Engineering Mandala - JavaScript technology roadmap", "task": "Hello World", "previewHTML": "", @@ -26,8 +26,8 @@ ] }, { - "id": "get-started", - "title": "Good Luck!", + "id": "overview", + "title": "Overview", "description": "You're ready! Open the menu (☰) to explore all modules.

Recommended learning path:
1. HTML Block & Inline - Understand container vs inline elements
2. HTML Forms - Build interactive forms with validation
3. CSS Selectors - Target elements precisely
4. CSS Box Model - Master padding, margin, borders
5. CSS Flexbox - Create flexible layouts
6. CSS Animations - Add motion and transitions

Tips:
• Use Show Expected to see the target result
• Your progress is saved automatically
• Try Emmet in HTML mode: ul>li*3 + Tab

Open Source:
• Gitea (Source) · GitHub (Mirror)
• Made by LibreTECH · Michael Czechowski", "task": "Click Next to continue", "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", @@ -43,6 +43,20 @@ "message": "Click Next to continue" } ] + }, + { + "id": "playground", + "title": "Playground", + "mode": "playground", + "description": "", + "task": "", + "previewHTML": "", + "previewBaseCSS": "", + "sandboxCSS": "", + "initialCode": "\n\n

Hello World

\n

Start coding!

", + "solution": "", + "previewContainer": "preview-area", + "validations": [] } ] } diff --git a/lessons/99-playground.json b/lessons/99-playground.json deleted file mode 100644 index 85f5d29..0000000 --- a/lessons/99-playground.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "$schema": "../schemas/code-crispies-module-schema.json", - "id": "playground", - "title": "Playground", - "description": "Free-form HTML & CSS playground", - "mode": "playground", - "difficulty": "beginner", - "lessons": [ - { - "id": "playground", - "title": "Playground", - "description": "", - "task": "", - "previewHTML": "", - "previewBaseCSS": "", - "sandboxCSS": "", - "initialCode": "\n\n

Hello World

\n

Start coding!

", - "solution": "", - "previewContainer": "preview-area", - "validations": [] - } - ] -} diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json index 1a3ceab..9784a36 100644 --- a/lessons/de/00-welcome.json +++ b/lessons/de/00-welcome.json @@ -7,8 +7,8 @@ "difficulty": "beginner", "lessons": [ { - "id": "welcome", - "title": "Willkommen!", + "id": "get-started", + "title": "Los geht's", "description": "Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!

Was du lernst:
• HTML - Semantische Elemente, Formulare, Tabellen, SVG (HTML Block & Inline, HTML Formulare, HTML Tabellen)
• CSS - Selektoren, Box-Model, Flexbox, Animationen (CSS Selektoren, CSS Box-Model, CSS Flexbox)
• Responsive Design - Media Queries und Mobile-First Layouts

So funktioniert's:
1. Lies die Aufgabe im linken Bereich
2. Schreibe Code im Editor
3. Sieh Live-Ergebnisse in der Vorschau
4. Bekomme sofortiges Feedback mit Hinweisen

Tastenkürzel: Strg+Z rückgängig, Strg+Umschalt+Z wiederholen

Weitere Ressourcen:
• HTML over JS - Native HTML vs JavaScript-Lösungen
• Web Engineering Mandala - JavaScript Technologie-Roadmap", "task": "Hallo Welt", "previewHTML": "", @@ -26,8 +26,8 @@ ] }, { - "id": "get-started", - "title": "Viel Erfolg!", + "id": "overview", + "title": "Übersicht", "description": "Du bist bereit! Öffne das Menü (☰) um alle Module zu erkunden.

Empfohlener Lernpfad:
1. HTML Block & Inline - Container vs Inline-Elemente verstehen
2. HTML Formulare - Interaktive Formulare mit Validierung erstellen
3. CSS Selektoren - Elemente präzise ansprechen
4. CSS Box-Model - Padding, Margin, Borders meistern
5. CSS Flexbox - Flexible Layouts erstellen
6. CSS Animationen - Bewegung und Übergänge hinzufügen

Tipps:
• Nutze Lösung einblenden um das Zielergebnis zu sehen
• Dein Fortschritt wird automatisch gespeichert
• Probiere Emmet im HTML-Modus: ul>li*3 + Tab

Open Source:
• Gitea (Source) · GitHub (Mirror)
• Entwickelt von LibreTECH · Michael Czechowski", "task": "Klicke auf Weiter", "previewHTML": "

Hello World! 🌍

Hallo Welt!

Bonjour le monde!

¡Hola Mundo!

Ciao Mondo!

Olá Mundo!

こんにちは世界!

你好世界!

안녕 세상!

Привет мир!

שלום עולם!

مرحبا بالعالم!

", @@ -43,6 +43,20 @@ "message": "Klicke auf Weiter" } ] + }, + { + "id": "playground", + "title": "Playground", + "mode": "playground", + "description": "", + "task": "", + "previewHTML": "", + "previewBaseCSS": "", + "sandboxCSS": "", + "initialCode": "\n\n

Hallo Welt

\n

Los geht's!

", + "solution": "", + "previewContainer": "preview-area", + "validations": [] } ] } diff --git a/lessons/de/99-playground.json b/lessons/de/99-playground.json deleted file mode 100644 index 24ab306..0000000 --- a/lessons/de/99-playground.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "$schema": "../../schemas/code-crispies-module-schema.json", - "id": "playground", - "title": "Playground", - "description": "Freier HTML & CSS Spielplatz", - "mode": "playground", - "difficulty": "beginner", - "lessons": [ - { - "id": "playground", - "title": "Playground", - "description": "", - "task": "", - "previewHTML": "", - "previewBaseCSS": "", - "sandboxCSS": "", - "initialCode": "\n\n

Hallo Welt

\n

Los geht's!

", - "solution": "", - "previewContainer": "preview-area", - "validations": [] - } - ] -} diff --git a/src/app.js b/src/app.js index 5c6abdc..efac14a 100644 --- a/src/app.js +++ b/src/app.js @@ -390,7 +390,7 @@ function loadCurrentLesson() { const lesson = engineState.lesson; const mode = lesson.mode || engineState.module?.mode || "css"; - const isPlayground = engineState.module.id === "playground"; + const isPlayground = lesson.mode === "playground"; // Handle playground mode - hide instructions, full height editor if (isPlayground) { @@ -581,7 +581,7 @@ function resetCode() { function runCode() { const userCode = codeEditor ? codeEditor.getValue() : ""; const engineState = lessonEngine.getCurrentState(); - const isPlayground = engineState.module?.id === "playground"; + const isPlayground = engineState.lesson?.mode === "playground"; // Rotate the Run button icon const runButtonImg = document.querySelector("#run-btn img"); diff --git a/src/config/lessons.js b/src/config/lessons.js index 29e5cfc..f019d7e 100644 --- a/src/config/lessons.js +++ b/src/config/lessons.js @@ -19,7 +19,6 @@ import htmlTablesEN from "../../lessons/30-html-tables.json"; import htmlMarqueeEN from "../../lessons/31-html-marquee.json"; import htmlSvgEN from "../../lessons/32-html-svg.json"; import flexboxEN from "../../lessons/flexbox.json"; -import playgroundEN from "../../lessons/99-playground.json"; // German lesson imports import welcomeDE from "../../lessons/de/00-welcome.json"; @@ -37,7 +36,6 @@ import htmlTablesDE from "../../lessons/de/30-html-tables.json"; import htmlMarqueeDE from "../../lessons/de/31-html-marquee.json"; import htmlSvgDE from "../../lessons/de/32-html-svg.json"; import flexboxDE from "../../lessons/de/flexbox.json"; -import playgroundDE from "../../lessons/de/99-playground.json"; // English module store - ordered by learning path const moduleStoreEN = [ @@ -62,9 +60,7 @@ const moduleStoreEN = [ flexboxEN, responsiveEN, // CSS Animationen - transitionsAnimationsEN, - // Playground - playgroundEN + transitionsAnimationsEN ]; // German module store - ordered by learning path @@ -90,9 +86,7 @@ const moduleStoreDE = [ flexboxDE, responsiveDE, // CSS Animationen - transitionsAnimationsDE, - // Playground - playgroundDE + transitionsAnimationsDE ]; /**