fix(i18n): align German lesson code with English
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
- Changed solution in 00-welcome.json from "Hallo Welt" to "Hello World" - Added missing solution fields to 01-box-model.json (8 lessons) - Added missing solution fields to 05-units-variables.json (4 lessons) - Added missing solution fields to 06-transitions-animations.json (4 lessons) - Added missing solution fields to 08-responsive.json (4 lessons) - Fixed flexbox.json class names from .green/.red/.yellow to .box1/.box2/.box3 - Added missing solution fields to flexbox.json (6 lessons) German translations now keep all CSS code in English for maintainability, with only instructional text translated.
This commit is contained in:
@@ -10,18 +10,18 @@
|
||||
"id": "get-started",
|
||||
"title": "Los geht's",
|
||||
"description": "<strong>Code Crispies</strong> ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich!<br><br><strong>Was du lernst:</strong><br>• <strong>HTML</strong> - Semantische Elemente, Formulare, Tabellen, SVG (<em>HTML Block & Inline</em>, <em>HTML Formulare</em>, <em>HTML Tabellen</em>)<br>• <strong>CSS</strong> - Selektoren, Box-Model, Flexbox, Animationen (<em>CSS Selektoren</em>, <em>CSS Box-Model</em>, <em>CSS Flexbox</em>)<br>• <strong>Responsive Design</strong> - Media Queries und Mobile-First Layouts<br><br><strong>So funktioniert's:</strong><br>1. Lies die Aufgabe im linken Bereich<br>2. Schreibe Code im Editor<br>3. Sieh Live-Ergebnisse in der Vorschau<br>4. Bekomme sofortiges Feedback mit Hinweisen<br><br><strong>Tastenkürzel:</strong> <kbd>Strg+Z</kbd> rückgängig, <kbd>Strg+Umschalt+Z</kbd> wiederholen<br><br><strong>Weitere Ressourcen:</strong><br>• <a href=\"https://nextlevelshit.github.io/html-over-js/\" target=\"_blank\">HTML over JS</a> - Native HTML vs JavaScript-Lösungen<br>• <a href=\"https://nextlevelshit.github.io/web-engineering-mandala/\" target=\"_blank\">Web Engineering Mandala</a> - JavaScript Technologie-Roadmap",
|
||||
"task": "Hallo Welt",
|
||||
"task": "Hello World",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; text-align: center; } h1 { color: #6366f1; }",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "",
|
||||
"solution": "<h1>Hallo Welt</h1>",
|
||||
"solution": "<h1>Hello World</h1>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "Hallo",
|
||||
"message": "Schreibe 'Hallo Welt'"
|
||||
"value": "Hello",
|
||||
"message": "Schreibe 'Hello World'"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -53,7 +53,7 @@
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hallo Welt</h1>\n<p>Los geht's!</p>",
|
||||
"initialCode": "<style>\n body {\n font-family: system-ui, sans-serif;\n padding: 20px;\n }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
|
||||
"solution": "",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": []
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"codePrefix": ".box {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "padding: 1rem;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -36,6 +37,7 @@
|
||||
"codePrefix": ".box {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "border: 2px solid darkslategray;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -57,6 +59,7 @@
|
||||
"codePrefix": ".outer {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "margin: 1rem;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -77,6 +80,7 @@
|
||||
"codePrefix": ".sized {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "box-sizing: border-box;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -97,6 +101,7 @@
|
||||
"codePrefix": ".first {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "margin-bottom: 2rem;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -117,6 +122,7 @@
|
||||
"codePrefix": ".spaced {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "margin: 1rem 2rem;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -138,6 +144,7 @@
|
||||
"codePrefix": ".padded {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "padding: 1.5rem;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -158,6 +165,7 @@
|
||||
"codePrefix": ".line {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "border-bottom: 4px solid dodgerblue;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"codePrefix": "/* Setze flexible Größen */\n.box {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}",
|
||||
"solution": " width: 80%;\n max-width: 37.5rem;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -49,6 +50,7 @@
|
||||
"codePrefix": "/* Definiere und verwende eine CSS-Variable */\n:root {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}\n.themed { }",
|
||||
"solution": " --main-color: #6200ee;\n}\n.themed {\n border-color: var(--main-color);",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -82,6 +84,7 @@
|
||||
"codePrefix": "/* Verwende calc für dynamische Größen */\n.sized {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}",
|
||||
"solution": " width: calc(100% - 2rem);\n min-height: calc(10vh + 1rem);",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{ "type": "contains", "value": "calc", "message": "Verwende die <kbd>calc()</kbd> Funktion", "options": { "caseSensitive": false } },
|
||||
@@ -110,6 +113,7 @@
|
||||
"codePrefix": "/* Verwende Viewport-Einheiten */\n.view {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}",
|
||||
"solution": " width: 50vw;\n height: 20vh;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{ "type": "contains", "value": "vw", "message": "Verwende <kbd>vw</kbd> Einheit", "options": { "caseSensitive": false } },
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"codePrefix": "/* Füge Transition hinzu */\n.btn {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}",
|
||||
"solution": " transition: background-color 0.3s;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -43,6 +44,7 @@
|
||||
"codePrefix": "/* Setze Timing-Funktion */\n.btn {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}",
|
||||
"solution": " transition-timing-function: ease-in-out;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -69,6 +71,7 @@
|
||||
"codePrefix": "/* Definiere Keyframes und wende Animation an */\n@keyframes bounce {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}\n.ball { }",
|
||||
"solution": " 50% { transform: translateY(-20px); }\n}\n.ball {\n animation: bounce 1s infinite;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -108,6 +111,7 @@
|
||||
"codePrefix": "/* Definiere fade und setze Eigenschaften */\n@keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n.box {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}",
|
||||
"solution": " animation-name: fade;\n animation-duration: 2s;\n animation-delay: 1s;\n animation-iteration-count: 2;\n animation-fill-mode: forwards;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"codePrefix": "/* Füge deine Media Query unten ein */\n",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "",
|
||||
"solution": "@media (max-width: 600px) {\n .panel {\n background: lightcoral;\n }\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -55,6 +56,7 @@
|
||||
"codePrefix": "/* Wende flüssige Schriftgröße an */\n.text {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}",
|
||||
"solution": " font-size: 5vw;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -83,6 +85,7 @@
|
||||
"codePrefix": "/* Erstelle ein responsives Raster */\n.cards {",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "}",
|
||||
"solution": " display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
@@ -111,6 +114,7 @@
|
||||
"codePrefix": "/* Füge Mobile-First-Erweiterung hinzu */\n",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "",
|
||||
"solution": "@media (min-width: 768px) {\n .sidebar {\n width: 250px;\n }\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
|
||||
@@ -16,12 +16,13 @@
|
||||
"codePrefix": ".wrap {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "display: flex;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "display", "expected": "flex" },
|
||||
"message": "Setze display auf <kbd>flex</kbd>"
|
||||
"message": "Setze <kbd>display: flex</kbd>"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -36,17 +37,20 @@
|
||||
"codePrefix": ".wrap {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "flex-direction: column;\n flex-wrap: wrap;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "flex-direction", "expected": "column" },
|
||||
"message": "Setze flex-direction auf <kbd>column</kbd>"
|
||||
"message": "Setze <kbd>flex-direction: column</kbd>",
|
||||
"options": { "exact": true }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "flex-wrap", "expected": "wrap" },
|
||||
"message": "Setze flex-wrap auf <kbd>wrap</kbd>"
|
||||
"message": "Setze <kbd>flex-wrap: wrap</kbd>",
|
||||
"options": { "exact": true }
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -61,12 +65,14 @@
|
||||
"codePrefix": ".wrap {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "justify-content: space-between;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "justify-content", "expected": "space-between" },
|
||||
"message": "Setze justify-content auf <kbd>space-between</kbd>"
|
||||
"message": "Setze <kbd>justify-content: space-between</kbd>",
|
||||
"options": { "exact": true }
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -81,12 +87,14 @@
|
||||
"codePrefix": ".wrap {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "align-items: center;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "align-items", "expected": "center" },
|
||||
"message": "Setze align-items auf <kbd>center</kbd>"
|
||||
"message": "Setze <kbd>align-items: center</kbd>",
|
||||
"options": { "exact": true }
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -94,19 +102,20 @@
|
||||
"id": "flexbox-5",
|
||||
"title": "Flex Grow",
|
||||
"description": "Die <kbd>flex</kbd>-Eigenschaft ist eine Kurzform für <kbd>flex-grow</kbd>, <kbd>flex-shrink</kbd> und <kbd>flex-basis</kbd>. Ein höherer Wert bedeutet, dass das Element mehr vom verfügbaren Platz einnimmt. <kbd>flex: 2</kbd> wächst doppelt so schnell wie <kbd>flex: 1</kbd>.",
|
||||
"task": "Füge <kbd>flex: 2</kbd> zu <kbd>.green</kbd> hinzu.",
|
||||
"previewHTML": "<div class='wrap'><div class='box red'>1</div><div class='box green'>2</div><div class='box yellow'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .red { background: coral; flex: 1; } .green { background: mediumseagreen; } .yellow { background: gold; flex: 1; }",
|
||||
"task": "Füge <kbd>flex: 2</kbd> zu <kbd>.box2</kbd> hinzu.",
|
||||
"previewHTML": "<div class='wrap'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
|
||||
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
||||
"codePrefix": ".green {\n ",
|
||||
"codePrefix": ".box2 {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "flex: 2;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "flex", "expected": "2" },
|
||||
"message": "Setze flex auf <kbd>2</kbd>"
|
||||
"message": "Setze <kbd>flex: 2</kbd>"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -121,12 +130,13 @@
|
||||
"codePrefix": ".middle {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "align-self: flex-start;",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "align-self", "expected": "flex-start" },
|
||||
"message": "Setze align-self auf <kbd>flex-start</kbd>"
|
||||
"message": "Setze <kbd>align-self: flex-start</kbd>"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user