auto-claude: 5.3 - Add explanations to details/summary, progress/mete

lessons/24-html-progress-meter.json

@@ -17,6 +17,10 @@
 			"initialCode": "",
 			"solution": "<label for=\"download\">Download:</label>\n<progress id=\"download\" value=\"70\" max=\"100\">70%</progress>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "The progress element represents completion of a task with a known duration or endpoint—the browser calculates the fill percentage by dividing value by max. Browsers render progress bars with native OS styling by default, which means they look different on Windows, macOS, iOS, and Android, giving each platform's users a familiar appearance. Screen readers announce the completion percentage automatically (\"70 percent\"), and the element has an implicit ARIA role of 'progressbar'. JavaScript can update the value attribute dynamically to reflect real-time progress, and the text content inside serves as fallback for browsers that don't support progress.",
+				"diagram": "Progress Element Calculation\n\nFormula:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nFill % = (value / max) × 100\n\nExample:\n<progress value=\"70\" max=\"100\">\n\n   70 ÷ 100 = 0.7 → 70% filled\n\n┌─────────────────────────────┐\n│ Download:                   │\n├─────────────────────────────┤\n│ ████████████████░░░░░░░░░░  │ 70%\n└─────────────────────────────┘\n  ← 70 units →  ← 30 units →\n\nUpdating Progress:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nJS: element.value = 50  → 50%\nJS: element.value = 100 → 100%\n\nAccessibility:\nScreen reader announces:\n\"Download, progress bar, 70 percent\"\n\nFallback Content:\n<progress value=\"70\" max=\"100\">\n  70%  ← Shown in old browsers\n</progress>"
+			},
 			"validations": [
 				{
 					"type": "element_exists",
@@ -51,6 +55,10 @@
 			"initialCode": "",
 			"solution": "<p>Loading...</p>\n<progress></progress>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "Indeterminate state communicates \"something is happening, but we don't know when it will finish\"—browsers render this with an animated pattern that moves continuously to show activity without implying a specific completion percentage. The animation style is platform-native: macOS uses a barber-pole stripe pattern, Windows uses a pulsing dot animation, and browsers may customize the appearance. This semantic distinction matters because it sets correct user expectations—a filled bar implies \"almost done\" while an animated loop implies \"still working\". Screen readers announce indeterminate progress as \"progress bar, busy\" rather than announcing a percentage.",
+				"diagram": "Determinate vs Indeterminate\n\nDeterminate (value present):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<progress value=\"70\" max=\"100\">\n┌─────────────────────────────┐\n│ ████████████████░░░░░░░░░░  │ 70%\n└─────────────────────────────┘\n  ↑ Known progress\n\nIndeterminate (no value):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<progress></progress>\n┌─────────────────────────────┐\n│ ░░▓▓▓░░░░░░░░░░░░░░░░░░░░░  │ Animating\n└─────────────────────────────┘\n  ↑ Unknown duration\n\nBrowser Animations:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nmacOS    → Barber-pole stripes\nWindows  → Pulsing dots\nAndroid  → Circular spinner\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nUse Cases:\n✓ Network requests\n✓ File processing\n✓ Background sync\n✓ Unknown wait time\n\nScreen Reader:\n\"Progress bar, busy\""
+			},
 			"validations": [
 				{
 					"type": "element_exists",
@@ -75,6 +83,10 @@
 			"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",
+			"concept": {
+				"explanation": "Unlike progress (which shows task completion moving toward 100%), meter represents a measurement at a point in time that can be good or bad depending on context. The browser uses low/high/optimum thresholds to automatically color-code the gauge: green when value is near optimum, yellow in the middle range, and red when critically low or high. For example, battery at 80% is green (good), 40% is yellow (warning), and 10% is red (critical). This semantic intelligence means you don't need CSS—the browser applies appropriate colors based on your threshold values and whether higher or lower is better.",
+				"diagram": "Meter Threshold Logic\n\nAttributes:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nmin=\"0\"     → Range start\nmax=\"1\"     → Range end\nlow=\"0.2\"   → Below this = bad\nhigh=\"0.8\"  → Above this = depends\noptimum=\"1\" → Ideal value\nvalue=\"0.8\" → Current measurement\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nAutomatic Color Zones:\n\nBattery (optimum=high):\n┌─────────────────────────────┐\n│ 0.0 ────────────────── 1.0  │\n│  RED   YELLOW    GREEN      │\n│ 0─0.2  0.2─0.8  0.8─1.0     │\n└─────────────────────────────┘\n         ↑ value=0.8 (green)\n\nDisk Usage (optimum=low):\n┌─────────────────────────────┐\n│ 0% ─────────────────── 100% │\n│ GREEN   YELLOW    RED       │\n│ 0─20    20─80    80─100     │\n└─────────────────────────────┘\n                 ↑ 90% (red)\n\nvs Progress:\nmeter   → Snapshot measurement\nprogress → Task moving to 100%"
+			},
 			"validations": [
 				{
 					"type": "element_exists",