Read both clock hands.

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"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; connect-src 'none'; form-action 'none'; base-uri 'none'"><title>Read both clock hands.</title><style>:root{--accent:#2d526b;--wash:#e7eef4;--paper:#f6f9fb}
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper,#f6f4ee);color:#222b32;font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1040px;margin:0 auto;padding:32px}header{padding-bottom:20px;border-bottom:2px solid var(--accent);margin-bottom:24px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}h1{font:600 clamp(28px,4.5vw,40px)/1.13 Georgia,serif;letter-spacing:-.025em;margin:0 0 12px;max-width:760px}h2{font-size:21px;line-height:1.3;margin:0 0 12px}h3{font-size:17px;line-height:1.4;margin:0 0 8px}p{margin:0 0 12px}p:last-child{margin-bottom:0}.lede{max-width:740px;color:#47545c}.small{font-size:13px;line-height:1.5;color:#53616b}.tag{display:inline-block;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.02em;padding:4px 8px;background:var(--wash);color:var(--accent)}.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px}.split>*{min-width:0}.panel{padding:22px;background:#fff;border:1px solid #cbd1d1}.callout{padding:16px 20px;border-left:4px solid var(--accent);background:var(--wash);margin-bottom:20px}.warning{background:#fff2df;border-left-color:#8a4c17}.section{margin-top:26px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}button,input,select,textarea{font:inherit}button,select,summary{min-height:44px}button{background:#fff;color:#24313c;border:1px solid #9aa6aa;border-radius:5px;padding:9px 13px;cursor:pointer;text-align:left;line-height:1.4}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}:is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid #bb5b1d;outline-offset:3px}select{width:100%;padding:9px;border:1px solid #859397;background:white;color:#222b32;border-radius:4px}textarea{width:100%;padding:12px;min-height:100px;border:1px solid #859397;border-radius:4px}label{cursor:pointer}input[type=radio]{width:20px;height:20px;accent-color:var(--accent);vertical-align:middle}fieldset{min-width:0;border:1px solid #c4cece;margin:0 0 16px;padding:18px}legend{font-weight:700;padding:0 7px}.choice{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;min-height:44px;border:1px solid #cbd1d1;background:white;margin-right:8px;margin-bottom:8px;border-radius:4px}.choice:has(input:checked){border-color:var(--accent);background:var(--wash)}.feedback{padding:10px 12px;background:#edf1f3;font-size:14px;margin-top:12px;min-height:44px}.feedback[data-state=correct]{background:#e4f1e9;color:#194c35}.feedback[data-state=incorrect]{background:#fff0e3;color:#79451f}details{border-top:1px solid #cbd1d1;margin-top:14px}summary{padding:10px 0;font-weight:650;cursor:pointer}details>div,details>p{padding-bottom:12px}.list{list-style:none;padding:0;margin:0}.list>li{padding:13px 0;border-bottom:1px solid #d2d9da}.list b{display:block}dl{margin:0}dt{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:#53616b;margin-top:14px}dt:first-child{margin-top:0}dd{margin:3px 0 0}table{width:100%;border-collapse:collapse;font-size:14px}caption{text-align:left;font-weight:700;margin-bottom:10px}th,td{padding:12px 9px;border-bottom:1px solid #cbd1d1;text-align:left;vertical-align:top}th{font-size:12px;color:#52616c;letter-spacing:.04em;background:var(--wash)}td .mobile-label{display:none}.rule{padding:16px 0;border-top:1px solid #cbd1d1;margin-top:24px}footer{margin-top:30px;padding-top:16px;border-top:1px solid #bac7cb;font-size:13px;color:#53616b}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.number{font-variant-numeric:tabular-nums}.empty{color:#754d23;font-weight:650}.row-button{width:100%;border:0;border-bottom:1px solid #cbd1d1;border-radius:0;padding:14px;background:transparent}.row-button[aria-pressed=true]{background:var(--wash);color:var(--accent);border-left:4px solid var(--accent)}.row-button small{display:block;font-size:12px;margin-bottom:4px}.rows{border-top:1px solid #cbd1d1}.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:12px 0 12px 18px;border-left:2px solid #b8c5ca;position:relative}.timeline li:before{content:'';position:absolute;width:8px;height:8px;left:-5px;top:23px;background:var(--accent);border-radius:50%}.timeline time{font-size:12px;font-weight:750;color:var(--accent);display:block}main>*{overflow-wrap:break-word}
@media(max-width:760px){main{padding:24px}.split{grid-template-columns:1fr;gap:20px}h1{font-size:31px}}@media(max-width:480px){main{padding:18px 16px}h1{font-size:28px}.panel{padding:16px}header{margin-bottom:18px}table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}table.responsive thead{display:none}table.responsive tr{border-bottom:1px solid #aebec2;padding:10px 0}table.responsive td{border:0;padding:4px 0}td .mobile-label{display:inline;font-weight:650}fieldset{padding:14px}.toolbar button{flex:1 1 auto}}@media print{body{background:white}main{max-width:none;padding:0}button{color:black!important;background:white!important}.panel{break-inside:avoid}footer{margin-top:18px}}
.clock-panel{padding:18px;background:#eaf0f2}.clock-panel svg{width:300px;margin:0 auto 16px}.clock-layout{align-items:start}.clock-layout .choice{font-weight:650;font-size:19px}.clock-layout textarea{min-height:80px;margin-top:8px}.clock-layout button{margin-bottom:8px}</style></head><body><main><header><p class="eyebrow">Fixed clock practice · Three supplied problems</p><h1>Read both clock hands.</h1><p class="lede">Choose the digital time, then explain which hand gives the hour and which gives the minutes. A dial alone does not establish AM or PM.</p></header>
<div class="toolbar" role="group" aria-label="problem"><button type="button" data-problem="0" aria-pressed="false">Problem 1</button><button type="button" data-problem="1" aria-pressed="true">Problem 2</button><button type="button" data-problem="2" aria-pressed="false">Problem 3</button></div><div class="split clock-layout"><section class="clock-panel"><svg id="dial" viewBox="0 0 300 300" role="img" aria-labelledby="dial-title dial-description"><title id="dial-title">Fixed practice dial</title><desc id="dial-description"></desc><circle cx="150" cy="150" r="142" fill="#fff" stroke="#8095a1" stroke-width="3"/><text x="202.5" y="66.06733260263394" text-anchor="middle" font-size="20" fill="#263d50">1</text><text x="240.93266739736606" y="104.49999999999999" text-anchor="middle" font-size="20" fill="#263d50">2</text><text x="255" y="157" text-anchor="middle" font-size="20" fill="#263d50">3</text><text x="240.93266739736606" y="209.49999999999997" text-anchor="middle" font-size="20" fill="#263d50">4</text><text x="202.5" y="247.93266739736606" text-anchor="middle" font-size="20" fill="#263d50">5</text><text x="150" y="262" text-anchor="middle" font-size="20" fill="#263d50">6</text><text x="97.49999999999999" y="247.93266739736606" text-anchor="middle" font-size="20" fill="#263d50">7</text><text x="59.067332602633954" y="209.50000000000006" text-anchor="middle" font-size="20" fill="#263d50">8</text><text x="45" y="157.00000000000003" text-anchor="middle" font-size="20" fill="#263d50">9</text><text x="59.067332602633954" y="104.49999999999999" text-anchor="middle" font-size="20" fill="#263d50">10</text><text x="97.49999999999994" y="66.06733260263397" text-anchor="middle" font-size="20" fill="#263d50">11</text><text x="149.99999999999997" y="52" text-anchor="middle" font-size="20" fill="#263d50">12</text><line x1="150" y1="13" x2="150" y2="25" transform="rotate(0 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(6 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(12 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(18 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(24 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(30 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(36 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(42 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(48 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(54 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(60 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(66 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(72 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(78 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(84 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(90 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(96 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(102 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(108 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(114 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(120 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(126 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(132 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(138 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(144 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(150 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(156 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(162 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(168 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(174 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(180 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(186 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(192 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(198 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(204 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(210 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(216 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(222 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(228 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(234 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(240 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(246 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(252 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(258 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(264 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(270 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(276 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(282 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(288 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(294 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(300 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(306 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(312 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(318 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(324 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="25" transform="rotate(330 150 150)" stroke="#889ba4" stroke-width="2"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(336 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(342 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(348 150 150)" stroke="#889ba4" stroke-width="1"/><line x1="150" y1="13" x2="150" y2="19" transform="rotate(354 150 150)" stroke="#889ba4" stroke-width="1"/><line id="hour-hand" x1="150" y1="150" x2="150" y2="83" stroke="#273f57" stroke-width="10" stroke-linecap="round"/><line id="minute-hand" x1="150" y1="150" x2="150" y2="46" stroke="#9c4d29" stroke-width="6" stroke-linecap="round"/><circle cx="150" cy="150" r="7" fill="#273f57"/></svg><p id="hand-description" class="small"></p></section><section><fieldset><legend>Which digital time matches?</legend><div id="clock-choices"></div></fieldset><button class="primary" id="check-clock">Check time</button><button id="reset-clock">Reset this problem</button><p id="clock-feedback" class="feedback" role="status">Not answered</p><details id="hand-help"><summary>Help: each hand's role</summary><p>The short hand gives the hour and moves toward the next hour as minutes pass. The long hand gives minutes: each number marks five minutes.</p></details><label for="clock-reason" class="small">Explain the hour hand and minute hand to a partner.</label><textarea id="clock-reason" placeholder="Which hand tells you each part?"></textarea></section></div><details id="clock-key"><summary>Teacher key · All three clocks</summary><div><p><b>3:00</b> — The minute hand points at 12; the hour hand points at 3. The long hand at 12 means zero minutes. The short hand at 3 gives the hour.</p><p><b>3:30</b> — The minute hand points at 6; the hour hand is halfway between 3 and 4. The long hand at 6 marks 30 minutes, not hour 6. The short hand is halfway from 3 to 4: it is still the 3 o’clock hour.</p><p><b>3:45</b> — The minute hand points at 9; the hour hand is three-quarters of the way from 3 to 4. The short hand has not reached 4. The long hand at 9 marks 45 minutes, not nine minutes.</p></div></details><footer>Original illustrative example · Local controls only. Changes are temporary and clear when this page is reloaded. Keep actual records in your approved source tools.</footer></main><script>const $=s=>document.querySelector(s);const $$=s=>Array.from(document.querySelectorAll(s));function pressed(attr,i){$$('[data-'+attr+']').forEach(b=>b.setAttribute('aria-pressed',String(Number(b.dataset[attr])===i)));}

const clocks=[{"m":0,"choices":["3:00","12:15","3:12"],"description":"The minute hand points at 12; the hour hand points at 3.","explain":"The long hand at 12 means zero minutes. The short hand at 3 gives the hour."},{"m":30,"choices":["3:00","3:30","6:15"],"description":"The minute hand points at 6; the hour hand is halfway between 3 and 4.","explain":"The long hand at 6 marks 30 minutes, not hour 6. The short hand is halfway from 3 to 4: it is still the 3 o’clock hour."},{"m":45,"choices":["3:45","4:45","3:09"],"description":"The minute hand points at 9; the hour hand is three-quarters of the way from 3 to 4.","explain":"The short hand has not reached 4. The long hand at 9 marks 45 minutes, not nine minutes."}];let problemIndex=1;function clearClock(){$$('input[name=clock-time]').forEach(r=>r.checked=false);$('#clock-feedback').textContent='Not answered';$('#clock-feedback').dataset.state='unanswered';$('#hand-help').open=false;$('#clock-key').open=false;$('#clock-reason').value='';}
function problem(i){problemIndex=i;pressed('problem',i);const c=clocks[i];$('#hour-hand').setAttribute('transform','rotate('+(90+c.m/2)+' 150 150)');$('#minute-hand').setAttribute('transform','rotate('+(c.m*6)+' 150 150)');$('#dial-description').textContent=c.description;$('#hand-description').textContent=c.description;$('#clock-choices').innerHTML=c.choices.map(v=>'<label class="choice"><input type="radio" name="clock-time" value="'+v+'">'+v+'</label>').join('');$$('input[name=clock-time]').forEach(r=>r.addEventListener('change',()=>{$('#clock-feedback').textContent='Ready to check your current choice.';$('#clock-feedback').dataset.state='selected';}));clearClock();}$$('[data-problem]').forEach(b=>b.addEventListener('click',()=>problem(Number(b.dataset.problem))));$('#reset-clock').addEventListener('click',clearClock);$('#check-clock').addEventListener('click',()=>{const r=$('input[name=clock-time]:checked'),c=clocks[problemIndex],key='3:'+String(c.m).padStart(2,'0'),out=$('#clock-feedback');if(!r){out.textContent='Not answered — choose a time before checking.';out.dataset.state='unanswered';return;}const correct=r.value===key;out.textContent=(correct?'Correct: ':'Try again: ')+key+'. '+c.explain;out.dataset.state=correct?'correct':'incorrect';});problem(1);</script></body></html>