Before the checkpoint · past-perfect practice — Express an earlier completed action relative to a later supplied past checkpoint using had plus the stated past participle.

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>Before the checkpoint · past-perfect practice</title><style>
*{box-sizing:border-box}body{margin:0;background:#f5f2fb;color:#3c3156;font:16px/1.5 system-ui,sans-serif}main{max-width:1080px;margin:auto;padding:30px}h1{font-size:clamp(30px,4vw,43px);letter-spacing:-.04em;line-height:1.15;margin:7px 0 10px}h2{font-size:23px;margin:0 0 14px}p{margin:0 0 12px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#7b6699}.small{font-size:13px;color:#7b6b8c}.timeboard{background:#fff;border:1px solid #d8cee8;border-radius:14px;padding:24px;margin:24px 0}.track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:30px;margin-bottom:17px}.track:before{content:'';position:absolute;left:0;right:0;top:17px;border-top:3px solid #cfc1e3}.event{position:relative;font-size:13px;line-height:1.5}.event:before{content:'';position:absolute;top:-20px;left:0;width:12px;height:12px;border:3px solid #9c7db9;background:white;border-radius:50%}.event strong{display:block;font-size:16px;color:#665082}.event.checkpoint{background:#eee6f9;padding:10px;border-radius:7px}.event.checkpoint:before{top:-30px;background:#7e5ba2}.viewbuttons,.row{display:flex;gap:9px;flex-wrap:wrap}button{min-height:44px;padding:10px 16px;font:700 14px system-ui;border:1px solid #7e5ba2;border-radius:7px;background:#7e5ba2;color:white;cursor:pointer}button.secondary{background:#fff;color:#7e5ba2}button[aria-pressed=true]{background:#523970;color:#fff}:focus-visible{outline:3px solid #c1862d;outline-offset:3px}.work{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}.panel{background:#fff;border:1px solid #d8cee8;border-radius:12px;padding:24px}.prompt{font:27px/1.4 Georgia,serif;margin:17px 0}.choices{display:grid;gap:9px;margin:15px 0}.choices button{text-align:left;background:#fff;color:#6b4d89}.choices button[aria-pressed=true]{background:#eee6f9;border:2px solid #765692;color:#523970}.feedback{background:#eee6f9;border-left:4px solid #9c7db9;padding:16px;margin-top:18px;min-height:88px}.feedback strong{display:block;font-size:18px}.feedback p{font-size:14px;margin:6px 0 0}.comparison{padding:15px;background:#f8f4ff;border-radius:7px}.hint{padding:13px;background:#fff4dc;border-radius:5px;font-size:14px;margin-top:15px}.result{font:25px/1.45 Georgia,serif;color:#664987;margin-top:17px}.status{font-size:19px;font-weight:700;margin-top:15px}details{border-top:1px solid #d8cee8;padding-top:17px;margin-top:25px}summary{cursor:pointer;min-height:44px;font-weight:700}footer{font-size:13px;color:#7b6b8c;margin-top:24px}[hidden]{display:none!important}@media(max-width:720px){main{padding:23px 16px}.work{grid-template-columns:1fr}.timeboard{padding:20px}.track{grid-template-columns:1fr;padding:0;gap:12px}.track:before{display:none}.event{padding-left:24px}.event:before{top:5px;left:0}.event.checkpoint{padding-left:25px}.event.checkpoint:before{top:15px;left:6px}.panel{padding:20px}.viewbuttons button{flex:1}.prompt{font-size:25px}}@media(max-width:380px){main{padding:20px 12px}.row button{flex:1;padding:10px}}
</style></head><body><main><p class="eyebrow">Past perfect · fictional same-morning records</p><h1>What was complete at 10:00?</h1><p>Compare the event times, then use had plus the supplied past participle.</p><section class="timeboard"><div class="viewbuttons"><button id="original" type="button" aria-pressed="true">Original · 09:40 finish</button><button id="reversed" type="button" class="secondary" aria-pressed="false">Hypothetical · 10:10 finish</button></div><div class="track"><div class="event"><strong>09:30</strong>Pat went to the supply desk.</div><div class="event" id="lee-event"><strong>09:40</strong>Lee finished the labels.</div><div class="event"><strong>09:50</strong>Pat returned.</div><div class="event checkpoint"><strong>10:00 · checkpoint</strong>Kim arrived.</div><div class="event" id="later-event"><strong>10:10</strong>No later completion supplied in the original log.</div></div><p id="scenario-label" class="small">Original log. All four supplied events stay attached to their times.</p></section><div class="work"><section class="panel"><div class="viewbuttons"><button type="button" id="task-lee" aria-pressed="true">Lee · completion</button><button type="button" id="task-pat" class="secondary" aria-pressed="false">Pat · participle</button></div><p id="prompt" class="prompt">When Kim arrived, Lee ___ the labels.</p><p id="task-instruction" class="small">Use past perfect to express the earlier completion.</p><div id="choices" class="choices"></div><div class="row"><button id="check" type="button">Check</button><button id="hint" type="button" class="secondary">Time hint</button><button id="retry" type="button" class="secondary">Retry</button><button id="reset" type="button" class="secondary">Reset</button></div><div class="feedback" role="status"><strong id="verdict">Not answered.</strong><p id="feedback">Choose a response tied to the selected log.</p></div><p id="hint-text" class="hint" hidden></p><p id="worked-result" class="result"></p></section><aside class="panel"><h2>Keep the checkpoint in view</h2><div class="comparison"><p>Checkpoint: <strong>Kim's 10:00 arrival</strong></p><p id="completion-status" class="status">Lee's labeling was complete.</p><p id="time-evidence" class="small">09:40 is 20 minutes before 10:00.</p></div><h2 style="margin-top:22px">Preserve Pat's return</h2><p>Pat went at 09:30 and returned at 09:50.</p><p class="small">“Had gone to the supply desk and returned” does not describe Pat as still away at 10:00.</p><p class="small">go → went → gone<br>Base → simple past → participle</p></aside></div><details><summary>Teacher key and construction notes</summary><p class="small">Original Lee: had finished. Hypothetical Lee finish10:10: not yet complete at 10:00. Pat: had gone, not had went or has gone. A clear simple-past account such as “Lee finished at 9:40, and Kim arrived at 10:00” can also be grammatical; this task explicitly requests past perfect.</p><p class="small">Before/after alone do not uniquely require this tense. The separate hypothetical card changes only Lee's finish record; the original log remains identifiable. No open-ended prose grading, mastery or saved assessment is implied.</p></details><footer>Original local practice, not collected learner results. Context or task changes clear the old response and feedback. Reset restores the original log and empty Lee attempt. Actual school records remain in the school's authorized workflow.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);let hypothetical=false,task='lee',selected=null;function chronology(finish,checkpoint=600){return{complete:finish<=checkpoint,delta:checkpoint-finish};}
function options(){return task==='pat'?['had gone','had went','has gone']:hypothetical?['complete at 10:00','not yet complete at 10:00']:['had finished','has finished','finished'];}
function assess(which,changed,answer){if(answer===null)return{title:'Not answered.',message:'Choose a response before checking.'};if(which==='pat'){if(answer==='had gone')return{title:'Participle and timeline match.',message:'Had takes gone, not went. Both the 09:30 trip and 09:50 return precede 10:00.',sentence:'By 10:00, Pat had gone to the supply desk and returned.'};return{title:'Check the requested form.',message:answer==='had went'?'Went is simple past; use the supplied participle gone after had.':'Has gone uses a present-tense auxiliary. This item requests had plus the participle.'};}if(changed)return answer==='not yet complete at 10:00'?{title:'The changed record is not complete at 10:00.',message:'10:10 is 10 minutes after Kim’s arrival. Do not carry had finished over from the 09:40 log.',sentence:'Under this hypothetical record, labeling is not yet complete at the 10:00 checkpoint.'}:{title:'Compare both times.',message:'Lee finishes at 10:10, after the 10:00 checkpoint. The original earlier-completion answer no longer fits.'};if(answer==='had finished')return{title:'Earlier completion is supported.',message:'09:40 precedes 10:00 by 20 minutes. Had finished expresses that earlier completion.',sentence:'When Kim arrived, Lee had finished the labels.'};return{title:'Use the requested construction.',message:answer==='finished'?'A simple-past narrative can be grammatical. This item asks you to express the earlier completion using past perfect.':'Has finished does not use the requested past auxiliary had.'};}
function pending(){$('verdict').textContent='Not answered.';$('feedback').textContent='Choose a response tied to the selected log.';$('worked-result').textContent='';$('hint-text').hidden=true;}
function render(){for(const [id,val]of[['original',!hypothetical],['reversed',hypothetical],['task-lee',task==='lee'],['task-pat',task==='pat']])$(id).setAttribute('aria-pressed',String(val));$('lee-event').textContent=hypothetical?'09:40 · no label completion supplied in this hypothetical card.':'09:40 · Lee finished the labels.';$('later-event').textContent=hypothetical?'10:10 · Lee finishes the labels.':'10:10 · no later completion supplied in the original log.';$('scenario-label').textContent=hypothetical?'Separate hypothetical order-change item. Only Lee’s finish time changes to 10:10.':'Original log. All four supplied events stay attached to their times.';const c=chronology(hypothetical?610:580);$('completion-status').textContent=c.complete?"Lee's labeling was complete.":"Lee's labeling was not yet complete.";$('time-evidence').textContent=hypothetical?'10:10 is 10 minutes after 10:00.':'09:40 is 20 minutes before 10:00.';$('prompt').textContent=task==='pat'?'By 10:00, Pat ___ to the supply desk and returned.':hypothetical?'At Kim’s 10:00 arrival, was labeling complete?':'When Kim arrived, Lee ___ the labels.';$('task-instruction').textContent=task==='pat'?'Choose had plus the supplied participle of go.':hypothetical?'Check completion first; do not force the original sentence onto a changed timeline.':'Use past perfect to express the earlier completion.';$('choices').replaceChildren();options().forEach((text,i)=>{const b=document.createElement('button');b.type='button';b.id='choice-'+i;b.textContent=text;b.setAttribute('aria-pressed',String(selected===text));b.addEventListener('click',()=>{selected=text;pending();render();});$('choices').appendChild(b);});}
for(const id of['original','reversed'])$(id).addEventListener('click',()=>{hypothetical=id==='reversed';selected=null;pending();render();});for(const id of['lee','pat'])$('task-'+id).addEventListener('click',()=>{task=id;selected=null;pending();render();});$('check').addEventListener('click',()=>{const r=assess(task,hypothetical,selected);$('verdict').textContent=r.title;$('feedback').textContent=r.message;$('worked-result').textContent=r.sentence||'';});$('hint').addEventListener('click',()=>{$('hint-text').textContent=task==='pat'?'09:30 outward trip → 09:50 return → 10:00 checkpoint. The supplied participle of go is gone.':hypothetical?'10:00 arrival comes before the10:10 finish.':'09:40 finish comes before the 10:00 arrival.';$('hint-text').hidden=!$('hint-text').hidden;});$('retry').addEventListener('click',()=>{selected=null;pending();render();});$('reset').addEventListener('click',()=>{hypothetical=false;task='lee';selected=null;pending();render();});render();
</script></body></html>