Four scored criteria, observed evidence, and a blank review

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>Presentation rubric · evidence and rehearsal</title><style>
*{box-sizing:border-box}body{margin:0;background:#f5f2eb;color:#222b39;font:16px/1.5 system-ui,sans-serif}main{max-width:920px;margin:auto;padding:22px}h1{font-size:30px;line-height:1.15;margin:6px 0 12px}h2{font-size:20px;margin:0}p{margin:8px 0 14px}.eyebrow{font-size:16px;letter-spacing:.04em;color:#58606b}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0}button{font:inherit;min-height:44px;border:1px solid #515d75;border-radius:5px;padding:9px 13px;background:white;color:#253149;cursor:pointer}button.primary{background:#253b65;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #b45b16;outline-offset:3px}#result{border-left:5px solid #b45b16;background:#fff7df;padding:14px 18px;margin:16px 0}#total{font-size:25px;font-weight:750;margin:0}.criterion{background:white;border:1px solid #c5cad2;border-radius:7px;margin:14px 0;padding:18px}.heading{display:flex;align-items:start;justify-content:space-between;gap:16px}.score{flex:0 0 105px}label{display:block;font-weight:650;margin:12px 0 5px}.score label{margin:0 0 5px}input,textarea{font:inherit;max-width:100%;width:100%;padding:9px;border:1px solid #788298;border-radius:4px;background:white;color:#222b39}input{min-height:44px}textarea{min-height:120px;resize:vertical}details{margin-top:13px;border-top:1px solid #d9dce2;padding-top:10px}summary{cursor:pointer;min-height:35px}ol{padding-left:25px;margin:10px 0}li{padding:4px 0}#notice{color:#853918;font-weight:650}footer{margin:20px 0;color:#58606b}[hidden]{display:none!important}@media(max-width:500px){main{padding:12px}h1{font-size:26px}.criterion{padding:14px}.heading{display:block}.score{max-width:130px;margin-top:10px}}
</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL REVIEW · FIVE-MINUTE SHADE-DESIGN TALK</p><h1>Presentation rubric</h1><p>Score what the audience heard or saw, then name one change to rehearse.</p><div class="toolbar"><button id="sample" type="button">Filled review</button><button id="blank" type="button">Blank review</button></div><section id="result" aria-label="Calculated rubric review" aria-live="polite"><p id="total">12 / 16 rubric points</p><p id="next">Rehearse the chart explanation with larger labels and a deliberate pause. Check or remove the unsupported maintenance claim separately.</p></section><p id="context">The fictional task requires a source-supported comparison, a clear sequence, readable visuals, and audible delivery. Four equally weighted criteria; no course-grade conversion.</p><div id="criteria"></div><div class="toolbar"><button id="calculate" class="primary" type="button">Calculate review</button></div><p id="notice" role="status" aria-live="polite"></p><footer>Temporary review copy. A completed note is not a judgment of fairness. Keep actual assessment records and grading policy in your approved course system.</footer></main><script>
(()=>{'use strict';const $=s=>document.querySelector(s);const rows=[
{id:'explanation',name:'Explanation and evidence',score:3,note:'The comparison supports the recommendation; the maintenance advantage has no supplied source.',levels:['Required comparison is absent or does not support the recommendation.','Names the options but leaves a major part of the comparison unsupported.','Explains the comparison and recommendation; one supporting claim needs evidence.','Explains the comparison and recommendation using the supplied evidence for each supporting claim.']},
{id:'organization',name:'Organization',score:4,note:'Introduces the choice, compares both designs, and returns to the recommendation.',levels:['No understandable sequence links the required parts.','Required parts appear, but their relationship is difficult to follow.','A clear sequence connects the required parts; one transition leaves the relationship unclear.','The introduction, comparison, and recommendation follow a clear sequence with explicit connections.']},
{id:'visuals',name:'Visual support',score:2,note:'The relevant chart labels are too small to read from the intended viewing distance.',levels:['Required visual support is absent or does not support the explanation.','Relevant material is difficult to read or follow.','The visual is readable, but its connection to the spoken point is incomplete.','The relevant visual is readable and the speaker uses it while explaining the point.']},
{id:'delivery',name:'Delivery and pacing',score:3,note:'Speech is audible; the speaker moves on before the audience can inspect the comparison.',levels:['Most of the required explanation cannot be heard or followed.','Parts can be heard, but pace or volume makes key explanations difficult to follow.','Speech is audible; one part moves too quickly for the required comparison to be followed.','Speech is audible and paced so the audience can follow the required explanation and visual comparison.']}
];for(const r of rows){const card=document.createElement('section');card.className='criterion';const heading=document.createElement('div');heading.className='heading';const title=document.createElement('h2');title.textContent=r.name;const scoreWrap=document.createElement('div');scoreWrap.className='score';const label=document.createElement('label');label.htmlFor='score-'+r.id;label.textContent='Points (1–4)';const input=document.createElement('input');Object.assign(input,{id:'score-'+r.id,type:'number',min:'1',max:'4',step:'1',value:String(r.score)});input.setAttribute('aria-label',r.name+' points');scoreWrap.append(label,input);heading.append(title,scoreWrap);const noteLabel=document.createElement('label');noteLabel.htmlFor='note-'+r.id;noteLabel.textContent='Observed evidence';const note=document.createElement('textarea');note.id='note-'+r.id;note.value=r.note;const details=document.createElement('details');const summary=document.createElement('summary');summary.textContent='Read the four performance levels';const list=document.createElement('ol');for(const level of r.levels){const li=document.createElement('li');li.textContent=level;list.append(li);}details.append(summary,list);card.append(heading,noteLabel,note,details);$('#criteria').append(card);for(const field of [input,note])field.addEventListener('input',()=>{$('#result').hidden=true;$('#notice').textContent='Review changed. Calculate again after checking every score and evidence note.';});}
function build(){const missing=[];let total=0;for(const r of rows){const raw=$('#score-'+r.id).value.trim(),n=Number(raw);if(!raw||!Number.isInteger(n)||n<1||n>4)missing.push(r.name+': enter a whole-number score from 1 to 4');else total+=n;if(!$('#note-'+r.id).value.trim())missing.push(r.name+': add observed evidence');}$('#result').hidden=true;if(missing.length){$('#notice').textContent=missing.join('. ')+'.';return;}$('#total').textContent=total+' / 16 rubric points';$('#next').textContent='Total = '+rows.map(r=>$('#score-'+r.id).value).join(' + ')+'. Use the evidence notes to agree on a specific next rehearsal action.';$('#result').hidden=false;$('#notice').textContent='Review calculated. Check each judgment against the assignment and its performance descriptor.';}
$('#calculate').addEventListener('click',build);$('#blank').addEventListener('click',()=>{for(const r of rows){$('#score-'+r.id).value='';$('#note-'+r.id).value='';}$('#result').hidden=true;$('#notice').textContent='Blank review ready. Enter each score and its observed evidence.';});$('#sample').addEventListener('click',()=>{for(const r of rows){$('#score-'+r.id).value=r.score;$('#note-'+r.id).value=r.note;}build();$('#next').textContent='Rehearse the chart explanation with larger labels and a deliberate pause. Check or remove the unsupported maintenance claim separately.';$('#notice').textContent='Fictional filled review restored.';});})();
</script></body></html>