Michael Czechowski
1a5c09b750
Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match the English source. This ensures code, solutions, and validations are identical while only title, description, task, and message fields are translated. Changes include: - Box model lessons (01-box-model.json) - Units and variables (05-units-variables.json) - Transitions and animations (06-transitions-animations.json) - Responsive design (08-responsive.json) - HTML elements (20-html-elements.json) - HTML forms basic and validation (21, 22) - HTML details/summary, progress/meter (23, 24) - HTML datalist, dialog, fieldset (25, 27, 28) - HTML tables and SVG (30, 32) - HTML marquee (31) - Welcome module (00-welcome.json) Fixes validation inconsistencies and removes extra content that exceeded English source. German translations were largely correct; Polish, Spanish, Arabic, and Ukrainian required full translations.
35 lines
2.4 KiB
JSON
35 lines
2.4 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-forms-validation",
|
|
"title": "تحقق النماذج",
|
|
"description": "استخدم تحقق HTML5 المدمج لتجربة مستخدم أفضل",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "required-fields",
|
|
"title": "الحقول المطلوبة",
|
|
"description": "سمة <kbd>required</kbd> تمنع إرسال النموذج إذا كان الحقل فارغاً. يعرض المتصفح رسالة تحقق تلقائياً - بدون JavaScript!<br><br>أضفها لأي حقل يجب ملؤه:<br><kbd><input type=\"text\" required></kbd>",
|
|
"task": "اجعل كلا الحقلين (الاسم والبريد) مطلوبين بإضافة سمة <kbd>required</kbd> لكل حقل.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 320px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input:focus { outline: 2px solid steelblue; border-color: transparent; } button { margin-top: 20px; padding: 10px 20px; background: steelblue; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n <label for=\"name\">الاسم *</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n \n <label for=\"email\">البريد *</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n \n <button type=\"submit\">إرسال</button>\n</form>",
|
|
"solution": "<form>\n <label for=\"name\">الاسم *</label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n \n <label for=\"email\">البريد *</label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n \n <button type=\"submit\">إرسال</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input[name='name']", "attr": "required", "value": true },
|
|
"message": "أضف <kbd>required</kbd> لحقل الاسم"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input[name='email']", "attr": "required", "value": true },
|
|
"message": "أضف <kbd>required</kbd> لحقل البريد"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|