refactor: improve lesson clarity and use friendlier values
Flexbox and Box Model lessons: - Use explicit task instructions with selector AND property - Include selector in codePrefix for better context - Replace hex colors with named CSS colors (steelblue, coral, etc.) - Simplify values (2px instead of 0.125rem, 1rem instead of 1.25rem) - Remove redundant contains validations - Wrap code examples in <code> tags for proper styling
This commit is contained in:
@@ -9,57 +9,39 @@
|
||||
"id": "box-model-1",
|
||||
"title": "Box-Modell Komponenten",
|
||||
"description": "Das CSS Box-Modell besteht aus vier konzentrischen Schichten: Inhalt (innerste), Padding, Border und Margin (äußerste). Zu verstehen, wie diese Komponenten zusammenwirken, ist essentiell für präzise Layout-Kontrolle.",
|
||||
"task": "Füge dem Box-Element ein Padding von '1.25rem' hinzu, um Abstand zwischen Inhalt und Rahmen zu schaffen.",
|
||||
"task": "Füge <code>padding: 1rem</code> zu <code>.box</code> hinzu, um Abstand zwischen Inhalt und Rahmen zu schaffen.",
|
||||
"previewHTML": "<div class=\"box\">Box-Modell Komponenten</div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; border: 0.125rem dashed #aaa; }",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Füge Padding zum Box-Element hinzu */\n.box {\n /* Füge deinen Code unten ein */\n ",
|
||||
"codePrefix": ".box {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "padding",
|
||||
"message": "Verwende die 'padding' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "padding", "expected": "1.25rem" },
|
||||
"message": "Setze padding auf genau '1.25rem'"
|
||||
"value": { "property": "padding", "expected": "1rem" },
|
||||
"message": "Setze padding auf '1rem'"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "box-model-2",
|
||||
"title": "Rahmen hinzufügen",
|
||||
"description": "Rahmen umranden ein Element und schaffen visuelle Trennung. CSS erlaubt die Kontrolle von Dicke, Stil (solid, dashed, dotted, etc.) und Farbe.",
|
||||
"task": "Füge einen durchgezogenen Rahmen mit Dicke '0.125rem' und Farbe '#333' hinzu. Die border-Eigenschaft akzeptiert drei Werte: Breite, Stil und Farbe.",
|
||||
"description": "Rahmen umranden ein Element und schaffen visuelle Trennung. Die border-Kurzschreibweise akzeptiert drei Werte: Breite, Stil und Farbe.",
|
||||
"task": "Füge <code>border: 2px solid darkslategray</code> zu <code>.box</code> hinzu.",
|
||||
"previewHTML": "<div class=\"box\">Diese Box braucht einen Rahmen</div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .box { background-color: #f0f0f0; padding: 1.25rem; }",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Füge einen Rahmen zur Box hinzu */\n.box {\n /* Füge deinen Code unten ein */\n ",
|
||||
"codePrefix": ".box {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "border",
|
||||
"message": "Verwende die 'border' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "regex",
|
||||
"value": "border:\\s*0.125rem\\s+solid\\s+#333",
|
||||
"message": "Setze border auf '0.125rem solid #333'",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "solid",
|
||||
"message": "Verwende 'solid' als Rahmenstil",
|
||||
"value": "border:\\s*2px\\s+solid\\s+darkslategray",
|
||||
"message": "Setze border auf '2px solid darkslategray'",
|
||||
"options": { "caseSensitive": false }
|
||||
}
|
||||
]
|
||||
@@ -68,21 +50,15 @@
|
||||
"id": "box-model-3",
|
||||
"title": "Außenabstände hinzufügen",
|
||||
"description": "Margins schaffen Abstand zwischen Elementen. Anders als Padding (das den inneren Abstand beeinflusst) existiert Margin außerhalb des Rahmens.",
|
||||
"task": "Füge dem Box-Element einen Margin von '1rem' hinzu, um Abstand zu benachbarten Elementen zu schaffen.",
|
||||
"task": "Füge <code>margin: 1rem</code> zu <code>.margin-box</code> hinzu, um Abstand zum benachbarten Element zu schaffen.",
|
||||
"previewHTML": "<div class=\"container\"><div class=\"margin-box\">Diese Box braucht Margins</div><div class=\"neighbor\">Benachbartes Element</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .container { background-color: #f8f8f8; padding: 0.5rem; } .margin-box { background-color: #d1c4e9; padding: 1rem; border: 0.125rem solid #7e57c2; } .neighbor { background-color: #bbdefb; padding: 1rem; border: 0.125rem solid #42a5f5; }",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .margin-box { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Füge Margin zur Box hinzu */\n.margin-box {\n /* Füge deinen Code unten ein */\n ",
|
||||
"codePrefix": ".margin-box {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "margin",
|
||||
"message": "Verwende die 'margin' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "margin", "expected": "1rem" },
|
||||
@@ -92,23 +68,17 @@
|
||||
},
|
||||
{
|
||||
"id": "box-model-4",
|
||||
"title": "Box-Sizing: Content-Box vs. Border-Box",
|
||||
"title": "Box-Sizing: Border-Box",
|
||||
"description": "Die box-sizing Eigenschaft bestimmt, wie Elementdimensionen berechnet werden. 'content-box' (Standard) schließt Padding und Border aus, während 'border-box' sie einschließt.",
|
||||
"task": "Setze box-sizing auf 'border-box'. Dadurch werden Padding und Border in die angegebene Breite und Höhe einbezogen.",
|
||||
"task": "Füge <code>box-sizing: border-box</code> zu <code>.border-box</code> hinzu, damit Padding und Border in die Breite einbezogen werden.",
|
||||
"previewHTML": "<div class=\"sizing-demo\"><div class=\"box content-box\">Content-box (Standard)</div><div class=\"box border-box\">Border-box</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 0.25rem solid #333; background: #f5f5f5; } .content-box { box-sizing: content-box; } .border-box { /* Dein Code hier */ }",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .content-box { box-sizing: content-box; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Setze die box-sizing Eigenschaft */\n.border-box {\n /* Füge deinen Code unten ein */\n ",
|
||||
"codePrefix": ".border-box {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "box-sizing",
|
||||
"message": "Verwende die 'box-sizing' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "box-sizing", "expected": "border-box" },
|
||||
@@ -119,22 +89,16 @@
|
||||
{
|
||||
"id": "box-model-5",
|
||||
"title": "Margin-Kollaps",
|
||||
"description": "Ein wichtiges Verhalten des Box-Modells: Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte.",
|
||||
"task": "Füge dem ersten Absatz einen bottom-margin von '2rem' hinzu. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) - das ist Margin-Kollaps.",
|
||||
"description": "Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte statt zu addieren.",
|
||||
"task": "Füge <code>margin-bottom: 2rem</code> zu <code>.first</code> hinzu. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) durch Margin-Kollaps.",
|
||||
"previewHTML": "<div class=\"collapse-demo\"><p class=\"first\">Dieser Absatz hat einen Bottom-Margin.</p><p class=\"second\">Dieser Absatz hat einen Top-Margin von 1rem.</p></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .collapse-demo { border: 0.0625rem solid #ddd; padding: 0.5rem; background: #f9f9f9; } .second { margin-top: 1rem; background: #f0f0f0; }",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Füge Margin hinzu, um Margin-Kollaps zu beobachten */\n.first {\n /* Füge deinen Code unten ein */\n ",
|
||||
"codePrefix": ".first {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "margin-bottom",
|
||||
"message": "Verwende die 'margin-bottom' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "margin-bottom", "expected": "2rem" },
|
||||
@@ -145,26 +109,20 @@
|
||||
{
|
||||
"id": "box-model-6",
|
||||
"title": "Margin-Kurzschreibweise",
|
||||
"description": "CSS bietet Kurzschreibweisen, um mehrere Eigenschaften gleichzeitig zu setzen. Die Margin-Kurzschreibweise setzt alle vier Seiten (oben, rechts, unten, links) im Uhrzeigersinn.",
|
||||
"task": "Verwende die Margin-Kurzschreibweise, um Top/Bottom auf '1rem' und Left/Right auf '2rem' zu setzen.",
|
||||
"description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.",
|
||||
"task": "Füge <code>margin: 1rem 2rem</code> zu <code>.shorthand-box</code> hinzu für 1rem oben/unten und 2rem links/rechts.",
|
||||
"previewHTML": "<div class=\"container\"><div class=\"shorthand-box\">Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .container { background-color: #f5f5f5; padding: 0.5rem; } .shorthand-box { background-color: #e8f5e9; border: 0.125rem solid #66bb6a; padding: 1rem; }",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .shorthand-box { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Verwende die Margin-Kurzschreibweise */\n.shorthand-box {\n /* Füge deinen Code unten ein */\n ",
|
||||
"codePrefix": ".shorthand-box {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "margin",
|
||||
"message": "Verwende die 'margin' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "regex",
|
||||
"value": "margin:\\s*1rem\\s+2rem",
|
||||
"message": "Verwende 'margin: 1rem 2rem' für vertikale und horizontale Margins",
|
||||
"message": "Setze margin auf '1rem 2rem'",
|
||||
"options": { "caseSensitive": false }
|
||||
}
|
||||
]
|
||||
@@ -172,52 +130,40 @@
|
||||
{
|
||||
"id": "box-model-7",
|
||||
"title": "Padding-Kurzschreibweise",
|
||||
"description": "Ähnlich wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller vier Seiten. Die Syntax folgt dem gleichen Muster: oben, rechts, unten, links (TRouBLe).",
|
||||
"task": "Verwende Padding-Kurzschreibweise, um alle Seiten auf '1.5rem' zu setzen. Ein einzelner Wert gilt für alle vier Seiten.",
|
||||
"description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.",
|
||||
"task": "Füge <code>padding: 1.5rem</code> zu <code>.padding-box</code> hinzu für gleichmäßiges Padding.",
|
||||
"previewHTML": "<div class=\"padding-box\">Diese Box braucht gleichmäßiges Padding</div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .padding-box { background-color: #fff3e0; border: 0.125rem solid #ff9800; }",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padding-box { background-color: papayawhip; border: 2px solid orange; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Verwende die Padding-Kurzschreibweise */\n.padding-box {\n /* Füge deinen Code unten ein */\n ",
|
||||
"codePrefix": ".padding-box {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "padding",
|
||||
"message": "Verwende die 'padding' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "padding", "expected": "1.5rem" },
|
||||
"message": "Setze padding auf '1.5rem' für alle Seiten"
|
||||
"message": "Setze padding auf '1.5rem'"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "box-model-8",
|
||||
"title": "Border-Kurzschreibweise und Einzeleigenschaften",
|
||||
"description": "Border-Eigenschaften können einzeln (border-width, border-style, border-color) oder als Kurzschreibweise gesetzt werden. Für noch mehr Kontrolle können einzelne Seiten angesprochen werden.",
|
||||
"task": "Setze nur den unteren Rahmen auf '0.25rem solid #2196f3'. Verwende border-bottom statt der allgemeinen border-Eigenschaft.",
|
||||
"title": "Rahmen auf einzelnen Seiten",
|
||||
"description": "Für feinere Kontrolle können einzelne Seiten mit border-top, border-right, border-bottom oder border-left angesprochen werden.",
|
||||
"task": "Füge <code>border-bottom: 4px solid dodgerblue</code> zu <code>.border-demo</code> hinzu.",
|
||||
"previewHTML": "<div class=\"border-demo\">Dieses Element braucht nur einen unteren Rahmen</div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: #e3f2fd; }",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: aliceblue; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": "/* Füge nur einen unteren Rahmen hinzu */\n.border-demo {\n /* Füge deinen Code unten ein */\n ",
|
||||
"codePrefix": ".border-demo {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "border-bottom",
|
||||
"message": "Verwende die 'border-bottom' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "regex",
|
||||
"value": "border-bottom:\\s*0.25rem\\s+solid\\s+#2196f3",
|
||||
"message": "Setze border-bottom auf '0.25rem solid #2196f3'",
|
||||
"value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue",
|
||||
"message": "Setze border-bottom auf '4px solid dodgerblue'",
|
||||
"options": { "caseSensitive": false }
|
||||
}
|
||||
]
|
||||
|
||||
@@ -9,32 +9,19 @@
|
||||
"id": "flexbox-1",
|
||||
"title": "Flexbox Container Grundlagen",
|
||||
"description": "Lerne, wie du einen Flex-Container erstellst und die Haupt- und Querachse verstehst.",
|
||||
"task": "Wandle das übergeordnete div in einen Flex-Container um und stelle es auf Reihenanzeige (Standard).",
|
||||
"task": "Füge <code>display: flex</code> zu <code>.flex-container</code> hinzu, um ein Flexbox-Layout zu erstellen.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; }",
|
||||
"sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; }",
|
||||
"codePrefix": "/* Wandle den Container in Flexbox um */\n",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; }",
|
||||
"codePrefix": ".flex-container {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": ".flex-container",
|
||||
"message": "Verwende den '.flex-container' Klassenselektor",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "display",
|
||||
"message": "Verwende die 'display' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "display", "expected": "flex" },
|
||||
"message": "Setze display auf 'flex'",
|
||||
"options": { "exact": true }
|
||||
"message": "Setze display auf 'flex'"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -42,38 +29,24 @@
|
||||
"id": "flexbox-2",
|
||||
"title": "Flex-Richtung und Umbruch",
|
||||
"description": "Steuere die Richtung und den Umbruch von Flex-Elementen innerhalb eines Containers.",
|
||||
"task": "Stelle den Flex-Container auf Spaltenanzeige ein und erlaube bei Bedarf Umbrüche.",
|
||||
"task": "Füge <code>flex-direction: column</code> und <code>flex-wrap: wrap</code> zu <code>.flex-container</code> hinzu.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
||||
"sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; height: 20rem; display: flex; }",
|
||||
"codePrefix": "/* Setze flex-direction auf column und aktiviere Umbruch */\n.flex-container {\n /* Füge deinen Code unten ein */\n",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
|
||||
"codePrefix": ".flex-container {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "flex-direction",
|
||||
"message": "Verwende die 'flex-direction' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "flex-wrap",
|
||||
"message": "Verwende die 'flex-wrap' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "flex-direction", "expected": "column" },
|
||||
"message": "Setze flex-direction auf 'column'",
|
||||
"options": { "exact": true }
|
||||
"message": "Setze flex-direction auf 'column'"
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "flex-wrap", "expected": "wrap" },
|
||||
"message": "Setze flex-wrap auf 'wrap'",
|
||||
"options": { "exact": true }
|
||||
"message": "Setze flex-wrap auf 'wrap'"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -81,26 +54,19 @@
|
||||
"id": "flexbox-3",
|
||||
"title": "Justify Content",
|
||||
"description": "Lerne, wie du Flex-Elemente entlang der Hauptachse des Containers ausrichtest.",
|
||||
"task": "Verteile die Flex-Elemente gleichmäßig entlang der Hauptachse mit Abstand dazwischen.",
|
||||
"task": "Füge <code>justify-content: space-between</code> zu <code>.flex-container</code> hinzu, um die Boxen gleichmäßig zu verteilen.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
||||
"sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; }",
|
||||
"codePrefix": "/* Verteile die Elemente mit Abstand dazwischen */\n.flex-container {\n /* Füge deinen Code unten ein */\n",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
||||
"codePrefix": ".flex-container {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "justify-content",
|
||||
"message": "Verwende die 'justify-content' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "justify-content", "expected": "space-between" },
|
||||
"message": "Setze justify-content auf 'space-between'",
|
||||
"options": { "exact": true }
|
||||
"message": "Setze justify-content auf 'space-between'"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -108,98 +74,59 @@
|
||||
"id": "flexbox-4",
|
||||
"title": "Align Items",
|
||||
"description": "Steuere, wie Flex-Elemente entlang der Querachse des Containers ausgerichtet werden.",
|
||||
"task": "Zentriere die Flex-Elemente vertikal entlang der Querachse.",
|
||||
"task": "Füge <code>align-items: center</code> zu <code>.flex-container</code> hinzu, um die Boxen vertikal zu zentrieren.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 8rem; align-items: flex-start; } .short { height: 3rem; align-items: flex-start; }",
|
||||
"sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 12rem; }",
|
||||
"codePrefix": "/* Zentriere die Elemente vertikal */\n.flex-container {\n /* Füge deinen Code unten ein */\n",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
|
||||
"codePrefix": ".flex-container {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "align-items",
|
||||
"message": "Verwende die 'align-items' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "align-items", "expected": "center" },
|
||||
"message": "Setze align-items auf 'center'",
|
||||
"options": { "exact": true }
|
||||
"message": "Setze align-items auf 'center'"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "flexbox-5",
|
||||
"title": "Flex-Element Eigenschaften",
|
||||
"description": "Steuere, wie einzelne Flex-Elemente wachsen, schrumpfen und ihre Basisgröße festlegen.",
|
||||
"task": "Lass die zweite Box doppelt so stark wachsen wie die anderen und verhindere, dass die dritte Box schrumpft.",
|
||||
"title": "Flex Grow",
|
||||
"description": "Die <code>flex</code> Eigenschaft steuert, wie stark ein Element im Verhältnis zu anderen wächst.",
|
||||
"task": "Füge <code>flex: 2</code> zu <code>.box2</code> hinzu, um sie doppelt so breit wachsen zu lassen.",
|
||||
"previewHTML": "<div class='flex-container'><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, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; height: 3rem; display: flex; align-items: center; justify-content: center; } .box1 { background-color: #e74c3c; } .box2 { background-color: #2ecc71; } .box3 { background-color: #f39c12; }",
|
||||
"sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; width: 100%; }",
|
||||
"codePrefix": "/* Lass box2 mehr wachsen und verhindere das Schrumpfen von box3 */\n",
|
||||
"initialCode": ".box1 {\n flex: 1;\n}\n\n.box2 {\n /* Diese soll doppelt so stark wachsen */\n}\n\n.box3 {\n flex: 1;\n /* Verhindere das Schrumpfen */\n}",
|
||||
"codeSuffix": "",
|
||||
"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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
||||
"codePrefix": ".box2 {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": ".box2",
|
||||
"message": "Style das '.box2' Element",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "contains",
|
||||
"value": ".box3",
|
||||
"message": "Style das '.box3' Element",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "regex",
|
||||
"value": ".box2\\s*{[^}]*flex:\\s*2",
|
||||
"message": "Setze flex auf '2' für box2",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "regex",
|
||||
"value": ".box3\\s*{[^}]*flex-shrink:\\s*0",
|
||||
"message": "Setze flex-shrink auf '0' für box3",
|
||||
"options": { "caseSensitive": false }
|
||||
"type": "property_value",
|
||||
"value": { "property": "flex", "expected": "2" },
|
||||
"message": "Setze flex auf '2'"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "flexbox-6",
|
||||
"title": "Einzelne Elemente ausrichten",
|
||||
"description": "Lerne, wie du die Container-Ausrichtung für einzelne Flex-Elemente überschreiben kannst.",
|
||||
"task": "Setze 'align-self' auf das mittlere Element, um es am Anfang der Querachse auszurichten.",
|
||||
"title": "Align Self",
|
||||
"description": "Verwende <code>align-self</code>, um die Ausrichtung für ein einzelnes Flex-Element zu überschreiben.",
|
||||
"task": "Füge <code>align-self: flex-start</code> zu <code>.middle</code> hinzu, um es nach oben zu verschieben.",
|
||||
"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .box { background-color: #3498db; color: white; padding: 1.25rem; margin: 0.5rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background-color: #2ecc71; }",
|
||||
"sandboxCSS": ".flex-container { border: 0.125rem dashed #ccc; padding: 1rem; display: flex; height: 15rem; align-items: center; }",
|
||||
"codePrefix": "/* Richte das mittlere Element am Anfang aus */\n",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
|
||||
"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
|
||||
"codePrefix": ".middle {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "",
|
||||
"codeSuffix": "\n}",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "contains",
|
||||
"value": ".middle",
|
||||
"message": "Verwende den '.middle' Klassenselektor",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "contains",
|
||||
"value": "align-self",
|
||||
"message": "Verwende die 'align-self' Eigenschaft",
|
||||
"options": { "caseSensitive": false }
|
||||
},
|
||||
{
|
||||
"type": "property_value",
|
||||
"value": { "property": "align-self", "expected": "flex-start" },
|
||||
"message": "Setze align-self auf 'flex-start'",
|
||||
"options": { "exact": true }
|
||||
"message": "Setze align-self auf 'flex-start'"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user