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.
123 lines
6.0 KiB
JSON
123 lines
6.0 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-progress-meter",
|
|
"title": "HTML Progress & Meter",
|
|
"description": "Muestra el estado de completado y mediciones escalares nativamente",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "progress-basic",
|
|
"title": "Barras de progreso",
|
|
"description": "El elemento <kbd><progress></kbd> muestra el progreso de una tarea. Usa <kbd>value</kbd> para el progreso actual y <kbd>max</kbd> para el total.<br><br><b>Nota:</b> ¡Esto no es una etiqueta de cierre automático! Escribe <kbd><progress>...</progress></kbd> con texto alternativo dentro para navegadores antiguos.",
|
|
"task": "Crea una barra de progreso mostrando 70% de completado:<br>1. Añade un <kbd><label></kbd> que diga <code>Download:</code><br>2. Añade un <kbd><progress></kbd> con <kbd>value=\"70\"</kbd> y <kbd>max=\"100\"</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"download\">Download:</label>\n<progress id=\"download\" value=\"70\" max=\"100\">70%</progress>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "progress",
|
|
"message": "Añade un elemento <kbd><progress></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "progress", "attr": "value", "value": "70" },
|
|
"message": "Establece <kbd>value=</kbd>\"70\" en el elemento progress"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "progress", "attr": "max", "value": "100" },
|
|
"message": "Establece <kbd>max=</kbd>\"100\" en el elemento progress"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Añade un <kbd><label></kbd> para la barra de progreso"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "progress-indeterminate",
|
|
"title": "Progreso indeterminado",
|
|
"description": "Cuando el progreso es desconocido (como al cargar), omite el atributo <kbd>value</kbd>. Esto crea un estado animado indeterminado.<br><br>Útil para solicitudes de red o procesos con duración desconocida.",
|
|
"task": "Crea un indicador de carga:<br>1. Añade un <kbd><p></kbd> que diga <code>Loading...</code><br>2. Añade un <kbd><progress></kbd> sin atributo value",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<p>Loading...</p>\n<progress></progress>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "progress",
|
|
"message": "Añade un elemento <kbd><progress></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "Añade un <kbd><p></kbd> con texto de carga"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "meter-gauge",
|
|
"title": "Indicadores meter",
|
|
"description": "El elemento <kbd><meter></kbd> muestra un valor escalar dentro de un rango. Úsalo para mediciones como espacio en disco, batería o calificaciones.<br><br>Establece <kbd>low</kbd>, <kbd>high</kbd> y <kbd>optimum</kbd> para definir rangos buenos/malos - ¡el navegador lo colorea correspondientemente!",
|
|
"task": "Crea un indicador de nivel de batería:<br>1. Añade un <kbd><label></kbd> que diga <code>Battery:</code><br>2. Añade un <kbd><meter></kbd> con:<br> - <kbd>value=\"0.8\"</kbd><br> - <kbd>min=\"0\"</kbd> y <kbd>max=\"1\"</kbd><br> - <kbd>low=\"0.2\"</kbd> y <kbd>high=\"0.8\"</kbd><br> - <kbd>optimum=\"1\"</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"battery\">Battery:</label>\n<meter id=\"battery\" value=\"0.8\" min=\"0\" max=\"1\" low=\"0.2\" high=\"0.8\" optimum=\"1\">80%</meter>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "meter",
|
|
"message": "Añade un elemento <kbd><meter></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "value", "value": "0.8" },
|
|
"message": "Establece <kbd>value=</kbd>\"0.8\" en el meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "min", "value": "0" },
|
|
"message": "Establece <kbd>min=</kbd>\"0\" en el meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "max", "value": "1" },
|
|
"message": "Establece <kbd>max=</kbd>\"1\" en el meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "low", "value": "0.2" },
|
|
"message": "Establece <kbd>low=</kbd>\"0.2\" para definir el umbral bajo"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "high", "value": "0.8" },
|
|
"message": "Establece <kbd>high=</kbd>\"0.8\" para definir el umbral alto"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "optimum", "value": "1" },
|
|
"message": "Establece <kbd>optimum=</kbd>\"1\" para indicar el valor óptimo"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Añade un <kbd><label></kbd> para el meter"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|