Workshop Routines · Present Simple — Build affirmative and negative descriptions of supplied recurring routines while preserving the subject, time context 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>Workshop Routines · Present Simple</title><style>:root{--bg:#f6f3ff;--ink:#372c57;--accent:#7154ac;--line:#d7ccec;--wash:#eee6fc;}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}main{max-width:1100px;margin:auto;padding:26px 24px 54px}h1,h2,h3,p{margin:0}h1{font-size:clamp(27px,4vw,39px);line-height:1.15;letter-spacing:-.03em}h2{font-size:23px}h3{font-size:18px}header{margin-bottom:18px}header p{margin-top:8px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:bold;color:var(--accent)}button,input,textarea,select{font:inherit}button{min-height:44px;padding:9px 15px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:bold}button.secondary{background:#fff;color:var(--accent)}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}input,textarea,select{width:100%;min-height:44px;border:1px solid #919cad;background:#fff;color:var(--ink);border-radius:5px;padding:9px 11px}textarea{resize:vertical;min-height:94px}input[type=checkbox]{width:20px;min-height:20px;vertical-align:middle;margin-right:8px}label{display:block;margin:11px 0 5px;font-size:14px;font-weight:bold}:focus-visible{outline:3px solid #dc8c21;outline-offset:3px}.actions{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;min-width:0}.columns{display:grid;grid-template-columns:1.45fr 1fr;gap:22px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.muted{color:#536176;font-size:14px}.notice{margin:14px 0;background:var(--wash);border-left:4px solid var(--accent);padding:13px 16px;overflow-wrap:anywhere}.error{color:#a42d25;font-weight:bold}.below{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.below>p{margin:9px 0}.big{font-size:clamp(34px,5vw,56px);line-height:1.15;font-weight:bold}.tag{font-size:12px;padding:4px 8px;border-radius:4px;background:var(--wash)}.row{display:flex;gap:10px;align-items:end}.row>*{min-width:0}.row .unit{width:110px;flex:none}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,monospace}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;vertical-align:top;padding:9px;border-bottom:1px solid var(--line)}th{font-size:12px;text-transform:uppercase}.scroll{overflow-x:auto}.foot{font-size:14px;color:#536176;margin-top:24px}summary{cursor:pointer;font-weight:bold;min-height:44px;padding:10px 0}details{margin:18px 0}.readonly{font:13px/1.5 ui-monospace,monospace;min-height:170px}.hash{overflow-wrap:anywhere;font:12px/1.6 ui-monospace,monospace}[hidden]{display:none!important}@media(max-width:800px){.columns{grid-template-columns:1fr}}@media(max-width:520px){main{padding:18px 14px 40px}.panel{padding:17px}.two,.three{grid-template-columns:1fr}.actions button{flex-grow:1}td,th{padding:7px}.row .unit{width:90px}}.routine{padding:24px;background:#fffcf2;border:1px solid #e5d9b8;border-left:6px solid #d8a84b;border-radius:8px;margin:16px 0}.routine blockquote{margin:10px 0;font:24px/1.5 Georgia,serif}.item-nav{display:flex;gap:8px;flex-wrap:wrap}.item-nav button{background:white;color:#7154ac}.item-nav button[aria-pressed=true]{background:#7154ac;color:white;box-shadow:none}.sentence{font-size:clamp(24px,3vw,32px);line-height:1.6;margin:18px 0}.choice-list{display:flex;flex-wrap:wrap;gap:10px}.choice-list button{background:white;color:#5b418f;font-size:20px;padding:13px 22px}.choice-list button[aria-pressed=true]{background:#eee6fc}.completed{font:25px/1.5 Georgia,serif;padding:20px;background:#fff;border:1px solid var(--line);border-radius:8px}#hint-text{min-height:24px}.item-side p{margin:10px 0}.teacher-key p{padding:10px;border-bottom:1px solid var(--line)}</style></head><body><main><header><p class="eyebrow">Original fictional routines · local practice</p><h1>Keep the routine. Choose the verb.</h1><p>Use the present simple to describe the supplied subject and recurring fact.</p></header><nav class="item-nav" aria-label="Routine items"><button type="button" id="item-1" class="secondary">R1 · Nora / Monday</button><button type="button" id="item-2" class="secondary">R2 · two people / Monday</button><button type="button" id="item-3" class="secondary">R3 · Sunday negative</button><button type="button" id="item-4" class="secondary">R4 · two people / Tuesday</button></nav><div class="routine"><p class="eyebrow" id="context-id">Routine card R1</p><blockquote id="context">Every Monday, Nora labels boxes.</blockquote><p id="context-cue">Subject: Nora · Time cue: every Monday · Affirmative routine</p></div><div class="columns"><section class="panel"><p class="eyebrow">Your task · present simple</p><p class="sentence" id="prompt">Nora ___ boxes every Monday.</p><div class="choice-list" aria-label="Choose the missing verb form"><button type="button" id="choice-0" class="secondary">label</button><button type="button" id="choice-1" class="secondary">labels</button><button type="button" id="choice-2" class="secondary">third option</button></div><div class="actions"><button type="button" id="check">Check choice</button><button type="button" id="hint" class="secondary">Show hint</button><button type="button" id="retry" class="secondary">Retry this routine</button><button type="button" id="reset" class="secondary">Reset practice</button></div><p id="hint-text" class="muted" aria-live="polite"></p><p id="feedback" class="notice" role="status">Not answered — choose a form before checking.</p></section><aside class="item-side"><h2>Completed sentence</h2><p class="completed" id="completed">Your checked sentence will appear here.</p><p class="muted">A different subject has its own supplied routine. This activity never turns a true routine into a negative statement just to change the form.</p><p id="reason" class="muted"></p></aside></div><details class="below"><summary>Teacher key · separate from the learner task</summary><div class="teacher-key"><p>R1: labels — Nora is third-person singular in an affirmative routine.</p><p>R2: sort — Kai and Nora form a plural subject.</p><p>R3: does not open — does carries agreement; open stays in its base form.</p><p>R4: label — Kai and Nora form a plural subject in the separately supplied Tuesday routine.</p></div></details><p class="foot">The contexts and keys are authored practice fixtures, not learner records. No responses are saved or collected. This set covers singular/plural affirmative routines and does-not plus a base verb. Be, continuous forms and other present-simple uses need separate contexts and keys. Teacher keys in client-side HTML are inspectable and are not secure assessment storage.</p></main><script>'use strict';const $=id=>document.getElementById(id);const items=[{id:'R1',context:'Every Monday, Nora labels boxes.',cue:'Subject: Nora · Time cue: every Monday · Affirmative routine',prompt:'Nora ___ boxes every Monday.',choices:['label','labels'],key:1,hint:'Find the one-person subject. There is no do/does auxiliary in this affirmative sentence.',reason:'Nora is third-person singular. Use labels in this affirmative routine.',wrong:'Look at Nora: one third-person subject needs the affirmative -s form.',sentence:'Nora labels boxes every Monday.'},{id:'R2',context:'On Mondays, Kai and Nora sort returns.',cue:'Subject: Kai and Nora · Time cue: on Mondays · Affirmative routine',prompt:'Kai and Nora ___ returns on Mondays.',choices:['sort','sorts'],key:0,hint:'The subject names two people. Is there an auxiliary here?',reason:'Kai and Nora form a plural subject, so use the base form sort.',wrong:'Kai and Nora are two people. Use the plural subject’s base verb, not the third-person singular -s form.',sentence:'Kai and Nora sort returns on Mondays.'},{id:'R3',context:'Nora does not open the workshop on Sundays.',cue:'Subject: Nora · Time cue: on Sundays · Negative routine',prompt:'Nora ___ the workshop on Sundays.',choices:['does not open','does not opens','do not open'],key:0,hint:'Find the negative auxiliary for Nora. The main verb after it stays in its base form.',reason:'Does agrees with Nora; the verb after does not is the base form open.',wrong:'Use does with Nora and keep open in its base form after does not.',sentence:'Nora does not open the workshop on Sundays.'},{id:'R4',context:'Kai and Nora label boxes every Tuesday.',cue:'Subject: Kai and Nora · Time cue: every Tuesday · Separate affirmative routine',prompt:'Kai and Nora ___ boxes every Tuesday.',choices:['label','labels'],key:0,hint:'This Tuesday routine names two people and has no auxiliary.',reason:'Kai and Nora form a plural subject, so use label in this supplied Tuesday routine.',wrong:'The two-person subject takes the base form label. Keep the Tuesday routine unchanged.',sentence:'Kai and Nora label boxes every Tuesday.'}];let current=0,choice=null;
function clear(){choice=null;for(let i=0;i<3;i++)$('choice-'+i).setAttribute('aria-pressed','false');$('feedback').textContent='Not answered — choose a form before checking.';$('completed').textContent='Your checked sentence will appear here.';$('hint-text').textContent='';$('reason').textContent='';}
function chooseItem(index){current=index;const item=items[index];clear();$('context-id').textContent='Routine card '+item.id;$('context').textContent=item.context;$('context-cue').textContent=item.cue;$('prompt').textContent=item.prompt;for(let i=0;i<3;i++){$('choice-'+i).hidden=i>=item.choices.length;$('choice-'+i).textContent=item.choices[i]||'';}for(let i=0;i<4;i++)$('item-'+(i+1)).setAttribute('aria-pressed',String(i===index));}
function choose(index){if(index>=items[current].choices.length)return;choice=index;for(let i=0;i<3;i++)$('choice-'+i).setAttribute('aria-pressed',String(i===index));$('feedback').textContent='Choice changed — check this form.';$('completed').textContent='Your checked sentence will appear here.';$('reason').textContent='';}
function check(){const item=items[current];if(choice===null){$('feedback').textContent='Not answered — choose a form before checking.';return;}if(choice===item.key){$('feedback').textContent='Matches the routine. '+item.reason;$('completed').textContent=item.sentence;$('reason').textContent='The subject, time cue and source polarity are unchanged.';}else{$('feedback').textContent=current===2&&choice===1?'Recheck: does carries agreement, so open stays in its base form; do not add -s after does not.':'Recheck: '+item.wrong;$('completed').textContent='Not accepted yet — retry with the same routine.';$('reason').textContent='';}}
for(let i=0;i<4;i++)$('item-'+(i+1)).addEventListener('click',()=>chooseItem(i));for(let i=0;i<3;i++)$('choice-'+i).addEventListener('click',()=>choose(i));$('check').addEventListener('click',check);$('hint').addEventListener('click',()=>{$('hint-text').textContent=items[current].hint;});$('retry').addEventListener('click',clear);$('reset').addEventListener('click',()=>chooseItem(0));globalThis.app={items,chooseItem,choose,check,clear,get:()=>({current,choice})};chooseItem(0);</script></body></html>