Three practice records compared by theme, with a source-linked synthesis paragraph

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>Literature review matrix · compare by theme</title><style>
*{box-sizing:border-box}body{margin:0;background:#f0f3f4;color:#263d49;font:16px/1.6 system-ui,sans-serif}main{max-width:1100px;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,section,article{min-width:0}.eyebrow{font-size:14px;letter-spacing:.08em;font-weight:750}.panel{background:#fff;border:1px solid #bdc9cd;border-radius:8px;padding:22px;margin:22px 0}.question{background:#244d60;color:#fff;padding:22px;border-radius:8px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.record{border-top:5px solid #557b8c;padding:14px;background:#f4f8f9;border-radius:5px}.record h3{margin:0 0 10px}.record p{margin:8px 0}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}button,input,textarea,select{font:inherit}button{min-height:44px;padding:10px 14px;background:white;color:#263d49;border:1px solid #547686;border-radius:5px;cursor:pointer}button[aria-pressed="true"]{background:#244d60;color:white}button:hover{box-shadow:inset 0 0 0 1px #244d60}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ad5827;outline-offset:3px}label{display:block;font-weight:650;margin:15px 0 7px}input,textarea,select{display:block;width:100%;min-width:0;padding:10px;border:1px solid #6e8995;border-radius:4px;background:white;color:inherit}input,select{min-height:44px}textarea{min-height:110px;resize:vertical}.writing{min-height:190px}.status{background:#fff0d9;border-left:5px solid #b56a36;padding:14px}.note{background:#e3edf0;padding:16px}.locator{font-weight:750;color:#335e72}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{border:1px solid #bdc9cd;text-align:left;vertical-align:top;padding:12px}th{background:#e3edf0}th:first-child{width:25%}td p{margin:0 0 8px}.blank-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.blank-source{background:#f5f8f9;padding:16px;border:1px solid #bdc9cd;border-radius:6px}.blank-cell{border-top:1px solid #bdc9cd;margin-top:18px;padding-top:2px}footer{border-top:1px solid #bdc9cd;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel,.question{padding:16px}.grid,.blank-grid{grid-template-columns:1fr}table,tbody,tr,td{display:block}thead{display:none}tr{margin:16px 0;border:1px solid #bdc9cd}td{border:0;border-top:1px solid #d0dadd}td:first-child{background:#e3edf0;font-weight:750}td::before{content:attr(data-label);display:block;font-weight:750;margin-bottom:6px}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">SOURCE NOTES → THEME COMPARISON → SYNTHESIS</p><h1>Find the relationship before writing the paragraph.</h1><p>Compare three complete practice records across the same themes. Then use the separate blank scaffold for sources you have actually read.</p><div class="question"><strong>Practice question</strong><br>How do these accounts describe the specificity of peer feedback and the opportunity to revise?</div><p class="note">Original fictional practice records; not published research. No real authors, dates, papers or research results are attributed here.</p>
<section class="panel" aria-labelledby="matrix-title"><h2 id="matrix-title">Read the whole matrix</h2><table aria-label="Fictional practice source and theme comparison"><thead><tr><th scope="col">Source</th><th scope="col">Feedback specificity</th><th scope="col">Opportunity to revise</th><th scope="col">What the record covers</th></tr></thead><tbody><tr><td data-label="Source">A · In-person design workshop</td><td data-label="Feedback specificity">Comments name supplied criteria. <span class="locator">A2</span></td><td data-label="Opportunity to revise">Revised-sketch time in the same session. <span class="locator">A3</span></td><td data-label="What the record covers">Workshop discussion and scheduled sketch time. <span class="locator">A1–A3</span></td></tr><tr><td data-label="Source">B · Asynchronous design review</td><td data-label="Feedback specificity">Comments name supplied criteria. <span class="locator">B2</span></td><td data-label="Opportunity to revise">No subsequent draft is described. <span class="locator">B3</span></td><td data-label="What the record covers">Asynchronous comments through their return. <span class="locator">B1–B3</span></td></tr><tr><td data-label="Source">C · In-person design workshop</td><td data-label="Feedback specificity">Comments remain general despite criteria being available. <span class="locator">C1–C2</span></td><td data-label="Opportunity to revise">A later revision meeting is scheduled. <span class="locator">C3</span></td><td data-label="What the record covers">Workshop comments and the planned follow-up. <span class="locator">C1–C3</span></td></tr></tbody></table></section>
<section class="panel" aria-labelledby="theme-title"><h2 id="theme-title">Follow one theme across the sources</h2><div class="toolbar" role="group" aria-label="Practice comparison theme"><button id="theme-specificity" type="button" aria-pressed="true">Feedback specificity</button><button id="theme-revision" type="button" aria-pressed="false">Opportunity to revise</button><button id="theme-scope" type="button" aria-pressed="false">What the record covers</button></div><h3 id="selected-theme">Feedback specificity</h3><div id="theme-cells" class="grid"></div><p id="theme-relation" class="note"></p><p id="theme-status" role="status" aria-live="polite">Feedback specificity selected. Your notes and writing are unchanged.</p><label for="comparison-notes">Your reading notes about these comparisons</label><textarea id="comparison-notes" placeholder="Which agreement or contrast can you support? Keep source locators with it."></textarea><div class="toolbar"><button id="read-synthesis" type="button" aria-expanded="false" aria-controls="worked-synthesis">Read worked synthesis</button></div><div id="worked-synthesis" hidden><h3>Authored worked synthesis</h3><p id="worked-paragraph">Across the practice records, criterion-specific comments appear in both an in-person workshop and an asynchronous exchange (A2; B1–B2). However, the second in-person account records general praise despite the availability of criteria (C1–C2). The accounts therefore describe different comment patterns within the same delivery mode as well as similarities across modes. They also provide different opportunities for revision: A includes same-session sketch time, while C schedules a later meeting (A3; C3). B ends when comments are returned (B3), so these records cannot establish which arrangement produced better revisions.</p><p>This authored example is separate from your own writing. The control does not generate a review or judge an interpretation.</p></div><label for="own-writing">Your own comparison paragraph</label><textarea id="own-writing" class="writing" placeholder="Write the relationship between the sources, with locators and any limits on the comparison."></textarea></section>
<section class="panel" aria-labelledby="records-title"><h2 id="records-title">Complete practice records · A1–C3</h2><div class="grid"><article class="record"><h3>A · In-person design workshop</h3><p><strong>A1:</strong> Pairs discussed poster drafts during one in-person workshop.</p><p><strong>A2:</strong> The recorded comments named items on the supplied review criteria, including the title and reading order.</p><p><strong>A3:</strong> The session included time for a revised sketch before it ended.</p></article><article class="record"><h3>B · Asynchronous design review</h3><p><strong>B1:</strong> Participants exchanged poster drafts and written comments asynchronously.</p><p><strong>B2:</strong> The recorded comments referred to the same supplied review criteria, including the title and reading order.</p><p><strong>B3:</strong> The record ends after comments were returned; it does not describe the next draft.</p></article><article class="record"><h3>C · In-person design workshop</h3><p><strong>C1:</strong> Pairs discussed poster drafts in person with review criteria available.</p><p><strong>C2:</strong> The recorded comments used general praise, such as “looks good,” without naming a criterion.</p><p><strong>C3:</strong> The schedule included a later revision meeting; this record does not describe what changed at that meeting.</p></article></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank scaffold · compare your own sources</h2><p>Start with two sources and the same themes. Keep full references in your normal research records. Use each source ID consistently and attach a locator to each note.</p><label for="own-question">Your review question</label><textarea id="own-question" placeholder="A question narrow enough to guide these columns"></textarea><p class="note">“Not yet checked” describes reading still to do. “Not addressed in the material read” describes the scope of a passage you checked. Neither establishes that an intervention had no effect.</p><div id="blank-sources" class="blank-grid"></div><div class="toolbar"><button id="reset" type="button">Reset typed work</button></div><p id="reset-status" class="status" role="status" aria-live="polite">All blank-source fields, notes and your comparison paragraph start empty. No writing is graded.</p><div id="confirmation" hidden><p>Clear your question, both source scaffolds, reading notes and comparison paragraph? The fictional matrix and worked synthesis stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed work</button><button id="keep" type="button">Keep typed work</button></div></div></section><footer>Typing remains only in this open page; reloading clears it. No files are uploaded, no work is stored or submitted, and no export is offered. Use your assignment’s required citation and submission format. Keep the original source passages and references available.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const themes={specificity:{title:'Feedback specificity',cells:[['A','Comments name supplied criteria.','A2'],['B','Comments name supplied criteria.','B2'],['C','Comments remain general despite criteria being available.','C1–C2']],relation:'A and B describe criterion-specific comments across different delivery modes. C differs from A despite sharing an in-person setting. Delivery mode alone does not account for all three records.'},revision:{title:'Opportunity to revise',cells:[['A','Revised-sketch time in the same session.','A3'],['B','No subsequent draft is described.','B3'],['C','A later revision meeting is scheduled.','C3']],relation:'A provides same-session sketch time; C schedules a later meeting. B stops before describing a subsequent draft. These records do not establish which arrangement produced better revisions.'},scope:{title:'What the record covers',cells:[['A','Workshop discussion and scheduled sketch time.','A1–A3'],['B','Asynchronous comments through their return.','B1–B3'],['C','Workshop comments and the planned follow-up.','C1–C3']],relation:'Keep each record’s setting and endpoint beside the notes. A planned opportunity is not evidence of a completed or better revision.'}};function choose(key){const t=themes[key];for(const k of Object.keys(themes))$('theme-'+k).setAttribute('aria-pressed',String(k===key));$('selected-theme').textContent=t.title;$('theme-cells').replaceChildren();for(const [id,note,locator]of t.cells){const a=document.createElement('article');a.className='record';const h=document.createElement('h3');h.textContent='Source '+id;const p=document.createElement('p');p.textContent=note;const loc=document.createElement('p');loc.className='locator';loc.textContent='Locator: '+locator;a.append(h,p,loc);$('theme-cells').append(a);}$('theme-relation').textContent=t.relation;$('theme-status').textContent=t.title+' selected. Your notes and writing are unchanged.';}for(const key of Object.keys(themes))$('theme-'+key).addEventListener('click',()=>choose(key));$('read-synthesis').addEventListener('click',()=>{const open=$('worked-synthesis').hidden;$('worked-synthesis').hidden=!open;$('read-synthesis').setAttribute('aria-expanded',String(open));$('read-synthesis').textContent=open?'Hide worked synthesis':'Read worked synthesis';});function field(parent,id,text,multiline){const label=document.createElement('label');label.htmlFor=id;label.textContent=text;const input=document.createElement(multiline?'textarea':'input');input.id=id;parent.append(label,input);}for(let row=1;row<=2;row++){const a=document.createElement('article');a.className='blank-source';const h=document.createElement('h3');h.textContent='Your source '+row;a.append(h);field(a,'source-'+row,'Source '+row+' ID and full reference',false);field(a,'context-'+row,'Relevant setting, method or scope',true);for(const [key,t]of Object.entries(themes)){const cell=document.createElement('div');cell.className='blank-cell';field(cell,'note-'+row+'-'+key,t.title+' · note and exact locator (label quotation or paraphrase)',true);const label=document.createElement('label');label.htmlFor='state-'+row+'-'+key;label.textContent=t.title+' · reading status';const select=document.createElement('select');select.id=label.htmlFor;for(const [value,text]of [['unchecked','Not yet checked'],['noted','Note recorded from material read'],['not-addressed','Not addressed in the material read']]){const option=document.createElement('option');option.value=value;option.textContent=text;select.append(option);}cell.append(label,select);a.append(cell);}$('blank-sources').append(a);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('reset').focus();$('reset-status').textContent='Kept all your typed work and reading-status selections.';});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('input,textarea'))field.value='';for(const select of document.querySelectorAll('select'))select.value='unchecked';$('confirmation').hidden=true;$('reset-status').textContent='Typed work cleared. All six reading statuses returned to Not yet checked. The fictional records, selected theme and worked synthesis are unchanged.';$('own-question').focus();});choose('specificity');})();</script></body></html>