Two objectives. Two kinds of evidence.
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"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"><title>Two objectives. Two kinds of evidence.</title><style>
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f3f4f5;color:#202c38;font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1040px;margin:auto;padding:28px}header{border-top:5px solid var(--accent);padding:18px 0 14px}h1{font-size:clamp(25px,4vw,38px);line-height:1.16;letter-spacing:-.035em;margin:10px 0 14px;max-width:850px}h2{font-size:20px;line-height:1.35;margin:0 0 12px}h3{font-size:17px;margin:0}p{margin:8px 0 14px}small,.eyebrow{font-size:12px;letter-spacing:.06em;font-weight:650}.eyebrow{display:block;color:#566474}#page-lead{font-size:18px;max-width:850px}.fiction{display:inline-block;background:#e6e9ed;padding:4px 9px;font-size:12px;border-radius:4px;margin:0 0 12px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}.pair>*{min-width:0}.paper{padding:18px 20px;background:#fff;border:1px solid #d5dce3;border-radius:5px}.paper p{margin-bottom:0}.note,.warning{padding:15px 18px;background:#e8edf2;border-left:4px solid var(--accent);margin:16px 0}.warning{background:#fff2db;border-color:#916120}.note p,.warning p{margin:5px 0 0}.switch{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 16px}button,select,input{font:inherit}button{padding:10px 14px;border:1px solid #9aa9b6;border-radius:5px;background:#fff;color:#26384a;cursor:pointer;min-height:44px}button:hover{background:#e9eef3}button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd6b00;outline-offset:3px}input,select{padding:9px;width:100%;border:1px solid #8795a3;background:#fff;border-radius:4px;min-width:0;min-height:44px}.select-label{display:block;max-width:390px}label{font-size:14px;font-weight:600}.views{min-width:0}.panel{padding:4px 0}.panel>.paper{margin:12px 0}[hidden]{display:none!important}details{background:#fff;border:1px solid #cbd4dd;border-radius:5px;margin:10px 0}summary{padding:14px 16px;cursor:pointer;font-weight:650;min-height:48px}.detail-body{padding:0 18px 18px}.detail-body p:last-child{margin-bottom:0}.pill{font-size:12px;display:inline-block;padding:4px 9px;background:#e9edf1;border-radius:5px}.timeline details{border-left:4px solid var(--accent)}.agenda{margin-top:26px;border-top:1px solid #b9c4ce;padding-top:20px}.total{font:13px system-ui;display:inline-block;float:right;color:#526273}.agenda ol,.program{list-style:none;padding:0;margin:0}.agenda li{display:grid;grid-template-columns:68px 1fr 55px;gap:10px;padding:10px 0;border-bottom:1px solid #d8dfe5;align-items:baseline}.time{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}.agenda small{font-size:12px;letter-spacing:0;font-weight:400;text-align:right}.program li{display:grid;grid-template-columns:65px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid #cad4dd}.program p{margin:5px 0 0}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:15px 0}.sticky{padding:20px;background:#ffedaa;border-bottom:3px solid #d8c679;transform:rotate(-1deg)}.sticky:nth-child(2){background:#e7edd0;transform:rotate(1deg)}.sticky:nth-child(3){background:#f1dfd2}.sticky p{font-size:18px}.handoff{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#c2ccd5;border:1px solid #c2ccd5;margin:16px 0}.handoff article{background:#fff;padding:20px}.handoff h2{margin:10px 0}.map{margin:0;padding:14px;background:#fff;border:1px solid #cbd4dd}.map figcaption{font-size:13px;font-weight:650}.map svg{width:100%;height:auto;background:#f5f1e8;margin-top:8px}.map text{font:16px system-ui;fill:#263646}.blank{border-bottom:1px dashed #97a5b3;padding:14px 0;color:#536170}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));background:#fff;border:1px solid #cad4dd;margin:16px 0}.metrics article{padding:17px;border-right:1px solid #e1e6eb}.metrics strong{display:block;font-size:28px;letter-spacing:-.04em;color:var(--accent)}.metrics span{font-size:13px;color:#526273}.capacity{padding:12px 0;background:#dbe3e9;margin:18px 0}.capacity div{padding:10px;background:var(--accent);color:#fff;max-width:100%}.capacity span{display:block;padding:8px 12px}.meeting-bars{border-left:5px solid var(--accent);padding:10px 18px;background:#fff}.register-item{border-top:3px solid var(--accent);background:#fff;padding:20px;margin:14px 0}.register-heading{display:flex;justify-content:space-between;gap:14px;align-items:start}.register-heading .pill{flex-shrink:0}.response{background:#edf1f5;padding:12px 16px;margin-top:10px}.response p{margin:5px 0 0}.time-entry{border:1px solid #cbd4dd;background:#fff;padding:18px;margin:18px 0;min-width:0}.time-entry legend{font-weight:700;padding:0 8px}.input-grid{display:grid;grid-template-columns:1fr 1fr 125px;gap:12px}.input-grid input{display:block;margin-top:6px}.time-entry p{margin:14px 0 0}table{border-collapse:collapse;width:100%;background:#fff;margin:14px 0;font-size:14px}th,td{text-align:left;vertical-align:top;padding:13px 15px;border-bottom:1px solid #d6dde4;overflow-wrap:anywhere}th{background:#e6ecf1;font-size:12px}.field{display:none}footer{border-top:1px solid #bdc8d2;margin-top:28px;padding:18px 0 0;color:#526170;font-size:13px}a{color:var(--accent)}.empty{padding:20px;border:1px dashed #98a6b3}body{--accent:#314f6c}body.sand{--accent:#745738;background:#f6f3ec;color:#302b26}.sand header{border-color:#745738}.sand .paper{background:#fffdfa}.sand .note{background:#ede7dc}.sand h1{font-family:Georgia,serif;letter-spacing:-.025em}.sand .time{color:#745738}body.plum{--accent:#685375;background:#f3f0f5}.plum .note{background:#eae3ef}@media(max-width:720px){main{padding:20px}.pair{gap:12px}.board{grid-template-columns:1fr}.handoff{grid-template-columns:1fr}.input-grid{grid-template-columns:1fr 1fr}.input-grid label:last-child{grid-column:1/-1}.register-heading{display:block}}@media(max-width:520px){main{padding:16px}.pair{grid-template-columns:1fr;gap:12px}h1{font-size:27px}#page-lead{font-size:17px}.metrics{grid-template-columns:1fr 1fr}.metrics strong{font-size:25px}.input-grid{grid-template-columns:1fr}.agenda li{grid-template-columns:54px 1fr 44px;gap:7px}.program li{grid-template-columns:52px 1fr}.total{float:none;margin-left:4px}.paper{padding:16px}.switch button{flex:1 1 auto}thead{display:none}table,tbody,tr,td{display:block;width:100%}tr{padding:8px 12px;border-bottom:1px solid #b9c5cf}td{padding:6px 0;border:0}.field{display:block;font-size:11px;font-weight:700;color:#526273;margin-bottom:2px}.detail-body{padding:0 14px 14px}}@media print{body{background:#fff}main{padding:0}.switch{display:none}.panel[hidden]{display:block!important}details{break-inside:avoid}button{display:none}}
</style></head><body class="sand"><main><header><span class="eyebrow">SIOP-INFORMED PLAN · 40 MIN</span><h1>Two objectives. Two kinds of evidence.</h1><p id="page-lead">Both maps show a river, <strong>but</strong> Map A shows a bridge and Map B shows a road.</p><span class="fiction">Original fictional example · local reading copy</span></header><div class="pair"><figure class="map"><figcaption>Map A · original fictional card</figcaption><svg viewBox="0 0 280 140" role="img" aria-label="Map A shows a river and a bridge"><path d="M0 65 Q70 20 140 70 T280 75" fill="none" stroke="#72aabd" stroke-width="22"/><path d="M122 36 L160 102" stroke="#715c49" stroke-width="16"/><text x="18" y="112">River</text><text x="168" y="34">Bridge</text></svg></figure><figure class="map"><figcaption>Map B · original fictional card</figcaption><svg viewBox="0 0 280 140" role="img" aria-label="Map B shows a river and a road"><path d="M0 65 Q70 20 140 70 T280 75" fill="none" stroke="#72aabd" stroke-width="22"/><path d="M10 125 L255 115" stroke="#715c49" stroke-width="12"/><text x="18" y="32">River</text><text x="180" y="100">Road</text></svg></figure></div><aside class="note"><strong>Both objectives stay visible</strong><p>Content: identify two features on each map and compare a shared and differing feature. Language: orally explain the similarity and difference using “both,” “but,” and feature names.</p></aside><section class="views"><div class="switch" role="group" aria-label="Objective focus"><button type="button" data-view="v0" aria-pressed="true" aria-controls="v0">Content</button><button type="button" data-view="v1" aria-pressed="false" aria-controls="v1">Language</button></div><section id="v0" class="panel" aria-label="Content"><article class="paper"><span class="eyebrow">Content objective</span><p>Identify two labeled features on each map; identify one shared and one differing feature.</p></article><article class="paper"><span class="eyebrow">Practice → individual evidence</span><p>Match vocabulary to features. Individually mark two features on each map and compare accurately. Actual results NOT SUPPLIED.</p></article></section><section id="v1" class="panel" hidden aria-label="Language"><article class="paper"><span class="eyebrow">Language objective</span><p>Orally explain a similarity and difference using “both,” “but,” and feature names.</p></article><article class="paper"><span class="eyebrow">Practice → individual evidence</span><p>Partner A explains; Partner B points to evidence; switch roles. Each learner gives an understandable spoken comparison. Actual results NOT SUPPLIED.</p></article></section></section><aside class="note"><strong>Vocabulary strip</strong><p>river · bridge · road. “Both” expresses the shared feature; “but” connects the contrast.</p></aside><section class="agenda"><h2>Proposed session rhythm <span class="total">40 minutes</span></h2><ol><li><span class="time">0–5</span><span>Objectives and prior experience</span><small>5 min</small></li><li><span class="time">5–12</span><span>Vocabulary and model</span><small>7 min</small></li><li><span class="time">12–22</span><span>Partner comparison</span><small>10 min</small></li><li><span class="time">22–32</span><span>Individual task</span><small>10 min</small></li><li><span class="time">32–40</span><span>Review both objectives</span><small>8 min</small></li></ol></section><details ><summary>Teaching record</summary><div class="detail-body"><p class="blank"><strong>Content evidence:</strong> Not supplied — complete in the maintained record after the conversation.</p><p class="blank"><strong>Language evidence:</strong> Not supplied — complete in the maintained record after the conversation.</p><p class="blank"><strong>Next support:</strong> Not supplied — complete in the maintained record after the conversation.</p></div></details><footer>Use this copy to prepare the discussion. Actual decisions, observations, approvals and corrections belong in the maintained school record. No automatic collection or synchronization.</footer></main><script>
document.querySelectorAll('[data-view]').forEach(button=>button.addEventListener('click',()=>{
document.querySelectorAll('[data-view]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));
document.querySelectorAll('.panel').forEach(p=>p.hidden=p.id!==button.dataset.view);
}));
</script></body></html>