From 1d26a70b388d80c7ba95326891bc337cb4595e8c Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Mon, 22 Dec 2025 10:38:53 +0100
Subject: [PATCH] fix: rename solutionCode to solution in HTML lesson files

Consistent property naming across all lesson files - the LessonEngine
expects 'solution' property for rendering expected preview.
---
 lessons/20-html-elements.json         | 6 +++---
 lessons/21-html-forms-basic.json      | 6 +++---
 lessons/22-html-forms-validation.json | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lessons/20-html-elements.json b/lessons/20-html-elements.json
index b7a9c39..961a612 100644
--- a/lessons/20-html-elements.json
+++ b/lessons/20-html-elements.json
@@ -15,7 +15,7 @@
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
 			"sandboxCSS": "",
 			"initialCode": "<p>This is a paragraph with an important word.</p>",
-			"solutionCode": "<p>This is a paragraph with an <strong>important</strong> word.</p>",
+			"solution": "<p>This is a paragraph with an <strong>important</strong> word.</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -39,7 +39,7 @@
 			"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": "<!-- Create your page structure here -->",
-			"solutionCode": "<header>\n  <h1>My Website</h1>\n</header>\n<main>\n  <p>Welcome to my site!</p>\n</main>\n<footer>\n  <p>Copyright 2025</p>\n</footer>",
+			"solution": "<header>\n  <h1>My Website</h1>\n</header>\n<main>\n  <p>Welcome to my site!</p>\n</main>\n<footer>\n  <p>Copyright 2025</p>\n</footer>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -73,7 +73,7 @@
 			"previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }",
 			"sandboxCSS": "",
 			"initialCode": "The most highlighted moment was unforgettable.",
-			"solutionCode": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
+			"solution": "<div>The most <span>highlighted</span> moment was unforgettable.</div>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
diff --git a/lessons/21-html-forms-basic.json b/lessons/21-html-forms-basic.json
index a59ef13..1ee44ec 100644
--- a/lessons/21-html-forms-basic.json
+++ b/lessons/21-html-forms-basic.json
@@ -15,7 +15,7 @@
 			"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": "<!-- Create your form here -->",
-			"solutionCode": "<form>\n  <label for=\"name\">Name:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Name:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -54,7 +54,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <!-- Add email and password inputs -->\n</form>",
-			"solutionCode": "<form>\n  <div class=\"form-group\">\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n  </div>\n  <div class=\"form-group\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\" name=\"password\">\n  </div>\n</form>",
+			"solution": "<form>\n  <div class=\"form-group\">\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n  </div>\n  <div class=\"form-group\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\" name=\"password\">\n  </div>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -83,7 +83,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <div class=\"form-group\">\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\">\n  </div>\n  <div class=\"form-group\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\">\n  </div>\n  <!-- Add submit button -->\n</form>",
-			"solutionCode": "<form>\n  <div class=\"form-group\">\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\">\n  </div>\n  <div class=\"form-group\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\">\n  </div>\n  <button type=\"submit\">Sign In</button>\n</form>",
+			"solution": "<form>\n  <div class=\"form-group\">\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\">\n  </div>\n  <div class=\"form-group\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\">\n  </div>\n  <button type=\"submit\">Sign In</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
diff --git a/lessons/22-html-forms-validation.json b/lessons/22-html-forms-validation.json
index bebf3ed..150cd9b 100644
--- a/lessons/22-html-forms-validation.json
+++ b/lessons/22-html-forms-validation.json
@@ -15,7 +15,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } label .required { color: #d32f2f; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <div class=\"form-group\">\n    <label for=\"name\">Name: <span class=\"required\">*</span></label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n  </div>\n  <div class=\"form-group\">\n    <label for=\"email\">Email: <span class=\"required\">*</span></label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n  </div>\n  <button type=\"submit\">Submit</button>\n</form>",
-			"solutionCode": "<form>\n  <div class=\"form-group\">\n    <label for=\"name\">Name: <span class=\"required\">*</span></label>\n    <input type=\"text\" id=\"name\" name=\"name\" required>\n  </div>\n  <div class=\"form-group\">\n    <label for=\"email\">Email: <span class=\"required\">*</span></label>\n    <input type=\"email\" id=\"email\" name=\"email\" required>\n  </div>\n  <button type=\"submit\">Submit</button>\n</form>",
+			"solution": "<form>\n  <div class=\"form-group\">\n    <label for=\"name\">Name: <span class=\"required\">*</span></label>\n    <input type=\"text\" id=\"name\" name=\"name\" required>\n  </div>\n  <div class=\"form-group\">\n    <label for=\"email\">Email: <span class=\"required\">*</span></label>\n    <input type=\"email\" id=\"email\" name=\"email\" required>\n  </div>\n  <button type=\"submit\">Submit</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -39,7 +39,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } .hint { font-size: 12px; color: #666; margin-top: 4px; } button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <div class=\"form-group\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\" name=\"password\" required>\n    <div class=\"hint\">Must be 8-20 characters</div>\n  </div>\n  <button type=\"submit\">Create Account</button>\n</form>",
-			"solutionCode": "<form>\n  <div class=\"form-group\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\">\n    <div class=\"hint\">Must be 8-20 characters</div>\n  </div>\n  <button type=\"submit\">Create Account</button>\n</form>",
+			"solution": "<form>\n  <div class=\"form-group\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\">\n    <div class=\"hint\">Must be 8-20 characters</div>\n  </div>\n  <button type=\"submit\">Create Account</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -68,7 +68,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } .form-group { margin-bottom: 18px; } label { display: block; margin-bottom: 5px; font-weight: 500; } .required { color: #d32f2f; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } .checkbox-group { display: flex; align-items: flex-start; gap: 8px; } .checkbox-group input { width: auto; margin-top: 3px; } .checkbox-group label { margin: 0; font-weight: normal; } button { width: 100%; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <h2>Create Account</h2>\n  \n  <div class=\"form-group\">\n    <label for=\"fullname\">Full Name <span class=\"required\">*</span></label>\n    <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  </div>\n  \n  <div class=\"form-group\">\n    <label for=\"email\">Email <span class=\"required\">*</span></label>\n    <input id=\"email\" name=\"email\">\n  </div>\n  \n  <div class=\"form-group\">\n    <label for=\"password\">Password <span class=\"required\">*</span></label>\n    <input id=\"password\" name=\"password\">\n  </div>\n  \n  <div class=\"form-group checkbox-group\">\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    <label for=\"terms\">I agree to the Terms of Service <span class=\"required\">*</span></label>\n  </div>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"solutionCode": "<form>\n  <h2>Create Account</h2>\n  \n  <div class=\"form-group\">\n    <label for=\"fullname\">Full Name <span class=\"required\">*</span></label>\n    <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  </div>\n  \n  <div class=\"form-group\">\n    <label for=\"email\">Email <span class=\"required\">*</span></label>\n    <input type=\"email\" id=\"email\" name=\"email\" required>\n  </div>\n  \n  <div class=\"form-group\">\n    <label for=\"password\">Password <span class=\"required\">*</span></label>\n    <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  </div>\n  \n  <div class=\"form-group checkbox-group\">\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    <label for=\"terms\">I agree to the Terms of Service <span class=\"required\">*</span></label>\n  </div>\n  \n  <button type=\"submit\">Register</button>\n</form>",
+			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <div class=\"form-group\">\n    <label for=\"fullname\">Full Name <span class=\"required\">*</span></label>\n    <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  </div>\n  \n  <div class=\"form-group\">\n    <label for=\"email\">Email <span class=\"required\">*</span></label>\n    <input type=\"email\" id=\"email\" name=\"email\" required>\n  </div>\n  \n  <div class=\"form-group\">\n    <label for=\"password\">Password <span class=\"required\">*</span></label>\n    <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  </div>\n  \n  <div class=\"form-group checkbox-group\">\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    <label for=\"terms\">I agree to the Terms of Service <span class=\"required\">*</span></label>\n  </div>\n  \n  <button type=\"submit\">Register</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{