Two teammate feedback entries with concrete instances, observation limits, and proposed follow-up

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>Peer contribution · instance before judgment</title><style>*{box-sizing:border-box}body{margin:0;background:#f1f1eb;color:#344034;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,dd{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;background:white;border:1px solid #c3c9b6;border-radius:8px;margin:22px 0}.scope{padding:20px;background:#455d43;color:white;border-radius:8px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.record{padding:16px;background:#eff4e9;border-left:4px solid #77945d;margin:14px 0}.limited{background:#faf0df;border-color:#b0854c}.record h3{margin:0 0 10px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,input,textarea,select{font:inherit}button{min-height:44px;padding:10px 15px;border:1px solid #6b8058;border-radius:5px;background:white;color:inherit;cursor:pointer}button[aria-pressed="true"]{background:#455d43;color:white}button:hover{box-shadow:inset 0 0 0 1px #455d43}button:focus-visible,input:focus-visible,textarea:focus-visible,select: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;padding:10px;border:1px solid #829472;border-radius:4px;background:white;color:inherit}textarea{min-height:110px;resize:vertical}textarea[readonly]{min-height:230px;background:#f7f8f1}.note{padding:16px;background:#fff0d8;border-left:5px solid #b17c3e}footer{border-top:1px solid #c3c9b6;margin-top:26px;padding-top:18px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.grid{grid-template-columns:1fr}.toolbar button{flex:1 1 140px}}</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL WELCOME-GUIDE PROJECT</p><h1>Describe the contribution you could observe.</h1><p>Rae reviews Jo and Kim’s contributions. Keep the specific instance beside the feedback, and leave room for a behavior Rae could not observe.</p><div class="scope">These are authored practice records, not actual student work. This page supplies no grade, ranking, anonymity, privacy arrangement or agreed follow-up. Actual feedback belongs in the course-required system.</div>
<section class="panel" aria-labelledby="worked-title"><h2 id="worked-title">Worked contribution feedback</h2><div class="toolbar" role="group" aria-label="Worked teammate"><button id="jo" type="button" aria-pressed="true">Jo</button><button id="kim" type="button" aria-pressed="false">Kim</button></div><h3 id="selected-name">Jo</h3><div id="worked-entries" class="grid"></div><p id="worked-status" role="status" aria-live="polite">Jo shown. Your practice form is unchanged.</p><button id="limits" type="button" aria-expanded="false" aria-controls="limits-content">Compare observation limits</button><div id="limits-content" hidden><div class="grid"><article class="record limited"><h3>Kim · Cannot observe check-in follow-through</h3><p>E4: Rae did not attend Kim's work-planning check-in and has no record of what was agreed there.</p><p>Ask for the relevant project record before judging follow-through.</p></article><article class="record limited"><h3>Jo · Cannot observe revision response</h3><p>E5: Rae has no supplied instance showing Jo responding to a teammate's revision request.</p><p>This does not support “Jo ignores feedback.” Use the instructor’s review process if follow-up is needed.</p></article></div><p class="note">Cannot observe describes the reviewer’s evidence. It is not the lowest grade or a finding that a teammate did no work.</p></div></section>
<section class="panel" aria-labelledby="evidence-title"><h2 id="evidence-title">Complete supplied practice records</h2><p><strong>E1:</strong> The team agreed that Jo would return the assigned guide section with source references at the review checkpoint.</p><p><strong>E2:</strong> Jo returned that section with the references at the agreed checkpoint.</p><p><strong>E3:</strong> Kim's draft used the heading “More information.” Rae asked for a heading that named what a visitor would find. Kim changed it to “Where to collect your welcome packet” and explained the change in a review note.</p><p><strong>E4:</strong> Rae did not attend Kim's work-planning check-in and has no record of what was agreed there.</p><p><strong>E5:</strong> Rae has no supplied instance showing Jo responding to a teammate's revision request.</p></section>
<section class="panel" aria-labelledby="form-title"><h2 id="form-title">Blank practice feedback form</h2><p>Describe one contribution you observed and one useful next step. Before real use, the instructor must explain who reads feedback, whether it is identifiable and how assessment uses it.</p><div class="grid"><div><label for="teammate">Teammate</label><input id="teammate"><label for="focus">Behavior focus</label><input id="focus"></div><div><label for="observation">Observation status</label><select id="observation"><option value="">Choose a status</option><option value="observed">Observed</option><option value="cannot">Cannot observe</option></select><p id="observation-help">Choose the status that reflects the evidence available to you.</p></div></div><label id="instance-label" for="instance">Specific instance or reason observation is unavailable</label><textarea id="instance"></textarea><label for="next">Proposed next step · not an agreement</label><textarea id="next"></textarea><label for="response">Optional response or instructor follow-up</label><textarea id="response"></textarea><div class="toolbar"><button id="build" type="button">Build review copy</button><button id="reset" type="button">Clear my form</button></div><p id="status" class="note" role="status" aria-live="polite">The form starts blank. Review text uses only what you supply.</p><label for="review-copy">Local review copy · select and copy manually</label><textarea id="review-copy" readonly></textarea><div id="confirmation" hidden><p>Clear all your form fields and the local review copy? The worked entries and practice records stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed feedback</button><button id="keep" type="button">Keep typed feedback</button></div></div></section><footer>Typing is temporary in this open page; reloading clears it. No student data is collected, submitted or stored. The page does not score contributions, divide a group grade or promise anonymous handling.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const entries={jo:[['Follow-through on an agreed contribution','Observed in this record','E1–E2: Jo returned the assigned section with references at the checkpoint.','Proposed next step: keep the section’s source references attached during the next revision.'],['Responding to revision requests','Cannot observe from supplied material','E5 supplies no instance. Do not convert this into “Jo ignores feedback.”','Ask about this behavior through the instructor’s review process if needed.']],kim:[['Responding to revision requests','Observed in this record','E3: Kim replaced “More information” with “Where to collect your welcome packet” and explained the change in a review note.','Proposed next step: keep a short explanation beside further wording changes.'],['Follow-through on a check-in agreement','Cannot observe from supplied material','E4: Rae missed that check-in and has no agreement record.','Ask for the relevant project record before judging follow-through.']]};function choose(key){$('jo').setAttribute('aria-pressed',String(key==='jo'));$('kim').setAttribute('aria-pressed',String(key==='kim'));const name=key==='jo'?'Jo':'Kim';$('selected-name').textContent=name;$('worked-entries').replaceChildren();for(const [focus,status,instance,next]of entries[key]){const a=document.createElement('article');a.className='record'+(status.startsWith('Cannot')?' limited':'');const h=document.createElement('h3');h.textContent=focus;a.append(h);for(const text of [status,instance,next]){const p=document.createElement('p');p.textContent=text;a.append(p);}$('worked-entries').append(a);}$('worked-status').textContent=name+' shown. Your practice form is unchanged.';}$('jo').addEventListener('click',()=>choose('jo'));$('kim').addEventListener('click',()=>choose('kim'));$('limits').addEventListener('click',()=>{const open=$('limits-content').hidden;$('limits-content').hidden=!open;$('limits').setAttribute('aria-expanded',String(open));$('limits').textContent=open?'Hide observation limits':'Compare observation limits';});const ids=['teammate','focus','observation','instance','next','response'];function changed(){$('review-copy').value='';$('status').textContent='Form edited. Previous review copy cleared; build again after checking the evidence.';const cannot=$('observation').value==='cannot';$('instance-label').textContent=cannot?'Reason you cannot observe this behavior':'Specific instance or reason observation is unavailable';$('observation-help').textContent=cannot?'Describe the limit on your evidence. Do not invent a behavior or treat missing observation as a negative judgment.':'An Observed review needs a specific instance. A proposed next step is not an agreed action.';}for(const id of ids)$(id).addEventListener(id==='observation'?'change':'input',changed);$('build').addEventListener('click',()=>{const values=Object.fromEntries(ids.map(id=>[id,$(id).value.trim()]));const missing=[];if(!values.teammate)missing.push('teammate');if(!values.focus)missing.push('behavior focus');if(!values.observation)missing.push('observation status');if(!values.instance)missing.push(values.observation==='cannot'?'reason you cannot observe':'specific instance');if(missing.length){$('review-copy').value='';$('status').textContent='Still needed: '+missing.join('; ')+'. No review copy built.';return;}const lines=['Teammate: '+values.teammate,'Behavior focus: '+values.focus,'Observation status: '+(values.observation==='observed'?'Observed':'Cannot observe'),(values.observation==='observed'?'Specific instance: ':'Reason observation is unavailable: ')+values.instance];if(values.next)lines.push('Proposed next step (not agreed): '+values.next);if(values.response)lines.push('Response/follow-up: '+values.response);$('review-copy').value=lines.join('\n\n');$('status').textContent='Review copy built from your supplied text. Check its evidence and scope; no grade or truth assessment was made.';});$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept your form and current review copy.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const id of [...ids,'review-copy'])$(id).value='';$('instance-label').textContent='Specific instance or reason observation is unavailable';$('observation-help').textContent='Choose the status that reflects the evidence available to you.';$('confirmation').hidden=true;$('status').textContent='Your form and review copy were cleared. Worked records are unchanged.';$('teammate').focus();});choose('jo');})();</script></body></html>