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.
83 lines
4.5 KiB
JSON
83 lines
4.5 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-marquee",
|
|
"title": "HTML Marquee",
|
|
"description": "Crea texto desplazable con el clásico (¡obsoleto pero divertido!) elemento marquee",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "marquee-basic",
|
|
"title": "Texto Desplazable",
|
|
"description": "El elemento <kbd><marquee></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><marquee></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": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee>Welcome to my website!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Añade un elemento <kbd><marquee></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "marquee-direction",
|
|
"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><marquee></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": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee behavior=\"alternate\">Bounce! Bounce! Bounce!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Añade un elemento <kbd><marquee></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
|
|
"message": "Añade <kbd>behavior=</kbd>\"alternate\" para hacerlo rebotar"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "marquee-retro",
|
|
"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><marquee></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": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee direction=\"left\" scrollamount=\"5\">BREAKING NEWS: Marquee element still works in browsers!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Añade un elemento <kbd><marquee></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "direction", "value": "left" },
|
|
"message": "Añade <kbd>direction=</kbd>\"left\" para desplazamiento horizontal"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
|
|
"message": "Añade <kbd>scrollamount=</kbd>\"5\" para velocidad suave"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|