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

lessons/32-html-svg.json

@@ -17,6 +17,10 @@
 			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"steelblue\" />\n</svg>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "SVG (Scalable Vector Graphics) defines graphics mathematically rather than as pixels, meaning shapes stay crisp at any zoom level or screen resolution—unlike raster images (PNG, JPG) that pixelate when scaled. The browser renders SVG by calculating shape geometry at display time: a circle at (100,100) with radius 50 is recomputed for each pixel density (1x, 2x, 3x displays). This makes SVG perfect for icons, logos, charts, and responsive graphics. SVG elements are DOM nodes like HTML elements, so you can style them with CSS (fill, stroke), animate them with CSS animations or JavaScript, and attach event listeners. The coordinate system starts at top-left (0,0), with x increasing rightward and y increasing downward.",
+				"diagram": "Vector vs Raster Graphics\n\nRaster (PNG/JPG):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nStores pixels:\n100x100 image = 10,000 pixels\n\n1x display: ■■■■  (crisp)\n2x display: ▪▪▪▪  (pixelated)\n\nVector (SVG):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nStores math:\n<circle cx=\"100\" cy=\"100\" r=\"50\"/>\n\n1x display: ●  (crisp)\n2x display: ●  (still crisp!)\n\nSVG Coordinate System:\n(0,0) ─────────→ x\n  │\n  │    (100,100)\n  │       ●     ← center\n  │\n  ↓\n  y\n\nCircle Attributes:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\ncx=\"100\"  → Center X coordinate\ncy=\"100\"  → Center Y coordinate\nr=\"50\"    → Radius (pixels)\nfill=\"steelblue\" → Interior color\n\nBenefits:\n✓ Resolution-independent\n✓ Small file size\n✓ CSS styleable\n✓ Animatable\n✓ Accessible (text labels)\n✓ DOM-scriptable"
+			},
 			"validations": [
 				{
 					"type": "element_exists",
@@ -66,6 +70,10 @@
 			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"tomato\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"slategray\" stroke-width=\"3\" />\n</svg>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "SVG distinguishes between filled shapes (solid interior) and stroked shapes (outline only) through fill and stroke attributes. Rectangles use top-left corner positioning (x, y) plus dimensions (width, height), while lines use start point (x1, y1) and end point (x2, y2) coordinates—no implicit fill for lines since they're one-dimensional. Lines require an explicit stroke to be visible because fill doesn't apply to one-dimensional paths. Stroke-width controls line thickness in user units (typically pixels), and additional stroke properties like stroke-linecap (round, square, butt) and stroke-linejoin (round, bevel, miter) control how stroke endpoints and corners render. SVG's presentation attributes (fill, stroke) can be overridden by CSS for dynamic styling.",
+				"diagram": "SVG Shape Positioning\n\nRectangle Coordinates:\n(0,0)\n  ┌─────────────────→ x\n  │  (20,20)\n  │    ┌────────┐  ← x=\"20\" y=\"20\"\n  │    │        │    width=\"80\"\n  │    │  rect  │    height=\"60\"\n  │    └────────┘\n  ↓\n  y\n\nLine Coordinates:\n(x1,y1)          (x2,y2)\n  ●───────────────●\n(120,30)      (180,90)\n  ↑ start         ↑ end\n\nFill vs Stroke:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<rect fill=\"red\">   ← Solid interior\n<rect fill=\"red\" stroke=\"black\" stroke-width=\"2\">\n  ↑ interior       ↑ outline\n\n<line stroke=\"blue\">  ← Only visible\n<line fill=\"red\">     ← Ignored!\n\nStroke Properties:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nstroke=\"color\"\nstroke-width=\"3\"       → Thickness\nstroke-linecap=\"round\" → End shape\nstroke-dasharray=\"5,5\" → Dashed line\nstroke-opacity=\"0.5\"   → Transparency\n\nPresentation Attributes:\nHTML: <rect fill=\"red\">\nCSS:  rect { fill: red; }\nCSS wins if both present!"
+			},
 			"validations": [
 				{
 					"type": "element_exists",
@@ -150,6 +158,10 @@
 			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"gold\" stroke=\"orange\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"darkslategray\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"darkslategray\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "SVG elements stack in source order like HTML—later elements render on top of earlier ones, creating a painter's algorithm where each shape is \"painted\" over previous shapes. This z-order control means shape placement in your markup defines layering: the face circle must come before the eye circles for eyes to appear on top. Unlike CSS z-index (which requires positioning context), SVG stacking is purely document-order based. You can group related shapes with <g> elements for organizational purposes and apply transformations or styles to the entire group. SVG's declarative nature makes it ideal for programmatic generation: you can template SVG markup or use JavaScript to create/manipulate shapes dynamically, and the browser automatically handles rendering updates.",
+				"diagram": "SVG Stacking Order\n\nSource Order = Paint Order:\n<svg>\n  <circle ... />  ← Painted first (back)\n  <circle ... />  ← Painted second\n  <circle ... />  ← Painted third\n  <line ... />    ← Painted last (front)\n</svg>\n\nVisual Result:\n     Layer 4 (front)\n       │\n     Layer 3\n       │\n     Layer 2\n       │\n     Layer 1 (back)\n\nSmiley Face Example:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n1. Face (large circle)\n2. Left eye (small circle) ─┐\n3. Right eye (small circle) ├→ On top of face\n4. Smile (line)            ─┘\n\nGrouping with <g>:\n<g id=\"eyes\">\n  <circle cx=\"70\" cy=\"80\" r=\"10\"/>\n  <circle cx=\"130\" cy=\"80\" r=\"10\"/>\n</g>\n\nBenefits:\n✓ Apply transform to group\n✓ Style entire group\n✓ Semantic organization\n✓ Easy to show/hide\n\nDynamic SVG:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nJS: circle.setAttribute('r', 60);\n→ Browser re-renders instantly\n\nJS: svg.innerHTML += '<circle.../>';\n→ Add shapes dynamically\n\nvs Canvas:\nSVG = Retained mode (DOM)\nCanvas = Immediate mode (pixels)"
+			},
 			"validations": [
 				{
 					"type": "element_exists",