Michael Czechowski
4bed75eb74
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.
103 lines
6.1 KiB
JSON
103 lines
6.1 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-forms-basic",
|
|
"title": "نماذج HTML",
|
|
"description": "تعلم إنشاء النماذج بأنواع حقول مختلفة",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "form-structure",
|
|
"title": "هيكل النموذج",
|
|
"description": "كل نموذج يحتاج غلاف <kbd><form></kbd>. بداخله، استخدم <kbd><label></kbd> لوصف الحقول و <kbd><input></kbd> لإدخال البيانات.<br><br>سمة <kbd>for</kbd> في التسميات يجب أن تطابق <kbd>id</kbd> في الحقول للوصولية.",
|
|
"task": "أنشئ نموذجاً مع:<br>1. <kbd><label></kbd> بالنص <code>الاسم:</code> وسمة <kbd>for=\"name\"</kbd><br>2. <kbd><input></kbd> نصي بسمات <kbd>id=\"name\"</kbd> و <kbd>name=\"name\"</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<form>\n <label for=\"name\">الاسم:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form",
|
|
"message": "أحط كل شيء بعنصر <kbd><form></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "أضف <kbd><label></kbd> لحقلك"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input",
|
|
"message": "أضف عنصر <kbd><input></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "label", "attr": "for", "value": null },
|
|
"message": "أضف سمة <kbd>for</kbd> للتسمية"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "id", "value": null },
|
|
"message": "أضف سمة <kbd>id</kbd> لحقلك"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "input-types",
|
|
"title": "أنواع الحقول",
|
|
"description": "أنواع الحقول المختلفة توفر لوحات مفاتيح وتحقق مناسب:<br><br><kbd>type=\"text\"</kbd> - نص عام<br><kbd>type=\"email\"</kbd> - بريد إلكتروني مع تحقق @<br><kbd>type=\"password\"</kbd> - أحرف مخفية<br><kbd>type=\"number\"</kbd> - لوحة مفاتيح رقمية<br><kbd>type=\"tel\"</kbd> - لوحة مفاتيح هاتف",
|
|
"task": "أنشئ نموذج تسجيل دخول بحقلين:<br>1. حقل بريد: <kbd><label for=\"email\">البريد:</label></kbd> و <kbd><input type=\"email\" id=\"email\"></kbd><br>2. حقل كلمة مرور: <kbd><label for=\"password\">كلمة المرور:</label></kbd> و <kbd><input type=\"password\" id=\"password\"></kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n \n</form>",
|
|
"solution": "<form>\n <label for=\"email\">البريد:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n \n <label for=\"password\">كلمة المرور:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input[type='email']",
|
|
"message": "أضف حقل بـ type=\"email\""
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input[type='password']",
|
|
"message": "أضف حقل بـ type=\"password\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "label", "min": 2 },
|
|
"message": "أضف تسميات لكلا الحقلين"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "submit-button",
|
|
"title": "زر الإرسال",
|
|
"description": "النماذج تحتاج طريقة لإرسال البيانات. استخدم:<br><br><kbd><button type=\"submit\"></kbd> - مفضل، محتوى مرن<br><kbd><input type=\"submit\"></kbd> - زر نص بسيط<br><br>نص الزر يجب أن يكون موجه للعمل (مثل <code>تسجيل الدخول</code>، 'التسجيل'، 'إرسال').",
|
|
"task": "أضف زر إرسال للنموذج بالنص <code>تسجيل الدخول</code>.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n <label for=\"email\">البريد:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">كلمة المرور:</label>\n <input type=\"password\" id=\"password\">\n \n</form>",
|
|
"solution": "<form>\n <label for=\"email\">البريد:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">كلمة المرور:</label>\n <input type=\"password\" id=\"password\">\n \n <button type=\"submit\">تسجيل الدخول</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "button[type='submit'], input[type='submit']",
|
|
"message": "أضف زر إرسال لنموذجك"
|
|
},
|
|
{
|
|
"type": "element_text",
|
|
"value": { "selector": "button", "text": "تسجيل الدخول" },
|
|
"message": "يجب أن يعرض الزر <kbd>تسجيل الدخول</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|