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": "Dibuja gráficos vectoriales escalables directamente en HTML",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "svg-circle",
|
|
"title": "Dibujando círculos",
|
|
"description": "SVG (Scalable Vector Graphics) permite dibujar formas directamente en HTML. El elemento <kbd><svg></kbd> es el contenedor con atributos <kbd>width</kbd> y <kbd>height</kbd>.<br><br>Usa <kbd><circle></kbd> con <kbd>cx</kbd>, <kbd>cy</kbd> (centro) y <kbd>r</kbd> (radio) para dibujar círculos.",
|
|
"task": "Crea un SVG con un círculo:<br>1. Un <kbd><svg></kbd> con width=\"200\" y height=\"200\"<br>2. Un <kbd><circle></kbd> centrado en (100,100) con radio 50<br>3. Añade un color <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": "Añade un elemento <kbd><svg></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "circle",
|
|
"message": "Añade un elemento <kbd><circle></kbd> dentro del SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "width", "value": "200" },
|
|
"message": "Establece <kbd>width=</kbd>\"200\" en el SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "height", "value": "200" },
|
|
"message": "Establece <kbd>height=</kbd>\"200\" en el SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "cx", "value": "100" },
|
|
"message": "Establece <kbd>cx=</kbd>\"100\" para el centro horizontal del círculo"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "cy", "value": "100" },
|
|
"message": "Establece <kbd>cy=</kbd>\"100\" para el centro vertical del círculo"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "circle", "attr": "r", "value": "50" },
|
|
"message": "Establece <kbd>r=</kbd>\"50\" para el radio del círculo"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "svg-rect-line",
|
|
"title": "Rectángulos y líneas",
|
|
"description": "Dibuja rectángulos con <kbd><rect></kbd> usando <kbd>x</kbd>, <kbd>y</kbd>, <kbd>width</kbd>, <kbd>height</kbd>.<br><br>Dibuja líneas con <kbd><line></kbd> usando <kbd>x1</kbd>, <kbd>y1</kbd> (inicio) y <kbd>x2</kbd>, <kbd>y2</kbd> (fin). ¡Las líneas necesitan un color <kbd>stroke</kbd>!",
|
|
"task": "Crea un SVG con:<br>1. Un <kbd><svg></kbd> (200x150)<br>2. Un <kbd><rect></kbd> en posición (20,20) con tamaño 80x60<br>3. Una <kbd><line></kbd> de (120,30) a (180,90) con color 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": "Añade un elemento <kbd><svg></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "rect",
|
|
"message": "Añade un elemento <kbd><rect></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "line",
|
|
"message": "Añade un elemento <kbd><line></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "width", "value": "200" },
|
|
"message": "Establece <kbd>width=</kbd>\"200\" en el SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "svg", "attr": "height", "value": "150" },
|
|
"message": "Establece <kbd>height=</kbd>\"150\" en el SVG"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "x", "value": "20" },
|
|
"message": "Establece <kbd>x=</kbd>\"20\" en el rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "y", "value": "20" },
|
|
"message": "Establece <kbd>y=</kbd>\"20\" en el rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "width", "value": "80" },
|
|
"message": "Establece <kbd>width=</kbd>\"80\" en el rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "rect", "attr": "height", "value": "60" },
|
|
"message": "Establece <kbd>height=</kbd>\"60\" en el rect"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "x1", "value": "120" },
|
|
"message": "Establece <kbd>x1=</kbd>\"120\" en la line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "y1", "value": "30" },
|
|
"message": "Establece <kbd>y1=</kbd>\"30\" en la line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "x2", "value": "180" },
|
|
"message": "Establece <kbd>x2=</kbd>\"180\" en la line"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "line", "attr": "y2", "value": "90" },
|
|
"message": "Establece <kbd>y2=</kbd>\"90\" en la line"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "stroke",
|
|
"message": "Añade un color <kbd>stroke</kbd> a la line"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "svg-shapes",
|
|
"title": "Múltiples formas",
|
|
"description": "¡Combina formas para crear gráficos simples! Añade <kbd>stroke</kbd> para contornos y <kbd>stroke-width</kbd> para el grosor.<br><br>Usa <kbd>fill=\"none\"</kbd> para formas huecas. Las formas se apilan en orden - los elementos posteriores aparecen encima.",
|
|
"task": "Crea una cara simple:<br>1. Un <kbd><svg></kbd> (200x200)<br>2. Un <kbd><circle></kbd> grande para la cara<br>3. Dos <kbd><circle></kbd> pequeños para los ojos<br>4. Una <kbd><line></kbd> para la sonrisa",
|
|
"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": "Añade un elemento <kbd><svg></kbd>"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "circle", "min": 3 },
|
|
"message": "Añade al menos 3 círculos (1 cara + 2 ojos)"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "line",
|
|
"message": "Añade una <kbd><line></kbd> para la sonrisa"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|