public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

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

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-11 14:55:43 +01:00
parent 85f2aa47fe
commit 386109733b
10 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lessons/23-html-details-summary.json
View File

@@ -17,6 +17,10 @@
"initialCode": "",
"solution": "<details>\n <summary>Click to reveal</summary>\n <p>This content was hidden!</p>\n</details>",
"previewContainer": "preview-area",
"concept": {
"explanation": "The details element is a native disclosure widget built into HTML5, meaning the browser handles all the show/hide logic without requiring JavaScript or CSS. When clicked, the browser toggles an internal 'open' state and applies native styling (like the disclosure triangle). This makes it accessible by default—screen readers announce it as an expandable section, and keyboard users can activate it with Enter or Space. The summary acts as a button that controls visibility of all sibling content inside the details element.",
"diagram": "Details/Summary Structure\n\n┌─────────────────────────────┐\n│ <details> │ ← Container\n│ ▸ <summary>Question</summary> │ ← Clickable toggle\n│ <!-- Hidden content --> │ (Browser renders ▸/▾)\n│ <p>Answer text...</p> │\n│ </details> │\n└─────────────────────────────┘\n\nClosed State (default):\n▸ Question\n\nOpen State:\n▾ Question\nAnswer text...\n\nBrowser Responsibilities:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n✓ Click handling\n✓ Keyboard support (Enter/Space)\n✓ Toggle arrow rendering\n✓ Screen reader announcements\n✓ Content show/hide\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
},
"validations": [
{
"type": "element_exists",
@@ -51,6 +55,10 @@
"initialCode": "<details>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
"solution": "<details open>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
"previewContainer": "preview-area",
"concept": {
"explanation": "Boolean attributes in HTML represent on/off states where presence equals true. The 'open' attribute tells the browser to render the details element in its expanded state on page load, but users can still collapse it by clicking. This is different from CSS display control—removing the attribute doesn't hide the element entirely, it just sets the initial collapsed state. JavaScript can dynamically add/remove this attribute to programmatically control the disclosure state, which fires a 'toggle' event that developers can listen to.",
"diagram": "Boolean Attribute Behavior\n\nHTML Boolean Attributes:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<details open> → Expanded\n<details> → Collapsed\n<input required> → Must be filled\n<input> → Optional\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nThe 'open' Attribute:\n\n┌─────────────────────────────┐\n│ <details open> │ ← Attribute present\n│ ▾ Summary │ = Show content\n│ Content visible │\n│ </details> │\n└─────────────────────────────┘\n\n┌─────────────────────────────┐\n│ <details> │ ← Attribute absent\n│ ▸ Summary │ = Hide content\n│ </details> │\n└─────────────────────────────┘\n\nDynamic Control:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nJS: element.open = true → Expand\nJS: element.open = false → Collapse\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
},
"validations": [
{
"type": "attribute_value",
@@ -70,6 +78,10 @@
"initialCode": "",
"solution": "<h1>Frequently Asked Questions</h1>\n\n<details>\n <summary>What is HTML5?</summary>\n <p>HTML5 is the latest version of HTML with new semantic elements and APIs.</p>\n</details>\n\n<details>\n <summary>Do I need JavaScript?</summary>\n <p>Many interactive features work with pure HTML5, no JavaScript required!</p>\n</details>\n\n<details>\n <summary>Is this accessible?</summary>\n <p>Yes! Native HTML elements have built-in keyboard and screen reader support.</p>\n</details>",
"previewContainer": "preview-area",
"concept": {
"explanation": "Unlike many JavaScript accordion libraries that only allow one open panel at a time, native details elements are independent by default—users can open as many as they want simultaneously. This behavior is more user-friendly because it doesn't force users to lose their place when exploring multiple topics. Each details element maintains its own open/closed state in the DOM, so users can bookmark or reload the page and the browser may restore the state. The lack of mutual exclusivity is a feature, not a bug—if you need exclusive accordion behavior, you must add JavaScript to close siblings when one opens.",
"diagram": "Independent Accordion Pattern\n\nTraditional JS Accordion (Exclusive):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n▸ Question 1\n▾ Question 2 ← Only one can be\n Answer... open at a time\n▸ Question 3\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nNative Details (Independent):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n▾ Question 1 ← Multiple can be\n Answer... open at once\n▾ Question 2 (User choice!)\n Answer...\n▸ Question 3\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nBenefits:\n✓ Compare multiple answers\n✓ Print all expanded content\n✓ No state management complexity\n✓ Browser handles persistence\n\nTo Make Exclusive:\nAdd JS to listen for 'toggle' event\nand close siblings when one opens"
},
"validations": [
{
"type": "element_exists",