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/pl/00-basic-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Dodaj <kbd>color: coral;</kbd>"
"message": "Która właściwość kontroluje kolor tekstu?"
}
]
},
@@ -43,12 +43,12 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lavender" },
"message": "Dodaj <kbd>background: lavender;</kbd>"
"message": "Sprawdź właściwość <kbd>background</kbd> — jaki kolor potrzebuje karta?"
},
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Dodaj <kbd>padding: 1rem;</kbd>"
"message": "Element potrzebuje wewnętrznej przestrzeni — sprawdź właściwość <kbd>padding</kbd>"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Ustaw <kbd>color: steelblue</kbd>"
"message": "Która właściwość kontroluje kolor tekstu?"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Ustaw <kbd>color: coral</kbd>"
"message": "Sprawdź właściwość <kbd>color</kbd> — jaki kolor potrzebują linki?"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "tomato" },
"message": "Ustaw <kbd>background: tomato</kbd>"
"message": "Sprawdź właściwość <kbd>background</kbd> — jaki kolor potrzebuje badge?"
}
]
},
@@ -152,7 +152,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "Ustaw <kbd>background: steelblue</kbd>"
"message": "Sprawdź właściwość <kbd>background</kbd> — jaki kolor potrzebuje przycisk?"
}
]
},
@@ -178,7 +178,7 @@
{
"type": "property_value",
"value": { "property": "text-decoration", "expected": "none" },
"message": "Ustaw <kbd>text-decoration: none</kbd>"
"message": "Która właściwość kontroluje podkreślenie linków?"
}
]
},
@@ -199,7 +199,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Ustaw <kbd>color: steelblue</kbd>"
"message": "Która właściwość kontroluje kolor tekstu nagłówków?"
}
]
},
@@ -225,7 +225,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "white" },
"message": "Ustaw <kbd>color: white</kbd>"
"message": "Sprawdź właściwość <kbd>color</kbd> — jaki kolor potrzebują linki nawigacji?"
}
]
},
@@ -251,7 +251,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "0.9rem" },
"message": "Ustaw <kbd>font-size: 0.9rem</kbd>"
"message": "Która właściwość kontroluje rozmiar tekstu?"
}
]
}

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

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Ustaw <kbd>padding: 1rem</kbd>"
"message": "Element potrzebuje wewnętrznej przestrzeni — sprawdź właściwość <kbd>padding</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
"message": "Ustaw <kbd>border-left: 4px solid steelblue</kbd>",
"message": "Sprawdź właściwość <kbd>border-left</kbd> — jakiej szerokości, stylu i koloru potrzebujesz?",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "1rem" },
"message": "Ustaw <kbd>margin-bottom: 1rem</kbd>"
"message": "Która właściwość kontroluje przestrzeń pod elementem?"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "Ustaw <kbd>box-sizing: border-box</kbd>"
"message": "Która wartość <kbd>box-sizing</kbd> włącza padding i ramkę do szerokości?"
}
]
},
@@ -107,7 +107,7 @@
{
"type": "regex",
"value": "padding:\\s*8px\\s+1rem",
"message": "Ustaw <kbd>padding: 8px 1rem</kbd>",
"message": "Sprawdź skrót <kbd>padding</kbd> — dwie wartości oznaczają pion i poziom",
"options": { "caseSensitive": false }
}
]
@@ -129,7 +129,7 @@
{
"type": "regex",
"value": "margin:\\s*0\\s+auto",
"message": "Ustaw <kbd>margin: 0 auto</kbd>",
"message": "Sprawdź skrót <kbd>margin</kbd> — jak automatycznie wycentrować element poziomo?",
"options": { "caseSensitive": false }
}
]
@@ -151,7 +151,7 @@
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "50%" },
"message": "Ustaw <kbd>border-radius: 50%</kbd>"
"message": "Która wartość <kbd>border-radius</kbd> tworzy pełne koło?"
}
]
},
@@ -172,18 +172,18 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Ustaw <kbd>padding: 1rem</kbd>"
"message": "Element potrzebuje wewnętrznej przestrzeni — sprawdź właściwość <kbd>padding</kbd>"
},
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+coral",
"message": "Ustaw <kbd>border-left: 4px solid coral</kbd>",
"message": "Sprawdź właściwość <kbd>border-left</kbd> — jaki styl akcentu potrzebuje powiadomienie?",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "4px" },
"message": "Ustaw <kbd>border-radius: 4px</kbd>"
"message": "Element potrzebuje zaokrąglonych rogów — sprawdź właściwość <kbd>border-radius</kbd>"
}
]
}

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

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "max-width", "expected": "40rem" },
"message": "Ustaw <kbd>max-width: 40rem</kbd>"
"message": "Która właściwość ogranicza maksymalną szerokość elementu?"
}
]
},
@@ -49,7 +49,7 @@
{
"type": "contains",
"value": "steelblue",
"message": "Ustaw wartość na <kbd>steelblue</kbd>",
"message": "Jaki kolor powinna mieć zmienna brand?",
"options": { "caseSensitive": false }
}
]
@@ -71,7 +71,7 @@
{
"type": "regex",
"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
"message": "Ustaw <kbd>width: calc(100% - 200px)</kbd>",
"message": "Sprawdź funkcję <kbd>calc()</kbd> — jak obliczyć szerokość minus sidebar?",
"options": { "caseSensitive": false }
}
]
@@ -93,7 +93,7 @@
{
"type": "property_value",
"value": { "property": "min-height", "expected": "100vh" },
"message": "Ustaw <kbd>min-height: 100vh</kbd>"
"message": "Która właściwość zapewnia minimalną wysokość na cały viewport?"
}
]
}

18
lessons/pl/06-transitions-animations.json
View File

@@ -28,7 +28,7 @@
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Ustaw <kbd>transition: background-color 0.3s</kbd>",
"message": "Sprawdź właściwość <kbd>transition</kbd> — jaką właściwość i czas trwania podać?",
"options": { "caseSensitive": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "Ustaw timing na <kbd>ease-in-out</kbd>"
"message": "Która wartość tworzy płynne przyspieszenie i spowolnienie?"
}
]
},
@@ -83,7 +83,7 @@
{
"type": "regex",
"value": "50%.*transform: translateY\\(-20px\\)",
"message": "Przy <kbd>50%</kbd>, użyj <kbd>transform: translateY(-20px)</kbd>",
"message": "W połowie animacji piłka powinna podskoczyć w górę — sprawdź <kbd>transform</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -95,7 +95,7 @@
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "Zastosuj <kbd>animation: bounce 1s infinite</kbd>",
"message": "Sprawdź skrót <kbd>animation</kbd> — podaj nazwę, czas trwania i powtarzanie",
"options": { "caseSensitive": false }
}
]
@@ -117,27 +117,27 @@
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "Ustaw <kbd>animation-name: pulse</kbd>"
"message": "Która właściwość wskazuje nazwę animacji do zastosowania?"
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "Ustaw <kbd>animation-duration: 2s</kbd>"
"message": "Sprawdź właściwość <kbd>animation-duration</kbd> — jak długo trwa jeden cykl?"
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "Ustaw <kbd>animation-delay: 1s</kbd>"
"message": "Sprawdź właściwość <kbd>animation-delay</kbd> — ile czeka przed startem?"
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "Ustaw <kbd>animation-iteration-count: 2</kbd>"
"message": "Sprawdź właściwość <kbd>animation-iteration-count</kbd> — ile razy ma się powtórzyć?"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "Ustaw <kbd>animation-fill-mode: forwards</kbd>"
"message": "Która wartość <kbd>animation-fill-mode</kbd> zachowuje końcowy stan animacji?"
}
]
}

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

@@ -34,7 +34,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "Ustaw <kbd>background: lightcoral</kbd>",
"message": "Sprawdź właściwość <kbd>background</kbd> — jaki kolor potrzebuje panel na małych ekranach?",
"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": "Ustaw <kbd>font-size: 5vw</kbd>" }
{
"type": "property_value",
"value": { "property": "font-size", "expected": "5vw" },
"message": "Sprawdź właściwość <kbd>font-size</kbd> — która jednostka skaluje się z viewport?"
}
]
},
{
@@ -73,7 +77,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "Ustaw <kbd>display: grid</kbd>"
"message": "Która wartość <kbd>display</kbd> włącza układ siatkowy?"
},
{
"type": "regex",
@@ -84,7 +88,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Ustaw <kbd>gap: 1rem</kbd>"
"message": "Sprawdź właściwość <kbd>gap</kbd> — jaki odstęp potrzebują elementy siatki?"
}
]
},
@@ -117,7 +121,7 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "Ustaw <kbd>width: 250px</kbd>",
"message": "Sprawdź właściwość <kbd>width</kbd> — jaką stałą szerokość potrzebuje sidebar?",
"options": { "exact": false }
}
]

12
lessons/pl/flexbox.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "Ustaw <kbd>display: flex</kbd>"
"message": "Która właściwość <kbd>display</kbd> tworzy kontener flex?"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Ustaw <kbd>gap: 1rem</kbd>"
"message": "Sprawdź właściwość <kbd>gap</kbd> — jaki odstęp potrzebują elementy?"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "Ustaw <kbd>justify-content: space-between</kbd>"
"message": "Która wartość <kbd>justify-content</kbd> rozdziela elementy na końce?"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "Ustaw <kbd>align-items: center</kbd>"
"message": "Która właściwość kontroluje wyrównanie na osi poprzecznej?"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "Ustaw <kbd>flex-wrap: wrap</kbd>"
"message": "Sprawdź właściwość <kbd>flex-wrap</kbd> — jak pozwolić elementom przenosić się na nowe linie?"
}
]
},
@@ -127,7 +127,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "1" },
"message": "Ustaw <kbd>flex: 1</kbd>"
"message": "Sprawdź właściwość <kbd>flex</kbd> — jak sprawić, by element wypełnił dostępną przestrzeń?"
}
]
}