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

33
lessons/07-layouts.json
View File

@@ -18,14 +18,24 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "display", "message": "Use <kbd>display: flex</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "display",
"message": "Which display mode arranges children in a row or column?",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "justify-content",
"message": "Use <kbd>justify-content: center</kbd>",
"message": "How do you center items along the main axis?",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "align-items", "message": "Use <kbd>align-items: center</kbd>", "options": { "caseSensitive": false } }
{
"type": "contains",
"value": "align-items",
"message": "Which property centers items along the cross axis?",
"options": { "caseSensitive": false }
}
]
},
{
@@ -44,13 +54,13 @@
{
"type": "contains",
"value": "flex-wrap: wrap",
"message": "Use <kbd>flex-wrap: wrap</kbd>",
"message": "Which property allows flex items to flow onto multiple lines?",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": ".item.*flex:\\s*1\\s+1\\s+100px",
"message": "Set <kbd>flex: 1 1 100px</kbd> on items",
"message": "The <kbd>flex</kbd> shorthand takes grow, shrink, and basis values — what basis size should each item start from?",
"options": { "caseSensitive": false }
}
]
@@ -68,17 +78,22 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "display: grid", "message": "Use <kbd>display: grid</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "display: grid",
"message": "Which display mode lets you define rows and columns?",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "grid-template-columns",
"message": "Define <kbd>grid-template-columns</kbd>",
"message": "Which property defines the column structure of a grid?",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "grid-template-columns:\\s*repeat\\(3,\\s*1fr\\)\\s*",
"message": "Create three equal columns with <kbd>repeat(3, 1fr)</kbd>",
"message": "The <kbd>repeat()</kbd> function can create equal-width columns — how many do you need, and what unit makes them equal?",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "gap", "message": "Use <kbd>gap</kbd> property", "options": { "caseSensitive": false } }
@@ -106,7 +121,7 @@
{
"type": "property_value",
"value": { "property": "grid-column", "expected": "1 / span 2" },
"message": "Span across 2 columns with <kbd>grid-column: 1 / span 2</kbd>",
"message": "Use <kbd>grid-column</kbd> with a start line and a span count \u2014 how many columns should this item stretch across?",
"options": { "caseSensitive": false }
}
]