Fictional helper chart: compare Week A and Week B, then reuse the blank scaffold

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="nos-demo-layout" content="responsive-lab"><title>Classroom jobs: one assignment per period</title><style>*{box-sizing:border-box}body{margin:0;font:18px/1.6 system-ui,sans-serif;color:#182c3a;background:#fff}main{max-width:900px;margin:auto;padding:24px}h1{font-size:clamp(28px,5vw,40px);line-height:1.2}h2{font-size:25px}p,li,dd,td,th{overflow-wrap:anywhere}a{color:#124f91}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #bdc5ca;text-align:left;vertical-align:top}caption{text-align:left;font-weight:650}dt{font-weight:700;margin-top:14px}dd{margin-left:0}section{margin:28px 0}label{font-weight:650}select{font:inherit;padding:8px}pre{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #bfc6ca;padding:18px;font:16px/1.7 ui-monospace,monospace}aside{background:#f6f1e7;padding:16px;margin:22px 0}strong{font-weight:750}@media print{body{font-size:12pt}main{max-width:none}select{display:none}section{break-inside:avoid}}.jobs{display:grid;grid-template-columns:1fr 1fr;gap:18px}.job{margin:8px 0;border-top:6px solid #34698c;background:#eff5fa;padding:18px}.name{font-size:26px;font-weight:750}.job h2{margin:0;font-size:22px}@media(max-width:600px){.jobs{grid-template-columns:1fr}}body{font-size:16px;line-height:1.5}main{padding:18px}section{margin:20px 0}h1{font-size:clamp(26px,5vw,36px)}h2{font-size:23px}pre{font-family:system-ui,sans-serif;font-size:16px}.job{padding:14px}.name{font-size:24px;margin:12px 0}dt{margin-top:10px}</style></head><body><main><h1>Classroom jobs: one assignment per period</h1><p>Fictional four-person roster. The teacher has not supplied actual dates.</p><label for="week">Assignment period</label> <select id="week"><option value="A">Week A</option><option value="B">Week B</option></select><p id="period"></p><div class="jobs" id="jobs"></div><aside>For Week B, each job takes the next name in the supplied roster; the final job takes Avery. No attendance or completed-task record is collected.</aside><h2>Blank chart for your class</h2><pre>Period/date: __________
Job: __________
What the helper does: __________
Assigned name(s): __________
Teacher-confirmed cover arrangement: __________
Next rotation period: __________</pre></main><script>const jobs=[['Materials helper','Place the supplied activity trays at the teacher’s marked spots.'],['Book helper','Return selected books to their labeled basket.'],['Calendar helper','Point to the date chosen with the teacher.'],['Display helper','Help the teacher place the finished class display.']];const roster={A:['Avery','Blake','Casey','Drew'],B:['Blake','Casey','Drew','Avery']};function draw(){const w=document.querySelector('#week').value;document.querySelector('#period').textContent='Showing Week '+w+' — supplied fictional rotation';document.querySelector('#jobs').replaceChildren(...jobs.map(([job,task],i)=>{const section=document.createElement('section');section.className='job';const h=document.createElement('h2');h.textContent=job;const p=document.createElement('p');p.textContent=task;const n=document.createElement('p');n.className='name';n.textContent=roster[w][i];section.append(h,p,n);return section;}));}document.querySelector('#week').addEventListener('change',draw);draw();</script></body></html>