fix: rewrite validation messages to guide learning instead of revealing answers (#4)

2026-03-28 20:10:04 +01:00
parent a54828815d
commit 825a2cb23f
10 changed files with 218 additions and 64 deletions
--- a/lessons/01-box-model.json
+++ b/lessons/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Set <kbd>padding: 1rem</kbd>"
+					"message": "Which property adds space between content and the element's edge?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Set <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "Use the shorthand that sets a border on just one side",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Set <kbd>margin-bottom: 1rem</kbd>"
+					"message": "Which property pushes neighboring elements away from the bottom?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Set <kbd>box-sizing: border-box</kbd>"
+					"message": "Which sizing mode includes padding and border in the element's width?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Set <kbd>padding: 8px 1rem</kbd>",
+					"message": "Use the two-value shorthand: vertical first, then horizontal",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Set <kbd>margin: 0 auto</kbd>",
+					"message": "Use the shorthand that auto-calculates equal horizontal margins",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Set <kbd>border-radius: 50%</kbd>"
+					"message": "Which property rounds corners? Think about what percentage makes a circle"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Set <kbd>padding: 1rem</kbd>"
+					"message": "Add inner spacing to the notification"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Set <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Add a colored accent on the left edge",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Set <kbd>border-radius: 4px</kbd>"
+					"message": "Soften the corners of the notification"
 				}
 			]
 		}
--- a/lessons/03-colors.json
+++ b/lessons/03-colors.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background-color", "expected": "seashell" },
-					"message": "Set <kbd>background-color: seashell</kbd>"
+					"message": "Which property fills the area behind the content?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "color", "expected": "coral" },
-					"message": "Set <kbd>color: coral</kbd>"
+					"message": "Which property changes the text color?"
 				}
 			]
 		},
@@ -64,7 +64,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-color", "expected": "coral" },
-					"message": "Set <kbd>border-color: coral</kbd>"
+					"message": "Which property changes just the border's color without redefining the whole border?"
 				}
 			]
 		},
@@ -85,7 +85,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "background-color", "expected": "#ffd700" },
-					"message": "Set <kbd>background-color: #ffd700</kbd>"
+					"message": "Use the same background property, but with a hex code this time"
 				}
 			]
 		}
--- a/lessons/ar/01-box-model.json
+++ b/lessons/ar/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": "استخدم الاختصار الذي يحدد حداً على جانب واحد فقط",
 					"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": "أي وضع تحجيم يشمل padding والحدود في عرض العنصر؟"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "اضبط <kbd>padding: 8px 1rem</kbd>",
+					"message": "استخدم اختصار القيمتين: العمودي أولاً، ثم الأفقي",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "اضبط <kbd>margin: 0 auto</kbd>",
+					"message": "استخدم الاختصار الذي يحسب هوامش أفقية متساوية تلقائياً",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "اضبط <kbd>border-radius: 50%</kbd>"
+					"message": "أي خاصية تدوّر الزوايا؟ فكر في النسبة المئوية التي تصنع دائرة"
 				}
 			]
 		},
@@ -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": "أضف لمسة ملونة على الحافة اليسرى",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "اضبط <kbd>border-radius: 4px</kbd>"
+					"message": "نعّم زوايا الإشعار"
 				}
 			]
 		}
--- a/lessons/de/01-box-model.json
+++ b/lessons/de/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Setze <kbd>padding: 1rem</kbd>"
+					"message": "Welche Eigenschaft fügt Abstand zwischen Inhalt und Elementrand hinzu?"
 				}
 			]
 		},
@@ -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": "Verwende die Kurzschreibweise, die einen Rahmen auf nur einer Seite setzt",
 					"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 schiebt benachbarte Elemente nach unten weg?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Setze <kbd>box-sizing: border-box</kbd>"
+					"message": "Welcher Größenmodus bezieht Padding und Rahmen in die Breite des Elements ein?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Setze <kbd>padding: 8px 1rem</kbd>",
+					"message": "Verwende die Zwei-Werte-Kurzschreibweise: vertikal zuerst, dann horizontal",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Setze <kbd>margin: 0 auto</kbd>",
+					"message": "Verwende die Kurzschreibweise, die gleiche horizontale Abstände automatisch berechnet",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Setze <kbd>border-radius: 50%</kbd>"
+					"message": "Welche Eigenschaft rundet Ecken? Denke daran, welcher Prozentwert einen Kreis ergibt"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Setze <kbd>padding: 1rem</kbd>"
+					"message": "Füge inneren Abstand zur Benachrichtigung hinzu"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Setze <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Füge einen farbigen Akzent an der linken Kante hinzu",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Setze <kbd>border-radius: 4px</kbd>"
+					"message": "Runde die Ecken der Benachrichtigung ab"
 				}
 			]
 		}
--- a/lessons/es/01-box-model.json
+++ b/lessons/es/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Establece <kbd>padding: 1rem</kbd>"
+					"message": "¿Qué propiedad añade espacio entre el contenido y el borde del elemento?"
 				}
 			]
 		},
@@ -43,7 +43,7 @@
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
-					"message": "Establece <kbd>border-left: 4px solid steelblue</kbd>",
+					"message": "Usa el atajo que define un borde en un solo lado",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -65,7 +65,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "margin-bottom", "expected": "1rem" },
-					"message": "Establece <kbd>margin-bottom: 1rem</kbd>"
+					"message": "¿Qué propiedad empuja los elementos vecinos hacia abajo?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Establece <kbd>box-sizing: border-box</kbd>"
+					"message": "¿Qué modo de tamaño incluye padding y borde en el ancho del elemento?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Establece <kbd>padding: 8px 1rem</kbd>",
+					"message": "Usa el atajo de dos valores: vertical primero, luego horizontal",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Establece <kbd>margin: 0 auto</kbd>",
+					"message": "Usa el atajo que calcula márgenes horizontales iguales automáticamente",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Establece <kbd>border-radius: 50%</kbd>"
+					"message": "¿Qué propiedad redondea las esquinas? Piensa en qué porcentaje crea un círculo"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Establece <kbd>padding: 1rem</kbd>"
+					"message": "Añade espacio interior a la notificación"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Establece <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Añade un acento de color en el borde izquierdo",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Establece <kbd>border-radius: 4px</kbd>"
+					"message": "Suaviza las esquinas de la notificación"
 				}
 			]
 		}
--- a/lessons/pl/01-box-model.json
+++ b/lessons/pl/01-box-model.json
@@ -22,7 +22,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Ustaw <kbd>padding: 1rem</kbd>"
+					"message": "Która właściwość dodaje przestrzeń między treścią a krawędzią elementu?"
 				}
 			]
 		},
@@ -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": "Użyj skrótu, który ustawia ramkę tylko po jednej stronie",
 					"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ść odpycha sąsiednie elementy w dół?"
 				}
 			]
 		},
@@ -86,7 +86,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "box-sizing", "expected": "border-box" },
-					"message": "Ustaw <kbd>box-sizing: border-box</kbd>"
+					"message": "Który tryb rozmiaru uwzględnia padding i ramkę w szerokości elementu?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Ustaw <kbd>padding: 8px 1rem</kbd>",
+					"message": "Użyj skrótu dwuwartościowego: najpierw pionowo, potem poziomo",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Ustaw <kbd>margin: 0 auto</kbd>",
+					"message": "Użyj skrótu, który automatycznie oblicza równe marginesy poziome",
 					"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 właściwość zaokrągla rogi? Pomyśl, jaki procent tworzy koło"
 				}
 			]
 		},
@@ -172,18 +172,18 @@
 				{
 					"type": "property_value",
 					"value": { "property": "padding", "expected": "1rem" },
-					"message": "Ustaw <kbd>padding: 1rem</kbd>"
+					"message": "Dodaj wewnętrzny odstęp do powiadomienia"
 				},
 				{
 					"type": "regex",
 					"value": "border-left:\\s*4px\\s+solid\\s+coral",
-					"message": "Ustaw <kbd>border-left: 4px solid coral</kbd>",
+					"message": "Dodaj kolorowy akcent na lewej krawędzi",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Ustaw <kbd>border-radius: 4px</kbd>"
+					"message": "Wygładź rogi powiadomienia"
 				}
 			]
 		}
--- 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": "Використайте скорочення, яке встановлює межу лише з одного боку",
 					"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": "Який режим розміру включає padding і межу в ширину елемента?"
 				}
 			]
 		},
@@ -107,7 +107,7 @@
 				{
 					"type": "regex",
 					"value": "padding:\\s*8px\\s+1rem",
-					"message": "Встановіть <kbd>padding: 8px 1rem</kbd>",
+					"message": "Використайте скорочення з двома значеннями: спочатку вертикальне, потім горизонтальне",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -129,7 +129,7 @@
 				{
 					"type": "regex",
 					"value": "margin:\\s*0\\s+auto",
-					"message": "Встановіть <kbd>margin: 0 auto</kbd>",
+					"message": "Використайте скорочення, яке автоматично розраховує рівні горизонтальні поля",
 					"options": { "caseSensitive": false }
 				}
 			]
@@ -151,7 +151,7 @@
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "50%" },
-					"message": "Встановіть <kbd>border-radius: 50%</kbd>"
+					"message": "Яка властивість заокруглює кути? Подумайте, який відсоток створює коло"
 				}
 			]
 		},
@@ -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": "Додайте кольоровий акцент на лівому краю",
 					"options": { "caseSensitive": false }
 				},
 				{
 					"type": "property_value",
 					"value": { "property": "border-radius", "expected": "4px" },
-					"message": "Встановіть <kbd>border-radius: 4px</kbd>"
+					"message": "Згладьте кути сповіщення"
 				}
 			]
 		}