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.
98 lines
6.1 KiB
JSON
98 lines
6.1 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-details-summary",
|
|
"title": "HTML Details & Summary",
|
|
"description": "أنشئ أقسام قابلة للتوسيع بدون JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "details-summary-basic",
|
|
"title": "أول عنصر تفاعلي",
|
|
"description": "عنصر <kbd><details></kbd> ينشئ قسماً قابلاً للطي. عنصر <kbd><summary></kbd> يوفر التسمية القابلة للنقر.<br><br>انقر على الملخص لإظهار المحتوى المخفي - بدون JavaScript!",
|
|
"task": "أنشئ عنصر <kbd><details></kbd> مع:<br>1. عنصر <kbd><summary></kbd> يقول <code>Click to reveal</code><br>2. عنصر <kbd><p></kbd> بالنص <code>This content was hidden!</code>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<details>\n <summary>Click to reveal</summary>\n <p>This content was hidden!</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "details",
|
|
"message": "أضف عنصر <kbd><details></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "summary",
|
|
"message": "أضف <kbd><summary></kbd> داخل details"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "details", "child": "summary" },
|
|
"message": "يجب أن يكون <kbd><summary></kbd> داخل <kbd><details></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "details", "child": "p" },
|
|
"message": "أضف <kbd><p></kbd> داخل <kbd><details></kbd> للمحتوى المخفي"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "details-open-attribute",
|
|
"title": "موسع افتراضياً",
|
|
"description": "افتراضياً، <kbd><details></kbd> مغلق. أضف سمة <kbd>open</kbd> لإظهار المحتوى في البداية.<br><br>هذه سمة منطقية - فقط أضف <kbd>open</kbd> بدون قيمة.",
|
|
"task": "أضف سمة <kbd>open</kbd> لعنصر <kbd><details></kbd> لإظهار المحتوى افتراضياً.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<details>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
|
|
"solution": "<details open>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "details", "attr": "open", "value": true },
|
|
"message": "أضف سمة <kbd>open</kbd> إلى <kbd><details></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "faq-accordion",
|
|
"title": "أكورديون FAQ",
|
|
"description": "عناصر <kbd><details></kbd> المتعددة تنشئ FAQ بأسلوب الأكورديون. كل سؤال يمكن توسيعه بشكل مستقل.<br><br><b>نصيحة:</b> اكتب <kbd>details*3>summary+p</kbd> واضغط Tab لتوسيع Emmet. <kbd>*3</kbd> ينشئ 3 عناصر، <kbd>></kbd> يضع بالداخل، <kbd>+</kbd> يضيف أشقاء.",
|
|
"task": "أنشئ قسم FAQ مع:<br>1. عنصر <kbd><h1></kbd> يقول <code>Frequently Asked Questions</code><br>2. ثلاثة عناصر <kbd><details></kbd>، كل واحد بسؤال في <kbd><summary></kbd> وإجابة في <kbd><p></kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<h1>Frequently Asked Questions</h1>\n\n<details>\n <summary>What is HTML5?</summary>\n <p>HTML5 is the latest version of HTML with new semantic elements and APIs.</p>\n</details>\n\n<details>\n <summary>Do I need JavaScript?</summary>\n <p>Many interactive features work with pure HTML5, no JavaScript required!</p>\n</details>\n\n<details>\n <summary>Is this accessible?</summary>\n <p>Yes! Native HTML elements have built-in keyboard and screen reader support.</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "h1",
|
|
"message": "أضف عنوان <kbd><h1></kbd> لعنوان FAQ"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "details", "min": 3 },
|
|
"message": "أنشئ على الأقل 3 عناصر <kbd><details></kbd> للـ FAQ"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "summary", "min": 3 },
|
|
"message": "كل <kbd><details></kbd> يحتاج <kbd><summary></kbd> للسؤال"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "details p", "min": 3 },
|
|
"message": "كل <kbd><details></kbd> يحتاج <kbd><p></kbd> للإجابة"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|