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
5.8 KiB
JSON
123 lines
5.8 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-progress-meter",
|
|
"title": "HTML Progress & Meter",
|
|
"description": "Wyświetlaj postęp i pomiary natywnie",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "progress-basic",
|
|
"title": "Paski postępu",
|
|
"description": "Element <kbd><progress></kbd> pokazuje postęp zadania. Użyj <kbd>value</kbd> dla aktualnego postępu i <kbd>max</kbd> dla całości.<br><br><b>Uwaga:</b> To nie jest samozamykający się tag! Pisz <kbd><progress>...</progress></kbd> z tekstem zastępczym w środku dla starszych przeglądarek.",
|
|
"task": "Utwórz pasek postępu pokazujący 70% ukończenia:<br>1. Dodaj <kbd><label></kbd> z tekstem <code>Download:</code><br>2. Dodaj <kbd><progress></kbd> z <kbd>value=\"70\"</kbd> i <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": "Dodaj element <kbd><progress></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "progress", "attr": "value", "value": "70" },
|
|
"message": "Ustaw <kbd>value=</kbd>\"70\" w elemencie progress"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "progress", "attr": "max", "value": "100" },
|
|
"message": "Ustaw <kbd>max=</kbd>\"100\" w elemencie progress"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Dodaj <kbd><label></kbd> dla paska postępu"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "progress-indeterminate",
|
|
"title": "Nieokreślony postęp",
|
|
"description": "Gdy postęp jest nieznany (jak przy ładowaniu), pomiń atrybut <kbd>value</kbd>. To tworzy animowany stan nieokreślony.<br><br>Przydatne dla żądań sieciowych lub procesów o nieznanym czasie trwania.",
|
|
"task": "Utwórz wskaźnik ładowania:<br>1. Dodaj <kbd><p></kbd> z tekstem <code>Loading...</code><br>2. Dodaj <kbd><progress></kbd> bez atrybutu 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": "Dodaj element <kbd><progress></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "Dodaj <kbd><p></kbd> z tekstem ładowania"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "meter-gauge",
|
|
"title": "Wskaźniki meter",
|
|
"description": "Element <kbd><meter></kbd> wyświetla wartość skalarną w zakresie. Używaj go do pomiarów jak przestrzeń dyskowa, bateria lub oceny.<br><br>Ustaw <kbd>low</kbd>, <kbd>high</kbd> i <kbd>optimum</kbd>, aby zdefiniować dobre/złe zakresy - przeglądarka odpowiednio je koloruje!",
|
|
"task": "Utwórz wskaźnik poziomu baterii:<br>1. Dodaj <kbd><label></kbd> z tekstem <code>Battery:</code><br>2. Dodaj <kbd><meter></kbd> z:<br> - <kbd>value=\"0.8\"</kbd><br> - <kbd>min=\"0\"</kbd> i <kbd>max=\"1\"</kbd><br> - <kbd>low=\"0.2\"</kbd> i <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": "Dodaj element <kbd><meter></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "value", "value": "0.8" },
|
|
"message": "Ustaw <kbd>value=</kbd>\"0.8\" w meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "min", "value": "0" },
|
|
"message": "Ustaw <kbd>min=</kbd>\"0\" w meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "max", "value": "1" },
|
|
"message": "Ustaw <kbd>max=</kbd>\"1\" w meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "low", "value": "0.2" },
|
|
"message": "Ustaw <kbd>low=</kbd>\"0.2\", aby zdefiniować niski próg"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "high", "value": "0.8" },
|
|
"message": "Ustaw <kbd>high=</kbd>\"0.8\", aby zdefiniować wysoki próg"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "optimum", "value": "1" },
|
|
"message": "Ustaw <kbd>optimum=</kbd>\"1\", aby wskazać optymalną wartość"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Dodaj <kbd><label></kbd> dla meter"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|