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

lessons/31-html-marquee.json

@@ -17,6 +17,10 @@
 			"initialCode": "",
 			"solution": "<marquee>Welcome to my website!</marquee>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "Marquee is a non-standard HTML element introduced by Netscape in the 1990s that created auto-scrolling text without JavaScript—browsers handled animation entirely natively. While deprecated by W3C standards (never officially standardized), browsers still support it for backward compatibility with legacy websites. The element teaches an important web history lesson: browser vendors sometimes implement features unilaterally, and if popular enough, those features persist even after standards bodies reject them. Modern development uses CSS animations (`@keyframes` + `animation`) or JavaScript for scrolling effects, giving developers more control and adhering to web standards, but marquee demonstrates how declarative HTML can embed behavior.",
+				"diagram": "Marquee: A Web History Lesson\n\nTimeline:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n1995 → Netscape adds <marquee>\n1996 → IE copies it (vendor wars)\n2000s → W3C: \"This is non-standard\"\n2024 → Still works! (legacy compat)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nHow It Works:\n<marquee>Text</marquee>\n  ↓\nBrowser sees marquee element\n  ↓\nNative animation engine starts\n  ↓\nText scrolls without JS/CSS\n\nModern Equivalent:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<div class=\"scroll\">Text</div>\n\n.scroll {\n  animation: scroll 10s linear infinite;\n}\n\n@keyframes scroll {\n  from { transform: translateX(100%); }\n  to { transform: translateX(-100%); }\n}\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nWhy Deprecated?\n✗ Non-standard (vendor-specific)\n✗ Accessibility issues (motion)\n✗ Limited control\n✗ No standard API\n\n✓ Use CSS animations instead\n✓ Add prefers-reduced-motion\n✓ Full control over timing/easing"
+			},
 			"validations": [
 				{
 					"type": "element_exists",
@@ -36,6 +40,10 @@
 			"initialCode": "",
 			"solution": "<marquee behavior=\"alternate\">Bounce! Bounce! Bounce!</marquee>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "Marquee attributes control animation parameters through HTML rather than CSS or JavaScript—this declarative approach was innovative for the 1990s but inflexible by modern standards. The behavior attribute changes motion physics: 'scroll' creates continuous looping (exits one side, enters opposite), 'slide' stops when reaching the edge (one-time animation), and 'alternate' bounces back and forth (ping-pong effect). Direction controls axis (left/right for horizontal, up/down for vertical), and scrollamount sets pixels moved per frame (higher = faster). These attributes demonstrate early attempts at animation control before CSS animations existed, showing how HTML sometimes blurred the line between structure and presentation.",
+				"diagram": "Marquee Behaviors\n\nbehavior=\"scroll\" (default):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n→ Text → → → → → (loops)\n\nbehavior=\"slide\":\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n→ Text → → STOP\n(animates once, stops at edge)\n\nbehavior=\"alternate\":\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n→ Text → → ← ← Text ← ←\n(bounces back and forth)\n\nDirection:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\ndirection=\"left\"  →  Text moves ←\ndirection=\"right\" →  Text moves →\ndirection=\"up\"    →  Text moves ↑\ndirection=\"down\"  →  Text moves ↓\n\nSpeed Control:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nscrollamount=\"1\"  → Slow (1px/frame)\nscrollamount=\"6\"  → Default\nscrollamount=\"20\" → Fast (20px/frame)\n\nCombinations:\n<marquee direction=\"right\" \n         behavior=\"alternate\"\n         scrollamount=\"10\">\n  Bounces horizontally at 10px/frame\n</marquee>"
+			},
 			"validations": [
 				{
 					"type": "element_exists",
@@ -60,6 +68,10 @@
 			"initialCode": "",
 			"solution": "<marquee direction=\"left\" scrollamount=\"5\">BREAKING NEWS: Marquee element still works in browsers!</marquee>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "Marquee represents a cautionary tale about web standards versus implementation reality: despite being deprecated for over a decade and never formally standardized, browsers maintain support because removing it would break thousands of legacy websites. This teaches the web's core principle of \"don't break the web\"—backward compatibility trumps clean standards. Modern developers should avoid marquee for accessibility reasons (motion can trigger vestibular disorders, and it ignores prefers-reduced-motion), lack of control (can't pause on hover, sync with other animations, or adjust timing curves), and semantic incorrectness (mixing behavior into structure). Instead, CSS animations provide the same visual effects with full control, accessibility hooks, and standards compliance.",
+				"diagram": "Legacy Compat vs Modern Standards\n\nThe \"Don't Break the Web\" Principle:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n1995 → Site uses <marquee>\n2024 → Site still online (unchanged)\n      → Browser must still support it\n      → Can't remove deprecated feature\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nAccessibility Issues:\n✗ Triggers motion sickness\n✗ Ignores prefers-reduced-motion\n✗ Can't pause on hover\n✗ Distracts from content\n✗ Not keyboard-accessible\n\nModern Replacement:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nHTML:\n<div class=\"ticker\">BREAKING NEWS</div>\n\nCSS:\n@media (prefers-reduced-motion: no-preference) {\n  .ticker {\n    animation: scroll 10s linear infinite;\n  }\n}\n\n@keyframes scroll {\n  from { transform: translateX(100%); }\n  to { transform: translateX(-100%); }\n}\n\n.ticker:hover {\n  animation-play-state: paused;\n}\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nLesson Learned:\n✓ Standards matter\n✓ Accessibility first\n✓ Use CSS for presentation\n✓ Don't mix behavior into HTML\n✓ Respect user preferences"
+			},
 			"validations": [
 				{
 					"type": "element_exists",