public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity
Files
ca526052f55dffa2b799becb8e02b9a1e9664492
code-crispies/lessons/ar/32-html-svg.json
Michael Czechowski 4bed75eb74 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.
2026-01-14 15:39:22 +01:00

173 lines
8.0 KiB
JSON
Raw Blame History

{
"$schema": "../../schemas/code-crispies-module-schema.json",
"id": "html-svg",
"title": "HTML SVG",
"description": "ارسم رسومات متجهة قابلة للتحجيم مباشرة في HTML",
"mode": "html",
"difficulty": "beginner",
"lessons": [
{
"id": "svg-circle",
"title": "رسم الدوائر",
"description": "SVG (Scalable Vector Graphics) يتيح لك رسم الأشكال مباشرة في HTML. عنصر <kbd>&lt;svg&gt;</kbd> هو الحاوية بسمات <kbd>width</kbd> و <kbd>height</kbd>.<br><br>استخدم <kbd>&lt;circle&gt;</kbd> مع <kbd>cx</kbd> و <kbd>cy</kbd> (المركز) و <kbd>r</kbd> (نصف القطر) لرسم الدوائر.",
"task": "أنشئ SVG مع دائرة:<br>1. عنصر <kbd>&lt;svg&gt;</kbd> بـ width=\"200\" و height=\"200\"<br>2. عنصر <kbd>&lt;circle&gt;</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=\"steelblue\" />\n</svg>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "أضف عنصر <kbd>&lt;svg&gt;</kbd>"
},
{
"type": "element_exists",
"value": "circle",
"message": "أضف عنصر <kbd>&lt;circle&gt;</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": "عيّن <kbd>cx=</kbd>\"100\" للمركز الأفقي للدائرة"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "cy", "value": "100" },
"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": "المستطيلات والخطوط",
"description": "ارسم المستطيلات باستخدام <kbd>&lt;rect&gt;</kbd> مع <kbd>x</kbd> و <kbd>y</kbd> و <kbd>width</kbd> و <kbd>height</kbd>.<br><br>ارسم الخطوط باستخدام <kbd>&lt;line&gt;</kbd> مع <kbd>x1</kbd> و <kbd>y1</kbd> (البداية) و <kbd>x2</kbd> و <kbd>y2</kbd> (النهاية). الخطوط تحتاج لون <kbd>stroke</kbd>!",
"task": "أنشئ SVG مع:<br>1. عنصر <kbd>&lt;svg&gt;</kbd> (200x150)<br>2. عنصر <kbd>&lt;rect&gt;</kbd> في الموضع (20,20) بحجم 80x60<br>3. عنصر <kbd>&lt;line&gt;</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=\"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": "أضف عنصر <kbd>&lt;svg&gt;</kbd>"
},
{
"type": "element_exists",
"value": "rect",
"message": "أضف عنصر <kbd>&lt;rect&gt;</kbd>"
},
{
"type": "element_exists",
"value": "line",
"message": "أضف عنصر <kbd>&lt;line&gt;</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": "أشكال متعددة",
"description": "ادمج الأشكال لإنشاء رسومات بسيطة! أضف <kbd>stroke</kbd> للحدود و <kbd>stroke-width</kbd> للسمك.<br><br>استخدم <kbd>fill=\"none\"</kbd> للأشكال المجوفة. الأشكال تتراكم بالترتيب - العناصر اللاحقة تظهر في الأعلى.",
"task": "أنشئ وجهاً بسيطاً:<br>1. عنصر <kbd>&lt;svg&gt;</kbd> (200x200)<br>2. <kbd>&lt;circle&gt;</kbd> كبير للوجه<br>3. اثنين <kbd>&lt;circle&gt;</kbd> صغيرين للعيون<br>4. عنصر <kbd>&lt;line&gt;</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=\"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": "أضف عنصر <kbd>&lt;svg&gt;</kbd>"
},
{
"type": "element_count",
"value": { "selector": "circle", "min": 3 },
"message": "أضف على الأقل 3 دوائر (1 للوجه + 2 للعيون)"
},
{
"type": "element_exists",
"value": "line",
"message": "أضف <kbd>&lt;line&gt;</kbd> للابتسامة"
}
]
}
]
}
Reference in New Issue View Git Blame Copy Permalink