Match three seminar contributions with specific rubric descriptors

HTML for this example

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>Socratic seminar · calibrate an observable contribution</title><style>*{box-sizing:border-box}body{margin:0;background:#f1f4ef;color:#2e3b33;font:16px/1.55 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.18}h2{font-size:23px}h3{font-size:19px}.eyebrow{color:#64765e;letter-spacing:.05em}.card{background:white;border:1px solid #c6d1c0;padding:18px;margin:16px 0;border-radius:5px}.source{border-left:6px solid #52775c}.exchange>p{padding:12px;background:#f2f6ed}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}button,textarea,select{font:inherit;color:inherit}button{min-height:44px;padding:9px 13px;border:1px solid #597653;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#3c6349;color:white}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ad6224;outline-offset:3px}.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.level{background:#f1f4e9;border-top:5px solid #849452;padding:14px}.judgment{border-left:6px solid #ad7c39;background:#fff8e9}label{display:block;font-weight:650;margin:14px 0 5px}textarea,select{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #839378;border-radius:4px;background:white}textarea{min-height:95px;resize:vertical}select{min-height:44px}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#795023}footer{color:#60725e;margin:24px 0}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.levels{grid-template-columns:1fr}.card{padding:14px}}</style></head><body><main><p class="eyebrow">ORIGINAL GALLERY DISCUSSION · EXCERPT CALIBRATION</p><h1>Describe what the contribution does</h1><section class="card source"><h2>The shared text</h2><p><strong>S1.</strong> The gallery extends Friday opening to 20:00 for a four-week trial.</p><p><strong>S2.</strong> Weekday afternoon hours stay unchanged.</p><p><strong>S3.</strong> Visitor counts and staff comments will be reviewed after the trial; results are not yet available.</p><p><strong>Seminar prompt:</strong> What would you need before recommending a permanent Friday extension?</p></section><section class="card exchange"><h2>Complete fictional exchange</h2><p><strong>A:</strong> “It should stay because everyone likes evenings.”</p><p><strong>B:</strong> “S1 says four-week trial, and S3 says results come afterward; I would wait for those records.”</p><p><strong>C:</strong> “Building on B, which count comparison would help distinguish new visits from visits moved from afternoons?”</p><p>These are authored contributions, not actual student observations or a whole-seminar grade.</p></section><section class="card"><h2>Select the criterion, then inspect an excerpt</h2><div class="toolbar" aria-label="Criterion"><button id="textual" type="button" aria-pressed="true">Textual reasoning</button><button id="development" type="button" aria-pressed="false">Developing a contribution</button><button id="inquiry" type="button" aria-pressed="false">Productive inquiry</button></div><h3 id="criterion-title">Textual reasoning</h3><div id="levels" class="levels"></div><p><strong>Not observed:</strong> Available observation does not support a judgment for this criterion. This is separate from Level 1.</p><div class="toolbar" aria-label="Supplied excerpt"><button id="excerpt-a" type="button" aria-pressed="true">Excerpt A</button><button id="excerpt-b" type="button" aria-pressed="false">Excerpt B</button><button id="excerpt-c" type="button" aria-pressed="false">Excerpt C</button></div><section class="card judgment" aria-live="polite"><h3 id="judgment-title">A · Textual reasoning · Level 1</h3><p id="excerpt">“It should stay because everyone likes evenings.”</p><p id="reason">“Everyone likes evenings” has no support in the three supplied sentences.</p><p id="practice">Next practice: replace the universal claim with a supported claim, or frame the preference as a question to investigate.</p></section><p>Only the supplied excerpts are calibrated. Speaking frequency, eye contact and confidence are not evidence scores here.</p></section><section class="card"><h2>Blank criterion-and-evidence review</h2><label for="own-criterion">Criterion to review</label><select id="own-criterion"><option value="">Choose a criterion</option><option>Textual reasoning</option><option>Developing a contribution</option><option>Productive inquiry</option></select><label for="own-level">Descriptor proposed by the reviewer</label><select id="own-level"><option>Not observed</option><option>Level 1</option><option>Level 2</option><option>Level 3</option></select><label for="own-evidence">Relevant words or reason observation is unavailable</label><textarea id="own-evidence"></textarea><label for="own-next">Proposed next practice</label><textarea id="own-next"></textarea><label for="own-range">Observation range and context</label><textarea id="own-range"></textarea><div class="toolbar"><button id="build" type="button">Build review copy</button><button id="reset" type="button">Reset typed review</button></div><section id="confirmation" hidden><h3>Clear the five review fields?</h3><div class="toolbar"><button id="keep" type="button">Keep my review</button><button id="clear" type="button">Clear review fields</button></div></section><section id="review" class="card copy" hidden><h2>Your supplied review</h2><p id="own-judgment"></p><p id="own-words"></p><p id="own-practice"></p><p id="own-context"></p><p>The page has not evaluated your prose or assigned a seminar grade.</p></section></section><p id="status" role="status" aria-live="polite">Practice applying a descriptor before reviewing a full discussion.</p><footer>Temporary review only. Nothing is saved or submitted; use the class's required assessment process for actual observation records.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s),criteria={textual:['Textual reasoning',['States a position without relevant text support, or misrepresents the text.','Identifies relevant text but leaves the link to the claim partly unexplained.','Explains how specific text supports the claim and recognizes a relevant limit.']],development:['Developing a contribution',['Repeats a position without engaging with the prior idea.','Refers to a prior contribution and adds a relevant point.','Identifies the prior idea and develops, qualifies or challenges it with a reason.']],inquiry:['Productive inquiry',['Asks a question that assumes an unsupported answer or closes off examination.','Asks a relevant question about the text or argument.','Asks for evidence or a distinction that could advance the interpretation.']]},excerpts={a:'“It should stay because everyone likes evenings.”',b:'“S1 says four-week trial, and S3 says results come afterward; I would wait for those records.”',c:'“Building on B, which count comparison would help distinguish new visits from visits moved from afternoons?”'},calibration={'textual-a':['Level 1','“Everyone likes evenings” has no support in the three supplied sentences.','Next practice: replace the universal claim with a supported claim, or frame the preference as a question to investigate.'],'textual-b':['Level 3','B connects the four-week trial in S1 and pending records in S3 to a reason to wait. This recognizes a limit on recommending a permanent change.','Next practice: continue explaining what a source establishes and what remains unknown.'],'development-c':['Level 3','“Building on B” identifies the earlier idea and develops it with a reasoned distinction between new and shifted visits.','Next practice: explain what a proposed evidence source could and could not show.'],'inquiry-c':['Level 3','C asks which count comparison could distinguish new visits from shifted afternoon visits. The question identifies evidence needed to examine the proposed benefit.','No count results are supplied; the calibration does not answer the question.']};let criterion='textual',part='a';function render(){for(const id of Object.keys(criteria))$('#'+id).setAttribute('aria-pressed',String(id===criterion));for(const id of Object.keys(excerpts))$('#excerpt-'+id).setAttribute('aria-pressed',String(id===part));$('#criterion-title').textContent=criteria[criterion][0];$('#levels').replaceChildren();for(const[n,text]of criteria[criterion][1].entries()){const div=document.createElement('div');div.className='level';const h=document.createElement('h3'),p=document.createElement('p');h.textContent='Level '+(n+1);p.textContent=text;div.append(h,p);$('#levels').append(div);}const row=calibration[criterion+'-'+part]||['Not observed','This authored calibration does not supply a judgment for this criterion and excerpt. Inspect the relevant observation range before applying a descriptor.','Keep the other criterion-specific judgments separate. Not observed is not the lowest level.'];$('#judgment-title').textContent=part.toUpperCase()+' · '+criteria[criterion][0]+' · '+row[0];$('#excerpt').textContent=excerpts[part];$('#reason').textContent=row[1];$('#practice').textContent=row[2];}for(const id of Object.keys(criteria))$('#'+id).addEventListener('click',()=>{criterion=id;render();});for(const id of Object.keys(excerpts))$('#excerpt-'+id).addEventListener('click',()=>{part=id;render();});render();const ids=['own-criterion','own-level','own-evidence','own-next','own-range'];for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#review').hidden=true;$('#status').textContent='Review changed. Build a new copy to include the supplied wording.';});$('#build').addEventListener('click',()=>{const missing=[];if(!$('#own-criterion').value)missing.push('criterion');if(!$('#own-evidence').value.trim())missing.push('evidence note');$('#review').hidden=true;if(missing.length){$('#status').textContent='Complete: '+missing.join(', ')+'.';return;}$('#own-judgment').textContent=$('#own-criterion').value+' · reviewer-proposed '+$('#own-level').value;$('#own-words').textContent='Evidence: '+$('#own-evidence').value;$('#own-practice').textContent='Next practice: '+($('#own-next').value.trim()||'Not supplied.');$('#own-context').textContent='Observation range: '+($('#own-range').value.trim()||'Not supplied.');$('#review').hidden=false;$('#status').textContent='Review assembled from your supplied criterion, descriptor and evidence. No automatic prose judgment is made.';});$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all five review fields.';});$('#clear').addEventListener('click',()=>{$('#own-criterion').value='';$('#own-level').value='Not observed';for(const id of ['own-evidence','own-next','own-range'])$('#'+id).value='';$('#review').hidden=true;$('#confirmation').hidden=true;$('#own-criterion').focus();$('#status').textContent='All five review fields were cleared. Worked criterion and excerpt are unchanged.';});})();</script></body></html>