feat: implement #4 — replace answer-revealing validation messages with pedagogical hints

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.
2026-03-28 19:40:28 +01:00
parent 782e87705c
commit c560676544
50 changed files with 434 additions and 403 deletions
--- a/lessons/uk/00-basic-selectors.json
+++ b/lessons/uk/00-basic-selectors.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "color", "expected": "coral" },
-					"message": "Додайте <kbd>color: coral;</kbd>"
+					"message": "Яка властивість керує кольором тексту?"
 				}
 			]
 		},
@@ -43,12 +43,12 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "lavender" },
-					"message": "Додайте <kbd>background: lavender;</kbd>"
+					"message": "Перевірте властивість <kbd>background</kbd>"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Додайте <kbd>padding: 1rem;</kbd>"
+					"message": "Картка потребує простору всередині її меж"
 				}
 			]
 		},
@@ -74,7 +74,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "color", "expected": "steelblue" },
-					"message": "Встановіть <kbd>color: steelblue</kbd>"
+					"message": "Яка властивість змінює колір тексту?"
 				}
 			]
 		},
@@ -100,7 +100,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "color", "expected": "coral" },
-					"message": "Встановіть <kbd>color: coral</kbd>"
+					"message": "Яке значення дає теплий червонувато-оранжевий колір?"
 				}
 			]
 		},
@@ -126,7 +126,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "tomato" },
-					"message": "Встановіть <kbd>background: tomato</kbd>"
+					"message": "Значку потрібен яскравий червоний фон"
 				}
 			]
 		},
@@ -152,7 +152,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "steelblue" },
-					"message": "Встановіть <kbd>background: steelblue</kbd>"
+					"message": "Яка властивість встановлює колір заливки кнопки?"
 				}
 			]
 		},
@@ -178,7 +178,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "text-decoration", "expected": "none" },
-					"message": "Встановіть <kbd>text-decoration: none</kbd>"
+					"message": "Яка властивість керує підкресленням посилань?"
 				}
 			]
 		},
@@ -199,7 +199,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "color", "expected": "steelblue" },
-					"message": "Встановіть <kbd>color: steelblue</kbd>"
+					"message": "Перевірте властивість <kbd>color</kbd>"
 				}
 			]
 		},
@@ -225,7 +225,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "color", "expected": "white" },
-					"message": "Встановіть <kbd>color: white</kbd>"
+					"message": "Посилання мають виділятися на синьому фоні"
 				}
 			]
 		},
@@ -251,7 +251,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "font-size", "expected": "0.9rem" },
-					"message": "Встановіть <kbd>font-size: 0.9rem</kbd>"
+					"message": "Перевірте властивість <kbd>font-size</kbd> — текст має бути трохи меншим"
 				}
 			]
 		}
--- a/lessons/uk/01-box-model.json
+++ b/lessons/uk/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Встановіть <kbd>padding: 1rem</kbd>"
+					"message": "Яка властивість додає простір між вмістом елемента та його межею?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Встановіть <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "Використайте скорочення <kbd>border-left</kbd> зі значеннями ширини, стилю та кольору",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Встановіть <kbd>margin-bottom: 1rem</kbd>"
+					"message": "Яка властивість створює простір знизу елемента, відштовхуючи сусідів?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Встановіть <kbd>box-sizing: border-box</kbd>"
+					"message": "Яке значення <kbd>box-sizing</kbd> включає padding та межу в загальну ширину елемента?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Встановіть <kbd>padding: 8px 1rem</kbd>",
+					"message": "Використайте скорочення <kbd>padding</kbd> з двома значеннями: вертикальне та горизонтальне",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Встановіть <kbd>margin: 0 auto</kbd>",
+					"message": "Використайте <kbd>margin</kbd> з ключовим словом, яке автоматично обчислює рівні ліві та праві відступи",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Встановіть <kbd>border-radius: 50%</kbd>"
+					"message": "Який відсоток <kbd>border-radius</kbd> створює ідеальне коло з квадратного елемента?"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Встановіть <kbd>padding: 1rem</kbd>"
+					"message": "Додайте внутрішній відступ до картки сповіщення"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Встановіть <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Додайте лівий акцент за допомогою скорочення <kbd>border-left</kbd>",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Встановіть <kbd>border-radius: 4px</kbd>"
+					"message": "Злегка заокругліть кути за допомогою <kbd>border-radius</kbd>"
 				}
 			]
 		}
--- a/lessons/uk/05-units-variables.json
+++ b/lessons/uk/05-units-variables.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "max-width", "expected": "40rem" },
-					"message": "Встановіть <kbd>max-width: 40rem</kbd>"
+					"message": "Яка властивість обмежує ширину елемента? Спробуйте значення в <kbd>rem</kbd> для комфортної довжини рядка."
 				}
 			]
 		},
@@ -49,7 +49,7 @@
 				{
 					"type": "contains",
 					"value": "steelblue",
-					"message": "Встановіть значення <kbd>steelblue</kbd>",
+					"message": "Встановіть значення на <kbd>steelblue</kbd>",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -71,7 +71,7 @@
 				{
 					"type": "regex",
 					"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
-					"message": "Встановіть <kbd>width: calc(100% - 200px)</kbd>",
+					"message": "Використайте <kbd>calc()</kbd>, щоб відняти фіксовану ширину сайдбару від повної ширини контейнера.",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -93,7 +93,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "min-height", "expected": "100vh" },
-					"message": "Встановіть <kbd>min-height: 100vh</kbd>"
+					"message": "Яка властивість забезпечує мінімальну висоту? Використайте одиницю viewport для повноекранного покриття."
 				}
 			]
 		}
--- a/lessons/uk/06-transitions-animations.json
+++ b/lessons/uk/06-transitions-animations.json
@@ -28,7 +28,7 @@
 				{
 					"type": "regex",
 					"value": "transition:\\s*background-color\\s*0\\.3s",
-					"message": "Встановіть <kbd>transition: background-color 0.3s</kbd>",
+					"message": "Вкажіть, яку властивість анімувати та скільки це має тривати.",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -56,7 +56,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
-					"message": "Встановіть timing на <kbd>ease-in-out</kbd>"
+					"message": "Яке ключове слово пом'якшення починається повільно, прискорюється, а потім знову сповільнюється?"
 				}
 			]
 		},
@@ -95,7 +95,7 @@
 				{
 					"type": "regex",
 					"value": "animation:.*bounce.*1s.*infinite",
-					"message": "Застосуйте <kbd>animation: bounce 1s infinite</kbd>",
+					"message": "Використайте скорочення <kbd>animation</kbd>: назва, тривалість та кількість повторень.",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -117,27 +117,27 @@
 				{
 					"type": "property_value",
 					"value": { "property": "animation-name", "expected": "pulse" },
-					"message": "Встановіть <kbd>animation-name: pulse</kbd>"
+					"message": "Яка властивість пов'язує елемент з іменованим правилом <kbd>@keyframes</kbd>?"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-duration", "expected": "2s" },
-					"message": "Встановіть <kbd>animation-duration: 2s</kbd>"
+					"message": "Скільки має тривати один повний цикл анімації?"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-delay", "expected": "1s" },
-					"message": "Встановіть <kbd>animation-delay: 1s</kbd>"
+					"message": "Яка властивість змушує анімацію зачекати перед початком?"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-iteration-count", "expected": "2" },
-					"message": "Встановіть <kbd>animation-iteration-count: 2</kbd>"
+					"message": "Яка властивість контролює кількість повторень анімації?"
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "animation-fill-mode", "expected": "forwards" },
-					"message": "Встановіть <kbd>animation-fill-mode: forwards</kbd>"
+					"message": "Яка властивість зберігає стиль елемента в його фінальному стані keyframe після завершення анімації?"
 				}
 			]
 		}
--- a/lessons/uk/08-responsive.json
+++ b/lessons/uk/08-responsive.json
@@ -22,7 +22,7 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(max-width:\\s*600px\\)",
-					"message": "Використайте <kbd>@media (max-width: 600px)</kbd>",
+					"message": "Почніть з правила <kbd>@media</kbd> — яка умова націлюється на екрани шириною 600px або менше?",
 					"options": { "caseSensitive": false }
 				},
 				{
@@ -34,7 +34,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background", "expected": "lightcoral" },
-					"message": "Встановіть <kbd>background: lightcoral</kbd>",
+					"message": "Яка властивість змінює колір фону елемента?",
 					"options": { "exact": false }
 				}
 			]
@@ -56,7 +56,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "font-size", "expected": "5vw" },
-					"message": "Встановіть <kbd>font-size: 5vw</kbd>"
+					"message": "Яка одиниця CSS масштабується відносно ширини viewport?"
 				}
 			]
 		},
@@ -77,18 +77,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "display", "expected": "grid" },
-					"message": "Встановіть <kbd>display: grid</kbd>"
+					"message": "Який режим display дозволяє визначати рядки та колонки?"
 				},
 				{
 					"type": "regex",
 					"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
-					"message": "Використайте <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
+					"message": "Спробуйте <kbd>repeat()</kbd> з <kbd>auto-fit</kbd> та <kbd>minmax()</kbd> — які мінімальний та максимальний розміри створять гнучкі колонки?",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "gap", "expected": "1rem" },
-					"message": "Встановіть <kbd>gap: 1rem</kbd>"
+					"message": "Яка властивість додає простір між елементами grid?"
 				}
 			]
 		},
@@ -109,7 +109,7 @@
 				{
 					"type": "regex",
 					"value": "@media\\s*\\(min-width:\\s*768px\\)",
-					"message": "Використайте <kbd>@media (min-width: 768px)</kbd>",
+					"message": "Яка умова <kbd>@media</kbd> застосовує стилі, коли viewport має ширину щонайменше 768px?",
 					"options": { "caseSensitive": false }
 				},
 				{
@@ -121,7 +121,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "width", "expected": "250px" },
-					"message": "Встановіть <kbd>width: 250px</kbd>",
+					"message": "Яка властивість контролює ширину сайдбару на великих екранах?",
 					"options": { "exact": false }
 				}
 			]
--- a/lessons/uk/flexbox.json
+++ b/lessons/uk/flexbox.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "display", "expected": "flex" },
-					"message": "Встановіть <kbd>display: flex</kbd>"
+					"message": "Яке значення display перетворює елемент на гнучкий контейнер?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "gap", "expected": "1rem" },
-					"message": "Встановіть <kbd>gap: 1rem</kbd>"
+					"message": "Яка властивість створює відстань між flex-елементами без використання margin?"
 				}
 			]
 		},
@@ -64,7 +64,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "justify-content", "expected": "space-between" },
-					"message": "Встановіть <kbd>justify-content: space-between</kbd>"
+					"message": "Яке значення <kbd>justify-content</kbd> розміщує перший та останній елементи на протилежних краях?"
 				}
 			]
 		},
@@ -85,7 +85,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "align-items", "expected": "center" },
-					"message": "Встановіть <kbd>align-items: center</kbd>"
+					"message": "Яка властивість вирівнює flex-елементи вздовж поперечної осі?"
 				}
 			]
 		},
@@ -106,7 +106,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "flex-wrap", "expected": "wrap" },
-					"message": "Встановіть <kbd>flex-wrap: wrap</kbd>"
+					"message": "Яка властивість дозволяє flex-елементам переходити на кілька рядків?"
 				}
 			]
 		},
@@ -127,7 +127,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "flex", "expected": "1" },
-					"message": "Встановіть <kbd>flex: 1</kbd>"
+					"message": "Яка властивість змушує flex-елемент зростати, щоб заповнити залишковий простір?"
 				}
 			]
 		}