public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat: implement #4 — replace answer-revealing validation messages with pedagogical hints

Browse Source 
Rewrite ~120 validation error messages across 17 English lesson modules
and their localized variants (ar, de, es, pl, uk) to use concept questions,
property hints, and directional nudges instead of revealing the exact
CSS property-value answers.

Priority modules (flexbox, box-model, colors, positioning) fully rewritten.
All remaining CSS modules updated. Only message strings changed — no
validation logic modifications.
This commit is contained in:
Michael Czechowski
2026-03-28 19:40:28 +01:00
parent 782e87705c
commit c560676544
50 changed files with 434 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
lessons/de/01-advanced-selectors.json
View File

@@ -38,7 +38,7 @@
"property": "background-color",
"expected": "lightblue"
},
"message": "Setze die Hintergrundfarbe auf <kbd>lightblue</kbd>"
"message": "Überprüfe die <kbd>background-color</kbd>-Eigenschaft -- welche Farbe sollen die Text-Eingabefelder haben?"
},
{
"type": "regex",
@@ -56,7 +56,7 @@
"property": "border",
"expected": "2px solid blue"
},
"message": "Setze den Rahmen auf <kbd>2px solid blue</kbd>"
"message": "Das Element benötigt einen Rahmen -- überprüfe die <kbd>border</kbd>-Eigenschaft"
},
{
"type": "regex",
@@ -101,7 +101,7 @@
"property": "color",
"expected": "green"
},
"message": "Setze die Textfarbe auf <kbd>green</kbd>"
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welche Farbe kennzeichnet sichere Links?"
},
{
"type": "contains",
@@ -114,7 +114,7 @@
"property": "text-decoration",
"expected": "underline"
},
"message": "Setze text-decoration auf <kbd>underline</kbd>, um HTTPS-Links zu unterstreichen"
"message": "Welcher <kbd>text-decoration</kbd>-Wert macht Links visuell hervorgehoben?"
},
{
"type": "regex",
@@ -159,7 +159,7 @@
"property": "background-color",
"expected": "cornflowerblue"
},
"message": "Setze background-color auf <kbd>cornflowerblue</kbd> für das Hauptmenü-Styling"
"message": "Überprüfe die <kbd>background-color</kbd>-Eigenschaft für die Hauptmenüpunkte"
},
{
"type": "contains",
@@ -172,7 +172,7 @@
"property": "color",
"expected": "white"
},
"message": "Setze die Textfarbe auf <kbd>white</kbd> für Kontrast gegen den blauen Hintergrund"
"message": "Welche Textfarbe sorgt für guten Kontrast auf einem blauen Hintergrund?"
},
{
"type": "regex",
@@ -217,7 +217,7 @@
"property": "text-decoration",
"expected": "none"
},
"message": "Setze text-decoration auf <kbd>none</kbd>"
"message": "Welcher <kbd>text-decoration</kbd>-Wert entfernt die Unterstreichung?"
},
{
"type": "contains",
@@ -230,7 +230,7 @@
"property": "color",
"expected": "blue"
},
"message": "Setze color auf <kbd>blue</kbd>"
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft für die Links"
},
{
"type": "regex",
@@ -275,7 +275,7 @@
"property": "margin-top",
"expected": "0"
},
"message": "Setze margin-top auf <kbd>0</kbd>"
"message": "Welcher Wert bei <kbd>margin-top</kbd> entfernt den oberen Abstand?"
},
{
"type": "contains",
@@ -288,7 +288,7 @@
"property": "font-style",
"expected": "italic"
},
"message": "Setze font-style auf <kbd>italic</kbd>"
"message": "Welcher <kbd>font-style</kbd>-Wert macht den Text kursiv?"
},
{
"type": "regex",
@@ -333,7 +333,7 @@
"property": "color",
"expected": "gray"
},
"message": "Setze color auf <kbd>gray</kbd>"
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welche Farbe sollen die Absätze haben?"
},
{
"type": "contains",
@@ -346,7 +346,7 @@
"property": "padding-left",
"expected": "20px"
},
"message": "Setze padding-left auf <kbd>20px</kbd>"
"message": "Das Element benötigt eine Einrückung -- überprüfe die <kbd>padding-left</kbd>-Eigenschaft"
},
{
"type": "regex",
@@ -391,7 +391,7 @@
"property": "background-color",
"expected": "darkblue"
},
"message": "Setze background-color auf <kbd>darkblue</kbd>"
"message": "Welche Hintergrundfarbe soll der Button beim Hover haben?"
},
{
"type": "contains",
@@ -404,7 +404,7 @@
"property": "color",
"expected": "white"
},
"message": "Setze color auf <kbd>white</kbd>"
"message": "Welche Textfarbe sorgt für Kontrast auf dunklem Hintergrund?"
},
{
"type": "regex",
@@ -449,7 +449,7 @@
"property": "font-weight",
"expected": "bold"
},
"message": "Setze font-weight auf <kbd>bold</kbd>"
"message": "Welcher <kbd>font-weight</kbd>-Wert macht Text fett?"
},
{
"type": "contains",
@@ -462,7 +462,7 @@
"property": "margin-top",
"expected": "0"
},
"message": "Setze margin-top auf <kbd>0</kbd>"
"message": "Welcher Wert entfernt den oberen Abstand vollständig?"
},
{
"type": "regex",