fix(i18n): sync all lesson translations with English source
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.
This commit is contained in:
@@ -2,15 +2,15 @@
|
||||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||||
"id": "html-progress-meter",
|
||||
"title": "HTML Progress & Meter",
|
||||
"description": "Display completion status and scalar measurements natively",
|
||||
"description": "Відображайте статус виконання та вимірювання нативно",
|
||||
"mode": "html",
|
||||
"difficulty": "beginner",
|
||||
"lessons": [
|
||||
{
|
||||
"id": "progress-basic",
|
||||
"title": "Progress Bars",
|
||||
"description": "The <kbd><progress></kbd> element shows task completion. Use <kbd>value</kbd> for current progress and <kbd>max</kbd> for the total.<br><br><b>Note:</b> This is not a self-closing tag! Write <kbd><progress>...</progress></kbd> with fallback text inside for older browsers.",
|
||||
"task": "Create a progress bar showing 70% completion:<br>1. Add a <kbd><label></kbd> saying <code>Download:</code><br>2. Add a <kbd><progress></kbd> with <kbd>value=\"70\"</kbd> and <kbd>max=\"100\"</kbd>",
|
||||
"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": "",
|
||||
@@ -21,30 +21,30 @@
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "progress",
|
||||
"message": "Add a <kbd><progress></kbd> element"
|
||||
"message": "Додайте елемент <kbd><progress></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "progress", "attr": "value", "value": "70" },
|
||||
"message": "Set <kbd>value=</kbd>\"70\" on the progress element"
|
||||
"message": "Встановіть <kbd>value=</kbd>\"70\" в елементі progress"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "progress", "attr": "max", "value": "100" },
|
||||
"message": "Set <kbd>max=</kbd>\"100\" on the progress element"
|
||||
"message": "Встановіть <kbd>max=</kbd>\"100\" в елементі progress"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "label",
|
||||
"message": "Add a <kbd><label></kbd> for the progress bar"
|
||||
"message": "Додайте <kbd><label></kbd> для смуги прогресу"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "progress-indeterminate",
|
||||
"title": "Indeterminate Progress",
|
||||
"description": "When progress is unknown (like loading), omit the <kbd>value</kbd> attribute. This creates an animated indeterminate state.<br><br>Useful for network requests or processes with unknown duration.",
|
||||
"task": "Create a loading indicator:<br>1. Add a <kbd><p></kbd> saying <code>Loading...</code><br>2. Add a <kbd><progress></kbd> without a value attribute",
|
||||
"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": "",
|
||||
@@ -55,20 +55,20 @@
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "progress",
|
||||
"message": "Add a <kbd><progress></kbd> element"
|
||||
"message": "Додайте елемент <kbd><progress></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "p",
|
||||
"message": "Add a <kbd><p></kbd> with loading text"
|
||||
"message": "Додайте <kbd><p></kbd> з текстом завантаження"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "meter-gauge",
|
||||
"title": "Meter Gauges",
|
||||
"description": "The <kbd><meter></kbd> element displays a scalar value within a range. Use it for measurements like disk space, battery, or ratings.<br><br>Set <kbd>low</kbd>, <kbd>high</kbd>, and <kbd>optimum</kbd> to define good/bad ranges - the browser colors it accordingly!",
|
||||
"task": "Create a battery level meter:<br>1. Add a <kbd><label></kbd> saying <code>Battery:</code><br>2. Add a <kbd><meter></kbd> with:<br> - <kbd>value=\"0.8\"</kbd><br> - <kbd>min=\"0\"</kbd> and <kbd>max=\"1\"</kbd><br> - <kbd>low=\"0.2\"</kbd> and <kbd>high=\"0.8\"</kbd><br> - <kbd>optimum=\"1\"</kbd>",
|
||||
"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": "",
|
||||
@@ -79,22 +79,42 @@
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "meter",
|
||||
"message": "Add a <kbd><meter></kbd> element"
|
||||
"message": "Додайте елемент <kbd><meter></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "meter", "attr": "value", "value": "0.8" },
|
||||
"message": "Set <kbd>value=</kbd>\"0.8\" on the meter"
|
||||
"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": "Set <kbd>low=</kbd>\"0.2\" to define the low threshold"
|
||||
"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": "Add a <kbd><label></kbd> for the meter"
|
||||
"message": "Додайте <kbd><label></kbd> для meter"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user