Choose the word, show the clue
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>Choose the word, show the clue</title>
<style>
:root{color-scheme:light;--ink:#233a32;--green:#254d3d;--paper:#fffdf5;--line:#c8cec0;--plum:#62344d}*{box-sizing:border-box}body{margin:0;background:#e8ecdf;color:var(--ink);font:17px/1.6 system-ui,sans-serif}main{max-width:930px;margin:auto;padding:clamp(16px,4vw,40px)}header{padding:12px 0 24px;border-bottom:3px solid var(--green)}.eyebrow{font-weight:750;letter-spacing:.08em;font-size:16px;text-transform:uppercase;margin:0 0 10px}h1{font-family:Georgia,serif;font-size:clamp(32px,6vw,54px);line-height:1.12;max-width:650px;margin:0 0 20px}h2{font-size:25px;line-height:1.25;margin:0 0 14px}p{margin:0 0 16px}.lede{max-width:660px;font-size:20px}.meanings{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.meaning{padding:18px 20px;border:1px solid #aab7a4;border-radius:10px;background:#f8faee}.meaning strong{display:block;font:700 28px Georgia,serif}.round{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:clamp(18px,4vw,30px);margin:20px 0;box-shadow:0 4px 0 #ccd3c2}.roundhead{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.tag{font-size:16px;font-weight:750;color:var(--green)}.sentence{font:clamp(23px,4vw,29px)/1.55 Georgia,serif;margin-bottom:22px}.blank{display:inline-block;min-width:3em;border-bottom:2px solid var(--plum);text-align:center;color:var(--plum);font-weight:700}.choices,.actions{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 20px}button{font:700 17px/1.4 system-ui,sans-serif;padding:12px 20px;border-radius:8px;border:2px solid var(--green);background:var(--green);color:white;cursor:pointer;max-width:100%;overflow-wrap:anywhere}.word{background:white;color:var(--green);min-width:110px}.word[aria-pressed=true]{background:#dcebb6;box-shadow:inset 0 0 0 2px var(--green)}button:hover{filter:brightness(.94)}button:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #854567;outline-offset:4px}label{display:block;font-weight:700;margin-bottom:8px}textarea{width:100%;min-height:92px;resize:vertical;font:17px/1.5 system-ui,sans-serif;border:1px solid #778c7f;background:white;border-radius:7px;padding:12px;color:var(--ink)}.feedback{padding:16px 18px;border-left:4px solid var(--green);background:#edf3dd;min-height:64px;margin-top:14px;overflow-wrap:anywhere}.feedback:empty{display:none}.challenge{border:2px solid var(--plum);background:#fff9fc}.challenge .tag{color:var(--plum)}.challenge button{background:var(--plum);border-color:var(--plum)}.hint{font-size:16px;color:#46594d}details{padding:22px;border:1px dashed #72856c;border-radius:10px;margin:28px 0;background:#f8faee}summary{cursor:pointer;font-weight:750;font-size:19px}.key p{margin:16px 0}.footer{padding-top:12px}.reset{background:transparent;color:var(--green)}[hidden]{display:none!important}@media(max-width:480px){.meanings{grid-template-columns:1fr}.sentence{font-size:24px}.round{box-shadow:none}.actions button{width:100%}button{padding:12px 16px}}
</style>
</head>
<body>
<main>
<header>
<p class="eyebrow">The context club · Classroom activity</p>
<h1>Choose the word,<br>show the clue.</h1>
<p class="lede">The sound is the same. Which meaning fits the sentence?</p>
<p>Choose a spelling, write the clue that helped you, then check the answer. Try three rounds and one clarification challenge.</p>
</header>
<aside class="meanings" aria-label="Meaning reference">
<div class="meaning"><strong>flour</strong>A milled ingredient used to make dough.</div>
<div class="meaning"><strong>flower</strong>A plant’s blossom, or a cut stem with its bloom.</div>
</aside>
<section class="round" aria-labelledby="h1-title">
<div class="roundhead"><h2 id="h1-title">The baker’s bowl</h2><span class="tag">H1 · Context round</span></div>
<p class="sentence">The baker measured <span id="h1-word" class="blank">___</span> into the bowl to make dough.</p>
<div class="choices" role="group" aria-label="H1 spelling choice"><button class="word" id="h1-flour" type="button" aria-pressed="false">flour</button><button class="word" id="h1-flower" type="button" aria-pressed="false">flower</button></div>
<label for="h1-note">H1: What is your clue, and why does it fit?</label><textarea id="h1-note" placeholder="Point to words in the sentence. Start with: I chose…"></textarea>
<div class="actions"><button id="h1-check" type="button">Check answer</button></div><p id="h1-feedback" class="feedback" role="status" aria-live="polite"></p>
</section>
<section class="round" aria-labelledby="h2-title">
<div class="roundhead"><h2 id="h2-title">On the plant</h2><span class="tag">H2 · Context round</span></div>
<p class="sentence">A yellow <span id="h2-word" class="blank">___</span> bloomed on the plant.</p>
<div class="choices" role="group" aria-label="H2 spelling choice"><button class="word" id="h2-flour" type="button" aria-pressed="false">flour</button><button class="word" id="h2-flower" type="button" aria-pressed="false">flower</button></div>
<label for="h2-note">H2: What is your clue, and why does it fit?</label><textarea id="h2-note" placeholder="Which words point to the meaning?"></textarea>
<div class="actions"><button id="h2-check" type="button">Check answer</button></div><p id="h2-feedback" class="feedback" role="status" aria-live="polite"></p>
</section>
<section class="round" aria-labelledby="h3-title">
<div class="roundhead"><h2 id="h3-title">In the vase</h2><span class="tag">H3 · Context round</span></div>
<p class="sentence">Jo put the cut <span id="h3-word" class="blank">___</span> in a vase.</p>
<div class="choices" role="group" aria-label="H3 spelling choice"><button class="word" id="h3-flour" type="button" aria-pressed="false">flour</button><button class="word" id="h3-flower" type="button" aria-pressed="false">flower</button></div>
<label for="h3-note">H3: What is your clue, and why does it fit?</label><textarea id="h3-note" placeholder="Explain the cut item and its setting."></textarea>
<div class="actions"><button id="h3-check" type="button">Check answer</button></div><p id="h3-feedback" class="feedback" role="status" aria-live="polite"></p>
</section>
<section class="round challenge" aria-labelledby="challenge-title">
<div class="roundhead"><h2 id="challenge-title">What’s missing?</h2><span class="tag">Unscored · Ask for context</span></div>
<p class="sentence">Jo put the <span id="challenge-word" class="blank">___</span> on the table.</p>
<p id="challenge-result" class="feedback" role="status" aria-live="polite">Insufficient context: the table alone does not tell us whether Jo moved flour or a flower.</p>
<label for="challenge-question">What would you ask Jo?</label><textarea id="challenge-question" placeholder="Was Jo moving an ingredient or a blossom?"></textarea>
<p class="hint">After writing your question, try a practice clarification. These scenarios add new information.</p>
<div class="actions"><button id="scenario-flour" type="button">Try: a milled ingredient</button><button id="scenario-flower" type="button">Try: a cut flower</button></div>
<p id="challenge-scenario" class="hint">No clarification supplied yet.</p>
</section>
<details id="teacher-key"><summary>Separate teacher key & discussion</summary><div class="key">
<p><strong>H1: flour.</strong> The measured ingredient is for making dough. “Bowl” alone is weaker evidence.</p>
<p><strong>H2: flower.</strong> “Bloomed on the plant” points to a blossom.</p>
<p><strong>H3: flower.</strong> The cut item in a vase fits a cut flower.</p>
<p><strong>Challenge:</strong> Either word needs a stated scenario. Ask what Jo was moving before choosing.</p>
<p>Discuss each written reason in the student’s own words. The activity checks fixed word choices only; it does not grade explanations or assess pronunciation.</p>
</div></details>
<footer class="footer"><button id="reset" class="reset" type="button">Reset all responses</button><p id="reset-status" role="status" aria-live="polite"></p><p class="hint">Original practice sentences. Responses last only while this page stays open. Copy notes you want to keep before resetting or closing.</p></footer>
</main>
<script>
(() => {
'use strict';
const find = (id) => document.getElementById(id);
const rounds = [
{id:'h1',answer:'flour',sentence:'The baker measured flour into the bowl to make dough.',clue:'The measured ingredient for dough points to flour; bowl alone is weaker evidence.'},
{id:'h2',answer:'flower',sentence:'A yellow flower bloomed on the plant.',clue:'Bloomed on the plant points to a blossom.'},
{id:'h3',answer:'flower',sentence:'Jo put the cut flower in a vase.',clue:'The cut item in a vase points to a cut flower.'}
];
const choices = Object.create(null);
const initialChallenge = 'Insufficient context: the table alone does not tell us whether Jo moved flour or a flower.';
function clearRound(id) { find(id+'-feedback').textContent=''; find('reset-status').textContent=''; }
for (const round of rounds) {
choices[round.id]='';
for (const word of ['flour','flower']) {
find(round.id+'-'+word).addEventListener('click', () => {
choices[round.id]=word;
find(round.id+'-word').textContent=word;
for (const option of ['flour','flower']) find(round.id+'-'+option).setAttribute('aria-pressed',String(word===option));
clearRound(round.id);
});
}
find(round.id+'-note').addEventListener('input',()=>clearRound(round.id));
find(round.id+'-check').addEventListener('click',()=>{
const selected = choices[round.id];
find(round.id+'-feedback').textContent = !selected ? 'Choose flour or flower before checking.' : selected===round.answer ? 'Correct choice. '+round.sentence+' Clue: '+round.clue+' Discuss your written reason with your teacher.' : 'Try again. '+round.clue+' Read the whole sentence, then choose again.';
});
}
find('challenge-question').addEventListener('input',()=>{
find('challenge-word').textContent='___';
find('challenge-result').textContent=initialChallenge;
find('challenge-scenario').textContent='No clarification supplied yet.';
find('reset-status').textContent='';
});
for (const word of ['flour','flower']) {
find('scenario-'+word).addEventListener('click',()=>{
if (!find('challenge-question').value.trim()) {
find('challenge-result').textContent='Write a clarification question first. '+initialChallenge;
return;
}
const scenario = word==='flour' ? 'Jo was moving a milled ingredient.' : 'Jo was moving a cut flower.';
find('challenge-word').textContent=word;
find('challenge-scenario').textContent='Practice clarification: '+scenario;
find('challenge-result').textContent='With this added scenario: Jo put the '+word+' on the table. The original sentence alone still has no single answer.';
});
}
find('reset').addEventListener('click',()=>{
for (const round of rounds) {
choices[round.id]='';
find(round.id+'-word').textContent='___';
find(round.id+'-note').value='';
find(round.id+'-feedback').textContent='';
for (const word of ['flour','flower']) find(round.id+'-'+word).setAttribute('aria-pressed','false');
}
find('challenge-question').value='';
find('challenge-word').textContent='___';
find('challenge-result').textContent=initialChallenge;
find('challenge-scenario').textContent='No clarification supplied yet.';
find('teacher-key').open=false;
find('reset-status').textContent='All responses cleared. Start again with H1.';
});
})();
</script>
</body>
</html>