fix: add kbd tags to validation messages for clarity

- 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:
2025-12-25 15:55:26 +01:00
parent 935969a80c
commit 31407dcb51
27 changed files with 230 additions and 222 deletions

View File

@@ -21,22 +21,22 @@
{
"type": "element_exists",
"value": "details",
"message": "Füge ein <details>-Element hinzu"
"message": "Füge ein <kbd>&lt;details&gt;</kbd>-Element hinzu"
},
{
"type": "element_exists",
"value": "summary",
"message": "Füge ein <summary> innerhalb von details hinzu"
"message": "Füge ein <kbd>&lt;summary&gt;</kbd> innerhalb von details hinzu"
},
{
"type": "parent_child",
"value": { "parent": "details", "child": "summary" },
"message": "Das <summary> muss innerhalb von <details> sein"
"message": "Das <kbd>&lt;summary&gt;</kbd> muss innerhalb von <details> sein"
},
{
"type": "parent_child",
"value": { "parent": "details", "child": "p" },
"message": "Füge ein <p> innerhalb von <details> für den versteckten Inhalt hinzu"
"message": "Füge ein <kbd>&lt;p&gt;</kbd> innerhalb von <details> für den versteckten Inhalt hinzu"
}
]
},
@@ -55,7 +55,7 @@
{
"type": "attribute_value",
"value": { "selector": "details", "attr": "open", "value": true },
"message": "Füge das 'open'-Attribut zu <details> hinzu"
"message": "Füge das <kbd>open</kbd>-Attribut zu <details> hinzu"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "element_exists",
"value": "h1",
"message": "Füge eine <h1>-Überschrift für den FAQ-Titel hinzu"
"message": "Füge eine <kbd>&lt;h1&gt;</kbd>-Überschrift für den FAQ-Titel hinzu"
},
{
"type": "element_count",
@@ -84,12 +84,12 @@
{
"type": "element_count",
"value": { "selector": "summary", "min": 3 },
"message": "Jedes <details> braucht ein <summary> für die Frage"
"message": "Jedes <kbd>&lt;details&gt;</kbd> braucht ein <kbd>&lt;summary&gt;</kbd> für die Frage"
},
{
"type": "element_count",
"value": { "selector": "details p", "min": 3 },
"message": "Jedes <details> braucht ein <p> für die Antwort"
"message": "Jedes <kbd>&lt;details&gt;</kbd> braucht ein <kbd>&lt;p&gt;</kbd> für die Antwort"
}
]
}