{"id":"code-hs-html-signup-form-labels","audience":"high-school","category":"coding","track":"coding","technique":"constraints","title":"Add labels to a signup form without rewriting the page","free":false,"task":"Your robotics club's signup page has no labels, so a classmate's screen reader can't tell the boxes apart. Add a visible label for each of the 3 inputs with the exact text Full name, School email and Grade, linked by for and id. The email box must also only accept school addresses: add required and pattern=\".+@lincolnhs\\.org\". Turn the clickable div into a real button type=\"submit\" with the same class. Keep the action, method and every class name. Return only the form element in exactly 1 code block of at most 16 lines, with under 30 words outside it.","materialLabel":"Your page's HTML (attached to your prompt automatically)","material":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Join Gearheads Robotics</title>\n  <link rel=\"stylesheet\" href=\"club.css\">\n  <style>\n    .card { max-width: 420px; margin: 2rem auto; padding: 1.5rem; }\n    .field { display: block; width: 100%; margin-bottom: 1rem; }\n    .btn-join { background: #1f4e9c; color: white; padding: .6rem 1rem; }\n  </style>\n</head>\n<body>\n  <main class=\"card\">\n    <h1>Join Gearheads</h1>\n    <p>Meetings are Tuesdays and Thursdays in Room 114 after school.</p>\n\n    <form action=\"/join\" method=\"post\" class=\"signup\">\n      <input class=\"field\" type=\"text\" name=\"fullname\" placeholder=\"Full name\">\n      <input class=\"field\" type=\"email\" name=\"email\" placeholder=\"School email\">\n      <select class=\"field\" name=\"grade\">\n        <option>9</option>\n        <option>10</option>\n        <option>11</option>\n        <option>12</option>\n      </select>\n      <div class=\"btn-join\" onclick=\"this.closest('form').submit()\">Join</div>\n    </form>\n\n    <p class=\"small\">Questions? Ask Ms. Patel in Room 114.</p>\n  </main>\n  <script src=\"analytics.js\"></script>\n</body>\n</html>","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":16},{"type":"maxProseWords","max":30}],"mistakes":[{"title":"Getting the whole page back","why":"The AI reprints the full HTML document, and you have to hunt for what changed.","fix":"Say: \"Return only the <form> element.\"","checks":["maxCodeLines","codeBlocks"]},{"title":"Not giving the label text","why":"The AI makes up its own label wording, or uses aria-label that sighted users can't see.","fix":"Add: \"Visible <label> with exact text Full name, School email, Grade, linked with for and id.\"","checks":["r0"]},{"title":"Leaving out the school-email rule","why":"The AI can't know only school addresses are allowed.","fix":"Add: \"Email input gets required and a pattern that only accepts @lincolnhs.org addresses.\"","checks":["r1"]},{"title":"Leaving the fake button or redesigning","why":"The AI may keep the div with role=\"button\", or add CSS and new fields while it's in there.","fix":"Add: \"Replace the div with a real submit button with class btn-join. Keep action, method and all classes. No new fields, CSS or JS.\"","checks":["r2"]},{"title":"A long accessibility lesson","why":"The AI explains every change at length.","fix":"Add: \"No explanation, just the code block.\"","checks":["maxProseWords"]}],"promptHints":[{"label":"Gives the exact label text","patterns":["full name","school email","label text"]},{"label":"Asks for for/id linking","patterns":["\\bfor\\b.{0,15}\\bid\\b","id"]},{"label":"Adds the school-email rule","patterns":["pattern","lincolnhs","required"]},{"label":"Asks for a real button","patterns":["button","type=.?submit"]},{"label":"Asks for only the form","patterns":["only the.{0,10}form","just the form","nothing else"]}],"hint":"'Fix this' could mean anything. Say what the problem is, the exact label text, the email rule, what to replace, and that you only want the form back.","rubricLabels":["Each of the 3 controls has a visible <label> with the exact text Full name, School email and Grade, whose for attribute matches an id added to that input or select","The email input has both required and pattern=\".+@lincolnhs\\.org\" (or an equivalent pattern that only accepts @lincolnhs.org addresses)","The div is replaced with <button type=\"submit\" class=\"btn-join\">Join</button> (no onclick), and action=\"/join\", method=\"post\", class=\"signup\" and every class=\"field\" are kept, with no new fields, CSS or JavaScript"]}