fix: add kbd tags to lesson messages and reorder task/description
- Replace single quotes with <kbd> tags in validation messages - German and English lessons updated for consistent formatting - Move task instruction before description in UI (index.html)
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
"id": "responsive-1",
|
||||
"title": "Einführung in Media Queries",
|
||||
"description": "Verstehe die Syntax und Anwendungsfälle für CSS Media Queries, um Stile bedingt basierend auf Viewport-Eigenschaften anzuwenden.",
|
||||
"task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von '.responsive-box' auf lightcoral.",
|
||||
"task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von <kbd>.responsive-box</kbd> auf <kbd>lightcoral</kbd>.",
|
||||
"previewHTML": "<div class=\"responsive-box\">Ändere die Fenstergröße</div>",
|
||||
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .responsive-box { padding: 1rem; background: lightblue; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -27,14 +27,19 @@
|
||||
{
|
||||
"type": "contains",
|
||||
"value": ".responsive-box",
|
||||
"message": "Adressiere '.responsive-box' innerhalb der Media Query",
|
||||
"message": "Adressiere <kbd>.responsive-box</kbd> innerhalb der Media Query",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "background",
|
||||
"message": "Ändere die <kbd>background</kbd> Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{ "type": "contains", "value": "background", "message": "Ändere die 'background' Eigenschaft", "options": { "caseSensitive": false } },
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "background", "expected": "lightcoral" },
|
||||
"message": "Setze background auf 'lightcoral'",
|
||||
"message": "Setze background auf <kbd>lightcoral</kbd>",
|
||||
"options": { "exact": false }
|
||||
}
|
||||
]
|
||||
@@ -43,7 +48,7 @@
|
||||
"id": "responsive-2",
|
||||
"title": "Flüssige Typografie",
|
||||
"description": "Verwende relative Einheiten wie vw, damit Schriftgrößen mit der Viewport-Breite skalieren.",
|
||||
"task": "Setze die font-size von '.fluid-text' auf 5vw, damit sie sich mit dem Viewport ändert.",
|
||||
"task": "Setze die font-size von <kbd>.fluid-text</kbd> auf <kbd>5vw</kbd>, damit sie sich mit dem Viewport ändert.",
|
||||
"previewHTML": "<p class=\"fluid-text\">Flüssige Typografie</p>",
|
||||
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -52,16 +57,26 @@
|
||||
"codeSuffix": "}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{ "type": "contains", "value": "font-size", "message": "Verwende die 'font-size' Eigenschaft", "options": { "caseSensitive": false } },
|
||||
{ "type": "contains", "value": "vw", "message": "Verwende 'vw' Einheit für flüssige Größe", "options": { "caseSensitive": false } },
|
||||
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze font-size auf '5vw'" }
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "font-size",
|
||||
"message": "Verwende die <kbd>font-size</kbd> Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "vw",
|
||||
"message": "Verwende <kbd>vw</kbd> Einheit für flüssige Größe",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze font-size auf <kbd>5vw</kbd>" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "responsive-3",
|
||||
"title": "Flexible Raster",
|
||||
"description": "Kombiniere CSS Grid mit auto-fit oder auto-fill für responsive Spaltenlayouts.",
|
||||
"task": "Definiere '.grid-responsive' mit grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); und einem gap von 1rem.",
|
||||
"task": "Definiere <kbd>.grid-responsive</kbd> mit <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> und einem gap von <kbd>1rem</kbd>.",
|
||||
"previewHTML": "<div class=\"grid-responsive\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
|
||||
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-responsive > div { background: #d1c4e9; padding: 1rem; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -73,23 +88,23 @@
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "grid-template-columns",
|
||||
"message": "Definiere 'grid-template-columns'",
|
||||
"message": "Definiere <kbd>grid-template-columns</kbd>",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "regex",
|
||||
"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
|
||||
"message": "Verwende repeat(auto-fit, minmax(200px, 1fr))",
|
||||
"message": "Verwende <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{ "type": "contains", "value": "gap", "message": "Verwende die 'gap' Eigenschaft", "options": { "caseSensitive": false } }
|
||||
{ "type": "contains", "value": "gap", "message": "Verwende die <kbd>gap</kbd> Eigenschaft", "options": { "caseSensitive": false } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "responsive-4",
|
||||
"title": "Mobile-First Media Queries",
|
||||
"description": "Verfolge einen Mobile-First-Ansatz: Schreibe Basis-Stile für kleine Bildschirme und erweitere für größere Viewports.",
|
||||
"task": "Schreibe eine Media Query für min-width 768px, die die Breite von '.sidebar' auf 250px setzt.",
|
||||
"task": "Schreibe eine Media Query für min-width 768px, die die Breite von <kbd>.sidebar</kbd> auf <kbd>250px</kbd> setzt.",
|
||||
"previewHTML": "<aside class=\"sidebar\">Seitenleiste</aside>",
|
||||
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .sidebar { background: #c8e6c9; padding: 1rem; }",
|
||||
"sandboxCSS": "",
|
||||
@@ -104,11 +119,16 @@
|
||||
"message": "Verwende eine Media Query für min-width: 768px",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{ "type": "contains", "value": ".sidebar", "message": "Adressiere '.sidebar' in der Media Query", "options": { "caseSensitive": false } },
|
||||
{
|
||||
"type": "contains",
|
||||
"value": ".sidebar",
|
||||
"message": "Adressiere <kbd>.sidebar</kbd> in der Media Query",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "width", "expected": "250px" },
|
||||
"message": "Setze width auf '250px'",
|
||||
"message": "Setze width auf <kbd>250px</kbd>",
|
||||
"options": { "exact": false }
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user