From 2f2969da11c0983c0fe22f5ec32dcaf09f9a34da Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Tue, 30 Dec 2025 12:25:22 +0100
Subject: [PATCH] fix: escape HTML tags in lesson validation messages

Prevent HTML elements like <details>, <option>, <form> from being
rendered as actual elements in hint messages by properly escaping
them with &lt; &gt; and wrapping in <kbd> tags.
---
 lessons/23-html-details-summary.json    |  8 ++++----
 lessons/25-html-datalist.json           |  2 +-
 lessons/27-html-dialog.json             |  4 ++--
 lessons/de/23-html-details-summary.json | 10 +++++-----
 lessons/de/25-html-datalist.json        |  2 +-
 lessons/de/27-html-dialog.json          |  4 ++--
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/lessons/23-html-details-summary.json b/lessons/23-html-details-summary.json
index b493640..867c83d 100644
--- a/lessons/23-html-details-summary.json
+++ b/lessons/23-html-details-summary.json
@@ -55,7 +55,7 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "details", "attr": "open", "value": true },
-					"message": "Add the <kbd>open</kbd> attribute to <details>"
+					"message": "Add the <kbd>open</kbd> attribute to <kbd>&lt;details&gt;</kbd>"
 				}
 			]
 		},
@@ -79,17 +79,17 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "details", "min": 3 },
-					"message": "Create at least 3 <details> elements for the FAQ"
+					"message": "Create at least 3 <kbd>&lt;details&gt;</kbd> elements for the FAQ"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "summary", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <summary> for the question"
+					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;summary&gt;</kbd> for the question"
 				},
 				{
 					"type": "element_count",
 					"value": { "selector": "details p", "min": 3 },
-					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <p> for the answer"
+					"message": "Each <kbd>&lt;details&gt;</kbd> needs a <kbd>&lt;p&gt;</kbd> for the answer"
 				}
 			]
 		}
diff --git a/lessons/25-html-datalist.json b/lessons/25-html-datalist.json
index 84e2fd5..a420075 100644
--- a/lessons/25-html-datalist.json
+++ b/lessons/25-html-datalist.json
@@ -31,7 +31,7 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 3 },
-					"message": "Add at least 3 <option> elements inside datalist"
+					"message": "Add at least 3 <kbd>&lt;option&gt;</kbd> elements inside <kbd>&lt;datalist&gt;</kbd>"
 				},
 				{
 					"type": "element_exists",
diff --git a/lessons/27-html-dialog.json b/lessons/27-html-dialog.json
index fc33f08..e7331c8 100644
--- a/lessons/27-html-dialog.json
+++ b/lessons/27-html-dialog.json
@@ -36,7 +36,7 @@
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <form method=\"dialog\"> for closing"
+					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for closing"
 				},
 				{
 					"type": "element_exists",
@@ -70,7 +70,7 @@
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Add a <form method=\"dialog\"> for the buttons"
+					"message": "Add a <kbd>&lt;form method=\"dialog\"&gt;</kbd> for the buttons"
 				},
 				{
 					"type": "element_count",
diff --git a/lessons/de/23-html-details-summary.json b/lessons/de/23-html-details-summary.json
index b4c32aa..32b9d15 100644
--- a/lessons/de/23-html-details-summary.json
+++ b/lessons/de/23-html-details-summary.json
@@ -26,17 +26,17 @@
 				{
 					"type": "element_exists",
 					"value": "summary",
-					"message": "Füge ein <kbd>&lt;summary&gt;</kbd> innerhalb von details hinzu"
+					"message": "Füge ein <kbd>&lt;summary&gt;</kbd> innerhalb von <kbd>&lt;details&gt;</kbd> hinzu"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "summary" },
-					"message": "Das <kbd>&lt;summary&gt;</kbd> muss innerhalb von <details> sein"
+					"message": "Das <kbd>&lt;summary&gt;</kbd> muss innerhalb von <kbd>&lt;details&gt;</kbd> sein"
 				},
 				{
 					"type": "parent_child",
 					"value": { "parent": "details", "child": "p" },
-					"message": "Füge ein <kbd>&lt;p&gt;</kbd> innerhalb von <details> für den versteckten Inhalt hinzu"
+					"message": "Füge ein <kbd>&lt;p&gt;</kbd> innerhalb von <kbd>&lt;details&gt;</kbd> für den versteckten Inhalt hinzu"
 				}
 			]
 		},
@@ -55,7 +55,7 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "details", "attr": "open", "value": true },
-					"message": "Füge das <kbd>open</kbd>-Attribut zu <details> hinzu"
+					"message": "Füge das <kbd>open</kbd>-Attribut zu <kbd>&lt;details&gt;</kbd> hinzu"
 				}
 			]
 		},
@@ -79,7 +79,7 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "details", "min": 3 },
-					"message": "Erstelle mindestens 3 <details>-Elemente für das FAQ"
+					"message": "Erstelle mindestens 3 <kbd>&lt;details&gt;</kbd>-Elemente für das FAQ"
 				},
 				{
 					"type": "element_count",
diff --git a/lessons/de/25-html-datalist.json b/lessons/de/25-html-datalist.json
index e460191..88f7222 100644
--- a/lessons/de/25-html-datalist.json
+++ b/lessons/de/25-html-datalist.json
@@ -31,7 +31,7 @@
 				{
 					"type": "element_count",
 					"value": { "selector": "option", "min": 3 },
-					"message": "Füge mindestens 3 <option>-Elemente in die Datalist ein"
+					"message": "Füge mindestens 3 <kbd>&lt;option&gt;</kbd>-Elemente in die <kbd>&lt;datalist&gt;</kbd> ein"
 				},
 				{
 					"type": "element_exists",
diff --git a/lessons/de/27-html-dialog.json b/lessons/de/27-html-dialog.json
index 027b111..4618b61 100644
--- a/lessons/de/27-html-dialog.json
+++ b/lessons/de/27-html-dialog.json
@@ -36,7 +36,7 @@
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Füge ein <form method=\"dialog\"> zum Schließen hinzu"
+					"message": "Füge ein <kbd>&lt;form method=\"dialog\"&gt;</kbd> zum Schließen hinzu"
 				},
 				{
 					"type": "element_exists",
@@ -70,7 +70,7 @@
 				{
 					"type": "element_exists",
 					"value": "form[method='dialog']",
-					"message": "Füge ein <form method=\"dialog\"> für die Buttons hinzu"
+					"message": "Füge ein <kbd>&lt;form method=\"dialog\"&gt;</kbd> für die Buttons hinzu"
 				},
 				{
 					"type": "element_count",