Find the action Sentence workshop
HTML for this example
Select the code and use your copy shortcut. Changes in this preview are temporary.
<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Find the action | Sentence workshop</title>
<style>
:root{color-scheme:light;--ink:#203c3e;--paper:#fcf8ef;--teal:#235e60;--line:#c9d0c8;--rust:#7b391f}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.65}main{max-width:850px;margin:auto;padding:32px 24px 56px}header{border-top:7px solid var(--teal);padding-top:22px;margin-bottom:26px}.eyebrow{font-weight:700;letter-spacing:.08em;font-size:16px;color:var(--rust)}h1{font-family:Georgia,serif;font-size:clamp(32px,6vw,48px);line-height:1.12;margin:12px 0 18px}p{margin:12px 0}.intro{max-width:660px}.instruction{border-left:4px solid var(--rust);padding:10px 18px;background:#f5ecda}article{margin:26px 0;padding:24px 0;border-top:2px solid var(--line)}h2{font-family:Georgia,serif;font-size:25px;line-height:1.45;margin:6px 0 18px}.item-id{font:700 16px system-ui;color:var(--rust)}fieldset{border:0;padding:0;margin:18px 0;min-width:0}legend,label{font-weight:650;margin-bottom:9px}legend{padding:0}.words{display:flex;flex-wrap:wrap;gap:8px}button,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--teal);border-radius:7px;color:var(--teal);background:#fffef9;padding:10px 15px;min-height:46px;line-height:1.4;max-width:100%}.word[aria-pressed=true]{color:#fff;background:var(--teal)}.action[aria-pressed=true]{background:var(--rust);border-color:var(--rust)}.none{margin-top:12px;border-style:dashed}.primary{background:var(--teal);color:#fff}button:hover{box-shadow:0 0 0 2px #bcc9c0}button:focus-visible,textarea:focus-visible{outline:3px solid #8a4a14;outline-offset:4px}label{display:block}textarea{width:100%;min-height:88px;padding:12px;border:1px solid #7e9692;border-radius:6px;background:#fffefb;color:var(--ink);resize:vertical}.feedback{padding:12px 16px;border-left:4px solid #8c6b40;background:#f5eddf;min-height:50px}.feedback[data-state=match]{background:#e6eee7;border-color:var(--teal)}.feedback[data-state=retry],.feedback[data-state=incomplete]{background:#f7eadf;border-color:var(--rust)}.tools{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}#teacher-key{padding:20px;background:#eaf0e9;border:1px solid var(--line)}#teacher-key p{overflow-wrap:anywhere}footer{margin-top:30px;border-top:2px solid var(--line);padding-top:18px}small{font-size:16px}[hidden]{display:none!important}@media(max-width:420px){main{padding:20px 16px 40px}article{padding-top:20px}.word{padding:10px 12px}}
</style></head><body><main>
<header><div class="eyebrow">SENTENCE WORKSHOP / ORIGINAL PRACTICE</div><h1>Find every action.</h1><p class="intro">Choose the complete subject and all its action words. Then explain your choices using the sentence.</p><div class="instruction">Read all the way to the period. A sentence can have two actions. If it has no target action verb, choose that answer explicitly.</div></header>
<section aria-label="Five practice sentences">
<article id="A01" aria-labelledby="A01-heading"><span class="item-id">A01 / SENTENCE 1 OF 5</span><h2 id="A01-heading">Mia carries the folder.</h2><fieldset><legend>1. Subject: who or what is this about?</legend><div class="words"><button type="button" class="word subject" id="A01-subject-1" data-item="A01" data-role="subject" data-position="1" aria-pressed="false" aria-label="A01 subject Mia word 1">Mia</button> <button type="button" class="word subject" id="A01-subject-2" data-item="A01" data-role="subject" data-position="2" aria-pressed="false" aria-label="A01 subject carries word 2">carries</button> <button type="button" class="word subject" id="A01-subject-3" data-item="A01" data-role="subject" data-position="3" aria-pressed="false" aria-label="A01 subject the word 3">the</button> <button type="button" class="word subject" id="A01-subject-4" data-item="A01" data-role="subject" data-position="4" aria-pressed="false" aria-label="A01 subject folder. word 4">folder.</button></div></fieldset><fieldset><legend>2. Action words: what does the subject do?</legend><div class="words"><button type="button" class="word action" id="A01-action-1" data-item="A01" data-role="action" data-position="1" aria-pressed="false" aria-label="A01 action word Mia word 1">Mia</button> <button type="button" class="word action" id="A01-action-2" data-item="A01" data-role="action" data-position="2" aria-pressed="false" aria-label="A01 action word carries word 2">carries</button> <button type="button" class="word action" id="A01-action-3" data-item="A01" data-role="action" data-position="3" aria-pressed="false" aria-label="A01 action word the word 3">the</button> <button type="button" class="word action" id="A01-action-4" data-item="A01" data-role="action" data-position="4" aria-pressed="false" aria-label="A01 action word folder. word 4">folder.</button></div><button type="button" class="word action none" id="A01-none" data-item="A01" data-role="none" aria-pressed="false">No target action verb</button></fieldset><label for="A01-explanation">3. Explain your choices</label><textarea id="A01-explanation" placeholder="Use the sentence to explain." aria-describedby="explanation-note"></textarea><p><button type="button" class="primary check" id="A01-check">Check answer</button></p><p class="feedback" id="A01-feedback" role="status" aria-live="polite" data-state="unanswered">Not checked. Choose words in both rows.</p></article>
<article id="A02" aria-labelledby="A02-heading"><span class="item-id">A02 / SENTENCE 2 OF 5</span><h2 id="A02-heading">Jo paints a sign.</h2><fieldset><legend>1. Subject: who or what is this about?</legend><div class="words"><button type="button" class="word subject" id="A02-subject-1" data-item="A02" data-role="subject" data-position="1" aria-pressed="false" aria-label="A02 subject Jo word 1">Jo</button> <button type="button" class="word subject" id="A02-subject-2" data-item="A02" data-role="subject" data-position="2" aria-pressed="false" aria-label="A02 subject paints word 2">paints</button> <button type="button" class="word subject" id="A02-subject-3" data-item="A02" data-role="subject" data-position="3" aria-pressed="false" aria-label="A02 subject a word 3">a</button> <button type="button" class="word subject" id="A02-subject-4" data-item="A02" data-role="subject" data-position="4" aria-pressed="false" aria-label="A02 subject sign. word 4">sign.</button></div></fieldset><fieldset><legend>2. Action words: what does the subject do?</legend><div class="words"><button type="button" class="word action" id="A02-action-1" data-item="A02" data-role="action" data-position="1" aria-pressed="false" aria-label="A02 action word Jo word 1">Jo</button> <button type="button" class="word action" id="A02-action-2" data-item="A02" data-role="action" data-position="2" aria-pressed="false" aria-label="A02 action word paints word 2">paints</button> <button type="button" class="word action" id="A02-action-3" data-item="A02" data-role="action" data-position="3" aria-pressed="false" aria-label="A02 action word a word 3">a</button> <button type="button" class="word action" id="A02-action-4" data-item="A02" data-role="action" data-position="4" aria-pressed="false" aria-label="A02 action word sign. word 4">sign.</button></div><button type="button" class="word action none" id="A02-none" data-item="A02" data-role="none" aria-pressed="false">No target action verb</button></fieldset><label for="A02-explanation">3. Explain your choices</label><textarea id="A02-explanation" placeholder="Use the sentence to explain." aria-describedby="explanation-note"></textarea><p><button type="button" class="primary check" id="A02-check">Check answer</button></p><p class="feedback" id="A02-feedback" role="status" aria-live="polite" data-state="unanswered">Not checked. Choose words in both rows.</p></article>
<article id="A03" aria-labelledby="A03-heading"><span class="item-id">A03 / SENTENCE 3 OF 5</span><h2 id="A03-heading">They plan the display.</h2><fieldset><legend>1. Subject: who or what is this about?</legend><div class="words"><button type="button" class="word subject" id="A03-subject-1" data-item="A03" data-role="subject" data-position="1" aria-pressed="false" aria-label="A03 subject They word 1">They</button> <button type="button" class="word subject" id="A03-subject-2" data-item="A03" data-role="subject" data-position="2" aria-pressed="false" aria-label="A03 subject plan word 2">plan</button> <button type="button" class="word subject" id="A03-subject-3" data-item="A03" data-role="subject" data-position="3" aria-pressed="false" aria-label="A03 subject the word 3">the</button> <button type="button" class="word subject" id="A03-subject-4" data-item="A03" data-role="subject" data-position="4" aria-pressed="false" aria-label="A03 subject display. word 4">display.</button></div></fieldset><fieldset><legend>2. Action words: what does the subject do?</legend><div class="words"><button type="button" class="word action" id="A03-action-1" data-item="A03" data-role="action" data-position="1" aria-pressed="false" aria-label="A03 action word They word 1">They</button> <button type="button" class="word action" id="A03-action-2" data-item="A03" data-role="action" data-position="2" aria-pressed="false" aria-label="A03 action word plan word 2">plan</button> <button type="button" class="word action" id="A03-action-3" data-item="A03" data-role="action" data-position="3" aria-pressed="false" aria-label="A03 action word the word 3">the</button> <button type="button" class="word action" id="A03-action-4" data-item="A03" data-role="action" data-position="4" aria-pressed="false" aria-label="A03 action word display. word 4">display.</button></div><button type="button" class="word action none" id="A03-none" data-item="A03" data-role="none" aria-pressed="false">No target action verb</button></fieldset><label for="A03-explanation">3. Explain your choices</label><textarea id="A03-explanation" placeholder="Use the sentence to explain." aria-describedby="explanation-note"></textarea><p><button type="button" class="primary check" id="A03-check">Check answer</button></p><p class="feedback" id="A03-feedback" role="status" aria-live="polite" data-state="unanswered">Not checked. Choose words in both rows.</p></article>
<article id="A04" aria-labelledby="A04-heading"><span class="item-id">A04 / SENTENCE 4 OF 5</span><h2 id="A04-heading">The plan is on the desk.</h2><fieldset><legend>1. Subject: who or what is this about?</legend><div class="words"><button type="button" class="word subject" id="A04-subject-1" data-item="A04" data-role="subject" data-position="1" aria-pressed="false" aria-label="A04 subject The word 1">The</button> <button type="button" class="word subject" id="A04-subject-2" data-item="A04" data-role="subject" data-position="2" aria-pressed="false" aria-label="A04 subject plan word 2">plan</button> <button type="button" class="word subject" id="A04-subject-3" data-item="A04" data-role="subject" data-position="3" aria-pressed="false" aria-label="A04 subject is word 3">is</button> <button type="button" class="word subject" id="A04-subject-4" data-item="A04" data-role="subject" data-position="4" aria-pressed="false" aria-label="A04 subject on word 4">on</button> <button type="button" class="word subject" id="A04-subject-5" data-item="A04" data-role="subject" data-position="5" aria-pressed="false" aria-label="A04 subject the word 5">the</button> <button type="button" class="word subject" id="A04-subject-6" data-item="A04" data-role="subject" data-position="6" aria-pressed="false" aria-label="A04 subject desk. word 6">desk.</button></div></fieldset><fieldset><legend>2. Action words: what does the subject do?</legend><div class="words"><button type="button" class="word action" id="A04-action-1" data-item="A04" data-role="action" data-position="1" aria-pressed="false" aria-label="A04 action word The word 1">The</button> <button type="button" class="word action" id="A04-action-2" data-item="A04" data-role="action" data-position="2" aria-pressed="false" aria-label="A04 action word plan word 2">plan</button> <button type="button" class="word action" id="A04-action-3" data-item="A04" data-role="action" data-position="3" aria-pressed="false" aria-label="A04 action word is word 3">is</button> <button type="button" class="word action" id="A04-action-4" data-item="A04" data-role="action" data-position="4" aria-pressed="false" aria-label="A04 action word on word 4">on</button> <button type="button" class="word action" id="A04-action-5" data-item="A04" data-role="action" data-position="5" aria-pressed="false" aria-label="A04 action word the word 5">the</button> <button type="button" class="word action" id="A04-action-6" data-item="A04" data-role="action" data-position="6" aria-pressed="false" aria-label="A04 action word desk. word 6">desk.</button></div><button type="button" class="word action none" id="A04-none" data-item="A04" data-role="none" aria-pressed="false">No target action verb</button></fieldset><label for="A04-explanation">3. Explain your choices</label><textarea id="A04-explanation" placeholder="Use the sentence to explain." aria-describedby="explanation-note"></textarea><p><button type="button" class="primary check" id="A04-check">Check answer</button></p><p class="feedback" id="A04-feedback" role="status" aria-live="polite" data-state="unanswered">Not checked. Choose words in both rows.</p></article>
<article id="A05" aria-labelledby="A05-heading"><span class="item-id">A05 / SENTENCE 5 OF 5</span><h2 id="A05-heading">Kai opens the box and lifts the lid.</h2><fieldset><legend>1. Subject: who or what is this about?</legend><div class="words"><button type="button" class="word subject" id="A05-subject-1" data-item="A05" data-role="subject" data-position="1" aria-pressed="false" aria-label="A05 subject Kai word 1">Kai</button> <button type="button" class="word subject" id="A05-subject-2" data-item="A05" data-role="subject" data-position="2" aria-pressed="false" aria-label="A05 subject opens word 2">opens</button> <button type="button" class="word subject" id="A05-subject-3" data-item="A05" data-role="subject" data-position="3" aria-pressed="false" aria-label="A05 subject the word 3">the</button> <button type="button" class="word subject" id="A05-subject-4" data-item="A05" data-role="subject" data-position="4" aria-pressed="false" aria-label="A05 subject box word 4">box</button> <button type="button" class="word subject" id="A05-subject-5" data-item="A05" data-role="subject" data-position="5" aria-pressed="false" aria-label="A05 subject and word 5">and</button> <button type="button" class="word subject" id="A05-subject-6" data-item="A05" data-role="subject" data-position="6" aria-pressed="false" aria-label="A05 subject lifts word 6">lifts</button> <button type="button" class="word subject" id="A05-subject-7" data-item="A05" data-role="subject" data-position="7" aria-pressed="false" aria-label="A05 subject the word 7">the</button> <button type="button" class="word subject" id="A05-subject-8" data-item="A05" data-role="subject" data-position="8" aria-pressed="false" aria-label="A05 subject lid. word 8">lid.</button></div></fieldset><fieldset><legend>2. Action words: what does the subject do?</legend><div class="words"><button type="button" class="word action" id="A05-action-1" data-item="A05" data-role="action" data-position="1" aria-pressed="false" aria-label="A05 action word Kai word 1">Kai</button> <button type="button" class="word action" id="A05-action-2" data-item="A05" data-role="action" data-position="2" aria-pressed="false" aria-label="A05 action word opens word 2">opens</button> <button type="button" class="word action" id="A05-action-3" data-item="A05" data-role="action" data-position="3" aria-pressed="false" aria-label="A05 action word the word 3">the</button> <button type="button" class="word action" id="A05-action-4" data-item="A05" data-role="action" data-position="4" aria-pressed="false" aria-label="A05 action word box word 4">box</button> <button type="button" class="word action" id="A05-action-5" data-item="A05" data-role="action" data-position="5" aria-pressed="false" aria-label="A05 action word and word 5">and</button> <button type="button" class="word action" id="A05-action-6" data-item="A05" data-role="action" data-position="6" aria-pressed="false" aria-label="A05 action word lifts word 6">lifts</button> <button type="button" class="word action" id="A05-action-7" data-item="A05" data-role="action" data-position="7" aria-pressed="false" aria-label="A05 action word the word 7">the</button> <button type="button" class="word action" id="A05-action-8" data-item="A05" data-role="action" data-position="8" aria-pressed="false" aria-label="A05 action word lid. word 8">lid.</button></div><button type="button" class="word action none" id="A05-none" data-item="A05" data-role="none" aria-pressed="false">No target action verb</button></fieldset><label for="A05-explanation">3. Explain your choices</label><textarea id="A05-explanation" placeholder="Use the sentence to explain." aria-describedby="explanation-note"></textarea><p><button type="button" class="primary check" id="A05-check">Check answer</button></p><p class="feedback" id="A05-feedback" role="status" aria-live="polite" data-state="unanswered">Not checked. Choose words in both rows.</p></article>
</section>
<p id="explanation-note">Word choices are checked against the key. Explanations are for teacher discussion.</p><div class="tools"><button type="button" id="reveal-key" aria-expanded="false" aria-controls="teacher-key">Show teacher key</button><button type="button" id="reset-activity">Reset activity</button></div>
<section id="teacher-key" hidden aria-labelledby="key-heading"><h2 id="key-heading">Teacher key</h2><p>References use sentence ID and word position, starting at 1. The key is separate from learner responses.</p><p><strong>A01</strong> Subject: Mia (A01-01). Actions: carries (A01-02). Mia carries; the folder is what Mia carries.</p><p><strong>A02</strong> Subject: Jo (A02-01). Actions: paints (A02-02). Jo paints; a sign is what Jo paints.</p><p><strong>A03</strong> Subject: They (A03-01). Actions: plan (A03-02). "They" is the subject. Here, "plan" names what they do with the display.</p><p><strong>A04</strong> Subject: The (A04-01), plan (A04-02). Actions: No target action verb. The plan is the complete subject. Here, "plan" is a noun; "is" is a verb of being, not a target action verb.</p><p><strong>A05</strong> Subject: Kai (A05-01). Actions: opens (A05-02), lifts (A05-06). Kai performs both actions: opens and lifts.</p></section>
<footer><p id="activity-status" role="status">Five original sentences. Responses stay only in this open page; reload clears them.</p><small>Use your usual classroom record for any assessment. No responses are submitted or saved.</small></footer>
</main><script>
'use strict';
const lessonItems=[{"id":"A01","sentence":"Mia carries the folder.","subject":[1],"actions":[2],"reason":"Mia carries; the folder is what Mia carries."},{"id":"A02","sentence":"Jo paints a sign.","subject":[1],"actions":[2],"reason":"Jo paints; a sign is what Jo paints."},{"id":"A03","sentence":"They plan the display.","subject":[1],"actions":[2],"reason":"\"They\" is the subject. Here, \"plan\" names what they do with the display."},{"id":"A04","sentence":"The plan is on the desk.","subject":[1,2],"actions":[],"reason":"The plan is the complete subject. Here, \"plan\" is a noun; \"is\" is a verb of being, not a target action verb."},{"id":"A05","sentence":"Kai opens the box and lifts the lid.","subject":[1],"actions":[2,6],"reason":"Kai performs both actions: opens and lifts."}];
const lessonState=Object.fromEntries(lessonItems.map(item=>[item.id,{subject:new Set(),action:new Set(),none:false}]));
function setFeedback(itemId,message,state){const feedback=document.querySelector('#'+itemId+'-feedback');feedback.textContent=message;feedback.dataset.state=state;}
function refreshChoices(itemId){document.querySelectorAll('[data-item="'+itemId+'"]').forEach(button=>{const state=lessonState[itemId];const selected=button.dataset.role==='none'?state.none:state[button.dataset.role].has(Number(button.dataset.position));button.setAttribute('aria-pressed',String(selected));});}
function sameSet(chosen,expected){return chosen.size===expected.length&&expected.every(n=>chosen.has(n));}
document.querySelectorAll('[data-item]').forEach(button=>button.addEventListener('click',()=>{const itemId=button.dataset.item;const state=lessonState[itemId];const role=button.dataset.role;if(role==='none'){state.none=!state.none;state.action.clear();}else{const position=Number(button.dataset.position);if(state[role].has(position)){state[role].delete(position);}else{state[role].add(position);}if(role==='action'){state.none=false;}}refreshChoices(itemId);setFeedback(itemId,'Choices changed. Check answer when ready.','changed');}));
lessonItems.forEach(item=>{document.querySelector('#'+item.id+'-check').addEventListener('click',()=>{const state=lessonState[item.id];if(!state.subject.size||(!state.action.size&&!state.none)){setFeedback(item.id,'Unanswered: choose a subject and action words, or choose No target action verb.','unanswered');return;}if(!sameSet(state.subject,item.subject)){setFeedback(item.id,item.id==='A04'?'Try the subject again. Choose the complete phrase The plan, including The.':'Try the subject again. Who performs the action in "'+item.sentence+'"?','retry');return;}if(item.id==='A05'&&!state.none&&state.action.size===1&&item.actions.some(n=>state.action.has(n))){setFeedback(item.id,'One action is missing. Read after and: Kai opens the box and lifts the lid. Select both opens and lifts.','incomplete');return;}const actionMatch=item.actions.length?sameSet(state.action,item.actions)&&!state.none:state.none&&state.action.size===0;if(!actionMatch){setFeedback(item.id,item.id==='A04'?'Try the action answer again. Here, "plan" names a thing. The verb "is" tells where the plan is; choose No target action verb.':'Try the action words again. '+item.reason,'retry');return;}setFeedback(item.id,'Matching selections. '+item.reason+' Discuss your explanation with your teacher.','match');});document.querySelector('#'+item.id+'-explanation').addEventListener('input',()=>{setFeedback(item.id,'Explanation changed. Check choices again; your teacher reviews the explanation.','changed');});});
document.querySelector('#reveal-key').addEventListener('click',()=>{const key=document.querySelector('#teacher-key');key.hidden=!key.hidden;const button=document.querySelector('#reveal-key');button.textContent=key.hidden?'Show teacher key':'Hide teacher key';button.setAttribute('aria-expanded',String(!key.hidden));});
document.querySelector('#reset-activity').addEventListener('click',()=>{lessonItems.forEach(item=>{lessonState[item.id].subject.clear();lessonState[item.id].action.clear();lessonState[item.id].none=false;refreshChoices(item.id);document.querySelector('#'+item.id+'-explanation').value='';setFeedback(item.id,'Not checked. Choose words in both rows.','unanswered');});document.querySelector('#teacher-key').hidden=true;document.querySelector('#reveal-key').textContent='Show teacher key';document.querySelector('#reveal-key').setAttribute('aria-expanded','false');document.querySelector('#activity-status').textContent='Activity reset. All choices, explanations, and feedback cleared.';});
</script></body></html>