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.
98 lines
6.0 KiB
JSON
98 lines
6.0 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-details-summary",
|
|
"title": "HTML Details & Summary",
|
|
"description": "Crea secciones expandibles sin JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "details-summary-basic",
|
|
"title": "Primer widget",
|
|
"description": "El elemento <kbd><details></kbd> crea una sección plegable. El <kbd><summary></kbd> proporciona la etiqueta clickeable.<br><br>¡Haz clic en el resumen para mostrar el contenido oculto - sin JavaScript!",
|
|
"task": "Crea un elemento <kbd><details></kbd> con:<br>1. Un <kbd><summary></kbd> que diga <code>Click to reveal</code><br>2. Un <kbd><p></kbd> con el texto <code>This content was hidden!</code>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<details>\n <summary>Click to reveal</summary>\n <p>This content was hidden!</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "details",
|
|
"message": "Añade un elemento <kbd><details></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "summary",
|
|
"message": "Añade un <kbd><summary></kbd> dentro del details"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "details", "child": "summary" },
|
|
"message": "El <kbd><summary></kbd> debe estar dentro de <kbd><details></kbd>"
|
|
},
|
|
{
|
|
"type": "parent_child",
|
|
"value": { "parent": "details", "child": "p" },
|
|
"message": "Añade un <kbd><p></kbd> dentro de <kbd><details></kbd> para el contenido oculto"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "details-open-attribute",
|
|
"title": "Expandido por defecto",
|
|
"description": "Por defecto, <kbd><details></kbd> está cerrado. Añade el atributo <kbd>open</kbd> para mostrar el contenido inicialmente.<br><br>Este es un atributo booleano - solo añade <kbd>open</kbd> sin valor.",
|
|
"task": "Añade el atributo <kbd>open</kbd> al elemento <kbd><details></kbd> para mostrar el contenido por defecto.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<details>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
|
|
"solution": "<details open>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "details", "attr": "open", "value": true },
|
|
"message": "Añade el atributo <kbd>open</kbd> a <kbd><details></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "faq-accordion",
|
|
"title": "Acordeón FAQ",
|
|
"description": "Múltiples elementos <kbd><details></kbd> crean un FAQ estilo acordeón. Cada pregunta puede expandirse independientemente.<br><br><b>Pro tip:</b> Escribe <kbd>details*3>summary+p</kbd> y presiona Tab para expansión Emmet. <kbd>*3</kbd> crea 3 elementos, <kbd>></kbd> anida dentro, <kbd>+</kbd> añade hermanos.",
|
|
"task": "Crea una sección FAQ con:<br>1. Un <kbd><h1></kbd> que diga <code>Frequently Asked Questions</code><br>2. Tres elementos <kbd><details></kbd>, cada uno con una pregunta en <kbd><summary></kbd> y una respuesta en <kbd><p></kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<h1>Frequently Asked Questions</h1>\n\n<details>\n <summary>What is HTML5?</summary>\n <p>HTML5 is the latest version of HTML with new semantic elements and APIs.</p>\n</details>\n\n<details>\n <summary>Do I need JavaScript?</summary>\n <p>Many interactive features work with pure HTML5, no JavaScript required!</p>\n</details>\n\n<details>\n <summary>Is this accessible?</summary>\n <p>Yes! Native HTML elements have built-in keyboard and screen reader support.</p>\n</details>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "h1",
|
|
"message": "Añade un encabezado <kbd><h1></kbd> para el título del FAQ"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "details", "min": 3 },
|
|
"message": "Crea al menos 3 elementos <kbd><details></kbd> para el FAQ"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "summary", "min": 3 },
|
|
"message": "Cada <kbd><details></kbd> necesita un <kbd><summary></kbd> para la pregunta"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "details p", "min": 3 },
|
|
"message": "Cada <kbd><details></kbd> necesita un <kbd><p></kbd> para la respuesta"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|