Yesterday's workshop · past-simple practice — Describe supplied completed past events with regular/irregular past forms and preserve the base verb after did/did not.
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>Yesterday's workshop · past-simple practice</title><style>
*{box-sizing:border-box}body{margin:0;background:#f9f1f7;color:#3d304c;font:16px/1.55 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:30px}h1{font:clamp(32px,4vw,46px)/1.15 Georgia,serif;letter-spacing:-.02em;margin:5px 0 12px}h2{font-size:23px;margin:0 0 15px}p{margin:0 0 12px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#95617e}.small{font-size:14px;color:#78647d}.layout{display:grid;grid-template-columns:1fr 1.3fr;gap:27px;margin-top:25px}.log{padding:24px;background:#47394e;border-radius:13px;color:#fff5fa}.log h2{font:27px Georgia,serif}.event{padding:16px 0;border-top:1px solid #ffffff28}.event span{display:block;color:#e4b9d0;font-size:12px;font-weight:700;letter-spacing:.05em}.event p{margin:5px 0 0;font-size:15px}.exercise{background:white;border:1px solid #dfcdd9;border-radius:13px;padding:25px}.scope{display:flex;gap:9px;margin-bottom:19px;flex-wrap:wrap}button{font:700 14px system-ui;min-height:44px;border:1px solid #8b4d77;border-radius:7px;background:#8b4d77;color:white;padding:10px 16px;cursor:pointer}button.secondary{background:#fff;color:#8b4d77}button[aria-pressed=true]{background:#5d3451;color:#fff}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:3px solid #c58628;outline-offset:3px}.items{display:flex;gap:6px;flex-wrap:wrap;margin:17px 0}.items button{font-size:12px;min-height:42px;padding:9px 11px;background:#f7eff5;color:#7a4769}.items button[aria-pressed=true]{background:#8b4d77;color:white}.question{font:27px/1.5 Georgia,serif;margin:16px 0}.evidence{background:#f6eef5;border-left:4px solid #bb8dab;padding:12px 15px;font-size:14px;margin:15px 0}.inputrow{display:grid;grid-template-columns:1fr;gap:15px}.inputrow.two{grid-template-columns:1fr 1fr}label{font-size:14px;font-weight:650}input{display:block;font:21px/1.4 system-ui;width:100%;padding:11px 12px;margin:6px 0 16px;border:1px solid #af97ac;border-radius:6px;background:#fff;color:#3d304c}.actions{display:flex;gap:9px;flex-wrap:wrap}.feedback{padding:17px;background:#f4e8f0;border-left:4px solid #a45c86;margin-top:20px;min-height:92px}.feedback strong{display:block;font-size:18px}.feedback p{font-size:15px;margin:5px 0 0}.hint{padding:14px;background:#fff4dd;color:#77522e;margin-top:15px;border-radius:6px;font-size:14px}.correct-sentence{font:25px/1.4 Georgia,serif;margin:16px 0 0;color:#6c3c61}.bottom{margin-top:25px;border-top:1px solid #dfcdd9;padding-top:17px}summary{font-weight:650;cursor:pointer;min-height:44px}footer{color:#78647d;font-size:13px;margin:25px 0}[hidden]{display:none!important}@media(max-width:760px){main{padding:23px 17px}.layout{grid-template-columns:1fr;gap:20px}.log{padding:22px}.event{padding:10px 0}.exercise{padding:21px}.question{font-size:25px}}@media(max-width:380px){main{padding:20px 12px}.actions button{flex:1;padding:10px}.inputrow.two{grid-template-columns:1fr}.scope button{flex:1;padding:10px 12px}}
</style></head><body><main><p class="eyebrow">Past simple · original completed-event practice</p><h1>Yesterday's workshop</h1><p>Use the supplied event log to choose the verb form without changing what happened.</p><div class="layout"><aside class="log"><h2>The event evidence</h2><div class="event"><span>E1 · 09:00</span><p>Avery checked the notes.</p></div><div class="event"><span>E2 · 10:00</span><p>Avery went to the supply desk.</p></div><div class="event"><span>E3 · preparation period</span><p>Avery did not label boxes.</p></div><div class="event"><span>E4 · 11:00</span><p>Avery labeled folders.</p></div><p style="font-size:13px;margin:20px 0 0;color:#e4b9d0">Fictional log. Boxes and folders are different objects; E4 does not reverse E3.</p></aside><section class="exercise"><div class="scope"><button type="button" id="scope-mixed" aria-pressed="true">Mixed practice · 5 items</button><button type="button" id="scope-regular" class="secondary" aria-pressed="false">Regular only · 2 items</button></div><p class="eyebrow" id="item-label">E1 · regular affirmative</p><div id="item-nav" class="items"></div><div id="prompt" class="question">Avery ___ the notes at 09:00.</div><p id="item-evidence" class="evidence">E1 says the notes were checked at 09:00.</p><div id="inputs" class="inputrow"><label id="aux-label" for="auxiliary" hidden>First blank · question auxiliary<input id="auxiliary" autocomplete="off" spellcheck="false"></label><label for="answer"><span id="answer-label">Verb form</span><input id="answer" autocomplete="off" spellcheck="false"></label></div><div class="actions"><button type="button" id="check">Check</button><button type="button" id="hint" class="secondary">Hint</button><button type="button" id="retry" class="secondary">Retry item</button><button type="button" id="reset" class="secondary">Reset all</button></div><div class="feedback" role="status"><strong id="verdict">No answer checked.</strong><p id="feedback">Use the event and the requested past-simple pattern.</p></div><p id="hint-text" class="hint" hidden></p><p id="worked-result" class="correct-sentence"></p></section></div><details class="bottom"><summary>Teacher key · separate review</summary><p class="small">E1 checked: regular affirmative. E4 labeled: US English regular spelling. E2 went: irregular go/went. E3 did not label: base label after did not. E2 question Did / go: base go after did.</p><p class="small">This checker accepts only the supplied forms, ignoring case and extra whitespace. It does not grade every paraphrase, contractions, other spelling variants, continuous/perfect constructions, or hypothetical uses.</p></details><footer>Original teaching material, not recorded learner performance. Changing scope or item clears incompatible answers and feedback while retaining the full event log. Nothing is submitted to a school system or saved after leaving this page.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);const items={e1:{label:'E1 · regular affirmative',prompt:'Avery ___ the notes at 09:00.',evidence:'E1 says the notes were checked at 09:00.',key:'checked',hint:'This affirmative uses the regular past form of check.',correct:'Check uses the regular past form checked here.',sentence:'Avery checked the notes at 09:00.'},e4:{label:'E4 · regular affirmative',prompt:'Avery ___ folders at 11:00.',evidence:'E4 is about folders, not the boxes in E3.',key:'labeled',hint:'Use the regular past form of label with the supplied US English spelling.',correct:'Labeled is the supplied US English past form. The object remains folders.',sentence:'Avery labeled folders at 11:00.'},e2:{label:'E2 · irregular affirmative',prompt:'Avery ___ to the supply desk at 10:00.',evidence:'E2 supplies a completed trip to the supply desk at 10:00.',key:'went',hint:'Go has an irregular past form; adding -ed does not form it.',correct:'Go has the irregular past form went. The event is still the E2 trip.',sentence:'Avery went to the supply desk at 10:00.'},e3:{label:'E3 · negative',prompt:'Avery ___ boxes.',evidence:'E3 explicitly supplies the negative fact about boxes.',key:'did not label',hint:'Use did not followed by the base verb, not the past form.',correct:'Did not is followed by base label, not labeled. This preserves E3.',sentence:'Avery did not label boxes.'},question:{label:'E2 · question',prompt:'___ Avery ___ to the supply desk?',evidence:'Ask about E2 without changing the supplied event into a negative.',key:'go',aux:'did',hint:'Put did before the subject and use the base form of the main verb.',correct:'Did precedes Avery; the following verb is base go, not went.',sentence:'Did Avery go to the supply desk?'}};let scope='mixed',current='e1';const normalize=s=>s.trim().toLowerCase().replace(/\s+/g,' ');
function assess(id,answer,aux=''){const item=items[id],a=normalize(answer),b=normalize(aux);if(!a||(item.aux&&!b))return{state:'incomplete',title:'Incomplete answer.',message:item.aux?'Fill both the auxiliary and verb blanks before checking.':'Enter a verb form before checking.'};if(a===item.key&&(!item.aux||b===item.aux))return{state:'correct',title:'This form matches the supplied key.',message:item.correct,sentence:item.sentence};let message=id==='e2'?'Go has the irregular past form went; goed is not the key.':id==='question'?'Use Did before Avery and base go after did. “Did Avery went” marks the past twice.':id==='e3'?'Use did not plus base label. Did not labeled repeats the past marking.':id==='e4'?'Use labeled, the supplied US English regular past form, with folders.':'Use checked for the completed E1 action; this is a regular past form.';return{state:'retry',title:'Try this pattern again.',message};}
function clear(){ $('answer').value='';$('auxiliary').value='';$('verdict').textContent='No answer checked.';$('feedback').textContent='Use the event and the requested past-simple pattern.';$('hint-text').hidden=true;$('worked-result').textContent='';}
function pending(){$('verdict').textContent='Edited · not checked.';$('feedback').textContent='Check the current response.';$('worked-result').textContent='';$('hint-text').hidden=true;}
function render(){const item=items[current];$('item-label').textContent=item.label;$('prompt').textContent=item.prompt;$('item-evidence').textContent=item.evidence;$('aux-label').hidden=!item.aux;$('inputs').className='inputrow'+(item.aux?' two':'');$('answer-label').textContent=item.aux?'Second blank · main verb':'Verb form';$('scope-mixed').setAttribute('aria-pressed',String(scope==='mixed'));$('scope-regular').setAttribute('aria-pressed',String(scope==='regular'));$('item-nav').replaceChildren();for(const id of(scope==='mixed'?['e1','e4','e2','e3','question']:['e1','e4'])){const b=document.createElement('button');b.type='button';b.id='item-'+id;b.textContent=id==='question'?'E2 question':id.toUpperCase();b.setAttribute('aria-pressed',String(current===id));b.addEventListener('click',()=>{current=id;clear();render();});$('item-nav').appendChild(b);}}
function check(){const r=assess(current,$('answer').value,$('auxiliary').value);$('verdict').textContent=r.title;$('feedback').textContent=r.message;$('worked-result').textContent=r.sentence||'';}
for(const s of['mixed','regular'])$('scope-'+s).addEventListener('click',()=>{scope=s;current='e1';clear();render();});$('check').addEventListener('click',check);$('hint').addEventListener('click',()=>{$('hint-text').textContent=items[current].hint;$('hint-text').hidden=!$('hint-text').hidden;});$('retry').addEventListener('click',clear);$('reset').addEventListener('click',()=>{scope='mixed';current='e1';clear();render();});for(const id of['answer','auxiliary']){$(id).addEventListener('input',pending);$(id).addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&!e.repeat){e.preventDefault();check();}});}render();
</script></body></html>