At 10:15 · scene grammar practice — Describe a supplied current scene with am/is/are plus an -ing form, preserving who is doing what and distinguishing current actions from…

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>At 10:15 · scene grammar practice</title><style>
*{box-sizing:border-box}body{margin:0;background:#edf5fa;color:#25465a;font:16px/1.55 system-ui,sans-serif}main{max-width:1090px;margin:auto;padding:30px}h1{font-size:clamp(31px,4vw,45px);letter-spacing:-.04em;margin:5px 0 10px;line-height:1.15}h2{font-size:23px;margin:0 0 15px}p{margin:0 0 12px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:#4f7d96}.small{font-size:13px;color:#5a7688}.scene{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:#dcebf5;border:1px solid #c0d7e5;border-radius:17px;padding:20px;margin:24px 0}.scene-card{background:#fff;border-radius:10px;padding:17px}.scene-card strong{display:block;margin-top:9px}.object{height:70px;display:flex;align-items:center;justify-content:center}.folder{height:44px;width:68px;background:#3575ac;border-radius:2px 9px 5px 5px;border-top:9px solid #99bfdf;transform:rotate(-8deg)}.cards{display:flex;gap:6px}.cards i{display:block;width:30px;height:40px;border-radius:3px;background:#f4b56b;border:2px solid #cb8645}.cards i:nth-child(2){background:#d3b5df;transform:rotate(12deg)}.list{border:2px solid #b2c3cb;width:62px;background:#fff;padding:5px 10px;color:#508370;font-size:15px;line-height:1.1}.scene-card p{font-size:14px;margin:6px 0 0}.scene-caption{grid-column:1/-1;font-size:13px;margin:0}.work{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}.panel{background:white;border:1px solid #c8dce8;border-radius:12px;padding:24px}.tabs,.row{display:flex;gap:8px;flex-wrap:wrap}button{font:700 14px system-ui;min-height:44px;padding:10px 16px;border:1px solid #326f94;background:#326f94;color:#fff;border-radius:6px;cursor:pointer}button.secondary{background:white;color:#326f94}button[aria-pressed=true]{background:#214d6c;color:white}:focus-visible{outline:3px solid #c87925;outline-offset:3px}.tabs button{flex:1}.prompt{font:27px/1.4 Georgia,serif;margin:20px 0}label{display:block;font-size:14px;font-weight:650}input{display:block;width:100%;font:22px system-ui;padding:12px;border:1px solid #9ab9cc;border-radius:6px;margin:7px 0 16px;color:#25465a}.feedback{background:#e6f0f7;padding:16px;border-left:4px solid #659cb9;margin-top:20px;min-height:87px}.feedback strong{display:block;font-size:18px}.feedback p{font-size:14px;margin:6px 0 0}.hint{background:#fff1d4;padding:13px;margin-top:15px;font-size:14px;border-radius:5px}.source{border-bottom:1px solid #d7e3eb;padding-bottom:16px;margin-bottom:17px}.source p{font-size:15px}.sentence{font:25px/1.4 Georgia,serif;margin:18px 0 0;color:#245a78}details{margin-top:26px;border-top:1px solid #c8dce8;padding-top:17px}summary{cursor:pointer;min-height:44px;font-weight:700}footer{font-size:13px;color:#5a7688;margin-top:25px}[hidden]{display:none!important}@media(max-width:730px){main{padding:23px 16px}.scene{grid-template-columns:1fr;padding:16px;gap:10px}.scene-card{display:grid;grid-template-columns:85px 1fr;gap:0 12px;padding:13px}.scene-card .object{grid-row:1/3}.scene-card strong{margin-top:3px}.scene-card p{grid-column:2}.work{grid-template-columns:1fr}.panel{padding:20px}.prompt{font-size:25px}}@media(max-width:380px){main{padding:20px 12px}.row button{flex:1;padding:10px}.scene-card{grid-template-columns:70px 1fr}}
</style></head><body><main><p class="eyebrow">Present continuous · fictional scene</p><h1>What is happening at 10:15?</h1><p>Use am/is/are plus the supplied action's -ing form.</p><section class="scene" aria-label="Complete scene evidence"><div class="scene-card"><div class="object" aria-hidden="true"><div class="folder"></div></div><strong>S1 · Imani</strong><p>At 10:15, Imani is carrying a blue folder.</p></div><div class="scene-card"><div class="object cards" aria-hidden="true"><i></i><i></i><i></i></div><strong>S2 · Kai and Jo</strong><p>At 10:15, Kai and Jo are sorting cards.</p></div><div class="scene-card"><div class="object" aria-hidden="true"><div class="list">✓ ━<br>✓ ━<br>□ ━</div></div><strong>S3 · Narrator</strong><p>The narrator says, “I am checking the list.”</p></div><p class="scene-caption"><strong>S4:</strong> Imani is not opening the folder at that moment. Original schematic; all action evidence is supplied in text.</p></section><div class="work"><section class="panel"><div class="tabs"><button type="button" id="item-s1" class="secondary" aria-pressed="false">S1</button><button type="button" id="item-s2" aria-pressed="true">S2</button><button type="button" id="item-s3" class="secondary" aria-pressed="false">S3</button><button type="button" id="item-s4" class="secondary" aria-pressed="false">S4</button></div><div id="prompt" class="prompt">Kai and Jo ___ cards.</div><label for="answer">Complete the requested scene form<input id="answer" autocomplete="off" spellcheck="false" placeholder="be + -ing"></label><p class="small">Which source supports the current-scene answer?</p><div class="row"><button id="source-scene" type="button" class="secondary" aria-pressed="false">10:15 scene</button><button id="source-routine" type="button" class="secondary" aria-pressed="false">Monday routine</button></div><div class="row" style="margin-top:18px"><button type="button" id="check">Check</button><button type="button" id="hint" class="secondary">Scene hint</button><button type="button" id="retry" class="secondary">Retry</button><button type="button" id="reset" class="secondary">Reset</button></div><div class="feedback" role="status"><strong id="verdict">Not answered.</strong><p id="feedback">Enter a form and choose its supporting source.</p></div><p id="hint-text" class="hint" hidden></p><p id="worked-result" class="sentence"></p></section><aside class="panel"><h2>Scene or routine?</h2><div class="source"><p class="eyebrow">S2 · this stated moment</p><p>Kai and Jo are sorting cards at 10:15.</p><p class="small">Use the supplied subject, action and time together.</p></div><div class="source"><p class="eyebrow">R1 · separate recurring routine</p><p>Every Monday, Kai sorts cards.</p><p class="small">R1 alone does not tell us what Kai is doing at 10:15.</p></div><p class="small">Imani's carrying action stays positive in S1. S4 supplies a different negative action: not opening the folder.</p></aside></div><details><summary>Teacher key · separate review</summary><p class="small">S1 is carrying: one named subject takes is. S2 are sorting: For Kai and Jo, use are. S3 am checking: the narrator's I takes am. S4 is not opening: keep the explicit negative fact. Current-scene evidence supports each requested answer.</p><p class="small">The checker ignores letter case and outer spaces only. It does not accept every contraction, synonym, paraphrase or use of the present continuous. Other natural descriptions are not declared globally ungrammatical.</p></details><footer>Original keyed practice, not actual learner performance. Changing item, source or response clears prior acceptance. No student identities, submitted school record, score report, AI grading, audio assessment or persistence is provided.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);const items={s1:{prompt:'Imani ___ a blue folder.',key:'is carrying',subject:'Imani',aux:'is',action:'carrying',fact:'S1: At 10:15, Imani is carrying a blue folder.',sentence:'Imani is carrying a blue folder.'},s2:{prompt:'Kai and Jo ___ cards.',key:'are sorting',subject:'Kai and Jo',aux:'are',action:'sorting',fact:'S2: At 10:15, Kai and Jo are sorting cards.',sentence:'Kai and Jo are sorting cards.'},s3:{prompt:'I ___ the list.',key:'am checking',subject:'I',aux:'am',action:'checking',fact:'S3: The narrator says, “I am checking the list.”',sentence:'I am checking the list.'},s4:{prompt:'Imani ___ the folder.',key:'is not opening',subject:'Imani',aux:'is',action:'opening',fact:'S4: Imani is not opening the folder at that moment.',sentence:'Imani is not opening the folder.'}};let current='s2',source=null;const normalize=s=>s.trim().toLowerCase();
function assess(id,text,evidence){const item=items[id],answer=normalize(text);if(!answer||!evidence)return{title:'Not answered.',message:'Enter the form and choose its supporting source before checking.'};if(evidence!=='scene')return{title:'Use the scene evidence.',message:'R1 describes a Monday routine. Use '+id.toUpperCase()+' for the requested 10:15 answer.'};if(answer===item.key)return{title:'Form and scene match.',message:'For '+item.subject+', use '+item.aux+' here; keep '+item.action+(id==='s4'?' and the supplied not.':'.'),sentence:item.sentence};if(id==='s4'&&!answer.includes('not'))return{title:'Preserve the negative fact.',message:'S4 explicitly says Imani is not opening the folder. It does not negate her carrying action.'};if(!answer.endsWith(item.action))return{title:'Keep the supplied action.',message:'This item uses '+item.action+' from '+id.toUpperCase()+'. Do not substitute an action from another subject.'};if(answer.split(' ')[0]!==item.aux)return{title:'Check subject agreement.',message:'For '+item.subject+', use '+item.aux+' in this scene. Use '+item.key+'.'};return{title:'Use the supplied keyed form.',message:'This exact-form practice accepts '+item.key+'. Only case and outer spaces are ignored; other descriptions are outside this check.'};}
function clearFeedback(){$('verdict').textContent='Not answered.';$('feedback').textContent='Enter a form and choose its supporting source.';$('worked-result').textContent='';$('hint-text').hidden=true;}
function render(){$('prompt').textContent=items[current].prompt;for(const id of Object.keys(items))$('item-'+id).setAttribute('aria-pressed',String(id===current));for(const s of['scene','routine'])$('source-'+s).setAttribute('aria-pressed',String(source===s));}
function check(){const r=assess(current,$('answer').value,source);$('verdict').textContent=r.title;$('feedback').textContent=r.message;$('worked-result').textContent=r.sentence||'';}
for(const id of Object.keys(items))$('item-'+id).addEventListener('click',()=>{current=id;source=null;$('answer').value='';clearFeedback();render();});for(const s of['scene','routine'])$('source-'+s).addEventListener('click',()=>{source=s;clearFeedback();render();});$('answer').addEventListener('input',clearFeedback);$('answer').addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&!e.repeat){e.preventDefault();check();}});$('check').addEventListener('click',check);$('hint').addEventListener('click',()=>{$('hint-text').textContent=items[current].fact;$('hint-text').hidden=!$('hint-text').hidden;});$('retry').addEventListener('click',()=>{$('answer').value='';source=null;clearFeedback();render();});$('reset').addEventListener('click',()=>{current='s2';source=null;$('answer').value='';clearFeedback();render();});render();
</script></body></html>