From mark test to place portrait

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 name="color-scheme" content="light"><title>From mark test to place portrait</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#f2f5f4);color:#203039;font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif;--accent:#24635b;--soft:#e1eeea}main{max-width:1000px;margin:auto;padding:32px}header{padding-bottom:20px;border-bottom:1px solid #becbc8;margin-bottom:22px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}h1{font-size:clamp(28px,4.7vw,44px);line-height:1.12;letter-spacing:-.045em;margin:10px 0 14px;max-width:830px}h2{font-size:22px;line-height:1.25;margin:0 0 16px}h3{font-size:17px;margin:0 0 9px}p{margin:8px 0 12px}header p{font-size:18px;max-width:760px}.fiction{font-size:13px;color:#52636a;display:block;margin-top:12px}.paper,.panel{background:#fff;border:1px solid #c5d1cf;border-radius:12px;padding:24px;min-width:0}.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.note{border-left:4px solid var(--accent);padding:16px 20px;background:var(--soft);margin:18px 0}.note p:last-child{margin-bottom:0}.muted,small{color:#52636a;font-size:14px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}button{font:inherit;font-weight:650;min-height:44px;border:1px solid #81958f;background:#fff;color:#203039;padding:9px 15px;border-radius:7px;cursor:pointer}button:hover{background:var(--soft)}button[aria-pressed=true],#check{background:var(--accent);color:#fff;border-color:var(--accent)}button:disabled{opacity:.55;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #b96000;outline-offset:3px}label{display:block;font-size:14px;font-weight:700;margin:12px 0 6px}select,input{font:inherit;width:100%;min-height:44px;border:1px solid #81958f;border-radius:6px;padding:9px;background:#fff;color:#203039;min-width:0}input[type=checkbox]{width:20px;min-height:20px}.feedback{padding:14px 18px;background:var(--soft);border-radius:8px;min-height:53px}.large{font-size:clamp(36px,6vw,60px);font-weight:750;line-height:1.1;letter-spacing:-.05em}.metric{padding:22px;background:var(--accent);color:#fff;border-radius:12px}.metric small{color:#fff}.metric p{margin:8px 0 0}.metric.secondary{background:#e1e9e7;color:#203039}.metric.secondary small{color:#384f4b}.agenda{border-top:1px solid #becbc8;margin-top:28px;padding-top:24px}.agenda h2 span{float:right;font:14px system-ui;color:#52636a}.agenda ol{padding:0;list-style:none}.agenda li{display:grid;grid-template-columns:65px 1fr 48px;gap:16px;border-bottom:1px solid #d5dfdc;padding:14px 0}.agenda p{margin-bottom:0;font-size:14px}.time{color:var(--accent);font-variant-numeric:tabular-nums}svg{width:100%;height:auto;display:block}svg text{font-family:system-ui,sans-serif;fill:#203039}figure{margin:0}figcaption{font-size:14px;margin-top:12px}table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}th,td{padding:12px 10px;text-align:left;border-bottom:1px solid #d2dcd9;vertical-align:top;overflow-wrap:anywhere}th{background:var(--soft);font-size:12px;text-transform:uppercase;letter-spacing:.035em}.mobile-label{display:none}.blank{padding:16px 0;border-bottom:1px dashed #879992;color:#52636a}.view{margin:16px 0}[hidden]{display:none!important}details{border-top:1px solid #bccac5;padding:15px 0;margin-top:18px}summary{cursor:pointer;font-weight:700;min-height:44px}a{color:var(--accent)}footer{border-top:1px solid #bdcbc6;padding-top:18px;margin-top:30px;font-size:13px;color:#52636a}.tag{display:inline-block;padding:3px 8px;font-size:12px;background:var(--soft);border-radius:4px;font-weight:700}.formula{font-family:ui-monospace,Consolas,monospace;background:#eaf0ed;padding:15px;border-radius:6px;overflow-wrap:anywhere}.strip{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.strip span{border:1px solid #bccac5;border-radius:5px;padding:6px 10px;font-size:14px}.scene{background:#fbf7ed;padding:20px;border-radius:12px}.sentence{font:clamp(23px,4vw,34px)/1.5 Georgia,serif;padding:20px 0}.accent{color:var(--accent);font-weight:750}.bar{height:18px;background:#e2e9e6;border-radius:4px;overflow:hidden}.bar span{display:block;height:100%;background:var(--accent)}.path{font-size:17px;line-height:1.8;padding:16px;background:#fff;border:1px solid #bccac5;border-radius:8px;overflow-wrap:anywhere}.diagram-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.node{padding:15px;background:var(--soft);border:1px solid #8ea79d;border-radius:10px;font-weight:700}.study{padding:14px;background:#fff;border-bottom:3px solid var(--accent)}.study svg{height:86px}.studio{--bg:#f6f1e6;--accent:#78502d;--soft:#efe3cf}.studio h1{font-family:Georgia,serif;font-weight:500}.stage{--bg:#f0edf4;--accent:#654378;--soft:#e8def0}.rhythm{--bg:#eef2fa;--accent:#3c4d86;--soft:#e4e9f8}.rhythm-grid{display:grid;grid-template-columns:85px repeat(4,1fr);gap:4px;margin:14px 0}.rhythm-grid>*{padding:13px 6px;text-align:center;background:#fff;border:1px solid #c8d1e4}.rhythm-grid .changed{background:#f5dfa0;font-weight:750}.beat{font-size:22px}.position{background:#eef1f0;border-radius:8px;padding:20px}.tokens{display:flex;flex-wrap:wrap;gap:8px;min-height:60px}.ordered{padding:18px;border:2px dashed #91a699;border-radius:8px;min-height:82px;margin:18px 0;font-size:24px}.parcel-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.parcel-row button{padding:10px 3px;font-size:12px}.parcel-row svg{height:64px;margin:0 auto 6px}.ribbon{padding:12px 0;display:grid;grid-template-columns:65px 1fr 58px;gap:12px;align-items:center}.ribbon .bar{height:27px;border-radius:0;background:transparent}.ribbon .bar span{background:#718e66}.ribbon:nth-child(2) .bar span{background:#8868a5}.ribbon:nth-child(3) .bar span{background:#3f7f99}.cell-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.cell{border:2px solid #90aaba;border-radius:50%;padding:20px;background:#f3f8fb;text-align:center;min-height:115px}.chromosome{display:inline-block;padding:4px;margin:4px;color:#254f73;border:1px solid #90aaba;border-radius:8px;font-size:15px;font-weight:700}.codons{display:flex;gap:8px;flex-wrap:wrap}.codon{border:1px solid #a9bab2;background:#fff;border-radius:8px;padding:12px;text-align:center;min-width:80px}.codon.current{border:3px solid var(--accent);padding:10px}.codon b{font:28px ui-monospace,monospace;letter-spacing:.12em}.periodic{display:grid;grid-template-columns:65px repeat(3,1fr);gap:8px;align-items:stretch;margin:16px 0}.element{padding:12px!important;background:#eaf1ed}.element strong{display:block;font-size:44px}.element small{display:block}.omitted{border:1px dashed #94a89e;padding:15px;color:#52636a;font-size:13px}.receipt{border-top:5px solid var(--accent);background:#fff;padding:28px}.number-list{font-variant-numeric:tabular-nums}.travel{--bg:#edf4f6;--accent:#235d76;--soft:#dfeef3}.travel .timetable{border-left:5px solid var(--accent);background:#fff;padding:20px}.readiness{display:grid;grid-template-columns:140px 1fr;gap:8px 18px}.readiness dt{font-size:13px;font-weight:700}.readiness dd{margin:0;padding-bottom:10px;border-bottom:1px solid #d6dfda}.request-card{border:1px solid #bfd0c7;background:#fff;border-left:5px solid var(--accent);padding:20px;margin:16px 0}.grid-form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:720px){main{padding:22px}.pair{gap:14px}.paper,.panel{padding:18px}.trio{grid-template-columns:1fr}.grid-form{grid-template-columns:1fr}.readiness{grid-template-columns:115px 1fr}.rhythm-grid>*{padding:12px 3px;font-size:13px}.beat{font-size:19px}}@media(max-width:520px){main{padding:16px}.pair{grid-template-columns:1fr}.agenda li{grid-template-columns:48px 1fr 38px;gap:8px}.agenda h2 span{float:none;display:block;margin-top:8px}.parcel-row{gap:4px}.parcel-row button{font-size:10px;min-width:0}.parcel-row svg{height:46px}.periodic{grid-template-columns:40px repeat(3,1fr);gap:4px}.periodic button{font-size:12px;padding:8px 3px!important}.periodic .element strong{font-size:34px}.periodic small{font-size:11px}.periodic .omitted{padding:10px 5px;font-size:11px}thead{display:none}table,tbody,tr,td{display:block;width:100%}tr{border-bottom:1px solid #bdcec5;padding:8px 0}td{border:0;padding:7px 4px}.mobile-label{display:block;font-size:11px;font-weight:750;color:#52636a}.cell{padding:12px}.cell-grid{gap:8px}.readiness{grid-template-columns:1fr;gap:3px}.rhythm-grid{grid-template-columns:65px repeat(4,1fr);gap:2px}.rhythm-grid>*{font-size:11px;padding:12px 2px}.ribbon{grid-template-columns:57px 1fr 48px;gap:6px}}@media print{main{max-width:none;padding:0}body{background:#fff}button,.actions{display:none}.view[hidden]{display:block!important}.paper{break-inside:avoid}}</style></head><body class="studio"><main><header><span class="eyebrow">Studio plan · 45 minutes</span><h1>From mark test to place portrait</h1><p>Test three tools. Choose two marks. Point to the visible reason for each choice.</p><span class="fiction">Original illustrative example · local review copy; not an official record</span></header><div class="strip"><span>Paper</span><span>Pencil</span><span>Crayon</span><span>Washable marker</span></div><div class="actions" role="group" aria-label="Reading view"><button data-view="v0" aria-controls="v0" aria-pressed="true">Studies + composition</button><button data-view="v1" aria-controls="v1" aria-pressed="false">Critique prompts</button></div><section class="view" id="v0" aria-label="Studies + composition" ><div class="trio"><figure class="study"><h3>A · Pencil</h3><svg role="img" aria-label="Spaced diagonal pencil strokes" viewBox="0 0 260 95"><g stroke="#765c42" stroke-width="3"><path d="M40 65l18-25m20 25l18-25m20 25l18-25m20 25l18-25m20 25l18-25"/></g></svg><figcaption>Short diagonal strokes with spaces between them</figcaption></figure><figure class="study"><h3>B · Crayon</h3><svg role="img" aria-label="Overlapping crayon strokes form a broad band" viewBox="0 0 260 95"><g stroke="#bc7740" stroke-width="12" stroke-linecap="round" opacity=".65"><path d="M30 55l170-10M35 42l160 20M40 65l155-25M32 52l165 7"/></g></svg><figcaption>A broad band made from overlapping strokes</figcaption></figure><figure class="study"><h3>C · Marker</h3><svg role="img" aria-label="Continuous marker outline around a rounded shape" viewBox="0 0 260 95"><path d="M40 30Q55 15 100 24L190 25Q230 30 218 61L210 76L45 76Q27 57 40 30Z" fill="none" stroke="#326552" stroke-width="4"/></svg><figcaption>One continuous outline around a simple shape</figcaption></figure></div><figure class="scene" style="margin-top:18px"><svg role="img" aria-label="Original place portrait: tree trunk has broken diagonal strokes; bench has a continuous outline" viewBox="0 0 600 240"><path d="M25 205H560" stroke="#9f927c" stroke-width="2"/><path d="M110 183V98H154V183" fill="#ede3cf" stroke="#8d7c63" stroke-width="2"/><path d="M90 103Q35 75 74 48Q89 3 126 36Q165 8 180 55Q214 95 155 104Z" fill="#d5dfc9" stroke="#708760" stroke-width="2"/><g stroke="#765c42" stroke-width="2"><path d="M118 116l14-10m-12 29l17-12m-16 33l18-13m-17 31l18-12"/></g><path d="M292 139V104H469V139L479 151H284Z M302 151V185H315V151 M449 151V185H462V151" stroke="#326552" stroke-width="4" fill="none"/><path d="M168 143L227 125M479 152L521 135" stroke="#765c42" stroke-width="1.5"/><text x="202" y="115" font-size="14">A: bark texture</text><text x="437" y="124" font-size="14">C: bench outline</text></svg><figcaption><strong>Original example:</strong> a bench beside a tree. Broken strokes describe the bark texture; an outline separates the bench from the ground.</figcaption></figure><aside class="note"><strong>Locate the artistic choice</strong><p>“I see spaced diagonal strokes on the trunk. What did you want that texture to show?”</p></aside></section><section class="view" id="v1" aria-label="Critique prompts" hidden><div class="paper"><h2>Ask about what is visible</h2><table><thead><tr><th scope="col">Study</th><th scope="col">Observation question</th></tr></thead><tbody><tr><td><span class="mobile-label">Study</span>A · Pencil</td><td><span class="mobile-label">Observation question</span>Where could this broken texture describe a surface?</td></tr><tr><td><span class="mobile-label">Study</span>B · Crayon</td><td><span class="mobile-label">Observation question</span>What changes when the marks overlap?</td></tr><tr><td><span class="mobile-label">Study</span>C · Marker</td><td><span class="mobile-label">Observation question</span>What does the outline make easy to distinguish?</td></tr></tbody></table><p>Ask the learner to identify one tested mark, locate it in the composition, and explain its purpose. If it is not visible where intended, invite a revision.</p><p class="blank">Mark and location actually identified: ____________________</p><p class="blank">Learner explanation actually heard: ____________________</p><p class="muted">No automatic creativity score. The illustration is not pupil work.</p></div></section><section class="agenda"><h2>Teaching sequence <span>45 minutes</span></h2><ol><li><b class="time">0–5</b><div><strong>Setup</strong><p>Distribute supplied tools and paper; show the test and composition spaces.</p></div><small>5 min</small></li><li><b class="time">5–10</b><div><strong>Demonstration</strong><p>Draw A, B and C, connecting each tool with its visible mark.</p></div><small>5 min</small></li><li><b class="time">10–18</b><div><strong>Exploration</strong><p>Test marks and identify two possible choices.</p></div><small>8 min</small></li><li><b class="time">18–35</b><div><strong>Making</strong><p>Make a place portrait; locate each chosen mark.</p></div><small>17 min</small></li><li><b class="time">35–41</b><div><strong>Discussion</strong><p>Partners name one visible mark and ask about its purpose.</p></div><small>6 min</small></li><li><b class="time">41–45</b><div><strong>Cleanup</strong><p>Use the teacher-supplied material-return routine.</p></div><small>4 min</small></li></ol></section><aside class="note"><strong>Before class</strong><p>Material approval, participation arrangements, grade level, standards and cleanup procedure: TO CONFIRM for your class.</p></aside><footer>Changes and practice answers last only on this page. Keep actual observations, decisions and records in your established school, document or spreadsheet workflow.</footer></main><script>const $=id=>document.getElementById(id);const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const status=s=>{$('feedback').textContent=s;};
document.querySelectorAll('[data-view]').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('[data-view]').forEach(x=>x.setAttribute('aria-pressed',String(x===b)));document.querySelectorAll('.view').forEach(x=>x.hidden=x.id!==b.dataset.view);}));</script></body></html>