fix(i18n): sync all lesson translations with English source

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.
This commit is contained in:
2026-01-14 15:39:22 +01:00
parent cc2faa5104
commit 4bed75eb74
72 changed files with 2206 additions and 2611 deletions

View File

@@ -2,15 +2,15 @@
"$schema": "../../schemas/code-crispies-module-schema.json",
"id": "html-marquee",
"title": "HTML Marquee",
"description": "Create scrolling text with the classic (deprecated but fun!) marquee element",
"description": "Crea texto desplazable con el clásico (¡obsoleto pero divertido!) elemento marquee",
"mode": "html",
"difficulty": "beginner",
"lessons": [
{
"id": "marquee-basic",
"title": "Scrolling Text",
"description": "The <kbd>&lt;marquee&gt;</kbd> element creates scrolling text - a classic from the early web! While deprecated, it still works in most browsers.<br><br>Note: For production, use CSS animations instead. But for learning and fun, marquee is great!",
"task": "Create a simple marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Put some text inside like <code>Welcome to my website!</code>",
"title": "Texto Desplazable",
"description": "El elemento <kbd>&lt;marquee&gt;</kbd> crea texto desplazable - ¡un clásico de la web temprana! Aunque está obsoleto, todavía funciona en la mayoría de navegadores.<br><br>Nota: Para producción, usa animaciones CSS. ¡Pero para aprender y divertirse, marquee es genial!",
"task": "Crea un marquee simple:<br>1. Añade un elemento <kbd>&lt;marquee&gt;</kbd><br>2. Pon texto dentro como <code>¡Bienvenido a mi sitio web!</code>",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
"sandboxCSS": "",
@@ -21,15 +21,15 @@
{
"type": "element_exists",
"value": "marquee",
"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
"message": "Añade un elemento <kbd>&lt;marquee&gt;</kbd>"
}
]
},
{
"id": "marquee-direction",
"title": "Direction & Behavior",
"description": "Control the marquee with attributes:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (default), slide (stops at edge), alternate (bounces)<br>• <kbd>scrollamount</kbd>: speed (default is 6)",
"task": "Create a bouncing marquee:<br>1. Add a <kbd>&lt;marquee&gt;</kbd> element<br>2. Set <kbd>behavior=\"alternate\"</kbd> to make it bounce<br>3. Add some fun text",
"title": "Dirección y Comportamiento",
"description": "Controla el marquee con atributos:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (predeterminado), slide (se detiene en el borde), alternate (rebota)<br>• <kbd>scrollamount</kbd>: velocidad (predeterminado es 6)",
"task": "Crea un marquee que rebota:<br>1. Añade un elemento <kbd>&lt;marquee&gt;</kbd><br>2. Pon <kbd>behavior=\"alternate\"</kbd> para hacerlo rebotar<br>3. Añade texto divertido",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
"sandboxCSS": "",
@@ -40,20 +40,20 @@
{
"type": "element_exists",
"value": "marquee",
"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
"message": "Añade un elemento <kbd>&lt;marquee&gt;</kbd>"
},
{
"type": "attribute_value",
"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
"message": "Añade <kbd>behavior=</kbd>\"alternate\" para hacerlo rebotar"
}
]
},
{
"id": "marquee-retro",
"title": "Retro News Ticker",
"description": "Combine multiple marquee attributes for a classic news ticker effect. You can even put multiple elements inside!<br><br>Remember: This is deprecated HTML. Modern sites use CSS animations, but marquee is great for understanding web history.",
"task": "Create a news ticker:<br>1. A <kbd>&lt;marquee&gt;</kbd> with <kbd>direction=\"left\"</kbd><br>2. Set <kbd>scrollamount=\"5\"</kbd> for smooth scrolling<br>3. Add a breaking news headline inside",
"title": "Ticker de Noticias Retro",
"description": "Combina múltiples atributos de marquee para un efecto clásico de ticker de noticias. ¡Puedes poner múltiples elementos dentro!<br><br>Recuerda: Esto es HTML obsoleto. Los sitios modernos usan animaciones CSS, pero marquee es genial para entender la historia de la web.",
"task": "Crea un ticker de noticias:<br>1. Un <kbd>&lt;marquee&gt;</kbd> con <kbd>direction=\"left\"</kbd><br>2. Pon <kbd>scrollamount=\"5\"</kbd> para desplazamiento suave<br>3. Añade un titular de última hora dentro",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
"sandboxCSS": "",
@@ -64,17 +64,17 @@
{
"type": "element_exists",
"value": "marquee",
"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
"message": "Añade un elemento <kbd>&lt;marquee&gt;</kbd>"
},
{
"type": "attribute_value",
"value": { "selector": "marquee", "attr": "direction", "value": "left" },
"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
"message": "Añade <kbd>direction=</kbd>\"left\" para desplazamiento horizontal"
},
{
"type": "attribute_value",
"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
"message": "Añade <kbd>scrollamount=</kbd>\"5\" para velocidad suave"
}
]
}