{
"$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. عنصر <svg> هو الحاوية بسمات width و height.
استخدم <circle> مع cx و cy (المركز) و r (نصف القطر) لرسم الدوائر.",
"task": "أنشئ SVG مع دائرة:
1. عنصر <svg> بـ width=\"200\" و height=\"200\"
2. عنصر <circle> متمركز عند (100,100) بنصف قطر 50
3. أضف لون fill",
"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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "أضف عنصر <svg>"
},
{
"type": "element_exists",
"value": "circle",
"message": "أضف عنصر <circle> داخل SVG"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "width", "value": "200" },
"message": "عيّن width=\"200\" في SVG"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "height", "value": "200" },
"message": "عيّن height=\"200\" في SVG"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "cx", "value": "100" },
"message": "عيّن cx=\"100\" للمركز الأفقي للدائرة"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "cy", "value": "100" },
"message": "عيّن cy=\"100\" للمركز العمودي للدائرة"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "r", "value": "50" },
"message": "عيّن r=\"50\" لنصف قطر الدائرة"
}
]
},
{
"id": "svg-rect-line",
"title": "المستطيلات والخطوط",
"description": "ارسم المستطيلات باستخدام <rect> مع x و y و width و height.
ارسم الخطوط باستخدام <line> مع x1 و y1 (البداية) و x2 و y2 (النهاية). الخطوط تحتاج لون stroke!",
"task": "أنشئ SVG مع:
1. عنصر <svg> (200x150)
2. عنصر <rect> في الموضع (20,20) بحجم 80x60
3. عنصر <line> من (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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "أضف عنصر <svg>"
},
{
"type": "element_exists",
"value": "rect",
"message": "أضف عنصر <rect>"
},
{
"type": "element_exists",
"value": "line",
"message": "أضف عنصر <line>"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "width", "value": "200" },
"message": "عيّن width=\"200\" في SVG"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "height", "value": "150" },
"message": "عيّن height=\"150\" في SVG"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "x", "value": "20" },
"message": "عيّن x=\"20\" في rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "y", "value": "20" },
"message": "عيّن y=\"20\" في rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "width", "value": "80" },
"message": "عيّن width=\"80\" في rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "height", "value": "60" },
"message": "عيّن height=\"60\" في rect"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "x1", "value": "120" },
"message": "عيّن x1=\"120\" في line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "y1", "value": "30" },
"message": "عيّن y1=\"30\" في line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "x2", "value": "180" },
"message": "عيّن x2=\"180\" في line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "y2", "value": "90" },
"message": "عيّن y2=\"90\" في line"
},
{
"type": "contains",
"value": "stroke",
"message": "أضف لون stroke إلى line"
}
]
},
{
"id": "svg-shapes",
"title": "أشكال متعددة",
"description": "ادمج الأشكال لإنشاء رسومات بسيطة! أضف stroke للحدود و stroke-width للسمك.
استخدم fill=\"none\" للأشكال المجوفة. الأشكال تتراكم بالترتيب - العناصر اللاحقة تظهر في الأعلى.",
"task": "أنشئ وجهاً بسيطاً:
1. عنصر <svg> (200x200)
2. <circle> كبير للوجه
3. اثنين <circle> صغيرين للعيون
4. عنصر <line> للابتسامة",
"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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "أضف عنصر <svg>"
},
{
"type": "element_count",
"value": { "selector": "circle", "min": 3 },
"message": "أضف على الأقل 3 دوائر (1 للوجه + 2 للعيون)"
},
{
"type": "element_exists",
"value": "line",
"message": "أضف <line> للابتسامة"
}
]
}
]
}