{"id":"code-hs-html-table-caption-headers","audience":"high-school","category":"coding","track":"coding","technique":"constraints","title":"Make a bake sale table readable for screen readers","free":false,"task":"Your student council page has a sales table with no headers. Add a caption with the exact text 'Bake sale sales by day', put the top row in a thead with th cells using scope=\"col\", put the other rows in a tbody, and turn the first cell of each of those rows into a th with scope=\"row\". Keep every number exactly as it is, and add no CSS or style attributes. Return only the table in exactly 1 code block of at most 30 lines, under 20 words of text.","materialLabel":"Your page's table (attached to your prompt automatically)","material":"<!-- council.html - Westfield High Student Council (Web Design 1) -->\n<h2>Bake sale results</h2>\n<p>Thanks to everyone who baked! All money goes to the spring dance.</p>\n\n<table class=\"sales\">\n  <tr>\n    <td>Day</td>\n    <td>Cookies</td>\n    <td>Brownies</td>\n    <td>Total ($)</td>\n  </tr>\n  <tr>\n    <td>Monday</td>\n    <td>48</td>\n    <td>30</td>\n    <td>117</td>\n  </tr>\n  <tr>\n    <td>Tuesday</td>\n    <td>52</td>\n    <td>41</td>\n    <td>139.50</td>\n  </tr>\n</table>\n\n<p>Next sale: December 10, in the cafeteria.</p>\n\n<!-- The school's accessibility checker said: \"Data table has no\n     header cells\" and \"Table is missing a caption\".\n     Ms. Romero (council advisor) wants the page fixed before we post\n     the link in the morning announcements on Friday. Wednesday's\n     numbers aren't in yet; Jaden will add that row after school. -->","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":30},{"type":"maxProseWords","max":20}],"mistakes":[{"title":"Guessing the caption","why":"The AI writes its own caption, or skips it.","fix":"Give it: \"Caption exactly: Bake sale sales by day.\"","checks":["r0"]},{"title":"Headers without scope","why":"The AI changes td to th but forgets scope, or misses the row headers.","fix":"Add: \"Top row in thead with th scope=\\\"col\\\"; other rows in tbody; first cell of each th scope=\\\"row\\\".\"","checks":["r1"]},{"title":"Redesigning the table","why":"The AI adds CSS, thead/tbody styling or reformats the money.","fix":"Add: \"Keep every number and class; no CSS or style attributes.\"","checks":["r2"]},{"title":"The whole page back","why":"The AI reprints the page and explains accessibility.","fix":"Add: \"Return only the table, no text.\"","checks":["codeBlocks","maxCodeLines","maxProseWords"]}],"promptHints":[{"label":"Gives the caption text","patterns":["caption","bake sale sales by day"]},{"label":"Asks for scope and sections","patterns":["scope","thead","tbody"]},{"label":"Covers row headers","patterns":["row","first (cell|column)"]},{"label":"Protects the data","patterns":["keep.{0,20}(number|data)","no css","no style"]},{"label":"Asks for only the table","patterns":["only the table","just the table"]}],"hint":"'Fix this table' could mean anything. Tell the AI what the checker flagged, the exact caption and header rules, and what must stay the same.","rubricLabels":["Has <caption>Bake sale sales by day</caption> as the first thing inside the table","The top row is inside a thead with four th scope=\"col\" cells, the Monday and Tuesday rows are inside a tbody, and Monday and Tuesday are th with scope=\"row\"","Every number (48, 30, 117, 52, 41, 139.50) is unchanged, class=\"sales\" is kept, there is no CSS or style attribute, and only the table is returned"]}