fix(i18n): sync all lesson translations with English source
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.
This commit is contained in:
@@ -2,15 +2,15 @@
|
||||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||||
"id": "html-details-summary",
|
||||
"title": "HTML Details & Summary",
|
||||
"description": "Create expandable content sections without JavaScript",
|
||||
"description": "أنشئ أقسام قابلة للتوسيع بدون JavaScript",
|
||||
"mode": "html",
|
||||
"difficulty": "beginner",
|
||||
"lessons": [
|
||||
{
|
||||
"id": "details-summary-basic",
|
||||
"title": "First Widget",
|
||||
"description": "The <kbd><details></kbd> element creates a collapsible section. The <kbd><summary></kbd> provides the clickable label.<br><br>Click the summary to toggle the hidden content - no JavaScript needed!",
|
||||
"task": "Create a <kbd><details></kbd> element with:<br>1. A <kbd><summary></kbd> saying <code>Click to reveal</code><br>2. A <kbd><p></kbd> with the text <code>This content was hidden!</code>",
|
||||
"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": "",
|
||||
@@ -21,30 +21,30 @@
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "details",
|
||||
"message": "Add a <kbd><details></kbd> element"
|
||||
"message": "أضف عنصر <kbd><details></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "summary",
|
||||
"message": "Add a <kbd><summary></kbd> inside the details"
|
||||
"message": "أضف <kbd><summary></kbd> داخل details"
|
||||
},
|
||||
{
|
||||
"type": "parent_child",
|
||||
"value": { "parent": "details", "child": "summary" },
|
||||
"message": "The <kbd><summary></kbd> must be inside <kbd><details></kbd>"
|
||||
"message": "يجب أن يكون <kbd><summary></kbd> داخل <kbd><details></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "parent_child",
|
||||
"value": { "parent": "details", "child": "p" },
|
||||
"message": "Add a <kbd><p></kbd> inside <kbd><details></kbd> for the hidden content"
|
||||
"message": "أضف <kbd><p></kbd> داخل <kbd><details></kbd> للمحتوى المخفي"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "details-open-attribute",
|
||||
"title": "Pre-expanded Details",
|
||||
"description": "By default, <kbd><details></kbd> is closed. Add the <kbd>open</kbd> attribute to show the content initially.<br><br>This is a boolean attribute - just add <kbd>open</kbd> without a value.",
|
||||
"task": "Add the <kbd>open</kbd> attribute to the <kbd><details></kbd> element to show the content by default.",
|
||||
"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": "",
|
||||
@@ -55,15 +55,15 @@
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "details", "attr": "open", "value": true },
|
||||
"message": "Add the <kbd>open</kbd> attribute to <kbd><details></kbd>"
|
||||
"message": "أضف سمة <kbd>open</kbd> إلى <kbd><details></kbd>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "faq-accordion",
|
||||
"title": "FAQ Accordion",
|
||||
"description": "Multiple <kbd><details></kbd> elements create an accordion-style FAQ. Each question can be expanded independently.<br><br><b>Pro tip:</b> Type <kbd>details*3>summary+p</kbd> and press Tab for Emmet expansion. <kbd>*3</kbd> creates 3 elements, <kbd>></kbd> nests inside, <kbd>+</kbd> adds siblings.",
|
||||
"task": "Create an FAQ section with:<br>1. An <kbd><h1></kbd> saying <code>Frequently Asked Questions</code><br>2. Three <kbd><details></kbd> elements, each with a question in <kbd><summary></kbd> and an answer in <kbd><p></kbd>",
|
||||
"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": "",
|
||||
@@ -74,22 +74,22 @@
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "h1",
|
||||
"message": "Add an <kbd><h1></kbd> heading for the FAQ title"
|
||||
"message": "أضف عنوان <kbd><h1></kbd> لعنوان FAQ"
|
||||
},
|
||||
{
|
||||
"type": "element_count",
|
||||
"value": { "selector": "details", "min": 3 },
|
||||
"message": "Create at least 3 <kbd><details></kbd> elements for the FAQ"
|
||||
"message": "أنشئ على الأقل 3 عناصر <kbd><details></kbd> للـ FAQ"
|
||||
},
|
||||
{
|
||||
"type": "element_count",
|
||||
"value": { "selector": "summary", "min": 3 },
|
||||
"message": "Each <kbd><details></kbd> needs a <kbd><summary></kbd> for the question"
|
||||
"message": "كل <kbd><details></kbd> يحتاج <kbd><summary></kbd> للسؤال"
|
||||
},
|
||||
{
|
||||
"type": "element_count",
|
||||
"value": { "selector": "details p", "min": 3 },
|
||||
"message": "Each <kbd><details></kbd> needs a <kbd><p></kbd> for the answer"
|
||||
"message": "كل <kbd><details></kbd> يحتاج <kbd><p></kbd> للإجابة"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user