Michael Czechowski
d2cbf7d381
New lesson modules covering native HTML5 features: - Details & Summary: disclosure widgets - Progress & Meter: progress bars and gauges - Datalist: autocomplete inputs - Data Attributes: custom data-* attributes - Dialog: native modal dialogs - Forms with Fieldset: grouped form controls - Figure & Figcaption: self-contained content - Tables: structured data with caption, thead, tbody, tfoot - Marquee: classic scrolling text (deprecated but fun) - SVG Basics: drawing circles, rectangles, and lines Each module includes 2-3 progressive lessons with fancy styling (pastel gradients, 100vh layouts, etc).
103 lines
5.9 KiB
JSON
103 lines
5.9 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-figure",
|
|
"title": "Figure & Figcaption",
|
|
"description": "Erstelle eigenständige Inhalte mit Beschriftungen",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "figure-basic",
|
|
"title": "Bild mit Beschriftung",
|
|
"description": "Das <kbd><figure></kbd>-Element umschließt eigenständige Inhalte wie Bilder, Diagramme oder Code. Füge <kbd><figcaption></kbd> hinzu, um eine Beschriftung zu erstellen.<br><br>Diese semantische Struktur hilft Screenreadern und Suchmaschinen, deinen Inhalt zu verstehen.",
|
|
"task": "Erstelle eine Figure mit:<br>1. Einem <kbd><figure></kbd>-Element<br>2. Einem <kbd><img></kbd> darin (verwende eine Platzhalter-URL)<br>3. Einem <kbd><figcaption></kbd>, das das Bild beschreibt",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } figure { margin: 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 400px; } figure img { width: 100%; height: 200px; object-fit: cover; display: block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } figcaption { padding: 15px 20px; color: #555; font-size: 0.95rem; border-top: 1px solid #eee; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<!-- Erstelle eine Figure mit Bild und Beschriftung -->",
|
|
"solution": "<figure>\n <img src=\"https://picsum.photos/400/200\" alt=\"Eine schöne Landschaft\">\n <figcaption>Eine wunderschöne Berglandschaft bei Sonnenuntergang.</figcaption>\n</figure>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "figure",
|
|
"message": "Füge ein <figure>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "figure img",
|
|
"message": "Füge ein <img> in die Figure ein"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "figcaption",
|
|
"message": "Füge ein <figcaption> für die Beschriftung hinzu"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "figure-code",
|
|
"title": "Code-Figure",
|
|
"description": "Figures sind nicht nur für Bilder! Du kannst sie für Code-Schnipsel, Zitate oder jeden eigenständigen Inhalt verwenden.<br><br>Kombiniere <kbd><figure></kbd> mit <kbd><pre></kbd> und <kbd><code></kbd> für Code-Beispiele.",
|
|
"task": "Erstelle eine Code-Figure:<br>1. Ein <kbd><figure></kbd>-Element<br>2. Ein <kbd><pre></kbd> mit <kbd><code></kbd> und etwas Code<br>3. Ein <kbd><figcaption></kbd>, das den Code beschreibt",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #1e1e1e; } figure { margin: 0; background: #2d2d2d; border-radius: 10px; overflow: hidden; max-width: 500px; } pre { margin: 0; padding: 20px; overflow-x: auto; } code { color: #9cdcfe; font-family: 'Fira Code', 'Consolas', monospace; font-size: 14px; line-height: 1.5; } figcaption { padding: 12px 20px; color: #888; font-size: 0.85rem; background: #252525; border-top: 1px solid #3d3d3d; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<!-- Erstelle eine Figure mit Code-Schnipsel -->",
|
|
"solution": "<figure>\n <pre><code>function greet(name) {\n return `Hallo, ${name}!`;\n}</code></pre>\n <figcaption>Eine einfache Begrüßungsfunktion in JavaScript</figcaption>\n</figure>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "figure",
|
|
"message": "Füge ein <figure>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "pre",
|
|
"message": "Füge ein <pre>-Element für formatierten Text hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "code",
|
|
"message": "Füge ein <code>-Element für den Code hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "figcaption",
|
|
"message": "Füge ein <figcaption> hinzu, das den Code beschreibt"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "figure-gallery",
|
|
"title": "Bildergalerie",
|
|
"description": "Du kannst mehrere Bilder in eine einzige <kbd><figure></kbd> packen, um eine Galerie oder einen Vergleich zu erstellen.<br><br>Das figcaption beschreibt die gesamte Gruppe.",
|
|
"task": "Erstelle eine Galerie-Figure:<br>1. Ein <kbd><figure></kbd>-Element<br>2. Mindestens 2 <kbd><img></kbd>-Elemente<br>3. Ein <kbd><figcaption></kbd>, das die Galerie beschreibt",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } figure { margin: 0; background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); max-width: 500px; padding: 15px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } figure img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: linear-gradient(45deg, #ff6b6b, #feca57); } figcaption { grid-column: 1 / -1; padding: 10px 5px 5px; color: #666; font-size: 0.9rem; text-align: center; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<!-- Erstelle eine Galerie mit mehreren Bildern -->",
|
|
"solution": "<figure>\n <img src=\"https://picsum.photos/200/120?1\" alt=\"Foto 1\">\n <img src=\"https://picsum.photos/200/120?2\" alt=\"Foto 2\">\n <img src=\"https://picsum.photos/200/120?3\" alt=\"Foto 3\">\n <img src=\"https://picsum.photos/200/120?4\" alt=\"Foto 4\">\n <figcaption>Meine Urlaubsfoto-Galerie</figcaption>\n</figure>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "figure",
|
|
"message": "Füge ein <figure>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "figure img", "min": 2 },
|
|
"message": "Füge mindestens 2 Bilder in die Figure ein"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "figcaption",
|
|
"message": "Füge ein <figcaption> für die Galerie hinzu"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|