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.
79 lines
4.6 KiB
JSON
79 lines
4.6 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-datalist",
|
|
"title": "قائمة البيانات",
|
|
"description": "قدم اقتراحات لحقول النص بدون JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "datalist-basic",
|
|
"title": "حقل مع اقتراحات",
|
|
"description": "عنصر <kbd><datalist></kbd> يوفر اقتراحات الإكمال التلقائي للحقول. اربطه باستخدام سمة <kbd>list</kbd> في الحقل بما يتطابق مع <kbd>id</kbd> قائمة البيانات.<br><br>يمكن للمستخدمين الكتابة بحرية - الاقتراحات مجرد مساعدات!",
|
|
"task": "أنشئ محدد متصفح:<br>1. أضف <kbd><label></kbd> يقول <code>المتصفح:</code><br>2. أضف <kbd><input></kbd> مع <kbd>list=\"browsers\"</kbd><br>3. أضف <kbd><datalist id=\"browsers\"></kbd> مع خيارات Chrome و Firefox و Safari",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"browser\">Browser:</label>\n<input type=\"text\" id=\"browser\" list=\"browsers\">\n<datalist id=\"browsers\">\n <option value=\"Chrome\">\n <option value=\"Firefox\">\n <option value=\"Safari\">\n</datalist>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "datalist",
|
|
"message": "أضف عنصر <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "list", "value": "browsers" },
|
|
"message": "اربط الحقل بقائمة البيانات باستخدام <kbd>list=</kbd>\"browsers\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "option", "min": 3 },
|
|
"message": "أضف على الأقل 3 عناصر <kbd><option></kbd> داخل <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "أضف <kbd><label></kbd> للحقل"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "datalist-countries",
|
|
"title": "محدد الدول",
|
|
"description": "قوائم البيانات تعمل بشكل رائع للقوائم الطويلة مثل الدول. يمكن للمستخدمين الكتابة لتصفية الاقتراحات فوراً.<br><br>سمة <kbd>value</kbd> هي ما يتم إدخاله، ويمكنك إضافة نص عرض بعدها.",
|
|
"task": "أنشئ حقل دولة:<br>1. أضف <kbd><label></kbd> يقول <code>الدولة:</code><br>2. أضف <kbd><input></kbd> مع <kbd>list=\"countries\"</kbd><br>3. أضف <kbd><datalist id=\"countries\"></kbd> مع 4 خيارات دول على الأقل",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"country\">Country:</label>\n<input type=\"text\" id=\"country\" list=\"countries\" placeholder=\"Start typing...\">\n<datalist id=\"countries\">\n <option value=\"Germany\">\n <option value=\"France\">\n <option value=\"Spain\">\n <option value=\"Italy\">\n</datalist>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "datalist",
|
|
"message": "أضف عنصر <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "datalist", "attr": "id", "value": "countries" },
|
|
"message": "عيّن <kbd>id=</kbd>\"countries\" في قائمة البيانات"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "list", "value": "countries" },
|
|
"message": "اربط الحقل باستخدام <kbd>list=</kbd>\"countries\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "option", "min": 4 },
|
|
"message": "أضف على الأقل 4 خيارات دول"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|