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

fix: add kbd tags to validation messages for clarity

Browse Source 
- 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
This commit is contained in:
Michael Czechowski
2025-12-25 15:55:26 +01:00
parent 935969a80c
commit 31407dcb51
27 changed files with 230 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,51 +21,51 @@
{
"type": "element_exists",
"value": "form",
"message": "Umschließe alles mit einem <form>-Element"
"message": "Umschließe alles mit einem <kbd>&lt;form&gt;</kbd>-Element"
},
{
"type": "element_exists",
"value": "label",
"message": "Füge ein <label> für deine Eingabe hinzu"
"message": "Füge ein <kbd>&lt;label&gt;</kbd> für deine Eingabe hinzu"
},
{
"type": "element_exists",
"value": "input",
"message": "Füge ein <input>-Element hinzu"
"message": "Füge ein <kbd>&lt;input&gt;</kbd>-Element hinzu"
},
{
"type": "attribute_value",
"value": { "selector": "label", "attr": "for", "value": null },
"message": "Füge ein 'for'-Attribut zu deinem Label hinzu"
"message": "Füge ein <kbd>for</kbd>-Attribut zu deinem Label hinzu"
},
{
"type": "attribute_value",
"value": { "selector": "input", "attr": "id", "value": null },
"message": "Füge ein 'id'-Attribut zu deiner Eingabe hinzu"
"message": "Füge ein <kbd>id</kbd>-Attribut zu deiner Eingabe hinzu"
}
]
},
{
"id": "input-types",
"title": "Eingabetypen",
"description": "Verschiedene Eingabetypen bieten passende Tastaturen und Validierung:<br><br><kbd>type=\"text\"</kbd> - Allgemeiner Text<br><kbd>type=\"email\"</kbd> - E-Mail mit @-Validierung<br><kbd>type=\"password\"</kbd> - Versteckte Zeichen<br><kbd>type=\"number\"</kbd> - Numerische Tastatur<br><kbd>type=\"tel\"</kbd> - Telefon-Tastatur",
"task": "Erstelle ein Anmeldeformular mit zwei Feldern:<br>1. Ein E-Mail-Feld: <kbd>&lt;label for=\"email\"&gt;E-Mail:&lt;/label&gt;</kbd> und <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. Ein Passwort-Feld: <kbd>&lt;label for=\"password\"&gt;Passwort:&lt;/label&gt;</kbd> und <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
"description": "Verschiedene Eingabetypen bieten passende Tastaturen und Validierung:<br><br><kbd>type=\"text\"</kbd> - Allgemeiner Text<br><kbd>type=<kbd>\"email\"</kbd></kbd> - E-Mail mit @-Validierung<br><kbd>type=<kbd>\"password\"</kbd></kbd> - Versteckte Zeichen<br><kbd>type=\"number\"</kbd> - Numerische Tastatur<br><kbd>type=\"tel\"</kbd> - Telefon-Tastatur",
"task": "Erstelle ein Anmeldeformular mit zwei Feldern:<br>1. Ein E-Mail-Feld: <kbd>&lt;label for=\"email\"&gt;E-Mail:&lt;/label&gt;</kbd> und <kbd>&lt;input type=<kbd>\"email\"</kbd> id=\"email\"&gt;</kbd><br>2. Ein Passwort-Feld: <kbd>&lt;label for=\"password\"&gt;Passwort:&lt;/label&gt;</kbd> und <kbd>&lt;input type=<kbd>\"password\"</kbd> id=\"password\"&gt;</kbd>",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
"sandboxCSS": "",
"initialCode": "<form>\n <!-- Füge E-Mail- und Passwort-Eingaben hinzu -->\n</form>",
"solution": "<form>\n <label for=\"email\">E-Mail:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n \n <label for=\"password\">Passwort:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
"solution": "<form>\n <label for=\"email\">E-Mail:</label>\n <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n \n <label for=\"password\">Passwort:</label>\n <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n</form>",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "input[type='email']",
"message": "Füge eine Eingabe mit type=\"email\" hinzu"
"message": "Füge eine Eingabe mit type=<kbd>\"email\"</kbd> hinzu"
},
{
"type": "element_exists",
"value": "input[type='password']",
"message": "Füge eine Eingabe mit type=\"password\" hinzu"
"message": "Füge eine Eingabe mit type=<kbd>\"password\"</kbd> hinzu"
},
{
"type": "element_count",
@@ -82,8 +82,8 @@
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
"sandboxCSS": "",
"initialCode": "<form>\n <label for=\"email\">E-Mail:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">Passwort:</label>\n <input type=\"password\" id=\"password\">\n \n <!-- Füge Absende-Button hinzu -->\n</form>",
"solution": "<form>\n <label for=\"email\">E-Mail:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">Passwort:</label>\n <input type=\"password\" id=\"password\">\n \n <button type=\"submit\">Anmelden</button>\n</form>",
"initialCode": "<form>\n <label for=\"email\">E-Mail:</label>\n <input type=<kbd>\"email\"</kbd> id=\"email\">\n \n <label for=\"password\">Passwort:</label>\n <input type=<kbd>\"password\"</kbd> id=\"password\">\n \n <!-- Füge Absende-Button hinzu -->\n</form>",
"solution": "<form>\n <label for=\"email\">E-Mail:</label>\n <input type=<kbd>\"email\"</kbd> id=\"email\">\n \n <label for=\"password\">Passwort:</label>\n <input type=<kbd>\"password\"</kbd> id=\"password\">\n \n <button type=\"submit\">Anmelden</button>\n</form>",
"previewContainer": "preview-area",
"validations": [
{