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.
128 lines
7.9 KiB
JSON
128 lines
7.9 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-forms-fieldset",
|
|
"title": "Fieldsets",
|
|
"description": "Agrupa controles de formulario con elementos fieldset y legend",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "fieldset-basic",
|
|
"title": "Agrupar con Fieldset",
|
|
"description": "El elemento <kbd><fieldset></kbd> agrupa controles de formulario relacionados. Añade un <kbd><legend></kbd> como primer hijo para dar un título al grupo.<br><br>Esto ayuda con la accesibilidad y organización visual de formularios complejos.",
|
|
"task": "Crea un formulario con un fieldset:<br>1. Un elemento <kbd><form></kbd><br>2. Un <kbd><fieldset></kbd> dentro<br>3. Un <kbd><legend></kbd> que diga <code>Información Personal</code><br>4. Dos campos etiquetados para nombre y email",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<form>\n <fieldset>\n <legend>Personal Info</legend>\n <label for=\"name\">Name:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n </fieldset>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form",
|
|
"message": "Añade un elemento <kbd><form></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "fieldset",
|
|
"message": "Añade un <kbd><fieldset></kbd> dentro del formulario"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "legend",
|
|
"message": "Añade un <kbd><legend></kbd> para titular tu fieldset"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "label", "min": 2 },
|
|
"message": "Añade al menos 2 etiquetas"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "input", "min": 2 },
|
|
"message": "Añade al menos 2 campos de entrada"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "fieldset-textarea",
|
|
"title": "Añadiendo Textarea",
|
|
"description": "El elemento <kbd><textarea></kbd> crea una entrada de texto multilínea, perfecta para contenido largo como mensajes o descripciones.<br><br>Usa los atributos <kbd>rows</kbd> y <kbd>cols</kbd> para establecer el tamaño predeterminado.",
|
|
"task": "Crea un formulario de contacto:<br>1. Un <kbd><fieldset></kbd> con <kbd><legend></kbd> <code>Contáctanos</code><br>2. Un <kbd><input></kbd> etiquetado para email<br>3. Un <kbd><textarea></kbd> etiquetado para el mensaje<br>4. Un <kbd><button></kbd> de envío",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<form>\n <fieldset>\n <legend>Contact Us</legend>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n <label for=\"message\">Message:</label>\n <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n <button type=\"submit\">Send Message</button>\n </fieldset>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "fieldset",
|
|
"message": "Añade un elemento <kbd><fieldset></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "legend",
|
|
"message": "Añade un elemento <kbd><legend></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "textarea",
|
|
"message": "Añade un <kbd><textarea></kbd> para el mensaje"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "button",
|
|
"message": "Añade un botón de envío"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input",
|
|
"message": "Añade un campo de entrada para el email"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "fieldset-multiple",
|
|
"title": "Múltiples Fieldsets",
|
|
"description": "Los formularios complejos pueden usar múltiples elementos <kbd><fieldset></kbd> para organizar diferentes secciones.<br><br>Esto mejora la usabilidad en formularios largos como registro o checkout.",
|
|
"task": "Crea un formulario de registro con 2 fieldsets:<br>1. <code>Información de Cuenta</code> con campos de usuario y contraseña<br>2. <code>Preferencias</code> con un textarea para bio<br>3. Un botón de envío fuera de los fieldsets",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<form>\n <fieldset>\n <legend>Account Info</legend>\n <label for=\"username\">Username:</label>\n <input type=\"text\" id=\"username\" name=\"username\">\n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n </fieldset>\n <fieldset>\n <legend>Preferences</legend>\n <label for=\"bio\">Bio:</label>\n <textarea id=\"bio\" name=\"bio\"></textarea>\n </fieldset>\n <button type=\"submit\">Register</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "fieldset", "min": 2 },
|
|
"message": "Crea al menos 2 fieldsets"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "legend", "min": 2 },
|
|
"message": "Añade un legend a cada fieldset"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "textarea",
|
|
"message": "Añade un textarea para la bio"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "button",
|
|
"message": "Añade un botón de envío"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "input", "min": 2 },
|
|
"message": "Añade al menos 2 campos de entrada"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|