What does the comma separate?

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

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>What does the comma separate?</title><style>:root{--paper:#fff9ee;--ink:#40352a;--accent:#83511d;--line:#d9cab2;--panel:#fffdf8;--soft:#f3e8d3}*{box-sizing:border-box}:root{color-scheme:light}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:960px;margin:auto;padding:28px 24px 54px}.strap{font-weight:750;letter-spacing:.07em;font-size:16px;color:var(--accent)}header{padding:20px 0 24px;border-top:7px solid var(--accent);border-bottom:2px solid var(--line);margin-bottom:24px}h1{font:700 clamp(30px,5vw,45px)/1.2 Georgia,serif;margin:10px 0 18px;max-width:780px}h2{font:700 25px/1.35 Georgia,serif;margin:0 0 16px}h3{font-size:19px;margin:18px 0 10px}p{margin:12px 0}section{margin:24px 0;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:0}.plain section{border-radius:0;border-width:0 0 2px;padding:24px 0;background:transparent}.studio header{border-top-style:double;border-top-width:10px}.studio section{box-shadow:5px 5px 0 var(--line)}.board section{border-top:5px solid var(--accent)}.metric{font-size:clamp(26px,5vw,38px);font-weight:750;line-height:1.3}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.cell{padding:16px;background:var(--panel);border-left:4px solid var(--accent);min-width:0}.choices,.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 18px}button,input,textarea{font:inherit}button{padding:11px 16px;min-height:46px;border:1px solid var(--accent);border-radius:6px;background:var(--panel);color:var(--accent);cursor:pointer;max-width:100%;line-height:1.4}button:hover{box-shadow:0 0 0 2px var(--line)}button[aria-pressed=true],button.primary{background:var(--accent);color:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a25718;outline-offset:3px}label,legend{font-weight:650;display:block;margin:12px 0 7px}fieldset{border:0;padding:0;margin:16px 0;min-width:0}input,textarea{border:1px solid #6a7c7d;background:#fff;color:#182f32;padding:11px;width:100%;min-width:0;border-radius:5px}textarea{resize:vertical}.feedback{padding:16px;border-left:4px solid var(--accent);background:var(--soft);margin:18px 0;white-space:pre-line;overflow-wrap:anywhere}.note{border-left:4px solid var(--accent);padding:12px 16px;background:var(--soft)}table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px}th,td{text-align:left;vertical-align:top;padding:11px 8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}th{background:var(--soft)}svg{display:block;width:100%;height:auto;max-width:540px;margin:16px auto;background:#fff}svg text{font:24px system-ui;fill:var(--ink)}footer{border-top:2px solid var(--line);margin-top:30px;padding-top:18px;font-size:16px}[hidden]{display:none!important}.sentence{font:26px/1.7 Georgia,serif;padding:16px;background:var(--soft)}.map-node{border:2px solid var(--accent);padding:16px;text-align:center;font-size:23px;background:var(--panel);max-width:460px;margin:auto}.map-link{text-align:center;padding:10px;font-weight:700}.lane{padding:18px;border:2px dashed var(--line)}@media(max-width:640px){main{padding:20px 16px 40px}.grid,.three{grid-template-columns:1fr}section{padding:18px 14px}.studio section{box-shadow:3px 3px 0 var(--line)}th,td{padding:9px 5px}}</style></head><body class="plain"><main><header><div class="strap">ORIGINAL WORKED EXAMPLE</div><h1>What does the comma separate?</h1><p>Four fixed sentences. Plain classroom style; serial comma required for the list. Words and final periods stay fixed.</p></header><fieldset><legend>Choose a sentence</legend><div class="choices"><button type="button" id="round-P1" aria-pressed="false">P1</button><button type="button" id="round-P2" aria-pressed="false">P2</button><button type="button" id="round-P3" aria-pressed="false">P3</button><button type="button" id="round-P4" aria-pressed="false">P4</button></div></fieldset><section id="P1-panel" ><h2>P1</h2><div class="sentence" id="P1-sentence">Before the club opened Maya arranged the chairs.</div><fieldset><legend>Toggle a comma after a word</legend><div class="choices"><button type="button" id="P1-slot-1" aria-pressed="false" aria-label="P1: comma after Before, word 1">After Before</button><button type="button" id="P1-slot-2" aria-pressed="false" aria-label="P1: comma after the, word 2">After the</button><button type="button" id="P1-slot-3" aria-pressed="false" aria-label="P1: comma after club, word 3">After club</button><button type="button" id="P1-slot-4" aria-pressed="false" aria-label="P1: comma after opened, word 4">After opened</button><button type="button" id="P1-slot-5" aria-pressed="false" aria-label="P1: comma after Maya, word 5">After Maya</button><button type="button" id="P1-slot-6" aria-pressed="false" aria-label="P1: comma after arranged, word 6">After arranged</button><button type="button" id="P1-slot-7" aria-pressed="false" aria-label="P1: comma after the, word 7">After the</button></div><button type="button" id="P1-none" aria-pressed="false">No target comma</button></fieldset><label for="P1-reason">Name the structure behind the choice</label><textarea id="P1-reason" rows="3"></textarea><button type="button" id="P1-check" >Check P1</button><div id="P1-feedback" class="feedback" role="status" aria-live="polite">Not checked yet.</div></section><section id="P2-panel" hidden><h2>P2</h2><div class="sentence" id="P2-sentence">Maya arranged the chairs and Leo checked the lights.</div><fieldset><legend>Toggle a comma after a word</legend><div class="choices"><button type="button" id="P2-slot-1" aria-pressed="false" aria-label="P2: comma after Maya, word 1">After Maya</button><button type="button" id="P2-slot-2" aria-pressed="false" aria-label="P2: comma after arranged, word 2">After arranged</button><button type="button" id="P2-slot-3" aria-pressed="false" aria-label="P2: comma after the, word 3">After the</button><button type="button" id="P2-slot-4" aria-pressed="false" aria-label="P2: comma after chairs, word 4">After chairs</button><button type="button" id="P2-slot-5" aria-pressed="false" aria-label="P2: comma after and, word 5">After and</button><button type="button" id="P2-slot-6" aria-pressed="false" aria-label="P2: comma after Leo, word 6">After Leo</button><button type="button" id="P2-slot-7" aria-pressed="false" aria-label="P2: comma after checked, word 7">After checked</button><button type="button" id="P2-slot-8" aria-pressed="false" aria-label="P2: comma after the, word 8">After the</button></div><button type="button" id="P2-none" aria-pressed="false">No target comma</button></fieldset><label for="P2-reason">Name the structure behind the choice</label><textarea id="P2-reason" rows="3"></textarea><button type="button" id="P2-check" >Check P2</button><div id="P2-feedback" class="feedback" role="status" aria-live="polite">Not checked yet.</div></section><section id="P3-panel" hidden><h2>P3</h2><div class="sentence" id="P3-sentence">Maya arranged the chairs and checked the lights.</div><fieldset><legend>Toggle a comma after a word</legend><div class="choices"><button type="button" id="P3-slot-1" aria-pressed="false" aria-label="P3: comma after Maya, word 1">After Maya</button><button type="button" id="P3-slot-2" aria-pressed="false" aria-label="P3: comma after arranged, word 2">After arranged</button><button type="button" id="P3-slot-3" aria-pressed="false" aria-label="P3: comma after the, word 3">After the</button><button type="button" id="P3-slot-4" aria-pressed="false" aria-label="P3: comma after chairs, word 4">After chairs</button><button type="button" id="P3-slot-5" aria-pressed="false" aria-label="P3: comma after and, word 5">After and</button><button type="button" id="P3-slot-6" aria-pressed="false" aria-label="P3: comma after checked, word 6">After checked</button><button type="button" id="P3-slot-7" aria-pressed="false" aria-label="P3: comma after the, word 7">After the</button></div><button type="button" id="P3-none" aria-pressed="false">No target comma</button></fieldset><label for="P3-reason">Name the structure behind the choice</label><textarea id="P3-reason" rows="3"></textarea><button type="button" id="P3-check" >Check P3</button><div id="P3-feedback" class="feedback" role="status" aria-live="polite">Not checked yet.</div></section><section id="P4-panel" hidden><h2>P4</h2><div class="sentence" id="P4-sentence">We packed tape pencils and folders.</div><fieldset><legend>Toggle a comma after a word</legend><div class="choices"><button type="button" id="P4-slot-1" aria-pressed="false" aria-label="P4: comma after We, word 1">After We</button><button type="button" id="P4-slot-2" aria-pressed="false" aria-label="P4: comma after packed, word 2">After packed</button><button type="button" id="P4-slot-3" aria-pressed="false" aria-label="P4: comma after tape, word 3">After tape</button><button type="button" id="P4-slot-4" aria-pressed="false" aria-label="P4: comma after pencils, word 4">After pencils</button><button type="button" id="P4-slot-5" aria-pressed="false" aria-label="P4: comma after and, word 5">After and</button></div><button type="button" id="P4-none" aria-pressed="false">No target comma</button></fieldset><label for="P4-reason">Name the structure behind the choice</label><textarea id="P4-reason" rows="3"></textarea><button type="button" id="P4-check" >Check P4</button><div id="P4-feedback" class="feedback" role="status" aria-live="polite">Not checked yet.</div></section><button type="button" id="reset" >Reset all four</button><p class="note">Placement is checked only for these fixed items. Teacher reviews explanations. These plain-style keys do not ban rhetorical exceptions or mandate a serial comma for every publication.</p><footer>Local review only. Entries and changes stay in this open page; reload restores the example. Keep actual records in the required native document or workflow.</footer></main><script>
(()=>{'use strict';
const $=id=>document.querySelector('#'+id); const on=(id,fn,event='click')=>$(id).addEventListener(event,fn); const put=(id,text)=>{$(id).textContent=text;};
function pick(groupId,values,changed=()=>{}){let selected='';for(const value of values)on(groupId+'-'+value,()=>{selected=value;for(const v of values)$(groupId+'-'+v).setAttribute('aria-pressed',String(v===value));changed(value);});return {get:()=>selected,set:value=>{selected=value;for(const v of values)$(groupId+'-'+v).setAttribute('aria-pressed',String(v===value));}};}
function number(id,min,max,integer=false,optional=false){const raw=$(id).value.trim();if(!raw){if(optional)return null;throw Error('Enter '+$(id).getAttribute('aria-label')+' before checking.');}const n=Number(raw);if(!Number.isFinite(n)||n<min||n>max||(integer&&!Number.isInteger(n)))throw Error('Use '+(integer?'an integer':'a number')+' from '+min+' to '+max+' for '+$(id).getAttribute('aria-label')+'.');return n;}
function edit(ids,fn){for(const id of ids)on(id,fn,'input');}function blank(ids){for(const id of ids)$(id).value='';}function toggle(id,button){on(button,()=>{const e=$(id);e.hidden=!e.hidden;$(button).setAttribute('aria-expanded',String(!e.hidden));});}

const cards=[["P1","Before the club opened Maya arranged the chairs.",[4],"Introductory dependent clause Before the club opened; main clause Maya arranged the chairs."],["P2","Maya arranged the chairs and Leo checked the lights.",[4],"Two independent clauses with separate subjects Maya and Leo; comma before and."],["P3","Maya arranged the chairs and checked the lights.",[],"Shared subject Maya and two predicates; no target comma under the stated plain style."],["P4","We packed tape pencils and folders.",[3,4],"Three-item list: tape, pencils, folders. The packet requires the serial comma."]];const records={};function formatted(sentence,selected){return sentence.split(' ').map((word,i)=>word+(selected.has(i+1)?',':'')).join(' ');}for(const [id,sentence,key,reason]of cards){const state={selected:new Set(),none:false};records[id]=state;const draw=()=>{put(id+'-sentence',formatted(sentence,state.selected));for(let n=1;n<sentence.split(' ').length;n++)$(id+'-slot-'+n).setAttribute('aria-pressed',String(state.selected.has(n)));$(id+'-none').setAttribute('aria-pressed',String(state.none));put(id+'-feedback','Choices changed. Check again.');};for(let n=1;n<sentence.split(' ').length;n++)on(id+'-slot-'+n,()=>{state.none=false;if(state.selected.has(n))state.selected.delete(n);else state.selected.add(n);draw();});on(id+'-none',()=>{state.none=!state.none;state.selected.clear();draw();});edit([id+'-reason'],()=>put(id+'-feedback','Explanation changed. Check again.'));on(id+'-check',()=>{if(!state.selected.size&&!state.none){put(id+'-feedback','Unanswered: select comma locations or No target comma.');return;}const match=key.length?state.selected.size===key.length&&key.every(n=>state.selected.has(n))&&!state.none:state.none&&!state.selected.size;put(id+'-feedback',(match?'Matching comma choices. ':'Recheck the comma choices. ')+'Key: '+formatted(sentence,new Set(key))+'\n'+reason+' Teacher reviews your explanation.');});}const rounds=pick('round',cards.map(c=>c[0]),v=>{for(const [id]of cards){$(id+'-panel').hidden=id!==v;put(id+'-feedback','Not checked yet.');}});rounds.set('P1');on('reset',()=>{for(const [id,sentence]of cards){records[id].selected.clear();records[id].none=false;for(let n=1;n<sentence.split(' ').length;n++)$(id+'-slot-'+n).setAttribute('aria-pressed','false');$(id+'-none').setAttribute('aria-pressed','false');blank([id+'-reason']);put(id+'-sentence',sentence);put(id+'-feedback','Not checked yet.');$(id+'-panel').hidden=id!=='P1';}rounds.set('P1');});
})();
</script></body></html>