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": "Zeige Fortschritt und Messwerte nativ an",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "progress-basic",
|
|
"title": "Fortschrittsbalken",
|
|
"description": "Das <kbd><progress></kbd>-Element zeigt den Aufgabenfortschritt. Verwende <kbd>value</kbd> für den aktuellen Stand und <kbd>max</kbd> für das Maximum.<br><br><b>Wichtig:</b> Dies ist kein selbstschließendes Tag! Schreibe <kbd><progress>...</progress></kbd> mit einem Fallback-Text dazwischen für ältere Browser.",
|
|
"task": "Erstelle einen Fortschrittsbalken mit 70% Fortschritt:<br>1. Füge ein <kbd><label></kbd> mit <code>Download:</code> hinzu<br>2. Füge ein <kbd><progress></kbd> mit <kbd>value=\"70\"</kbd> und <kbd>max=\"100\"</kbd> hinzu",
|
|
"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": "Füge ein <kbd><progress></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "progress", "attr": "value", "value": "70" },
|
|
"message": "Setze <kbd>value=</kbd>\"70\" beim Progress-Element"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "progress", "attr": "max", "value": "100" },
|
|
"message": "Setze <kbd>max=</kbd>\"100\" beim Progress-Element"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Füge ein <kbd><label></kbd> für den Fortschrittsbalken hinzu"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "progress-indeterminate",
|
|
"title": "Unbestimmter Fortschritt",
|
|
"description": "Wenn der Fortschritt unbekannt ist (wie beim Laden), lasse das <kbd>value</kbd>-Attribut weg. Dies erstellt einen animierten unbestimmten Zustand.<br><br>Nützlich für Netzwerkanfragen oder Prozesse mit unbekannter Dauer.",
|
|
"task": "Erstelle eine Ladeanzeige:<br>1. Füge ein <kbd><p></kbd> mit <code>Loading...</code> hinzu<br>2. Füge ein <kbd><progress></kbd> ohne value-Attribut hinzu",
|
|
"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": "Füge ein <kbd><progress></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "p",
|
|
"message": "Füge ein <kbd><p></kbd> mit Ladetext hinzu"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "meter-gauge",
|
|
"title": "Meter-Anzeigen",
|
|
"description": "Das <kbd><meter></kbd>-Element zeigt einen Skalarwert innerhalb eines Bereichs. Verwende es für Messungen wie Speicherplatz, Akku oder Bewertungen.<br><br>Setze <kbd>low</kbd>, <kbd>high</kbd> und <kbd>optimum</kbd>, um gute/schlechte Bereiche zu definieren - der Browser färbt es entsprechend ein!",
|
|
"task": "Erstelle eine Akku-Anzeige:<br>1. Füge ein <kbd><label></kbd> mit <code>Battery:</code> hinzu<br>2. Füge ein <kbd><meter></kbd> hinzu mit:<br> - <kbd>value=\"0.8\"</kbd><br> - <kbd>min=\"0\"</kbd> und <kbd>max=\"1\"</kbd><br> - <kbd>low=\"0.2\"</kbd> und <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": "Füge ein <kbd><meter></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "value", "value": "0.8" },
|
|
"message": "Setze <kbd>value=</kbd>\"0.8\" beim Meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "min", "value": "0" },
|
|
"message": "Setze <kbd>min=</kbd>\"0\" beim Meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "max", "value": "1" },
|
|
"message": "Setze <kbd>max=</kbd>\"1\" beim Meter"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "low", "value": "0.2" },
|
|
"message": "Setze <kbd>low=</kbd>\"0.2\", um den niedrigen Schwellenwert zu definieren"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "high", "value": "0.8" },
|
|
"message": "Setze <kbd>high=</kbd>\"0.8\", um den hohen Schwellenwert zu definieren"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "meter", "attr": "optimum", "value": "1" },
|
|
"message": "Setze <kbd>optimum=</kbd>\"1\", um den optimalen Wert anzugeben"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Füge ein <kbd><label></kbd> für das Meter hinzu"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|