Michael Czechowski
4bed75eb74
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
7.6 KiB
JSON
173 lines
7.6 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-svg",
|
|
"title": "HTML SVG",
|
|
"description": "Rysuj skalowalne grafiki wektorowe bezpośrednio w HTML",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "svg-circle",
|
|
"title": "Rysowanie kół",
|
|
"description": "SVG (Scalable Vector Graphics) pozwala rysować kształty bezpośrednio w HTML. Element <kbd><svg></kbd> jest kontenerem z atrybutami <kbd>width</kbd> i <kbd>height</kbd>.<br><br>Użyj <kbd><circle></kbd> z <kbd>cx</kbd>, <kbd>cy</kbd> (środek) i <kbd>r</kbd> (promień) do rysowania kół.",
|
|
"task": "Utwórz SVG z kołem:<br>1. Element <kbd><svg></kbd> z width=\"200\" i height=\"200\"<br>2. Element <kbd><circle></kbd> wyśrodkowany w (100,100) z promieniem 50<br>3. Dodaj kolor <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": "Dodaj element <kbd><svg></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "circle",
|
|
"message": "Dodaj element <kbd><circle></kbd> wewnątrz SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "width", "value": "200" },
|
|
"message": "Ustaw <kbd>width=</kbd>\"200\" w SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "height", "value": "200" },
|
|
"message": "Ustaw <kbd>height=</kbd>\"200\" w SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "cx", "value": "100" },
|
|
"message": "Ustaw <kbd>cx=</kbd>\"100\" dla poziomego środka koła"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "cy", "value": "100" },
|
|
"message": "Ustaw <kbd>cy=</kbd>\"100\" dla pionowego środka koła"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "r", "value": "50" },
|
|
"message": "Ustaw <kbd>r=</kbd>\"50\" dla promienia koła"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "svg-rect-line",
|
|
"title": "Prostokąty i linie",
|
|
"description": "Rysuj prostokąty za pomocą <kbd><rect></kbd> używając <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Rysuj linie za pomocą <kbd><line></kbd> używając <kbd>x1</kbd>, <kbd>y1</kbd> (start) i <kbd>x2</kbd>, <kbd>y2</kbd> (koniec). Linie potrzebują koloru <kbd>stroke</kbd>!",
|
|
"task": "Utwórz SVG z:<br>1. Elementem <kbd><svg></kbd> (200x150)<br>2. Elementem <kbd><rect></kbd> na pozycji (20,20) o rozmiarze 80x60<br>3. Elementem <kbd><line></kbd> od (120,30) do (180,90) z kolorem 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": "Dodaj element <kbd><svg></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "rect",
|
|
"message": "Dodaj element <kbd><rect></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "line",
|
|
"message": "Dodaj element <kbd><line></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "width", "value": "200" },
|
|
"message": "Ustaw <kbd>width=</kbd>\"200\" w SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "height", "value": "150" },
|
|
"message": "Ustaw <kbd>height=</kbd>\"150\" w SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "x", "value": "20" },
|
|
"message": "Ustaw <kbd>x=</kbd>\"20\" w rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "y", "value": "20" },
|
|
"message": "Ustaw <kbd>y=</kbd>\"20\" w rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "width", "value": "80" },
|
|
"message": "Ustaw <kbd>width=</kbd>\"80\" w rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "height", "value": "60" },
|
|
"message": "Ustaw <kbd>height=</kbd>\"60\" w rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "x1", "value": "120" },
|
|
"message": "Ustaw <kbd>x1=</kbd>\"120\" w line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "y1", "value": "30" },
|
|
"message": "Ustaw <kbd>y1=</kbd>\"30\" w line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "x2", "value": "180" },
|
|
"message": "Ustaw <kbd>x2=</kbd>\"180\" w line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "y2", "value": "90" },
|
|
"message": "Ustaw <kbd>y2=</kbd>\"90\" w line"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "stroke",
|
|
"message": "Dodaj kolor <kbd>stroke</kbd> do line"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "svg-shapes",
|
|
"title": "Wiele kształtów",
|
|
"description": "Łącz kształty, aby tworzyć proste grafiki! Dodaj <kbd>stroke</kbd> dla konturów i <kbd>stroke-width</kbd> dla grubości.<br><br>Użyj <kbd>fill=\"none\"</kbd> dla pustych kształtów. Kształty nakładają się w kolejności - późniejsze elementy są na wierzchu.",
|
|
"task": "Utwórz prostą twarz:<br>1. Element <kbd><svg></kbd> (200x200)<br>2. Duże <kbd><circle></kbd> dla twarzy<br>3. Dwa małe <kbd><circle></kbd> dla oczu<br>4. Element <kbd><line></kbd> dla uśmiechu",
|
|
"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": "Dodaj element <kbd><svg></kbd>"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "circle", "min": 3 },
|
|
"message": "Dodaj co najmniej 3 koła (1 twarz + 2 oczy)"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "line",
|
|
"message": "Dodaj <kbd><line></kbd> dla uśmiechu"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|