public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

fix: remove placeholder comments and improve German translations

Browse Source 
- Remove placeholder comments from initialCode fields
- Fix typo: "wichtig Wort" -> "wichtigen Wort" in de/20-html-elements.json
- Improve German validation messages for readability
- Use consistent terminology (Eingabefeld instead of Input)
This commit is contained in:
Michael Czechowski
2025-12-25 15:16:31 +01:00
parent d2cbf7d381
commit b5487b7a1e
17 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
lessons/de/20-html-elements.json
View File

@@ -10,12 +10,12 @@
"id": "block-vs-inline-intro",
"title": "Block- vs Inline-Elemente",
"description": "HTML-Elemente fallen in zwei Hauptkategorien:<br><br><strong>Block-Elemente</strong> (Container) beginnen in einer neuen Zeile und nehmen die volle Breite ein. Beispiele: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Inline-Elemente</strong> fließen innerhalb des Textes und nehmen nur die benötigte Breite ein. Beispiele: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
"task": "Umschließe das Wort <kbd>wichtig</kbd> mit <kbd>&lt;strong&gt;</kbd>-Tags, um es fett zu machen. Beachte, wie der Absatz (Block) die volle Breite einnimmt, während strong (Inline) mit dem Text fließt.",
"task": "Umschließe das Wort <kbd>wichtigen</kbd> mit <kbd>&lt;strong&gt;</kbd>-Tags, um es fett zu machen. Beachte, wie der Absatz (Block) die volle Breite einnimmt, während strong (Inline) mit dem Text fließt.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
"sandboxCSS": "",
"initialCode": "<p>Dies ist ein Absatz mit einem wichtig Wort.</p>",
"solution": "<p>Dies ist ein Absatz mit einem <strong>wichtig</strong> Wort.</p>",
"initialCode": "<p>Dies ist ein Absatz mit einem wichtigen Wort.</p>",
"solution": "<p>Dies ist ein Absatz mit einem <strong>wichtigen</strong> Wort.</p>",
"previewContainer": "preview-area",
"validations": [
{
@@ -26,7 +26,7 @@
{
"type": "parent_child",
"value": { "parent": "p", "child": "strong" },
"message": "Umschließe das Wort 'wichtig' mit <strong>-Tags"
"message": "Umschließe das Wort 'wichtigen' mit <strong>-Tags"
}
]
},
@@ -38,7 +38,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle hier deine Seitenstruktur -->",
"initialCode": "",
"solution": "<header>\n <h1>Meine Webseite</h1>\n</header>\n<main>\n <p>Willkommen auf meiner Seite!</p>\n</main>\n<footer>\n <p>Copyright 2025</p>\n</footer>",
"previewContainer": "preview-area",
"validations": [

2
lessons/de/21-html-forms-basic.json
View File

@@ -14,7 +14,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle hier dein Formular -->",
"initialCode": "",
"solution": "<form>\n <label for=\"name\">Name:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
"previewContainer": "preview-area",
"validations": [

8
lessons/de/22-html-forms-validation.json
View File

@@ -21,12 +21,12 @@
{
"type": "attribute_value",
"value": { "selector": "input[name='name']", "attr": "required", "value": true },
"message": "Füge das 'required'-Attribut zur Name-Eingabe hinzu"
"message": "Füge required zum Namensfeld hinzu"
},
{
"type": "attribute_value",
"value": { "selector": "input[name='email']", "attr": "required", "value": true },
"message": "Füge das 'required'-Attribut zur E-Mail-Eingabe hinzu"
"message": "Füge required zum E-Mail-Feld hinzu"
}
]
},
@@ -45,12 +45,12 @@
{
"type": "attribute_value",
"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
"message": "Füge minlength=\"8\" zur Passwort-Eingabe hinzu"
"message": "Füge minlength=\"8\" zum Passwort hinzu"
},
{
"type": "attribute_value",
"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
"message": "Füge maxlength=\"20\" zur Passwort-Eingabe hinzu"
"message": "Füge maxlength=\"20\" zum Passwort hinzu"
},
{
"type": "attribute_value",

4
lessons/de/23-html-details-summary.json
View File

@@ -14,7 +14,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle hier dein Aufklapp-Element -->",
"initialCode": "",
"solution": "<details>\n <summary>Klicken zum Aufklappen</summary>\n <p>Dieser Inhalt war versteckt!</p>\n</details>",
"previewContainer": "preview-area",
"validations": [
@@ -67,7 +67,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle hier deinen FAQ-Bereich -->",
"initialCode": "",
"solution": "<h1>Häufig gestellte Fragen</h1>\n\n<details>\n <summary>Was ist HTML5?</summary>\n <p>HTML5 ist die neueste Version von HTML mit neuen semantischen Elementen und APIs.</p>\n</details>\n\n<details>\n <summary>Brauche ich JavaScript?</summary>\n <p>Viele interaktive Funktionen funktionieren mit purem HTML5, kein JavaScript nötig!</p>\n</details>\n\n<details>\n <summary>Ist das barrierefrei?</summary>\n <p>Ja! Native HTML-Elemente haben eingebaute Tastatur- und Screenreader-Unterstützung.</p>\n</details>",
"previewContainer": "preview-area",
"validations": [

6
lessons/de/24-html-progress-meter.json
View File

@@ -14,7 +14,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle hier einen Fortschrittsbalken -->",
"initialCode": "",
"solution": "<label for=\"download\">Download:</label>\n<progress id=\"download\" value=\"70\" max=\"100\">70%</progress>",
"previewContainer": "preview-area",
"validations": [
@@ -48,7 +48,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle eine unbestimmte Ladeanzeige -->",
"initialCode": "",
"solution": "<p>Lädt...</p>\n<progress></progress>",
"previewContainer": "preview-area",
"validations": [
@@ -72,7 +72,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle hier eine Akku-Anzeige -->",
"initialCode": "",
"solution": "<label for=\"battery\">Akku:</label>\n<meter id=\"battery\" value=\"0.8\" min=\"0\" max=\"1\" low=\"0.2\" high=\"0.8\" optimum=\"1\">80%</meter>",
"previewContainer": "preview-area",
"validations": [

4
lessons/de/25-html-datalist.json
View File

@@ -26,7 +26,7 @@
{
"type": "attribute_value",
"value": { "selector": "input", "attr": "list", "value": "browsers" },
"message": "Verbinde das Input mit der Datalist über list=\"browsers\""
"message": "Verbinde das Eingabefeld mit der Datalist über list=\"browsers\""
},
{
"type": "element_count",
@@ -65,7 +65,7 @@
{
"type": "attribute_value",
"value": { "selector": "input", "attr": "list", "value": "countries" },
"message": "Verbinde das Input über list=\"countries\""
"message": "Verbinde das Eingabefeld über list=\"countries\""
},
{
"type": "element_count",

6
lessons/de/30-html-tables.json
View File

@@ -14,7 +14,7 @@
"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": "<!-- Erstelle eine Tabelle mit caption und Überschriften -->",
"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": [
@@ -48,7 +48,7 @@
"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": "<!-- Erstelle eine Tabelle mit thead und tbody -->",
"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": [
@@ -87,7 +87,7 @@
"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": "<!-- Erstelle eine vollständige Tabelle mit tfoot -->",
"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": [

6
lessons/de/31-html-marquee.json
View File

@@ -14,7 +14,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle ein scrollendes Marquee -->",
"initialCode": "",
"solution": "<marquee>Willkommen auf meiner Website!</marquee>",
"previewContainer": "preview-area",
"validations": [
@@ -33,7 +33,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle ein springendes Marquee -->",
"initialCode": "",
"solution": "<marquee behavior=\"alternate\">Hüpf! Hüpf! Hüpf!</marquee>",
"previewContainer": "preview-area",
"validations": [
@@ -57,7 +57,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
"sandboxCSS": "",
"initialCode": "<!-- Erstelle einen Retro-Nachrichtenticker -->",
"initialCode": "",
"solution": "<marquee direction=\"left\" scrollamount=\"5\">EILMELDUNG: Das Marquee-Element funktioniert noch in Browsern!</marquee>",
"previewContainer": "preview-area",
"validations": [

6
lessons/de/32-html-svg.json
View File

@@ -14,7 +14,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
"sandboxCSS": "",
"initialCode": "<!-- Zeichne einen Kreis mit SVG -->",
"initialCode": "",
"solution": "<svg width=\"200\" height=\"200\">\n <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#3498db\" />\n</svg>",
"previewContainer": "preview-area",
"validations": [
@@ -48,7 +48,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
"sandboxCSS": "",
"initialCode": "<!-- Zeichne ein Rechteck und eine Linie -->",
"initialCode": "",
"solution": "<svg width=\"200\" height=\"150\">\n <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"#e74c3c\" />\n <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"#2c3e50\" stroke-width=\"3\" />\n</svg>",
"previewContainer": "preview-area",
"validations": [
@@ -77,7 +77,7 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
"sandboxCSS": "",
"initialCode": "<!-- Zeichne ein einfaches Smiley-Gesicht -->",
"initialCode": "",
"solution": "<svg width=\"200\" height=\"200\">\n <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#f1c40f\" stroke=\"#e67e22\" stroke-width=\"4\" />\n <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"#2c3e50\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
"previewContainer": "preview-area",
"validations": [