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.
123 lines
6.2 KiB
JSON
123 lines
6.2 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-progress-meter",
|
|
"title": "HTML Progress & Meter",
|
|
"description": "اعرض حالة الإكمال والقياسات بشكل أصلي",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "progress-basic",
|
|
"title": "أشرطة التقدم",
|
|
"description": "عنصر <kbd><progress></kbd> يُظهر إكمال المهمة. استخدم <kbd>value</kbd> للتقدم الحالي و <kbd>max</kbd> للإجمالي.<br><br><b>ملاحظة:</b> هذا ليس وسماً ذاتي الإغلاق! اكتب <kbd><progress>...</progress></kbd> مع نص بديل بالداخل للمتصفحات القديمة.",
|
|
"task": "أنشئ شريط تقدم يُظهر 70% إكمال:<br>1. أضف <kbd><label></kbd> يقول <code>Download:</code><br>2. أضف <kbd><progress></kbd> مع <kbd>value=\"70\"</kbd> و <kbd>max=\"100\"</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"download\">Download:</label>\n<progress id=\"download\" value=\"70\" max=\"100\">70%</progress>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "progress",
|
|
"message": "أضف عنصر <kbd><progress></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "progress", "attr": "value", "value": "70" },
|
|
"message": "عيّن <kbd>value=</kbd>\"70\" في عنصر progress"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "progress", "attr": "max", "value": "100" },
|
|
"message": "عيّن <kbd>max=</kbd>\"100\" في عنصر progress"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "أضف <kbd><label></kbd> لشريط التقدم"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "progress-indeterminate",
|
|
"title": "تقدم غير محدد",
|
|
"description": "عندما يكون التقدم غير معروف (مثل التحميل)، احذف سمة <kbd>value</kbd>. هذا ينشئ حالة متحركة غير محددة.<br><br>مفيد لطلبات الشبكة أو العمليات ذات المدة غير المعروفة.",
|
|
"task": "أنشئ مؤشر تحميل:<br>1. أضف <kbd><p></kbd> يقول <code>Loading...</code><br>2. أضف <kbd><progress></kbd> بدون سمة value",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<p>Loading...</p>\n<progress></progress>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "progress",
|
|
"message": "أضف عنصر <kbd><progress></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "أضف <kbd><p></kbd> مع نص التحميل"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "meter-gauge",
|
|
"title": "مقاييس meter",
|
|
"description": "عنصر <kbd><meter></kbd> يعرض قيمة قياسية ضمن نطاق. استخدمه للقياسات مثل مساحة القرص، البطارية، أو التقييمات.<br><br>عيّن <kbd>low</kbd> و <kbd>high</kbd> و <kbd>optimum</kbd> لتحديد النطاقات الجيدة/السيئة - المتصفح يلونها وفقاً لذلك!",
|
|
"task": "أنشئ مقياس مستوى البطارية:<br>1. أضف <kbd><label></kbd> يقول <code>Battery:</code><br>2. أضف <kbd><meter></kbd> مع:<br> - <kbd>value=\"0.8\"</kbd><br> - <kbd>min=\"0\"</kbd> و <kbd>max=\"1\"</kbd><br> - <kbd>low=\"0.2\"</kbd> و <kbd>high=\"0.8\"</kbd><br> - <kbd>optimum=\"1\"</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"battery\">Battery:</label>\n<meter id=\"battery\" value=\"0.8\" min=\"0\" max=\"1\" low=\"0.2\" high=\"0.8\" optimum=\"1\">80%</meter>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "meter",
|
|
"message": "أضف عنصر <kbd><meter></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "value", "value": "0.8" },
|
|
"message": "عيّن <kbd>value=</kbd>\"0.8\" في meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "min", "value": "0" },
|
|
"message": "عيّن <kbd>min=</kbd>\"0\" في meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "max", "value": "1" },
|
|
"message": "عيّن <kbd>max=</kbd>\"1\" في meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "low", "value": "0.2" },
|
|
"message": "عيّن <kbd>low=</kbd>\"0.2\" لتحديد العتبة المنخفضة"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "high", "value": "0.8" },
|
|
"message": "عيّن <kbd>high=</kbd>\"0.8\" لتحديد العتبة العالية"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "optimum", "value": "1" },
|
|
"message": "عيّن <kbd>optimum=</kbd>\"1\" للإشارة إلى القيمة المثلى"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "أضف <kbd><label></kbd> للـ meter"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|