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.
This commit is contained in:
2026-03-28 19:40:28 +01:00
parent 782e87705c
commit c560676544
50 changed files with 434 additions and 403 deletions

View File

@@ -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> — النص يجب أن يكون أصغر قليلاً"
}
]
}