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
7.8 KiB
JSON
173 lines
7.8 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-svg",
|
|
"title": "HTML SVG",
|
|
"description": "Zeichne skalierbare Vektorgrafiken direkt in HTML",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "svg-circle",
|
|
"title": "Kreise zeichnen",
|
|
"description": "SVG (Scalable Vector Graphics) ermöglicht es, Formen direkt in HTML zu zeichnen. Das <kbd><svg></kbd>-Element ist der Container mit <kbd>width</kbd> und <kbd>height</kbd> Attributen.<br><br>Verwende <kbd><circle></kbd> mit <kbd>cx</kbd>, <kbd>cy</kbd> (Mittelpunkt) und <kbd>r</kbd> (Radius) zum Zeichnen von Kreisen.",
|
|
"task": "Erstelle ein SVG mit einem Kreis:<br>1. Ein <kbd><svg></kbd> mit width=\"200\" und height=\"200\"<br>2. Ein <kbd><circle></kbd> zentriert bei (100,100) mit Radius 50<br>3. Füge eine <kbd>fill</kbd>-Farbe hinzu",
|
|
"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": "Füge ein <kbd><svg></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "circle",
|
|
"message": "Füge ein <kbd><circle></kbd>-Element in das SVG ein"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "width", "value": "200" },
|
|
"message": "Setze <kbd>width=</kbd>\"200\" beim SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "height", "value": "200" },
|
|
"message": "Setze <kbd>height=</kbd>\"200\" beim SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "cx", "value": "100" },
|
|
"message": "Setze <kbd>cx=</kbd>\"100\" für das horizontale Zentrum"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "cy", "value": "100" },
|
|
"message": "Setze <kbd>cy=</kbd>\"100\" für das vertikale Zentrum"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "r", "value": "50" },
|
|
"message": "Setze <kbd>r=</kbd>\"50\" für den Radius"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "svg-rect-line",
|
|
"title": "Rechtecke & Linien",
|
|
"description": "Zeichne Rechtecke mit <kbd><rect></kbd> mit <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Zeichne Linien mit <kbd><line></kbd> mit <kbd>x1</kbd>, <kbd>y1</kbd> (Start) und <kbd>x2</kbd>, <kbd>y2</kbd> (Ende). Linien brauchen eine <kbd>stroke</kbd>-Farbe!",
|
|
"task": "Erstelle ein SVG mit:<br>1. Einem <kbd><svg></kbd> (200x150)<br>2. Einem <kbd><rect></kbd> an Position (20,20) mit Größe 80x60<br>3. Einer <kbd><line></kbd> von (120,30) nach (180,90) mit Strichfarbe",
|
|
"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": "Füge ein <kbd><svg></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "rect",
|
|
"message": "Füge ein <kbd><rect></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "line",
|
|
"message": "Füge ein <kbd><line></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "width", "value": "200" },
|
|
"message": "Setze <kbd>width=</kbd>\"200\" beim SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "height", "value": "150" },
|
|
"message": "Setze <kbd>height=</kbd>\"150\" beim SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "x", "value": "20" },
|
|
"message": "Setze <kbd>x=</kbd>\"20\" beim rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "y", "value": "20" },
|
|
"message": "Setze <kbd>y=</kbd>\"20\" beim rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "width", "value": "80" },
|
|
"message": "Setze <kbd>width=</kbd>\"80\" beim rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "height", "value": "60" },
|
|
"message": "Setze <kbd>height=</kbd>\"60\" beim rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "x1", "value": "120" },
|
|
"message": "Setze <kbd>x1=</kbd>\"120\" bei der line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "y1", "value": "30" },
|
|
"message": "Setze <kbd>y1=</kbd>\"30\" bei der line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "x2", "value": "180" },
|
|
"message": "Setze <kbd>x2=</kbd>\"180\" bei der line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "y2", "value": "90" },
|
|
"message": "Setze <kbd>y2=</kbd>\"90\" bei der line"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "stroke",
|
|
"message": "Füge eine <kbd>stroke</kbd>-Farbe zur line hinzu"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "svg-shapes",
|
|
"title": "Mehrere Formen",
|
|
"description": "Kombiniere Formen, um einfache Grafiken zu erstellen! Füge <kbd>stroke</kbd> für Umrisse und <kbd>stroke-width</kbd> für die Dicke hinzu.<br><br>Verwende <kbd>fill=\"none\"</kbd> für hohle Formen. Formen stapeln sich in Reihenfolge - spätere Elemente erscheinen oben.",
|
|
"task": "Erstelle ein einfaches Gesicht:<br>1. Ein <kbd><svg></kbd> (200x200)<br>2. Einen großen <kbd><circle></kbd> für das Gesicht<br>3. Zwei kleine <kbd><circle></kbd>-Elemente für Augen<br>4. Eine <kbd><line></kbd> für das Lächeln",
|
|
"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": "Füge ein <kbd><svg></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "circle", "min": 3 },
|
|
"message": "Füge mindestens 3 Kreise hinzu (1 Gesicht + 2 Augen)"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "line",
|
|
"message": "Füge eine <kbd><line></kbd> für das Lächeln hinzu"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|