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

22
lessons/de/00-basic-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Füge <kbd>color: coral;</kbd> hinzu"
"message": "Welche Eigenschaft ändert die Textfarbe?"
}
]
},
@@ -43,12 +43,12 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lavender" },
"message": "Füge <kbd>background: lavender;</kbd> hinzu"
"message": "Welche Eigenschaft steuert die Hintergrundfarbe?"
},
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Füge <kbd>padding: 1rem;</kbd> hinzu"
"message": "Das Element benötigt auch Innenabstand -- überprüfe die <kbd>padding</kbd>-Eigenschaft"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Setze <kbd>color: steelblue</kbd>"
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welcher Farbwert wurde in der Beschreibung genannt?"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Setze <kbd>color: coral</kbd>"
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welche Farbe sollen die Links haben?"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "tomato" },
"message": "Setze <kbd>background: tomato</kbd>"
"message": "Überprüfe die <kbd>background</kbd>-Eigenschaft -- welche Farbe soll das Badge haben?"
}
]
},
@@ -152,7 +152,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "Setze <kbd>background: steelblue</kbd>"
"message": "Überprüfe die <kbd>background</kbd>-Eigenschaft -- welche Farbe soll der primäre Button haben?"
}
]
},
@@ -178,7 +178,7 @@
{
"type": "property_value",
"value": { "property": "text-decoration", "expected": "none" },
"message": "Setze <kbd>text-decoration: none</kbd>"
"message": "Welche Eigenschaft entfernt die Unterstreichung von Links?"
}
]
},
@@ -199,7 +199,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Setze <kbd>color: steelblue</kbd>"
"message": "Welche Eigenschaft ändert die Textfarbe der Überschriften?"
}
]
},
@@ -225,7 +225,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "white" },
"message": "Setze <kbd>color: white</kbd>"
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welche Farbe passt zu einem dunklen Hintergrund?"
}
]
},
@@ -251,7 +251,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "0.9rem" },
"message": "Setze <kbd>font-size: 0.9rem</kbd>"
"message": "Welche Eigenschaft steuert die Schriftgröße?"
}
]
}

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",

20
lessons/de/01-box-model.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Setze <kbd>padding: 1rem</kbd>"
"message": "Welche Eigenschaft steuert den Innenabstand zwischen Inhalt und Rahmen?"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
"message": "Setze <kbd>border-left: 4px solid steelblue</kbd>",
"message": "Überprüfe die <kbd>border-left</kbd>-Eigenschaft -- welche drei Werte braucht sie?",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "1rem" },
"message": "Setze <kbd>margin-bottom: 1rem</kbd>"
"message": "Welche Eigenschaft steuert den Außenabstand nach unten?"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "Setze <kbd>box-sizing: border-box</kbd>"
"message": "Welcher <kbd>box-sizing</kbd>-Wert bezieht Padding und Rahmen in die Breite ein?"
}
]
},
@@ -107,7 +107,7 @@
{
"type": "regex",
"value": "padding:\\s*8px\\s+1rem",
"message": "Setze <kbd>padding: 8px 1rem</kbd>",
"message": "Überprüfe die <kbd>padding</kbd>-Kurzschreibweise -- zwei Werte setzen vertikal und horizontal",
"options": { "caseSensitive": false }
}
]
@@ -129,7 +129,7 @@
{
"type": "regex",
"value": "margin:\\s*0\\s+auto",
"message": "Setze <kbd>margin: 0 auto</kbd>",
"message": "Welche <kbd>margin</kbd>-Kurzschreibweise zentriert ein Block-Element horizontal?",
"options": { "caseSensitive": false }
}
]
@@ -151,7 +151,7 @@
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "50%" },
"message": "Setze <kbd>border-radius: 50%</kbd>"
"message": "Welcher <kbd>border-radius</kbd>-Wert macht ein quadratisches Element rund?"
}
]
},
@@ -172,18 +172,18 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Setze <kbd>padding: 1rem</kbd>"
"message": "Das Element benötigt Innenabstand -- überprüfe die <kbd>padding</kbd>-Eigenschaft"
},
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+coral",
"message": "Setze <kbd>border-left: 4px solid coral</kbd>",
"message": "Überprüfe die <kbd>border-left</kbd>-Eigenschaft -- sie braucht Breite, Stil und Farbe",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "4px" },
"message": "Setze <kbd>border-radius: 4px</kbd>"
"message": "Das Element benötigt abgerundete Ecken -- überprüfe die <kbd>border-radius</kbd>-Eigenschaft"
}
]
}

8
lessons/de/05-units-variables.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "max-width", "expected": "40rem" },
"message": "Setze <kbd>max-width: 40rem</kbd>"
"message": "Welche Eigenschaft begrenzt die maximale Breite eines Elements?"
}
]
},
@@ -49,7 +49,7 @@
{
"type": "contains",
"value": "steelblue",
"message": "Setze den Wert auf <kbd>steelblue</kbd>",
"message": "Welche Farbe soll die Variable haben?",
"options": { "caseSensitive": false }
}
]
@@ -71,7 +71,7 @@
{
"type": "regex",
"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
"message": "Setze <kbd>width: calc(100% - 200px)</kbd>",
"message": "Überprüfe die <kbd>width</kbd>-Eigenschaft -- wie berechnest du den verbleibenden Platz nach der Sidebar?",
"options": { "caseSensitive": false }
}
]
@@ -93,7 +93,7 @@
{
"type": "property_value",
"value": { "property": "min-height", "expected": "100vh" },
"message": "Setze <kbd>min-height: 100vh</kbd>"
"message": "Welche Eigenschaft setzt die Mindesthöhe? Welche Viewport-Einheit entspricht 100% der Fensterhöhe?"
}
]
}

14
lessons/de/06-transitions-animations.json
View File

@@ -28,7 +28,7 @@
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Setze <kbd>transition: background-color 0.3s</kbd>",
"message": "Überprüfe die <kbd>transition</kbd>-Eigenschaft -- welche CSS-Eigenschaft soll sanft übergehen und wie lange?",
"options": { "caseSensitive": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "Setze timing auf <kbd>ease-in-out</kbd>"
"message": "Welche Timing-Funktion startet und endet langsam?"
}
]
},
@@ -117,27 +117,27 @@
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "Setze <kbd>animation-name: pulse</kbd>"
"message": "Welche Animation soll angewendet werden? Überprüfe den <kbd>@keyframes</kbd>-Namen."
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "Setze <kbd>animation-duration: 2s</kbd>"
"message": "Welche Eigenschaft steuert die Dauer der Animation?"
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "Setze <kbd>animation-delay: 1s</kbd>"
"message": "Welche Eigenschaft verzögert den Start der Animation?"
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "Setze <kbd>animation-iteration-count: 2</kbd>"
"message": "Welche Eigenschaft steuert, wie oft die Animation wiederholt wird?"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "Setze <kbd>animation-fill-mode: forwards</kbd>"
"message": "Welcher <kbd>animation-fill-mode</kbd>-Wert behält den Endzustand bei?"
}
]
}

14
lessons/de/08-responsive.json
View File

@@ -34,7 +34,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "Setze <kbd>background: lightcoral</kbd>",
"message": "Überprüfe die <kbd>background</kbd>-Eigenschaft innerhalb der Media Query",
"options": { "exact": false }
}
]
@@ -53,7 +53,11 @@
"solution": " font-size: 5vw;",
"previewContainer": "preview-area",
"validations": [
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze <kbd>font-size: 5vw</kbd>" }
{
"type": "property_value",
"value": { "property": "font-size", "expected": "5vw" },
"message": "Welche Eigenschaft steuert die Schriftgröße? Welche Viewport-Einheit skaliert mit der Breite?"
}
]
},
{
@@ -73,7 +77,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "Setze <kbd>display: grid</kbd>"
"message": "Welcher Display-Wert aktiviert das CSS-Grid-Layout?"
},
{
"type": "regex",
@@ -84,7 +88,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Setze <kbd>gap: 1rem</kbd>"
"message": "Welche Eigenschaft steuert den Abstand zwischen Grid-Zellen?"
}
]
},
@@ -117,7 +121,7 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "Setze <kbd>width: 250px</kbd>",
"message": "Überprüfe die <kbd>width</kbd>-Eigenschaft für die Sidebar",
"options": { "exact": false }
}
]

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?"
}
]
}

12
lessons/de/flexbox.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "Setze <kbd>display: flex</kbd>"
"message": "Welcher Display-Wert macht ein Element zu einem flexiblen Box-Container?"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Setze <kbd>gap: 1rem</kbd>"
"message": "Welche Eigenschaft erzeugt Abstände zwischen Flex-Items ohne Margins?"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "Setze <kbd>justify-content: space-between</kbd>"
"message": "Welcher <kbd>justify-content</kbd>-Wert schiebt das erste und letzte Element an gegenüberliegende Ränder?"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "Setze <kbd>align-items: center</kbd>"
"message": "Welche Eigenschaft richtet Flex-Items entlang der Querachse aus?"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "Setze <kbd>flex-wrap: wrap</kbd>"
"message": "Welche Eigenschaft erlaubt Flex-Items, auf mehrere Zeilen umzubrechen?"
}
]
},
@@ -127,7 +127,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "1" },
"message": "Setze <kbd>flex: 1</kbd>"
"message": "Welche Eigenschaft lässt ein Flex-Item wachsen, um den verbleibenden Platz zu füllen?"
}
]
}