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.
123 lines
6.9 KiB
JSON
123 lines
6.9 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "html-progress-meter",
|
||
"title": "HTML Progress & Meter",
|
||
"description": "Відображайте статус виконання та вимірювання нативно",
|
||
"mode": "html",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"id": "progress-basic",
|
||
"title": "Смуги прогресу",
|
||
"description": "Елемент <kbd><progress></kbd> показує виконання завдання. Використовуйте <kbd>value</kbd> для поточного прогресу та <kbd>max</kbd> для загального.<br><br><b>Примітка:</b> Це не самозакриваючий тег! Пишіть <kbd><progress>...</progress></kbd> з резервним текстом всередині для старих браузерів.",
|
||
"task": "Створіть смугу прогресу, що показує 70% виконання:<br>1. Додайте <kbd><label></kbd> з текстом <code>Download:</code><br>2. Додайте <kbd><progress></kbd> з <kbd>value=\"70\"</kbd> та <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": "Додайте елемент <kbd><progress></kbd>"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "progress", "attr": "value", "value": "70" },
|
||
"message": "Встановіть <kbd>value=</kbd>\"70\" в елементі progress"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "progress", "attr": "max", "value": "100" },
|
||
"message": "Встановіть <kbd>max=</kbd>\"100\" в елементі progress"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "label",
|
||
"message": "Додайте <kbd><label></kbd> для смуги прогресу"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "progress-indeterminate",
|
||
"title": "Невизначений прогрес",
|
||
"description": "Коли прогрес невідомий (як при завантаженні), опустіть атрибут <kbd>value</kbd>. Це створює анімований невизначений стан.<br><br>Корисно для мережевих запитів або процесів з невідомою тривалістю.",
|
||
"task": "Створіть індикатор завантаження:<br>1. Додайте <kbd><p></kbd> з текстом <code>Loading...</code><br>2. Додайте <kbd><progress></kbd> без атрибута 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": "Додайте елемент <kbd><progress></kbd>"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "p",
|
||
"message": "Додайте <kbd><p></kbd> з текстом завантаження"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "meter-gauge",
|
||
"title": "Шкали meter",
|
||
"description": "Елемент <kbd><meter></kbd> відображає скалярне значення в діапазоні. Використовуйте його для вимірювань, як-от місце на диску, батарея або рейтинги.<br><br>Встановіть <kbd>low</kbd>, <kbd>high</kbd> та <kbd>optimum</kbd>, щоб визначити хороші/погані діапазони - браузер забарвлює відповідно!",
|
||
"task": "Створіть шкалу рівня батареї:<br>1. Додайте <kbd><label></kbd> з текстом <code>Battery:</code><br>2. Додайте <kbd><meter></kbd> з:<br> - <kbd>value=\"0.8\"</kbd><br> - <kbd>min=\"0\"</kbd> та <kbd>max=\"1\"</kbd><br> - <kbd>low=\"0.2\"</kbd> та <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": "Додайте елемент <kbd><meter></kbd>"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "meter", "attr": "value", "value": "0.8" },
|
||
"message": "Встановіть <kbd>value=</kbd>\"0.8\" в meter"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "meter", "attr": "min", "value": "0" },
|
||
"message": "Встановіть <kbd>min=</kbd>\"0\" в meter"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "meter", "attr": "max", "value": "1" },
|
||
"message": "Встановіть <kbd>max=</kbd>\"1\" в meter"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "meter", "attr": "low", "value": "0.2" },
|
||
"message": "Встановіть <kbd>low=</kbd>\"0.2\", щоб визначити низький поріг"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "meter", "attr": "high", "value": "0.8" },
|
||
"message": "Встановіть <kbd>high=</kbd>\"0.8\", щоб визначити високий поріг"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "meter", "attr": "optimum", "value": "1" },
|
||
"message": "Встановіть <kbd>optimum=</kbd>\"1\", щоб вказати оптимальне значення"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "label",
|
||
"message": "Додайте <kbd><label></kbd> для meter"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|