Michael Czechowski
1a5c09b750
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.
173 lines
8.8 KiB
JSON
173 lines
8.8 KiB
JSON
{
|
||
"$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><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=\"steelblue\" />\n</svg>",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "element_exists",
|
||
"value": "svg",
|
||
"message": "Додайте елемент <kbd><svg></kbd>"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "circle",
|
||
"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": "Встановіть <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><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=\"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><svg></kbd>"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "rect",
|
||
"message": "Додайте елемент <kbd><rect></kbd>"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "line",
|
||
"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": "Кілька фігур",
|
||
"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=\"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><svg></kbd>"
|
||
},
|
||
{
|
||
"type": "element_count",
|
||
"value": { "selector": "circle", "min": 3 },
|
||
"message": "Додайте принаймні 3 кола (1 обличчя + 2 ока)"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "line",
|
||
"message": "Додайте <kbd><line></kbd> для посмішки"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|