feat(i18n): add support for Polish, Spanish, Arabic, and Ukrainian

- Create lesson directories and copy English lessons as templates - Add full UI translations for pl, es, ar, uk languages - Update lessons.js with module stores for all new languages - Implement language cycling (en → de → pl → es → ar → uk → en) - Fix playground mode detection (lesson.mode takes precedence)
2025-12-31 01:45:52 +01:00
parent 7744468aaa
commit 513c5a8506
63 changed files with 9275 additions and 8 deletions
--- a/lessons/ar/24-html-progress-meter.json
+++ b/lessons/ar/24-html-progress-meter.json
@@ -0,0 +1,102 @@
+{
+	"$schema": "../../schemas/code-crispies-module-schema.json",
+	"id": "html-progress-meter",
+	"title": "HTML Progress & Meter",
+	"description": "Display completion status and scalar measurements natively",
+	"mode": "html",
+	"difficulty": "beginner",
+	"lessons": [
+		{
+			"id": "progress-basic",
+			"title": "Progress Bars",
+			"description": "The <kbd>&lt;progress&gt;</kbd> element shows task completion. Use <kbd>value</kbd> for current progress and <kbd>max</kbd> for the total.<br><br><b>Note:</b> This is not a self-closing tag! Write <kbd>&lt;progress&gt;...&lt;/progress&gt;</kbd> with fallback text inside for older browsers.",
+			"task": "Create a progress bar showing 70% completion:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying 'Download:'<br>2. Add a <kbd>&lt;progress&gt;</kbd> with <kbd>value=\"70\"</kbd> and <kbd>max=\"100\"</kbd>",
+			"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": "",
+			"solution": "<label for=\"download\">Download:</label>\n<progress id=\"download\" value=\"70\" max=\"100\">70%</progress>",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "element_exists",
+					"value": "progress",
+					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "progress", "attr": "value", "value": "70" },
+					"message": "Set <kbd>value=</kbd>\"70\" on the progress element"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "progress", "attr": "max", "value": "100" },
+					"message": "Set <kbd>max=</kbd>\"100\" on the progress element"
+				},
+				{
+					"type": "element_exists",
+					"value": "label",
+					"message": "Add a <kbd>&lt;label&gt;</kbd> for the progress bar"
+				}
+			]
+		},
+		{
+			"id": "progress-indeterminate",
+			"title": "Indeterminate Progress",
+			"description": "When progress is unknown (like loading), omit the <kbd>value</kbd> attribute. This creates an animated indeterminate state.<br><br>Useful for network requests or processes with unknown duration.",
+			"task": "Create a loading indicator:<br>1. Add a <kbd>&lt;p&gt;</kbd> saying 'Loading...'<br>2. Add a <kbd>&lt;progress&gt;</kbd> without a value attribute",
+			"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": "",
+			"solution": "<p>Loading...</p>\n<progress></progress>",
+			"previewContainer": "preview-area",
+			"validations": [
+				{
+					"type": "element_exists",
+					"value": "progress",
+					"message": "Add a <kbd>&lt;progress&gt;</kbd> element"
+				},
+				{
+					"type": "element_exists",
+					"value": "p",
+					"message": "Add a <kbd>&lt;p&gt;</kbd> with loading text"
+				}
+			]
+		},
+		{
+			"id": "meter-gauge",
+			"title": "Meter Gauges",
+			"description": "The <kbd>&lt;meter&gt;</kbd> element displays a scalar value within a range. Use it for measurements like disk space, battery, or ratings.<br><br>Set <kbd>low</kbd>, <kbd>high</kbd>, and <kbd>optimum</kbd> to define good/bad ranges - the browser colors it accordingly!",
+			"task": "Create a battery level meter:<br>1. Add a <kbd>&lt;label&gt;</kbd> saying 'Battery:'<br>2. Add a <kbd>&lt;meter&gt;</kbd> with:<br>   - <kbd>value=\"0.8\"</kbd><br>   - <kbd>min=\"0\"</kbd> and <kbd>max=\"1\"</kbd><br>   - <kbd>low=\"0.2\"</kbd> and <kbd>high=\"0.8\"</kbd><br>   - <kbd>optimum=\"1\"</kbd>",
+			"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": "",
+			"solution": "<label for=\"battery\">Battery:</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": [
+				{
+					"type": "element_exists",
+					"value": "meter",
+					"message": "Add a <kbd>&lt;meter&gt;</kbd> element"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "value", "value": "0.8" },
+					"message": "Set <kbd>value=</kbd>\"0.8\" on the meter"
+				},
+				{
+					"type": "attribute_value",
+					"value": { "selector": "meter", "attr": "low", "value": "0.2" },
+					"message": "Set <kbd>low=</kbd>\"0.2\" to define the low threshold"
+				},
+				{
+					"type": "element_exists",
+					"value": "label",
+					"message": "Add a <kbd>&lt;label&gt;</kbd> for the meter"
+				}
+			]
+		}
+	]
+}