Michael Czechowski
027232f5e8
- Wrap HTML element names in <kbd> tags in all validation messages - Apply consistent formatting to both English and German lessons - Make hints clearer about which elements/attributes to use - Fix mobile editor layout overflow issue
128 lines
7.6 KiB
JSON
128 lines
7.6 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-tables",
|
|
"title": "HTML-Tabellen",
|
|
"description": "Erstelle strukturierte Datentabellen mit Überschriften und Beschriftungen",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "table-basic",
|
|
"title": "Grundlegende Tabellenstruktur",
|
|
"description": "Tabellen verwenden <kbd><table></kbd> mit <kbd><tr></kbd> für Zeilen. In Zeilen nutze <kbd><th></kbd> für Überschriften und <kbd><td></kbd> für Datenzellen.<br><br>Das <kbd><caption></kbd>-Element bietet einen zugänglichen Titel für die Tabelle.",
|
|
"task": "Erstelle eine einfache Tabelle mit:<br>1. Einer <kbd><caption></kbd> mit 'Obstpreise'<br>2. Einer Kopfzeile mit 'Obst' und 'Preis' Spalten<br>3. Mindestens 2 Datenzeilen",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<table>\n <caption>Obstpreise</caption>\n <tr>\n <th>Obst</th>\n <th>Preis</th>\n </tr>\n <tr>\n <td>Apfel</td>\n <td>1,50 €</td>\n </tr>\n <tr>\n <td>Banane</td>\n <td>0,75 €</td>\n </tr>\n</table>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "table",
|
|
"message": "Füge ein <kbd><table></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "caption",
|
|
"message": "Füge eine <kbd><caption></kbd> als Tabellentitel hinzu"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "th", "min": 2 },
|
|
"message": "Füge mindestens 2 Überschriftszellen (th) hinzu"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "tr", "min": 3 },
|
|
"message": "Füge mindestens 3 Zeilen hinzu (1 Kopf + 2 Daten)"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table-thead-tbody",
|
|
"title": "Tabellenkopf & -körper",
|
|
"description": "Verwende <kbd><thead></kbd> zum Gruppieren von Kopfzeilen und <kbd><tbody></kbd> zum Gruppieren von Datenzeilen. Das hilft Browsern und Hilfstechnologien, die Tabellenstruktur zu verstehen.<br><br>Du kannst auch <kbd><tfoot></kbd> für Fußzeilen wie Summen verwenden.",
|
|
"task": "Erstelle eine strukturierte Tabelle:<br>1. Eine <kbd><caption></kbd> mit 'Monatliche Verkäufe'<br>2. Ein <kbd><thead></kbd> mit Monat und Umsatz Überschriften<br>3. Ein <kbd><tbody></kbd> mit mindestens 2 Datenzeilen",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<table>\n <caption>Monatliche Verkäufe</caption>\n <thead>\n <tr>\n <th>Monat</th>\n <th>Umsatz</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Januar</td>\n <td>12.500 €</td>\n </tr>\n <tr>\n <td>Februar</td>\n <td>14.200 €</td>\n </tr>\n </tbody>\n</table>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "table",
|
|
"message": "Füge ein <kbd><table></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "caption",
|
|
"message": "Füge ein <kbd><caption></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "thead",
|
|
"message": "Füge ein <kbd><thead></kbd> für den Kopfbereich hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "tbody",
|
|
"message": "Füge ein <kbd><tbody></kbd> für die Datenzeilen hinzu"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "tbody tr", "min": 2 },
|
|
"message": "Füge mindestens 2 Datenzeilen in tbody hinzu"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table-complete",
|
|
"title": "Vollständige Tabelle mit Fuß",
|
|
"description": "Füge <kbd><tfoot></kbd> hinzu, um einen Fußbereich für Summen oder Zusammenfassungen zu erstellen. Der Fuß bleibt unten, auch wenn tbody viele Zeilen hat.<br><br>Kombiniere alle Abschnitte für eine vollständig strukturierte, zugängliche Tabelle.",
|
|
"task": "Erstelle eine vollständige Tabelle:<br>1. Eine <kbd><caption></kbd> mit 'Bestellübersicht'<br>2. Ein <kbd><thead></kbd> mit Artikel und Preis Überschriften<br>3. Ein <kbd><tbody></kbd> mit 2 Artikeln<br>4. Ein <kbd><tfoot></kbd> mit einer Summenzeile",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<table>\n <caption>Bestellübersicht</caption>\n <thead>\n <tr>\n <th>Artikel</th>\n <th>Preis</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Widget</td>\n <td>25,00 €</td>\n </tr>\n <tr>\n <td>Gadget</td>\n <td>35,00 €</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <td>Gesamt</td>\n <td>60,00 €</td>\n </tr>\n </tfoot>\n</table>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "table",
|
|
"message": "Füge ein <kbd><table></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "caption",
|
|
"message": "Füge ein <kbd><caption></kbd>-Element hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "thead",
|
|
"message": "Füge einen <kbd><thead></kbd>-Abschnitt hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "tbody",
|
|
"message": "Füge einen <kbd><tbody></kbd>-Abschnitt hinzu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "tfoot",
|
|
"message": "Füge einen <kbd><tfoot></kbd>-Abschnitt für die Summe hinzu"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "tbody tr", "min": 2 },
|
|
"message": "Füge mindestens 2 Artikelzeilen in tbody hinzu"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|