One direction, four counts — Give learners an original four-count movement score, ask them to change one spatial direction while preserving order and timing, and…

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>One direction, four counts</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;color:var(--ink);background:var(--bg)}main{max-width:1120px;margin:auto;padding:30px}h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.035em;margin:5px 0 12px}h2{font-size:23px;line-height:1.3;margin:0 0 15px}h3{font-size:17px;margin:0 0 8px}p{margin:0 0 12px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:750;color:var(--accent)}.small,footer{font-size:13px;color:var(--muted)}footer{margin:27px 0}.panel{background:white;border:1px solid var(--line);padding:23px;border-radius:9px;margin-top:22px}.two{display:grid;grid-template-columns:1.35fr 1fr;gap:23px}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}button{font:700 14px system-ui;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px;cursor:pointer}button.secondary{color:var(--accent);background:white}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid #d28b25;outline-offset:3px}label{display:block;font-size:13px;font-weight:650}input,textarea,select{display:block;width:100%;padding:11px;font:16px/1.5 system-ui;color:var(--ink);background:white;border:1px solid #9baab6;border-radius:4px;margin:6px 0 15px}textarea{min-height:100px;resize:vertical}.error{color:#a02b20;font-size:14px;min-height:23px}.result{font-size:40px;line-height:1.25;letter-spacing:-.04em;font-weight:750}.notice{padding:15px;background:#fff3db;border-left:4px solid #cf9d3e;font-size:14px;margin:16px 0}details{margin-top:23px;border-top:1px solid var(--line);padding-top:15px}summary{cursor:pointer;min-height:44px;font-weight:700}.time-row{display:grid;grid-template-columns:75px 1fr 70px;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.time-row p{font-size:14px;margin:5px 0}.time-row input{margin:0;text-align:center}.range{font-size:13px;font-weight:700;color:var(--accent)}[hidden]{display:none!important}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace} @media(max-width:740px){main{padding:23px 16px}.two{grid-template-columns:1fr;gap:0}.panel{padding:20px}}@media(max-width:380px){main{padding:20px 12px}.panel{padding:17px}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}.row button{flex:1}}:root{--ink:#54323c;--bg:#fff4ef;--accent:#a4485e;--muted:#866671;--line:#e5cbd0}h1{font-family:Georgia,serif;font-weight:500}.score{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:24px}.count{padding:23px 18px;background:white;border:1px solid var(--line);border-radius:13px;min-height:170px}.count b{font:46px Georgia,serif;color:#c47b83;display:block}.count.changed{background:#f7dce1;border:2px solid var(--accent)}.count p{font-size:15px}.score-control{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}.practice{background:#fffaf7}.four{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:620px){.score,.four{grid-template-columns:repeat(2,1fr)}.count{min-height:150px;padding:17px}}</style></head><body><main><p class="eyebrow">Movement composition · teacher planning and notation</p><h1>Change one direction.</h1><p>Four counts; performer’s right and left; the same gesture type and counting cue.</p><div class="score-control"><h2 id="score-title" style="margin:0">Original movement score</h2><div class="row"><button id="original" type="button" aria-pressed="true">Original</button><button id="variation" type="button" class="secondary">Variation</button></div></div><section class="score"><div class="count"><b>1</b><p>Gesture forward</p></div><div class="count"><b>2</b><p>Return to neutral</p></div><div id="count-three" class="count"><b>3</b><p id="direction">Gesture toward the performer’s right</p></div><div class="count"><b>4</b><p>Return to neutral</p></div></section><p id="difference" style="margin-top:17px">Original: forward / neutral / performer’s right / neutral.</p><div class="two"><section class="panel practice"><h2>Build the requested variation</h2><p class="small">Change count 3 to the performer’s left. Preserve counts 1, 2 and 4. This checks written notation, not physical performance.</p><div class="four"><label for="step-1">Count 1<select id="step-1"><option value="">Choose</option><option value="forward">Gesture forward</option><option value="neutral">Return to neutral</option><option value="left">Gesture left</option></select></label><label for="step-2">Count 2<select id="step-2"><option value="">Choose</option><option value="neutral">Return to neutral</option><option value="forward">Gesture forward</option><option value="right">Gesture right</option></select></label><label for="step-3">Count 3<select id="step-3"><option value="">Choose</option><option value="right">Performer’s right</option><option value="left">Performer’s left</option><option value="neutral">Return to neutral</option></select></label><label for="step-4">Count 4<select id="step-4"><option value="">Choose</option><option value="neutral">Return to neutral</option><option value="forward">Gesture forward</option><option value="left">Gesture left</option></select></label></div><button id="check-score" type="button">Compare written score</button><button id="clear-score" type="button" class="secondary">Clear attempt</button><p id="score-feedback" role="status" class="notice">No written score compared.</p><label for="learner-explanation">Learner’s own explanation · not automatically graded<textarea id="learner-explanation"></textarea></label></section><section class="panel"><h2>Confirm before teaching</h2><label for="gesture">Teacher-confirmed nontraveling gesture / neutral position<textarea id="gesture" placeholder="To confirm for this setting"></textarea></label><label for="cue">Agreed counting cue and durations<input id="cue" placeholder="To confirm; keep the same in both scores"></label><label for="participation">Space and participation options<textarea id="participation" placeholder="Teacher confirms suitable gesture, seated version or oral notation as appropriate"></textarea></label><p class="small">No jumps, traveling, lifts or contact are required. Count = sequence position; direction = where the gesture is directed; neutral = the confirmed resting position. A facing teacher may look mirrored.</p></section></div><section class="panel"><div class="row" style="justify-content:space-between"><h2>Teach, compare, explain</h2><strong id="total" class="result">30 minutes</strong></div><div id="time-rows"></div><p id="time-error" class="error" role="alert"></p><button id="restore-times" type="button" class="secondary">Restore 30-minute sequence</button></section><details><summary>Separate teacher key and model explanation</summary><p>Variation: forward, neutral, performer’s left, neutral. Only count 3 changes. Preserve order, duration, cue, gesture type and the other three rows.</p><p>Teacher model, not a learner response: “I changed the direction on count 3 from my right to my left. I kept the other three counts and the timing the same.”</p></details><section class="panel"><h2>Actual teaching evidence · starts blank</h2><label for="observation">Actual performed or notation evidence<textarea id="observation"></textarea></label><label for="next-step">Next teaching step<textarea id="next-step"></textarea></label></section><footer>Original written-score and lesson companion. No observed dance, motion tracking, physical-ability score, individual accommodation determination, standards approval or saved assessment. Keep actual learner work in the school’s normal records.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);
let variant=false;function show(){for(const id of['original','variation'])$(id).setAttribute('aria-pressed',String((id==='variation')===variant));$('score-title').textContent=variant?'Variation movement score':'Original movement score';$('direction').textContent='Gesture toward the performer’s '+(variant?'left':'right');$('count-three').className='count'+(variant?' changed':'');$('difference').textContent=variant?'Only count 3 changes: performer’s right → performer’s left. Counts 1, 2, 4 and timing stay the same.':'Original: forward / neutral / performer’s right / neutral.';}for(const id of['original','variation'])$(id).addEventListener('click',()=>{variant=id==='variation';show();});function compare(values){if(values.some(v=>!v))return'Incomplete: supply all four count entries.';const key=['forward','neutral','left','neutral'],wrong=values.map((v,i)=>v===key[i]?null:i+1).filter(x=>x!==null);return wrong.length?'Revisit count'+(wrong.length>1?'s ':' ')+wrong.join(', ')+'. Only count 3 becomes performer’s left; keep both neutral returns and count 1 forward.':'Written score matches: only count 3 changes right to left. Timing and gesture still need to be kept the same in the actual task.';}for(let i=1;i<=4;i++)$('step-'+i).addEventListener('change',()=>{$('score-feedback').textContent='No written score compared.';});$('check-score').addEventListener('click',()=>{$('score-feedback').textContent=compare([1,2,3,4].map(i=>$('step-'+i).value));});$('clear-score').addEventListener('click',()=>{for(let i=1;i<=4;i++)$('step-'+i).value='';$('learner-explanation').value='';$('score-feedback').textContent='No written score compared.';});const target=30,blocks=[['Confirm space and cues','Confirm gesture, neutral position, participation and performer orientation.',4],['Model original','Read each row with the same cue. Ask: What happens on count 2?',6],['Create variation','Change only count 3 right-to-left; annotate or describe the score.',8],['Compare and describe','Partners identify the changed row and retained order/timing.',6],['Individual score and explanation','Write or describe four entries and explain the single change.',4],['Reflect','Did notation make the change clear? Choose next steps from actual work.',2]];show();function schedule(values){if(values.some(v=>!/^\d+$/.test(v.trim())||+v<1||+v>180))return{error:'Enter whole positive minutes from 1 to 180 for every phase.'};let n=0;return{total:values.reduce((a,b)=>a+(+b),0),ranges:values.map(v=>{const s=n;n+=+v;return s+'–'+n+' min';})};}function timing(){const r=schedule(blocks.map((_,i)=>$('minutes-'+i).value));$('total').textContent=r.error?'Pending':r.total+' minutes';$('time-error').textContent=r.error||(r.total===target?'':'Review the edited length: original '+target+' minutes.');blocks.forEach((_,i)=>$('range-'+i).textContent=r.error?'Not calculated':r.ranges[i]);}blocks.forEach((b,i)=>{const row=document.createElement('div');row.className='time-row';const range=document.createElement('span');range.id='range-'+i;range.className='range';row.appendChild(range);const content=document.createElement('div'),h=document.createElement('strong'),p=document.createElement('p');h.textContent=b[0];p.textContent=b[1];content.appendChild(h);content.appendChild(p);row.appendChild(content);const label=document.createElement('label');label.textContent='Minutes';label.setAttribute('for','minutes-'+i);const input=document.createElement('input');input.id='minutes-'+i;input.value=String(b[2]);input.setAttribute('aria-label',b[0]+' minutes');input.setAttribute('inputmode','numeric');input.addEventListener('input',timing);label.appendChild(input);row.appendChild(label);$('time-rows').appendChild(row);});$('restore-times').addEventListener('click',()=>{blocks.forEach((b,i)=>$('minutes-'+i).value=String(b[2]));timing();});timing();
</script></body></html>