public/code-crispies
2
1
Fork 0
Code Issues 7 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/10-tailwind-basics.json
View File

@@ -20,7 +20,7 @@
{
"type": "contains_class",
"value": "bg-blue-500",
"message": "Add the <kbd>bg-blue-500</kbd> class for a blue background."
"message": "Which Tailwind utility sets a blue background color? Think about the <kbd>bg-{color}-{shade}</kbd> pattern."
}
]
},
@@ -38,22 +38,22 @@
{
"type": "contains_class",
"value": "bg-white",
"message": "Add <kbd>bg-white</kbd> to set the background color to white."
"message": "Which Tailwind utility sets a white background? The pattern is <kbd>bg-{color}</kbd>."
},
{
"type": "contains_class",
"value": "p-4",
"message": "Add <kbd>p-4</kbd> to apply 1rem padding on all sides."
"message": "Which Tailwind utility adds 1rem padding on all sides? Remember: each spacing unit is 0.25rem."
},
{
"type": "contains_class",
"value": "rounded",
"message": "Add <kbd>rounded</kbd> to apply border-radius of 0.25rem."
"message": "Which Tailwind utility adds rounded corners? It is one of the simplest utility names."
},
{
"type": "contains_class",
"value": "shadow-sm",
"message": "Add <kbd>shadow-sm</kbd> to apply small drop-shadow."
"message": "Which Tailwind utility adds a small drop-shadow? Look for a <kbd>shadow-</kbd> variant."
}
]
},
@@ -71,17 +71,17 @@
{
"type": "contains_class",
"value": "text-blue-600",
"message": "Add <kbd>text-blue-600</kbd> to make the text blue"
"message": "Which Tailwind utility controls text color? Use the <kbd>text-{color}-{shade}</kbd> pattern with a blue shade."
},
{
"type": "contains_class",
"value": "text-2xl",
"message": "Add <kbd>text-2xl</kbd> to increase the font size to 1.5rem"
"message": "Which Tailwind utility sets the font size to 1.5rem? Check the <kbd>text-{size}</kbd> scale."
},
{
"type": "contains_class",
"value": "font-bold",
"message": "Add <kbd>font-bold</kbd> to make the text bold (font-weight: 700)"
"message": "Which Tailwind utility makes text bold? The <kbd>font-{weight}</kbd> pattern controls font weight."
}
]
},
@@ -99,17 +99,17 @@
{
"type": "contains_class",
"value": "px-6",
"message": "Add <kbd>px-6</kbd> for horizontal padding (1.5rem left and right)"
"message": "Which Tailwind utility adds horizontal padding of 1.5rem? The <kbd>px-</kbd> prefix targets left and right."
},
{
"type": "contains_class",
"value": "py-3",
"message": "Add <kbd>py-3</kbd> for vertical padding (0.75rem top and bottom)"
"message": "Which Tailwind utility adds vertical padding of 0.75rem? The <kbd>py-</kbd> prefix targets top and bottom."
},
{
"type": "contains_class",
"value": "mx-auto",
"message": "Add <kbd>mx-auto</kbd> to center the button horizontally"
"message": "Which Tailwind utility centers an element horizontally using auto margins?"
}
]
},
@@ -127,32 +127,32 @@
{
"type": "contains_class",
"value": "w-full",
"message": "Add <kbd>w-full</kbd> for 100% width on mobile"
"message": "Which Tailwind utility makes an element take up 100% width? This is the base (mobile) style."
},
{
"type": "contains_class",
"value": "md:w-1/2",
"message": "Add <kbd>md:w-1/2</kbd> for 50% width on tablet and up"
"message": "How do you set 50% width at the <kbd>md:</kbd> breakpoint? Tailwind uses fraction notation for widths."
},
{
"type": "contains_class",
"value": "lg:w-1/3",
"message": "Add <kbd>lg:w-1/3</kbd> for 33.33% width on desktop and up"
"message": "How do you set one-third width at the <kbd>lg:</kbd> breakpoint? Use the same fraction pattern."
},
{
"type": "contains_class",
"value": "text-lg",
"message": "Add <kbd>text-lg</kbd> for the base text size"
"message": "Which Tailwind text size utility is one step above the base size? Think about the <kbd>text-{size}</kbd> scale."
},
{
"type": "contains_class",
"value": "md:text-xl",
"message": "Add <kbd>md:text-xl</kbd> for larger text on tablets"
"message": "How do you increase the text size at the <kbd>md:</kbd> breakpoint? Go one step larger."
},
{
"type": "contains_class",
"value": "lg:text-2xl",
"message": "Add <kbd>lg:text-2xl</kbd> for even larger text on desktop"
"message": "How do you set an even larger text size at the <kbd>lg:</kbd> breakpoint? Continue stepping up the scale."
}
]
}