From 1fd7cc31eb16421a943f21a8af32a9c4d5c3ff21 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 21:58:21 +0100 Subject: [PATCH] fix: simplify welcome validations, remove deprecated shortcuts, fix rerun text --- lessons/00-welcome.json | 16 +++------------- lessons/de/00-welcome.json | 16 +++------------- src/i18n.js | 2 +- 3 files changed, 7 insertions(+), 27 deletions(-) diff --git a/lessons/00-welcome.json b/lessons/00-welcome.json index 381bf82..41c42be 100644 --- a/lessons/00-welcome.json +++ b/lessons/00-welcome.json @@ -9,7 +9,7 @@ { "id": "welcome", "title": "Welcome!", - "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+Enter to run, Ctrl+Z to undo

More resources:
• HTML over JS - Native HTML vs JavaScript solutions
• Web Engineering Mandala - JavaScript technology roadmap", + "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": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", @@ -18,15 +18,10 @@ "solution": "

Hello World

", "previewContainer": "preview-area", "validations": [ - { - "type": "element_exists", - "value": "h1", - "message": "Add an <h1> heading element" - }, { "type": "contains", "value": "Hello", - "message": "Add the text 'Hello' inside your heading" + "message": "Write 'Hello World'" } ] }, @@ -42,15 +37,10 @@ "solution": "", "previewContainer": "preview-area", "validations": [ - { - "type": "element_exists", - "value": "button", - "message": "Add a <button> element" - }, { "type": "contains", "value": "go", - "message": "Add the text 'Let's go!' inside the button" + "message": "Write 'Let's go!'" } ] } diff --git a/lessons/de/00-welcome.json b/lessons/de/00-welcome.json index d47d516..2cf88db 100644 --- a/lessons/de/00-welcome.json +++ b/lessons/de/00-welcome.json @@ -9,7 +9,7 @@ { "id": "welcome", "title": "Willkommen!", - "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+Enter ausführen, Strg+Z rückgängig

Weitere Ressourcen:
• HTML over JS - Native HTML vs JavaScript-Lösungen
• Web Engineering Mandala - JavaScript Technologie-Roadmap", + "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": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }", @@ -18,15 +18,10 @@ "solution": "

Hallo Welt

", "previewContainer": "preview-area", "validations": [ - { - "type": "element_exists", - "value": "h1", - "message": "Füge ein <h1> Überschrift-Element hinzu" - }, { "type": "contains", "value": "Hallo", - "message": "Füge den Text 'Hallo' in deine Überschrift ein" + "message": "Schreibe 'Hallo Welt'" } ] }, @@ -42,15 +37,10 @@ "solution": "", "previewContainer": "preview-area", "validations": [ - { - "type": "element_exists", - "value": "button", - "message": "Füge ein <button> Element hinzu" - }, { "type": "contains", "value": "geht", - "message": "Füge den Text 'Los geht's!' in den Button ein" + "message": "Schreibe 'Los geht's!'" } ] } diff --git a/src/i18n.js b/src/i18n.js index 1561799..71f0acc 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -121,7 +121,7 @@ const translations = { redoTitle: "Wiederholen (Strg+Umschalt+Z)", resetCodeTitle: "Auf Anfangscode zurücksetzen", run: "Ausführen", - rerun: "Erneut anwenden", + rerun: "Erneut ausführen", // Preview yourOutput: "Dein Ergebnis",