Compare two interviewers' notes with the same question and rating descriptions

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>Interview scorecard · evidence before ratings</title><style>
*{box-sizing:border-box}body{margin:0;background:#f4f2eb;color:#1e3038;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.15;margin:8px 0 14px}h2{font-size:22px;line-height:1.3}h3{font-size:18px}.eyebrow{font-size:16px;color:#56666b;letter-spacing:.05em}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}button,input,textarea{font:inherit}button{min-height:44px;padding:9px 13px;border:1px solid #376271;border-radius:5px;color:#214855;background:#fff;cursor:pointer}button[aria-pressed=true],button.primary{background:#224f5d;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b65b19;outline-offset:3px}.panel,.anchor,.note{padding:18px;background:#fff;border:1px solid #c3cdcb;border-radius:7px;margin:14px 0}.question{border-left:5px solid #bd6c32;background:#fff8ec}.anchors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.anchor{margin:0}.rating{display:block;font-size:20px;font-weight:750;margin-bottom:6px}.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.note{margin:0}.note p:last-child{margin-bottom:0}.proposal{border-left:5px solid #2c7564;background:#ecf5ef}.quiet{color:#516269}label{display:block;font-weight:650;margin:16px 0 5px}input,textarea{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #788a90;border-radius:4px;background:white;color:#1e3038}input{min-height:44px}textarea{min-height:100px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7b421b}footer{margin:24px 0;color:#516269}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.anchors,.notes{grid-template-columns:1fr}.panel,.anchor,.note{padding:14px}}
</style></head><body><main><p class="eyebrow">FICTIONAL ARCHIVE COORDINATOR · PANEL PRACTICE</p><h1>Put the evidence beside the rating</h1><p>Compare what each interviewer recorded with the same question and rating descriptions.</p><nav class="toolbar" aria-label="Scorecard view"><button id="filled" type="button" aria-pressed="true">Filled example</button><button id="blank" type="button" aria-pressed="false">Blank scorecard</button></nav>
<section id="filled-view"><section class="panel question"><h2>The question</h2><p>A delivery manifest lists 12 boxes. The inventory entry lists 11. What would you do before marking the delivery complete?</p></section><h2>Question-specific rating descriptions</h2><div class="anchors"><div class="anchor"><span class="rating">1</span>Marks the delivery complete or changes a count without checking the source records.</div><div class="anchor"><span class="rating">2</span>Compares the manifest with the inventory entry and records the unresolved discrepancy.</div><div class="anchor"><span class="rating">3</span>Does everything in 2, identifies a specific next check, and says who will receive the unresolved discrepancy and next step.</div><div class="anchor"><span class="rating">Not assessed</span>The question was not asked, or there is no response evidence to rate. This is separate from the numbered scale.</div></div><section class="panel"><h2>The practice response</h2><blockquote>“I would compare the delivery manifest with the inventory entry and note which box is missing before closing the delivery.”</blockquote><p class="quiet">These anchors concern this discrepancy question. They do not measure overall suitability for a job.</p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare evidence</button><section id="comparison" hidden><h2>Independent original entries</h2><div class="notes"><article class="note"><h3>Jo · original rating 2</h3><p>Compares the manifest and inventory entry; records the missing box before closing.</p></article><article class="note"><h3>Kai · original rating 3</h3><p>Checks the records and notes the missing box.</p></article></div><section class="panel"><h3>What supports the disputed 3?</h3><p>Both notes describe checking and recording. The response does not name a specific next check or the person who would receive the discrepancy. Those additional actions are required for 3.</p><button id="calibrate" type="button" aria-expanded="false" aria-controls="proposal">Show proposed calibration note</button><div id="proposal" class="panel proposal" hidden><h3>Proposed revision for Kai: 2</h3><p>The response describes checking the two records and noting the missing box. It does not yet describe the additional actions required for 3.</p><p>Kai's original rating remains 3 above. This is a proposed revision for discussion, not an agreed decision.</p></div></section></section></section>
<section id="blank-view" hidden><h2>Prepare your question</h2><p>Keep original entries separate from any proposed revision. This page arranges your supplied wording; it does not grade a response.</p><label for="question">Question</label><textarea id="question"></textarea><label for="scale">Rating labels and observable descriptions, including Not assessed</label><textarea id="scale"></textarea><label for="evidence">Response evidence</label><textarea id="evidence"></textarea><label for="interviewer">Interviewer</label><input id="interviewer"><label for="original">Original rating</label><input id="original"><label for="revision">Proposed revision and reason, if any</label><textarea id="revision"></textarea><div class="toolbar"><button id="build" class="primary" type="button">Build review copy</button><button id="reset" type="button">Reset typed work</button></div><section id="confirm" class="panel" hidden aria-label="Confirm reset"><h3>Clear all six typed fields?</h3><p>Your typed text will be removed from this open page.</p><div class="toolbar"><button id="keep" type="button">Keep my text</button><button id="clear" type="button">Clear typed fields</button></div></section><section id="review" class="panel copy" hidden><h2>Your supplied review copy</h2><h3>Question</h3><p id="question-out"></p><h3>Rating descriptions</h3><p id="scale-out"></p><h3>Response evidence</h3><p id="evidence-out"></p><h3>Independent original entry</h3><p id="original-out"></p><h3>Proposed revision</h3><p id="revision-out"></p></section></section><p id="status" role="status" aria-live="polite">Practice material only. No hiring recommendation is generated.</p><footer>Typed text lasts only in this open page. Keep actual candidate records in your team's authorized hiring system. Nothing here is saved or submitted.</footer></main><script>
(()=>{'use strict';const $=s=>document.querySelector(s),ids=['question','scale','evidence','interviewer','original','revision'];let returnFocus=null;function hideConfirm(){ $('#confirm').hidden=true;returnFocus=null; }function view(blank){$('#filled-view').hidden=blank;$('#blank-view').hidden=!blank;$('#filled').setAttribute('aria-pressed',String(!blank));$('#blank').setAttribute('aria-pressed',String(blank));hideConfirm();$('#status').textContent=blank?'Blank scorecard open. Typed fields remain in this open page.':'Fictional filled example open. Your typed fields are retained.';}$('#filled').addEventListener('click',()=>view(false));$('#blank').addEventListener('click',()=>view(true));$('#compare').addEventListener('click',()=>{const open=$('#comparison').hidden;$('#comparison').hidden=!open;$('#compare').setAttribute('aria-expanded',String(open));});$('#calibrate').addEventListener('click',()=>{const open=$('#proposal').hidden;$('#proposal').hidden=!open;$('#calibrate').setAttribute('aria-expanded',String(open));});for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#review').hidden=true;$('#status').textContent='Entries changed. Build a new review copy to include the edits.';});$('#build').addEventListener('click',()=>{const missing=['question','scale','evidence','interviewer','original'].filter(id=>!$('#'+id).value.trim());$('#review').hidden=true;if(missing.length){$('#status').textContent='Complete: '+missing.map(id=>({question:'Question',scale:'Rating descriptions',evidence:'Response evidence',interviewer:'Interviewer',original:'Original rating'}[id])).join(', ')+'.';return;}for(const id of ['question','scale','evidence'])$('#'+id+'-out').textContent=$('#'+id).value;$('#original-out').textContent=$('#interviewer').value+' · original rating: '+$('#original').value;$('#revision-out').textContent=$('#revision').value.trim()||'No proposed revision supplied.';$('#review').hidden=false;$('#status').textContent='Review copy built from your supplied text. No response has been scored by the page.';});$('#reset').addEventListener('click',()=>{returnFocus=$('#reset');$('#confirm').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{const target=returnFocus;hideConfirm();target?.focus();$('#status').textContent='Reset canceled. All six typed fields were kept.';});$('#clear').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#review').hidden=true;hideConfirm();$('#question').focus();$('#status').textContent='All six typed fields were cleared.';});})();
</script></body></html>