Inspect criterion-specific interview and work-sample evidence without averaging unlike observations

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>What does each assessment record show?</title><style>*{box-sizing:border-box}body{margin:0;background:#eef2f3;color:#253d48;font:16px/1.65 system-ui,sans-serif}main{max-width:940px;margin:auto;padding:24px}h1{font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.2}h2{font-size:1.35rem}h3{font-size:1.12rem}.eyebrow{font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#52717d}.panel{padding:22px;border:1px solid #bed0d7;background:#fff;border-radius:10px;margin:18px 0}.columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.record{border-top:4px solid #537986;background:#edf5f7;padding:16px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}button,input,textarea{font:inherit}button{padding:10px 14px;min-height:44px;background:#fff;color:#244d60;border:1px solid #5c8191;border-radius:6px;cursor:pointer}button[aria-pressed=true],button.primary{background:#285b70;color:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #bd5917;outline-offset:3px}label{display:block;margin-top:16px;font-weight:650}input,textarea{display:block;width:100%;min-width:0;padding:10px;border:1px solid #7c98a5;border-radius:6px;margin-top:5px}textarea{min-height:90px}.notice{background:#e9f1fa;border-left:4px solid #5b7eab;padding:14px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}details{border-bottom:1px solid #beced7;padding:12px 0}summary{cursor:pointer;font-weight:700;min-height:44px}summary:focus-visible{outline:3px solid #bd5917}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.panel{padding:16px}.columns{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">Criterion × assessment method</p><h1>What does each record show?</h1><p>Fictional visitor-services review. Keep the original interview and work-sample observations visible; no overall score or hiring recommendation.</p>
<section class="panel"><h2>The original records</h2><details open><summary>I1 · Interview</summary><p>The applicant describes noticing two requests for the same slot, comparing the request records, and checking with the coordinator before communicating the confirmed arrangement.</p></details><details open><summary>W1 · Writing sample</summary><p>“Follow the published schedule. If the requested slot is unavailable, use the exception process.” The next step in that process is unspecified.</p></details></section>
<section class="panel"><h2>Review by job need</h2><div class="actions"><button type="button" id="c1" aria-pressed="true">C1 · Written instructions</button><button type="button" id="c2" aria-pressed="false">C2 · Schedule conflicts</button><button type="button" id="gapButton">Compare the evidence gaps</button><button type="button" id="question">Reveal review question</button></div><h3 id="criterion">C1: Identify the next step when the usual schedule does not apply</h3><div class="columns"><article class="record"><h3>I1 · Interview</h3><p id="interview">No written-instruction evidence in this interview record.</p></article><article class="record"><h3>W1 · Work sample</h3><p id="sample">Observed gap: the exception next step is not specified.</p></article></div><p class="notice" id="finding" role="status">Written-instruction clarity remains unresolved. I1's coordination account does not answer C1.</p><p id="reviewQuestion" hidden></p></section>
<section class="panel"><h2>Replace a broad impression</h2><p><strong>Unsupported:</strong> “Excellent at all communication.”</p><p><strong>Bounded review:</strong> I1 describes a coordination sequence relevant to C2. W1 leaves C1's exception next step unspecified. Review that gap under the team's established process.</p><p>Missing evidence is not the same as an observed ambiguity. Neither is a diagnosis of a person's general ability. No common numerical scale or combination rule is supplied.</p></section>
<section class="panel"><h2>Practice a consolidated note</h2><p>Use fictional or sanitized material. Actual applicant records belong in the private established workflow.</p><label for="criterionInput">Job criterion · required</label><input id="criterionInput"><label for="sourceInput">Method and source ID · required</label><input id="sourceInput"><label for="observation">Exact observation</label><textarea id="observation"></textarea><label for="notes">Evidence limits and review question</label><textarea id="notes"></textarea><div class="actions"><button type="button" id="build" class="primary">Build evidence note</button><button type="button" id="reset">Reset practice</button></div><p id="notice" class="notice" role="status">Connect a method-specific observation with a criterion.</p><pre id="output" hidden></pre><div id="resetPanel" hidden><p>Clear your practice note?</p><button type="button" id="cancel">Keep note</button> <button type="button" id="confirm">Clear note</button></div></section></main><script>
'use strict';const $=s=>document.querySelector(s);const entries={c1:['C1: Identify the next step when the usual schedule does not apply','No written-instruction evidence in this interview record.','Observed gap: the exception next step is not specified.','Written-instruction clarity remains unresolved. I1\'s coordination account does not answer C1.'],c2:['C2: Identify conflicting requests, check information, explain the next coordination step','I1 describes identifying the conflict, comparing records, and checking with the coordinator.','W1 names an exception situation but does not demonstrate the full coordination sequence.','Preserve the method difference. This does not establish C1 writing clarity or a combined candidate score.']};for(const id of ['c1','c2'])$('#'+id).addEventListener('click',()=>{const d=entries[id];['criterion','interview','sample','finding'].forEach((key,n)=>$('#'+key).textContent=d[n]);for(const k of ['c1','c2'])$('#'+k).setAttribute('aria-pressed',String(k===id))});$('#gapButton').addEventListener('click',()=>{$('#finding').textContent='Missing evidence: I1 has no written instruction to assess for C1. Observed gap: W1 contains an instruction with an unspecified exception next step. Do not collapse both into zero or complete.'});$('#question').addEventListener('click',()=>{$('#reviewQuestion').hidden=false;$('#reviewQuestion').textContent='Panel review question: How should W1\'s unclear exception next step be reviewed against C1 and the stated assessment conditions under our established process? No follow-up finding is supplied.'});const ids=['criterionInput','sourceInput','observation','notes'];let built=false;for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#output').hidden=true;$('#notice').textContent=built?'Entries changed. Evidence note is stale; build again.':'Practice entries changed.';$('#resetPanel').hidden=true});$('#build').addEventListener('click',()=>{const missing=[['criterionInput','Job criterion'],['sourceInput','Method and source ID']].filter(([id])=>!$('#'+id).value.trim()).map(([,n])=>n);if(missing.length){$('#notice').textContent='Complete: '+missing.join(', ')+'.';$('#output').hidden=true;return}$('#output').textContent='EVIDENCE NOTE — no candidate rating\nCriterion: '+$('#criterionInput').value+'\nMethod/source: '+$('#sourceInput').value+'\nObservation: '+($('#observation').value||'Not supplied')+'\nLimits/question: '+($('#notes').value||'To review')+'\nDecision: not supplied; use the established process.';$('#output').hidden=false;$('#notice').textContent='Evidence note built. No combined score or hiring decision.';built=true});$('#reset').addEventListener('click',()=>{$('#resetPanel').hidden=false;$('#notice').textContent='Reset requested. Choose whether to keep the note.'});$('#cancel').addEventListener('click',()=>{$('#resetPanel').hidden=true;$('#notice').textContent='Reset canceled. Evidence note entries retained.'});$('#confirm').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#output').hidden=true;$('#output').textContent='';$('#resetPanel').hidden=true;built=false;$('#notice').textContent='Practice note cleared. I1 and W1 remain unchanged.'});
</script></body></html>