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.
103 lines
5.9 KiB
JSON
103 lines
5.9 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-forms-basic",
|
|
"title": "Formularios HTML",
|
|
"description": "Aprende a crear formularios con varios tipos de campos",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "form-structure",
|
|
"title": "Estructura del formulario",
|
|
"description": "Todo formulario necesita un contenedor <kbd><form></kbd>. Dentro, usa <kbd><label></kbd> para describir campos y <kbd><input></kbd> para la entrada de datos.<br><br>El atributo <kbd>for</kbd> en los labels debe coincidir con el <kbd>id</kbd> de los inputs para accesibilidad.",
|
|
"task": "Crea un formulario con:<br>1. Un <kbd><label></kbd> con el texto <code>Nombre:</code> y el atributo <kbd>for=\"name\"</kbd><br>2. Un <kbd><input></kbd> de texto con los atributos <kbd>id=\"name\"</kbd> y <kbd>name=\"name\"</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<form>\n <label for=\"name\">Nombre:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form",
|
|
"message": "Envuelve todo en un elemento <kbd><form></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Añade un <kbd><label></kbd> para tu campo"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input",
|
|
"message": "Añade un elemento <kbd><input></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "label", "attr": "for", "value": null },
|
|
"message": "Añade un atributo <kbd>for</kbd> a tu label"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "id", "value": null },
|
|
"message": "Añade un atributo <kbd>id</kbd> a tu campo"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "input-types",
|
|
"title": "Tipos de campos",
|
|
"description": "Diferentes tipos de campos proporcionan teclados apropiados y validación:<br><br><kbd>type=\"text\"</kbd> - Texto general<br><kbd>type=\"email\"</kbd> - Email con validación @<br><kbd>type=\"password\"</kbd> - Caracteres ocultos<br><kbd>type=\"number\"</kbd> - Teclado numérico<br><kbd>type=\"tel\"</kbd> - Teclado telefónico",
|
|
"task": "Crea un formulario de inicio de sesión con dos campos:<br>1. Campo de email: <kbd><label for=\"email\">Email:</label></kbd> y <kbd><input type=\"email\" id=\"email\"></kbd><br>2. Campo de contraseña: <kbd><label for=\"password\">Contraseña:</label></kbd> y <kbd><input type=\"password\" id=\"password\"></kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n \n</form>",
|
|
"solution": "<form>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n \n <label for=\"password\">Contraseña:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input[type='email']",
|
|
"message": "Añade un campo con type=\"email\""
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input[type='password']",
|
|
"message": "Añade un campo con type=\"password\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "label", "min": 2 },
|
|
"message": "Añade labels para ambos campos"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "submit-button",
|
|
"title": "Botón de envío",
|
|
"description": "Los formularios necesitan una forma de enviar datos. Usa:<br><br><kbd><button type=\"submit\"></kbd> - Preferido, contenido flexible<br><kbd><input type=\"submit\"></kbd> - Botón de solo texto<br><br>El texto del botón debe estar orientado a la acción (ej. <code>Iniciar Sesión</code>, 'Registrar', 'Enviar').",
|
|
"task": "Añade un botón de envío al formulario con el texto <code>Iniciar Sesión</code>.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">Contraseña:</label>\n <input type=\"password\" id=\"password\">\n \n</form>",
|
|
"solution": "<form>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">Contraseña:</label>\n <input type=\"password\" id=\"password\">\n \n <button type=\"submit\">Iniciar Sesión</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "button[type='submit'], input[type='submit']",
|
|
"message": "Añade un botón de envío a tu formulario"
|
|
},
|
|
{
|
|
"type": "element_text",
|
|
"value": { "selector": "button", "text": "Iniciar Sesión" },
|
|
"message": "El botón debe decir <kbd>Iniciar Sesión</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|