"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Practice Instructions: Student Grade Table" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "You'll create an accessible student grade table that displays final exam scores for a mathematics class. The table will include a descriptive caption, proper headers with scope attributes, and clear organization that makes the data easy to understand for all users." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "This project demonstrates how accessibility features make tables more professional and usable for everyone. You'll practice adding context through captions and clarifying relationships through scope attributes - skills that are essential for creating inclusive web content." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your table will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A descriptive caption explaining what the table shows" }), "\n", _jsx(_components.li, { children: "Column headers with appropriate scope attributes" }), "\n", _jsx(_components.li, { children: "Student names as row headers with scope attributes" }), "\n", _jsx(_components.li, { children: "Grade data organized in a clear, accessible structure" }), "\n", _jsx(_components.li, { children: "Professional presentation suitable for academic use" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Table Foundation" }), "\n", _jsx(_components.p, { children: "Start by creating the basic table structure with a caption that clearly explains what the table contains. Your caption should specify that this shows final exam scores for a mathematics class." }), "\n", _jsx(_components.p, { children: "Think about what information someone would need to understand this table's purpose immediately." }), "\n", _jsx(_components.p, { children: "Example caption structure:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "table"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "caption"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " Descriptive title explaining the table's content\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how the caption appears above your table."] }), "\n", _jsx(_components.h3, { children: "Step 2: Build the Table Header Section" }), "\n", _jsx(_components.p, { children: "Create the header section using semantic table elements. Your headers should include columns for:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Student name" }), "\n", _jsx(_components.li, { children: "Exam score (out of 100)" }), "\n", _jsx(_components.li, { children: "Letter grade" }), "\n", _jsx(_components.li, { children: "Pass/Fail status" }), "\n"] }), "\n", _jsx(_components.p, { children: "Use the appropriate scope attribute to indicate these are column headers." }), "\n", _jsx(_components.p, { children: "Example header structure:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "thead"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tr"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "th"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "scope" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "col", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Header 1", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "th"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "scope" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "col", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Header 2", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your column headers are displayed."] }), "\n", _jsx(_components.h3, { children: "Step 3: Create the Table Body with Student Data" }), "\n", _jsx(_components.p, { children: "Build the data section with at least 4 students. Each student row should include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Student name as a row header (use the appropriate scope attribute)" }), "\n", _jsx(_components.li, { children: "Numerical score (between 60-100)" }), "\n", _jsx(_components.li, { children: "Letter grade (A, B, C, or D)" }), "\n", _jsx(_components.li, { children: "Pass/Fail status" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about which HTML element is appropriate for student names since they describe entire rows." }), "\n", _jsx(_components.p, { children: "Example row structure:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tbody"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tr"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "th"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "scope" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "row", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Student Name", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Score", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Grade", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Status", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your data rows appear with proper headers."] }), "\n", _jsx(_components.h3, { children: "Step 4: Add Realistic Student Data" }), "\n", _jsx(_components.p, { children: "Fill your table with realistic student information:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use common first and last names" }), "\n", _jsx(_components.li, { children: "Provide scores that correspond to appropriate letter grades" }), "\n", _jsx(_components.li, { children: "Ensure Pass/Fail status matches the grades (typically 60+ is passing)" }), "\n", _jsx(_components.li, { children: "Include a mix of performance levels to make the table realistic" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete, accessible table with all data."] }), "\n", _jsx(_components.h3, { children: "Step 5: Verify Accessibility Features" }), "\n", _jsx(_components.p, { children: "Check that your table includes all accessibility elements:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Caption clearly explains the table's purpose" }), "\n", _jsxs(_components.li, { children: ["All column headers use ", _jsx(_components.code, { children: "scope=\"col\"" })] }), "\n", _jsxs(_components.li, { children: ["All row headers (student names) use ", _jsx(_components.code, { children: "scope=\"row\"" })] }), "\n", _jsxs(_components.li, { children: ["Table structure uses proper ", _jsx(_components.code, { children: "thead" }), " and ", _jsx(_components.code, { children: "tbody" }), " sections"] }), "\n", _jsx(_components.li, { children: "Data is organized logically and consistently" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your table is well-organized and professional."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Caption" }), ": Must clearly identify this as a mathematics final exam grade table"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Students" }), ": Include at least 4 different students with realistic names"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scores" }), ": Numerical scores between 60-100 points"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Grades" }), ": Appropriate letter grades (A=90-100, B=80-89, C=70-79, D=60-69)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Status" }), ": Pass/Fail based on score (60+ = Pass, below 60 = Fail)"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Technical Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.code, { children: "" }), " as the first element inside ", _jsx(_components.code, { children: "" })] }), "\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.code, { children: "scope=\"col\"" }), " on all column headers"] }), "\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.code, { children: "scope=\"row\"" }), " on all student name headers"] }), "\n", _jsxs(_components.li, { children: ["Organize with ", _jsx(_components.code, { children: "" }), " and ", _jsx(_components.code, { children: "" }), " sections"] }), "\n", _jsx(_components.li, { children: "Maintain consistent structure across all rows" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Caption provides clear context about the table's content" }), "\n", _jsx(_components.li, { children: "Headers clearly describe their related data" }), "\n", _jsx(_components.li, { children: "Table structure is logical and predictable" }), "\n", _jsx(_components.li, { children: "All relationships between headers and data are explicit" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Visual Check" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Caption appears prominently above the table" }), "\n", _jsx(_components.li, { children: "Column headers are visually distinct from data" }), "\n", _jsx(_components.li, { children: "Student names stand out as row headers" }), "\n", _jsx(_components.li, { children: "Data is aligned properly in columns" }), "\n", _jsx(_components.li, { children: "Table looks professional and organized" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Verification" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Caption explains what the table shows" }), "\n", _jsx(_components.li, { children: "All scores have corresponding appropriate letter grades" }), "\n", _jsx(_components.li, { children: "Pass/Fail status matches the numerical scores" }), "\n", _jsx(_components.li, { children: "Student names are realistic and varied" }), "\n", _jsx(_components.li, { children: "Table contains exactly 4 columns and at least 4 data rows" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Validation" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Every ", _jsx(_components.code, { children: "" }), " and ", _jsx(_components.code, { children: "" })] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Caption Present" }), ": Table includes a descriptive caption explaining its purpose"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Column Headers" }), ": All column headers use ", _jsx(_components.code, { children: "" }), " and ", _jsx(_components.code, { children: "" }), " organization"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Accessibility" }), ": All header relationships are clearly defined with scope attributes"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Appearance" }), ": Table looks organized and suitable for academic use"] }), "\n", _jsx(_components.h2, { children: "Common Mistakes to Avoid" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Missing caption" }), ": Every table needs context about its purpose"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Wrong scope values" }), ": Use \"col\" for columns, \"row\" for rows"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Inconsistent headers" }), ": All headers should use ", _jsx(_components.code, { children: "" }), " for headers and ", _jsx(_components.code, { children: "" }), " for data"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Unrealistic data" }), ": Ensure grades match scores and status matches grades"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember: The goal is to create a table that clearly communicates its information to all users, whether they're viewing it visually or using assistive technology like screen readers." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

" }), " element has an appropriate ", _jsx(_components.code, { children: "scope" }), " attribute"] }), "\n", _jsxs(_components.li, { children: ["Column headers use ", _jsx(_components.code, { children: "scope=\"col\"" })] }), "\n", _jsxs(_components.li, { children: ["Row headers use ", _jsx(_components.code, { children: "scope=\"row\"" })] }), "\n", _jsxs(_components.li, { children: ["Table sections are properly organized with ", _jsx(_components.code, { children: "
" }), " with ", _jsx(_components.code, { children: "scope=\"col\"" })] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Row Headers" }), ": Student names use ", _jsx(_components.code, { children: "	" }), " with ", _jsx(_components.code, { children: "scope=\"row\"" })] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Data Accuracy" }), ": Scores, grades, and status are consistent and realistic"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Structure" }), ": Table uses proper ", _jsx(_components.code, { children: "
" }), " with appropriate scope"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Missing sections" }), ": Use ", _jsx(_components.code, { children: "

" }), " element has an appropriate ", _jsx(_components.code, { children: "scope" }), " attribute"] }), "\n", _jsxs(_components.li, { children: ["Column headers use ", _jsx(_components.code, { children: "scope=\"col\"" })] }), "\n", _jsxs(_components.li, { children: ["Row headers use ", _jsx(_components.code, { children: "scope=\"row\"" })] }), "\n", _jsxs(_components.li, { children: ["Table sections are properly organized with ", _jsx(_components.code, { children: "

" }), " with ", _jsx(_components.code, { children: "scope=\"col\"" })] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Row Headers" }), ": Student names use ", _jsx(_components.code, { children: "

" }), " with ", _jsx(_components.code, { children: "scope=\"row\"" })] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Data Accuracy" }), ": Scores, grades, and status are consistent and realistic"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Structure" }), ": Table uses proper ", _jsx(_components.code, { children: "

" }), " with appropriate scope"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Missing sections" }), ": Use ", _jsx(_components.code, { children: "