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.
69 lines
3.9 KiB
JSON
69 lines
3.9 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-elements",
|
|
"title": "HTML Block & Inline",
|
|
"description": "فهم الفرق الأساسي بين عناصر الحاويات (الكتلية) والعناصر السطرية",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "block-vs-inline-intro",
|
|
"title": "العناصر الكتلية vs السطرية",
|
|
"description": "تنقسم عناصر HTML إلى فئتين رئيسيتين:<br><br><strong>العناصر الكتلية</strong> (الحاويات) تبدأ في سطر جديد وتأخذ العرض الكامل. أمثلة: <kbd><div></kbd>, <kbd><p></kbd>, <kbd><h1></kbd>, <kbd><section></kbd><br><br><strong>العناصر السطرية</strong> تتدفق داخل النص وتأخذ العرض المطلوب فقط. أمثلة: <kbd><span></kbd>, <kbd><a></kbd>, <kbd><strong></kbd>, <kbd><em></kbd>",
|
|
"task": "أحط الكلمة <kbd>مهمة</kbd> بوسوم <kbd><strong></kbd> لجعلها عريضة. لاحظ كيف يأخذ الفقرة (كتلي) العرض الكامل بينما strong (سطري) يتدفق مع النص.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<p>هذه فقرة تحتوي على كلمة مهمة.</p>",
|
|
"solution": "<p>هذه فقرة تحتوي على كلمة <strong>مهمة</strong>.</p>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "أضف عنصر فقرة <kbd><p></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "p", "child": "strong" },
|
|
"message": "أحط الكلمة <kbd>مهمة</kbd> بوسوم <kbd><strong></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "semantic-containers",
|
|
"title": "الوسوم الدلالية",
|
|
"description": "يستخدم HTML الحديث حاويات دلالية تصف محتواها:<br><br><kbd><header></kbd> - رأس الصفحة أو القسم<br><kbd><nav></kbd> - روابط التنقل<br><kbd><main></kbd> - منطقة المحتوى الرئيسي<br><kbd><section></kbd> - تجميع موضوعي<br><kbd><article></kbd> - محتوى مستقل<br><kbd><footer></kbd> - تذييل الصفحة أو القسم",
|
|
"task": "أنشئ هيكل صفحة أساسي:<br>1. أضف <kbd><header></kbd> مع <kbd><h1></kbd> يحتوي على النص <code>موقعي</code><br>2. أضف عنصر <kbd><main></kbd> مع فقرة تقول <code>مرحباً بك في موقعي!</code><br>3. أضف <kbd><footer></kbd> مع فقرة تقول <code>Copyright 2026</code>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<header>\n <h1>موقعي</h1>\n</header>\n<main>\n <p>مرحباً بك في موقعي!</p>\n</main>\n<footer>\n <p>Copyright 2026</p>\n</footer>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "header",
|
|
"message": "أضف عنصر <kbd><header></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "main",
|
|
"message": "أضف عنصر <kbd><main></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "footer",
|
|
"message": "أضف عنصر <kbd><footer></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "header", "child": "h1" },
|
|
"message": "أضف عنوان <kbd><h1></kbd> داخل header"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|