{
"$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 <figure>-Element umschließt eigenständige Inhalte wie Bilder, Diagramme oder Code. Füge <figcaption> hinzu, um eine Beschriftung zu erstellen.
Diese semantische Struktur hilft Screenreadern und Suchmaschinen, deinen Inhalt zu verstehen.",
"task": "Erstelle eine Figure mit: 1. Einem <figure>-Element 2. Einem <img> darin (verwende eine Platzhalter-URL) 3. Einem <figcaption>, 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": "",
"solution": "\n \n Eine wunderschöne Berglandschaft bei Sonnenuntergang.\n",
"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.
Kombiniere <figure> mit <pre> und <code> für Code-Beispiele.",
"task": "Erstelle eine Code-Figure: 1. Ein <figure>-Element 2. Ein <pre> mit <code> und etwas Code 3. Ein <figcaption>, 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": "",
"solution": "\n
function greet(name) {\n return `Hallo, ${name}!`;\n}
\n Eine einfache Begrüßungsfunktion in JavaScript\n",
"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 <figure> packen, um eine Galerie oder einen Vergleich zu erstellen.