auto-claude: 5.3 - Add explanations to details/summary, progress/mete
This commit is contained in:
@@ -17,6 +17,10 @@
|
||||
"initialCode": "",
|
||||
"solution": "<form>\n <fieldset>\n <legend>Personal Info</legend>\n <label for=\"name\">Name:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n </fieldset>\n</form>",
|
||||
"previewContainer": "preview-area",
|
||||
"concept": {
|
||||
"explanation": "Fieldset creates a semantic grouping that browsers and assistive technology understand as related form controls, not just a visual border. When a screen reader enters a fieldset, it announces the legend before each control (\"Personal Info, Name, edit text\"), providing context without repetition in every label. The browser also establishes a form control context: disabling the fieldset (disabled attribute) automatically disables all inputs inside, and form validation can be scoped to fieldsets. This semantic structure is crucial for complex forms—it transforms a flat list of inputs into a hierarchical document with clear relationships, improving both accessibility and maintainability.",
|
||||
"diagram": "Fieldset Semantic Structure\n\nHTML:\n<form>\n <fieldset>\n <legend>Personal Info</legend>\n <label>Name: <input></label>\n <label>Email: <input></label>\n </fieldset>\n</form>\n\nScreen Reader Experience:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\"Personal Info, group\"\n → Focus first input\n \"Personal Info, Name, edit text\"\n → Tab to next input\n \"Personal Info, Email, edit text\"\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nContext announced once, then reused\n\nDisabled Propagation:\n\n<fieldset disabled>\n <input> ← Automatically disabled\n <input> ← Automatically disabled\n</fieldset>\n\nvs Individual Disabling:\n<input disabled>\n<input disabled> ← Must repeat\n\nForm Structure:\n\nFlat (no grouping):\n✗ Name\n✗ Email\n✗ Street\n✗ City\n\nGrouped (semantic):\n✓ Personal Info\n ✓ Name\n ✓ Email\n✓ Address\n ✓ Street\n ✓ City"
|
||||
},
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_exists",
|
||||
@@ -56,6 +60,10 @@
|
||||
"initialCode": "",
|
||||
"solution": "<form>\n <fieldset>\n <legend>Contact Us</legend>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n <label for=\"message\">Message:</label>\n <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n <button type=\"submit\">Send Message</button>\n </fieldset>\n</form>",
|
||||
"previewContainer": "preview-area",
|
||||
"concept": {
|
||||
"explanation": "The textarea element is designed for multi-line text input, automatically providing scroll bars when content exceeds its dimensions and preserving line breaks and whitespace on submission. Unlike input elements which ignore Enter key (using it for form submission), textarea captures Enter as a newline character, making it suitable for addresses, comments, messages, or any free-form text. The rows and cols attributes set initial dimensions as character counts (rows for lines, cols for width in characters), but CSS width/height override these. Textarea is a container element (not self-closing), so you must use <textarea>content</textarea> syntax—any text between the tags becomes the initial value, preserving formatting.",
|
||||
"diagram": "Textarea vs Input\n\nInput (single-line):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<input type=\"text\" value=\"Hello\">\n\n┌─────────────────────────────┐\n│ Hello_ │\n└─────────────────────────────┘\n✗ Enter → Submits form\n✗ No line breaks\n✗ Self-closing tag\n\nTextarea (multi-line):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<textarea rows=\"3\">\nHello\nWorld\n</textarea>\n\n┌─────────────────────────────┐\n│ Hello │\n│ World_ │\n│ │ ← rows=\"3\"\n└─────────────────────────────┘\n✓ Enter → New line\n✓ Preserves line breaks\n✓ Container element\n✓ Auto-scrolls if overflowing\n\nSizing:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nrows=\"4\" → 4 lines tall\ncols=\"40\" → 40 chars wide\nCSS overrides → width/height\n\nValue Syntax:\n<textarea>Initial text</textarea>\nvs\n<input value=\"Initial text\">"
|
||||
},
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_exists",
|
||||
@@ -95,6 +103,10 @@
|
||||
"initialCode": "",
|
||||
"solution": "<form>\n <fieldset>\n <legend>Account Info</legend>\n <label for=\"username\">Username:</label>\n <input type=\"text\" id=\"username\" name=\"username\">\n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n </fieldset>\n <fieldset>\n <legend>Preferences</legend>\n <label for=\"bio\">Bio:</label>\n <textarea id=\"bio\" name=\"bio\"></textarea>\n </fieldset>\n <button type=\"submit\">Register</button>\n</form>",
|
||||
"previewContainer": "preview-area",
|
||||
"concept": {
|
||||
"explanation": "Multiple fieldsets divide long forms into logical sections, improving cognitive load by chunking related fields together—users process \"fill out personal info\" and \"fill out address\" as distinct mental tasks rather than one overwhelming list. This pattern also enables progressive disclosure: you can hide/show fieldsets as wizard steps, disable future sections until current ones validate, or use CSS to style sections differently based on state. Screen readers announce fieldset boundaries (\"entering Personal Info group\", \"leaving Personal Info group\"), helping users maintain their place in complex forms. The semantic structure also aids form analytics: you can track which sections users struggle with or abandon most frequently.",
|
||||
"diagram": "Multi-Fieldset Forms\n\nSingle Long Form:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n┌─────────────────────────────┐\n│ Name: [ ] │\n│ Email: [ ] │\n│ Username: [ ] │ Overwhelming\n│ Password: [ ] │ 8 fields at once\n│ Street: [ ] │\n│ City: [ ] │\n│ State: [ ] │\n│ Bio: [ ] │\n│ [Submit] │\n└─────────────────────────────┘\n\nChunked with Fieldsets:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n┌─────────────────────────────┐\n│ Personal Info │ Section 1\n│ Name: [ ] │ (2 fields)\n│ Email: [ ] │\n├─────────────────────────────┤\n│ Account │ Section 2\n│ Username: [ ] │ (2 fields)\n│ Password: [ ] │\n├─────────────────────────────┤\n│ Address │ Section 3\n│ Street: [ ] │ (3 fields)\n│ City: [ ] │\n│ State: [ ] │\n├─────────────────────────────┤\n│ About You │ Section 4\n│ Bio: [ ] │ (1 field)\n├─────────────────────────────┤\n│ [Submit] │\n└─────────────────────────────┘\n\nBenefits:\n✓ Reduced cognitive load\n✓ Clear visual hierarchy\n✓ Section-level validation\n✓ Progressive disclosure\n✓ Better analytics"
|
||||
},
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_count",
|
||||
|
||||
Reference in New Issue
Block a user