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

34
lessons/de/10-tailwind-basics.json
View File

@@ -20,7 +20,7 @@
{
"type": "contains_class",
"value": "bg-blue-500",
"message": "Füge die <kbd>bg-blue-500</kbd>-Klasse für einen blauen Hintergrund hinzu."
"message": "Welche Tailwind-Klasse setzt eine blaue Hintergrundfarbe? Denke an das <kbd>bg-{farbe}-{abstufung}</kbd>-Muster."
}
]
},
@@ -38,22 +38,22 @@
{
"type": "contains_class",
"value": "bg-white",
"message": "Füge <kbd>bg-white</kbd> hinzu, um die Hintergrundfarbe auf weiß zu setzen."
"message": "Das Element benötigt einen weißen Hintergrund -- welches <kbd>bg-</kbd>-Utility passt?"
},
{
"type": "contains_class",
"value": "p-4",
"message": "Füge <kbd>p-4</kbd> hinzu, um 1rem Padding auf allen Seiten anzuwenden."
"message": "Welches <kbd>p-</kbd>-Utility erzeugt 1rem Padding auf allen Seiten?"
},
{
"type": "contains_class",
"value": "rounded",
"message": "Füge <kbd>rounded</kbd> hinzu, um einen border-radius von 0.25rem anzuwenden."
"message": "Welche Klasse fügt abgerundete Ecken hinzu?"
},
{
"type": "contains_class",
"value": "shadow-sm",
"message": "Füge <kbd>shadow-sm</kbd> hinzu, um einen kleinen Schlagschatten anzuwenden."
"message": "Das Element benötigt einen kleinen Schatten -- welches <kbd>shadow-</kbd>-Utility passt?"
}
]
},
@@ -71,17 +71,17 @@
{
"type": "contains_class",
"value": "text-blue-600",
"message": "Füge <kbd>text-blue-600</kbd> hinzu, um den Text blau zu machen"
"message": "Welches <kbd>text-</kbd>-Utility setzt eine blaue Textfarbe? Denke an das <kbd>text-{farbe}-{abstufung}</kbd>-Muster."
},
{
"type": "contains_class",
"value": "text-2xl",
"message": "Füge <kbd>text-2xl</kbd> hinzu, um die Schriftgröße auf 1.5rem zu erhöhen"
"message": "Welches <kbd>text-</kbd>-Utility setzt die Schriftgröße auf 1.5rem?"
},
{
"type": "contains_class",
"value": "font-bold",
"message": "Füge <kbd>font-bold</kbd> hinzu, um den Text fett zu machen (font-weight: 700)"
"message": "Welches <kbd>font-</kbd>-Utility macht den Text fett?"
}
]
},
@@ -99,17 +99,17 @@
{
"type": "contains_class",
"value": "px-6",
"message": "Füge <kbd>px-6</kbd> für horizontales Padding hinzu (1.5rem links und rechts)"
"message": "Welches <kbd>px-</kbd>-Utility erzeugt 1.5rem horizontales Padding?"
},
{
"type": "contains_class",
"value": "py-3",
"message": "Füge <kbd>py-3</kbd> für vertikales Padding hinzu (0.75rem oben und unten)"
"message": "Welches <kbd>py-</kbd>-Utility erzeugt 0.75rem vertikales Padding?"
},
{
"type": "contains_class",
"value": "mx-auto",
"message": "Füge <kbd>mx-auto</kbd> hinzu, um den Button horizontal zu zentrieren"
"message": "Welches <kbd>mx-</kbd>-Utility zentriert ein Element horizontal?"
}
]
},
@@ -127,32 +127,32 @@
{
"type": "contains_class",
"value": "w-full",
"message": "Füge <kbd>w-full</kbd> für 100% Breite auf Mobil hinzu"
"message": "Welches Breiten-Utility macht das Element auf Mobil 100% breit?"
},
{
"type": "contains_class",
"value": "md:w-1/2",
"message": "Füge <kbd>md:w-1/2</kbd> für 50% Breite auf Tablet und größer hinzu"
"message": "Welches responsive Breiten-Utility setzt 50% ab dem <kbd>md:</kbd>-Breakpoint?"
},
{
"type": "contains_class",
"value": "lg:w-1/3",
"message": "Füge <kbd>lg:w-1/3</kbd> für 33.33% Breite auf Desktop und größer hinzu"
"message": "Welches responsive Breiten-Utility setzt 33.33% ab dem <kbd>lg:</kbd>-Breakpoint?"
},
{
"type": "contains_class",
"value": "text-lg",
"message": "Füge <kbd>text-lg</kbd> für die Basis-Textgröße hinzu"
"message": "Welches <kbd>text-</kbd>-Utility setzt die Basis-Textgröße auf 1.125rem?"
},
{
"type": "contains_class",
"value": "md:text-xl",
"message": "Füge <kbd>md:text-xl</kbd> für größeren Text auf Tablets hinzu"
"message": "Welches responsive Text-Utility setzt eine größere Schrift ab dem <kbd>md:</kbd>-Breakpoint?"
},
{
"type": "contains_class",
"value": "lg:text-2xl",
"message": "Füge <kbd>lg:text-2xl</kbd> für noch größeren Text auf Desktop hinzu"
"message": "Welches responsive Text-Utility setzt die größte Schrift ab dem <kbd>lg:</kbd>-Breakpoint?"
}
]
}