Four publishing deliverables, four roles, and a conflicting accountability assignment to review

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"><title>Publishing RACI · proposed assignments</title><style>
*{box-sizing:border-box}body{margin:0;background:#eef2f4;color:#273c48;font:16px/1.6 system-ui,sans-serif}main{max-width:1060px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:19px}p{margin:8px 0 16px}p,h1,h2,h3,label,button,td,th{overflow-wrap:anywhere}div,article,section{min-width:0}.eyebrow{font-size:14px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;background:white;border:1px solid #b8c7cf;border-radius:8px;margin:22px 0}.scope{background:#2a4e61;color:white;padding:20px;border-radius:8px}.legend{display:grid;grid-template-columns:1fr 1fr;gap:12px}.definition{padding:16px;background:#edf3f5;border-left:4px solid #4e768b}.definition strong{display:block}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,input,select,textarea{font:inherit}button{min-height:44px;padding:10px 15px;border:1px solid #55788a;border-radius:5px;background:white;color:inherit;cursor:pointer}button:hover{box-shadow:inset 0 0 0 1px #2a4e61}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b55d26;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}input,textarea,select{display:block;width:100%;min-width:0;min-height:44px;border:1px solid #728b99;border-radius:4px;padding:10px;background:white;color:inherit}textarea{min-height:110px;resize:vertical}.controls,.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.status{background:#fff0da;border-left:5px solid #ae6631;padding:16px}.note{background:#e3edf0;padding:16px}table{width:100%;table-layout:fixed;border-collapse:collapse}th,td{padding:12px;border:1px solid #b8c7cf;text-align:left;vertical-align:top}th{background:#e3edf0}th:first-child{width:29%}tr.selected td{background:#fff1d9}.badge{font-size:19px;font-weight:750}.blank-row{border:1px solid #b8c7cf;border-radius:6px;margin:18px 0;padding:18px;background:#f3f7f8}footer{border-top:1px solid #b8c7cf;margin-top:26px;padding-top:18px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.legend,.controls,.grid{grid-template-columns:1fr}table,tbody,tr,td{display:block}thead{display:none}tr{margin:16px 0;border:1px solid #b8c7cf}td{border:0;border-top:1px solid #cbd7dc}td::before{display:block;content:attr(data-label);font-weight:650;margin-bottom:5px}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL PUBLISHER · PROPOSED ASSIGNMENTS</p><h1>Who does the work, and who answers for it?</h1><p>A small publisher is preparing an essay collection. D3 has two proposed accountable roles. D4 has two responsible contributors. Those patterns need different conversations.</p><div class="scope">No release or role agreement has occurred. A letter entered here does not assign authority. Exercise convention: exactly one A and at least one R per deliverable. Multiple R is allowed.</div>
<section class="panel" aria-labelledby="legend-title"><h2 id="legend-title">Keep the meaning beside the letters</h2><div class="legend"><div class="definition"><strong>R · Responsible</strong>Does the assigned work. More than one role can contribute to a deliverable.</div><div class="definition"><strong>A · Accountable</strong>Answers for completion and guides the relevant decision. This example requires exactly one A per deliverable.</div><div class="definition"><strong>C · Consulted</strong>Provides relevant knowledge or advice before the work or decision that needs it.</div><div class="definition"><strong>I · Informed</strong>Receives the information needed to stay aware of the work or outcome.</div></div></section>
<section class="panel" aria-labelledby="matrix-title"><h2 id="matrix-title">Four deliverables · four roles</h2><table aria-label="Proposed publishing RACI assignments"><thead><tr><th scope="col">Deliverable</th><th scope="col">Managing editor</th><th scope="col">Copyeditor</th><th scope="col">Designer</th><th scope="col">Production lead</th></tr></thead><tbody id="matrix-rows"></tbody></table><p>The labels identify proposed work, not capacity or workload. Describe each contributor’s part of the release package before agreeing the handoff.</p></section>
<section class="panel" aria-labelledby="editor-title"><h2 id="editor-title">Inspect a proposed assignment row</h2><label for="deliverable">Selected deliverable</label><select id="deliverable"><option value="D1">D1 · Manuscript brief</option><option value="D2">D2 · Copyedited text</option><option value="D3" selected>D3 · Cover proof</option><option value="D4">D4 · Release package</option></select><p id="row-explanation" class="note"></p><div class="controls"><div><label for="assignment-0">Managing editor</label><select id="assignment-0" aria-label="Managing editor proposed assignment"></select></div><div><label for="assignment-1">Copyeditor</label><select id="assignment-1" aria-label="Copyeditor proposed assignment"></select></div><div><label for="assignment-2">Designer</label><select id="assignment-2" aria-label="Designer proposed assignment"></select></div><div><label for="assignment-3">Production lead</label><select id="assignment-3" aria-label="Production lead proposed assignment"></select></div></div><div class="toolbar"><button id="check" type="button">Check row</button><button id="revision" type="button">Load proposed revision</button><button id="restore" type="button">Restore example</button></div><p class="note">Load proposed revision changes only D3 to A, C, R, I and brings D3 into view. Restore example returns all four original teaching rows. Neither control changes your blank scaffold.</p><p id="status" class="status" role="status" aria-live="polite">D3 selected. Not checked. Review the proposed assignments with the people involved.</p></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank scaffold · your actual responsibility discussion</h2><label for="project">Project, authority boundaries and your organization’s row convention</label><textarea id="project"></textarea><p>Use your own role names and two bounded deliverables. All assignments start Unassigned. These fields are independent of the teaching matrix.</p><div class="grid" id="own-roles"></div><div id="own-rows"></div><label for="questions">Questions for contributors · decisions, handoffs and capacity</label><textarea id="questions" placeholder="Who can make the relevant decision? What does each Responsible person actually do?"></textarea><div class="toolbar"><button id="reset" type="button">Clear my scaffold</button></div><p id="blank-status" role="status" aria-live="polite">Blank scaffold only. No agreement, assignment or completed work is recorded.</p><div id="confirmation" hidden><p>Clear your project, four role names, two deliverable names, eight proposed letters and discussion questions? The teaching matrix stays unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear my entries</button><button id="keep" type="button">Keep my entries</button></div></div></section><footer>Changes to this open example are temporary; reloading restores the original matrix and clears your writing. Nothing is stored, sent, approved or marked complete. Record agreed roles and actual task evidence through the team’s maintained process.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const roles=['Managing editor','Copyeditor','Designer','Production lead'];const original=[{id:'D1',name:'Manuscript brief',letters:['A','R','C','I']},{id:'D2',name:'Copyedited text',letters:['A','R','I','C']},{id:'D3',name:'Cover proof',letters:['A','C','R','A']},{id:'D4',name:'Release package',letters:['C','R','R','A']}];let rows=original.map(r=>({...r,letters:[...r.letters]}));const selected=()=>rows.find(r=>r.id===$('deliverable').value);function options(select){for(const value of ['','R','A','C','I']){const opt=document.createElement('option');opt.value=value;opt.textContent=value||'Unassigned';select.append(opt);}}function matrix(){$('matrix-rows').replaceChildren();for(const r of rows){const tr=document.createElement('tr');tr.id='row-'+r.id;tr.className=r.id===selected().id?'selected':'';const name=document.createElement('td');name.dataset.label='Deliverable';name.textContent=r.id+' · '+r.name;tr.append(name);r.letters.forEach((v,i)=>{const td=document.createElement('td');td.dataset.label=roles[i];td.id=r.id+'-role-'+i;td.className='badge';td.textContent=v||'Unassigned';tr.append(td);});$('matrix-rows').append(tr);}}function explain(){const r=selected();$('row-explanation').textContent=r.id+' · '+r.name+' — proposed assignments: '+r.letters.map((v,i)=>roles[i]+': '+(v||'Unassigned')).join('; ')+'.';}function choose(){const r=selected();for(let i=0;i<4;i++)$('assignment-'+i).value=r.letters[i];matrix();explain();$('status').textContent=r.id+' selected. Not checked. Review the proposed assignments with the people involved.';}for(let i=0;i<4;i++){const control=$('assignment-'+i);options(control);control.addEventListener('change',()=>{selected().letters[i]=control.value;matrix();explain();$('status').textContent=selected().id+' assignments changed. Previous check cleared. Not checked; proposed only.';});}$('deliverable').addEventListener('change',choose);$('check').addEventListener('click',()=>{const r=selected();const accountable=roles.filter((_,i)=>r.letters[i]==='A'),responsible=roles.filter((_,i)=>r.letters[i]==='R');const issues=[];if(!accountable.length)issues.push('No A: agree one accountable role.');if(accountable.length>1)issues.push('Multiple A: '+accountable.join(' and ')+'. Agree one accountable role.');if(!responsible.length)issues.push('No R: identify who does the assigned work.');$('status').textContent=r.id+' · '+(issues.length?issues.join(' '):'Count convention met: exactly one A ('+accountable[0]+') and '+responsible.length+' R ('+responsible.join(' and ')+'). Multiple R is allowed.')+' Proposed assignments only; this does not establish authority, agreement or completed work.';});$('revision').addEventListener('click',()=>{rows.find(r=>r.id==='D3').letters=['A','C','R','I'];$('deliverable').value='D3';choose();$('status').textContent='D3 proposed revision loaded: Managing editor A; Copyeditor C; Designer R; Production lead I. Not checked. Discuss whether production advice requires C rather than I.';});$('restore').addEventListener('click',()=>{rows=original.map(r=>({...r,letters:[...r.letters]}));choose();$('status').textContent='All four original proposed rows restored. Previous checks cleared. Not checked.';});function field(parent,id,text,textarea=false){const label=document.createElement('label');label.htmlFor=id;label.textContent=text;const control=document.createElement(textarea?'textarea':'input');control.id=id;parent.append(label,control);return control;}for(let i=1;i<=4;i++){const wrap=document.createElement('div');field(wrap,'own-role-'+i,'Your role '+i+' name').addEventListener('input',()=>{for(let row=1;row<=2;row++)$('own-label-'+row+'-'+i).textContent=($('own-role-'+i).value.trim()||'Your role '+i)+' · proposed assignment';});$('own-roles').append(wrap);}for(let row=1;row<=2;row++){const a=document.createElement('article');a.className='blank-row';const h=document.createElement('h3');h.textContent='Your deliverable '+row;a.append(h);field(a,'own-deliverable-'+row,'Bounded deliverable and work description',true);const grid=document.createElement('div');grid.className='controls';for(let i=1;i<=4;i++){const wrap=document.createElement('div');const label=document.createElement('label');label.id='own-label-'+row+'-'+i;label.htmlFor='own-assignment-'+row+'-'+i;label.textContent='Your role '+i+' · proposed assignment';const control=document.createElement('select');control.id=label.htmlFor;options(control);wrap.append(label,control);grid.append(wrap);}a.append(grid);$('own-rows').append(a);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('blank-status').textContent='Kept every scaffold entry and proposed letter.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const control of document.querySelectorAll('#blank-title ~ input,#blank-title ~ textarea,#own-roles input,#own-rows textarea'))control.value='';$('project').value='';$('questions').value='';for(const control of document.querySelectorAll('#own-rows select'))control.value='';for(let row=1;row<=2;row++)for(let i=1;i<=4;i++)$('own-label-'+row+'-'+i).textContent='Your role '+i+' · proposed assignment';$('confirmation').hidden=true;$('blank-status').textContent='Your scaffold entries were cleared. The proposed teaching matrix is unchanged.';$('project').focus();});choose();})();</script></body></html>