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,99 +2,169 @@
|
||||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||||
"id": "html-svg",
|
||||
"title": "HTML SVG",
|
||||
"description": "Draw scalable vector graphics directly in HTML",
|
||||
"description": "ارسم رسومات متجهة قابلة للتحجيم مباشرة في HTML",
|
||||
"mode": "html",
|
||||
"difficulty": "beginner",
|
||||
"lessons": [
|
||||
{
|
||||
"id": "svg-circle",
|
||||
"title": "Drawing Circles",
|
||||
"description": "SVG (Scalable Vector Graphics) lets you draw shapes directly in HTML. The <kbd><svg></kbd> element is the container, with <kbd>width</kbd> and <kbd>height</kbd> attributes.<br><br>Use <kbd><circle></kbd> with <kbd>cx</kbd>, <kbd>cy</kbd> (center) and <kbd>r</kbd> (radius) to draw circles.",
|
||||
"task": "Create an SVG with a circle:<br>1. An <kbd><svg></kbd> with width=\"200\" and height=\"200\"<br>2. A <kbd><circle></kbd> centered at (100,100) with radius 50<br>3. Add a <kbd>fill</kbd> color",
|
||||
"title": "رسم الدوائر",
|
||||
"description": "SVG (Scalable Vector Graphics) يتيح لك رسم الأشكال مباشرة في HTML. عنصر <kbd><svg></kbd> هو الحاوية بسمات <kbd>width</kbd> و <kbd>height</kbd>.<br><br>استخدم <kbd><circle></kbd> مع <kbd>cx</kbd> و <kbd>cy</kbd> (المركز) و <kbd>r</kbd> (نصف القطر) لرسم الدوائر.",
|
||||
"task": "أنشئ SVG مع دائرة:<br>1. عنصر <kbd><svg></kbd> بـ width=\"200\" و height=\"200\"<br>2. عنصر <kbd><circle></kbd> متمركز عند (100,100) بنصف قطر 50<br>3. أضف لون <kbd>fill</kbd>",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "",
|
||||
"solution": "<svg width=\"200\" height=\"200\">\n <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#3498db\" />\n</svg>",
|
||||
"solution": "<svg width=\"200\" height=\"200\">\n <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"steelblue\" />\n</svg>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "svg",
|
||||
"message": "Add an <kbd><svg></kbd> element"
|
||||
"message": "أضف عنصر <kbd><svg></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "circle",
|
||||
"message": "Add a <kbd><circle></kbd> element inside the SVG"
|
||||
"message": "أضف عنصر <kbd><circle></kbd> داخل SVG"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "svg", "attr": "width", "value": "200" },
|
||||
"message": "عيّن <kbd>width=</kbd>\"200\" في SVG"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "svg", "attr": "height", "value": "200" },
|
||||
"message": "عيّن <kbd>height=</kbd>\"200\" في SVG"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "circle", "attr": "cx", "value": "100" },
|
||||
"message": "Set <kbd>cx=</kbd>\"100\" for the circle's horizontal center"
|
||||
"message": "عيّن <kbd>cx=</kbd>\"100\" للمركز الأفقي للدائرة"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "circle", "attr": "cy", "value": "100" },
|
||||
"message": "Set <kbd>cy=</kbd>\"100\" for the circle's vertical center"
|
||||
"message": "عيّن <kbd>cy=</kbd>\"100\" للمركز العمودي للدائرة"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "circle", "attr": "r", "value": "50" },
|
||||
"message": "عيّن <kbd>r=</kbd>\"50\" لنصف قطر الدائرة"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "svg-rect-line",
|
||||
"title": "Rectangles & Lines",
|
||||
"description": "Draw rectangles with <kbd><rect></kbd> using <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Draw lines with <kbd><line></kbd> using <kbd>x1</kbd>, <kbd>y1</kbd> (start) and <kbd>x2</kbd>, <kbd>y2</kbd> (end). Lines need a <kbd>stroke</kbd> color!",
|
||||
"task": "Create an SVG with:<br>1. An <kbd><svg></kbd> (200x150)<br>2. A <kbd><rect></kbd> at position (20,20) with size 80x60<br>3. A <kbd><line></kbd> from (120,30) to (180,90) with a stroke color",
|
||||
"title": "المستطيلات والخطوط",
|
||||
"description": "ارسم المستطيلات باستخدام <kbd><rect></kbd> مع <kbd>x</kbd> و <kbd>y</kbd> و <kbd>width</kbd> و <kbd>height</kbd>.<br><br>ارسم الخطوط باستخدام <kbd><line></kbd> مع <kbd>x1</kbd> و <kbd>y1</kbd> (البداية) و <kbd>x2</kbd> و <kbd>y2</kbd> (النهاية). الخطوط تحتاج لون <kbd>stroke</kbd>!",
|
||||
"task": "أنشئ SVG مع:<br>1. عنصر <kbd><svg></kbd> (200x150)<br>2. عنصر <kbd><rect></kbd> في الموضع (20,20) بحجم 80x60<br>3. عنصر <kbd><line></kbd> من (120,30) إلى (180,90) مع لون stroke",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "",
|
||||
"solution": "<svg width=\"200\" height=\"150\">\n <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"#e74c3c\" />\n <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"#2c3e50\" stroke-width=\"3\" />\n</svg>",
|
||||
"solution": "<svg width=\"200\" height=\"150\">\n <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"tomato\" />\n <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"slategray\" stroke-width=\"3\" />\n</svg>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "svg",
|
||||
"message": "Add an <kbd><svg></kbd> element"
|
||||
"message": "أضف عنصر <kbd><svg></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "rect",
|
||||
"message": "Add a <kbd><rect></kbd> element"
|
||||
"message": "أضف عنصر <kbd><rect></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "line",
|
||||
"message": "Add a <kbd><line></kbd> element"
|
||||
"message": "أضف عنصر <kbd><line></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "svg", "attr": "width", "value": "200" },
|
||||
"message": "عيّن <kbd>width=</kbd>\"200\" في SVG"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "svg", "attr": "height", "value": "150" },
|
||||
"message": "عيّن <kbd>height=</kbd>\"150\" في SVG"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "rect", "attr": "x", "value": "20" },
|
||||
"message": "عيّن <kbd>x=</kbd>\"20\" في rect"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "rect", "attr": "y", "value": "20" },
|
||||
"message": "عيّن <kbd>y=</kbd>\"20\" في rect"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "rect", "attr": "width", "value": "80" },
|
||||
"message": "عيّن <kbd>width=</kbd>\"80\" في rect"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "rect", "attr": "height", "value": "60" },
|
||||
"message": "عيّن <kbd>height=</kbd>\"60\" في rect"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "line", "attr": "x1", "value": "120" },
|
||||
"message": "عيّن <kbd>x1=</kbd>\"120\" في line"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "line", "attr": "y1", "value": "30" },
|
||||
"message": "عيّن <kbd>y1=</kbd>\"30\" في line"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "line", "attr": "x2", "value": "180" },
|
||||
"message": "عيّن <kbd>x2=</kbd>\"180\" في line"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "line", "attr": "y2", "value": "90" },
|
||||
"message": "عيّن <kbd>y2=</kbd>\"90\" في line"
|
||||
},
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "stroke",
|
||||
"message": "أضف لون <kbd>stroke</kbd> إلى line"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "svg-shapes",
|
||||
"title": "Multiple Shapes",
|
||||
"description": "Combine shapes to create simple graphics! Add <kbd>stroke</kbd> for outlines and <kbd>stroke-width</kbd> for thickness.<br><br>Use <kbd>fill=\"none\"</kbd> for hollow shapes. Shapes stack in order - later elements appear on top.",
|
||||
"task": "Create a simple face:<br>1. An <kbd><svg></kbd> (200x200)<br>2. A large <kbd><circle></kbd> for the face<br>3. Two small <kbd><circle></kbd> elements for eyes<br>4. A <kbd><line></kbd> for the smile",
|
||||
"title": "أشكال متعددة",
|
||||
"description": "ادمج الأشكال لإنشاء رسومات بسيطة! أضف <kbd>stroke</kbd> للحدود و <kbd>stroke-width</kbd> للسمك.<br><br>استخدم <kbd>fill=\"none\"</kbd> للأشكال المجوفة. الأشكال تتراكم بالترتيب - العناصر اللاحقة تظهر في الأعلى.",
|
||||
"task": "أنشئ وجهاً بسيطاً:<br>1. عنصر <kbd><svg></kbd> (200x200)<br>2. <kbd><circle></kbd> كبير للوجه<br>3. اثنين <kbd><circle></kbd> صغيرين للعيون<br>4. عنصر <kbd><line></kbd> للابتسامة",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "",
|
||||
"solution": "<svg width=\"200\" height=\"200\">\n <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#f1c40f\" stroke=\"#e67e22\" stroke-width=\"4\" />\n <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"#2c3e50\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
|
||||
"solution": "<svg width=\"200\" height=\"200\">\n <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"gold\" stroke=\"orange\" stroke-width=\"4\" />\n <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"darkslategray\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "svg",
|
||||
"message": "Add an <kbd><svg></kbd> element"
|
||||
"message": "أضف عنصر <kbd><svg></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "element_count",
|
||||
"value": { "selector": "circle", "min": 3 },
|
||||
"message": "Add at least 3 circles (1 face + 2 eyes)"
|
||||
"message": "أضف على الأقل 3 دوائر (1 للوجه + 2 للعيون)"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "line",
|
||||
"message": "Add a <kbd><line></kbd> for the smile"
|
||||
"message": "أضف <kbd><line></kbd> للابتسامة"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user