Compare two arrangements of the same concept deck and inspect their explanations

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>Hexagonal thinking · explain the touching edges</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f2e9;color:#353d32;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.18}h2{font-size:23px}h3{font-size:19px}.eyebrow{color:#677157;letter-spacing:.05em}.card{padding:18px;background:white;border:1px solid #ccd0bb;border-radius:5px;margin:16px 0}.source{border-left:6px solid #788646}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}button,input,textarea{font:inherit;color:inherit}button{min-height:44px;padding:9px 13px;border:1px solid #70824f;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#536a3a;color:white}button:disabled{color:#6b7465;background:#f0f1eb;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a75b21;outline-offset:3px}.board{position:relative;width:min(100%,348px);aspect-ratio:348/340;margin:20px auto}.hex::before{content:"";position:absolute;inset:1.2px;clip-path:inherit;background:#e4e9ce}.hex span{position:relative;z-index:1}.hex.center::before{background:#7b6b3e}.hex[aria-pressed=true]::before{background:#385c40}.hex{position:absolute;width:34.48275862%;height:30.56588235%;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);padding:0;border:0;border-radius:0;background:#e4e9ce;font-size:16px;white-space:nowrap;display:flex;align-items:center;justify-content:center}.hex.center{background:#7b6b3e;color:white}.hex[aria-pressed=true]{background:#385c40;color:white}.hex:focus-visible{outline:0;box-shadow:inset 0 0 0 8px #b66b20}.connection{border-left:6px solid #b08643;background:#fffae9}label{display:block;font-weight:650;margin:14px 0 5px}input,textarea{max-width:100%;min-width:0;width:100%;padding:10px;border:1px solid #89967a;border-radius:4px;background:white}input{min-height:44px}textarea{min-height:95px;resize:vertical}.blank-deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.blank-deck label{margin:0;font-weight:650}.blank-deck input{margin-top:5px}#status{font-weight:650;color:#795021}footer{margin:24px 0;color:#64715c}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.card{padding:12px}.blank-deck{grid-template-columns:1fr 1fr}}</style></head><body><main><p class="eyebrow">ORIGINAL PARK PASSAGE · TWO PROPOSED ARRANGEMENTS</p><h1>Give the touching cards a reason</h1><section class="card source"><h2>The shared reading</h2><p><strong>S1.</strong> The park committee shares three benches between a reading group and a games group.</p><p><strong>S2.</strong> Both groups request the shaded area.</p><p><strong>S3.</strong> The committee proposes a time schedule instead of giving either group permanent ownership.</p><p><strong>S4.</strong> Visitors may ask for an exception if they give a reason.</p><p><strong>S5.</strong> The committee will review recorded requests after a trial.</p><p><strong>S6.</strong> No final schedule or trial results are supplied.</p></section><section class="card"><h2>Same seven-card deck, different center</h2><div class="toolbar" aria-label="Proposed arrangement"><button id="layout-a" type="button" aria-pressed="true">Layout A · Rules center</button><button id="layout-b" type="button" aria-pressed="false">Layout B · Access center</button></div><div id="board" class="board" aria-label="Seven hexagonal concept cards"></div><p id="layout-description">Rules is centered. Six other cards each share a complete side with the center.</p><p id="concept-neighbors" aria-live="polite">Select a hexagon to name its edge neighbors.</p><p>These are two proposed interpretations, not an answer key. The reading and deck stay unchanged.</p><h3>Inspect a named connection</h3><div class="toolbar"><button id="rules-exceptions" type="button" aria-pressed="true">Rules and Exceptions · A</button><button id="access-resources" type="button" aria-pressed="false" disabled>Access and Resources · B</button><button id="fairness-exceptions" type="button" aria-pressed="false">Fairness and Exceptions</button></div><section class="card connection" aria-live="polite"><h3 id="connection-title">Rules and Exceptions</h3><p id="explanation">S3 proposes a schedule, while S4 allows requests for exceptions. The exception process operates alongside the proposed rule.</p><p><strong>Evidence:</strong> <span id="evidence">S3 and S4.</span></p><p><strong>Open point:</strong> <span id="open">The text does not say every exception request will be granted.</span></p></section></section><section class="card"><h2>Your separate blank deck</h2><p>Name your own seven concepts. Use paper hexagons for an open arrangement; these fields do not rearrange the worked diagram.</p><div id="blank-deck" class="blank-deck"></div><h2>Record a connection worth discussing</h2><label for="ideas">Connected ideas or selected intersection</label><textarea id="ideas"></textarea><label for="relationship">How the ideas connect in the reading</label><textarea id="relationship"></textarea><label for="references">Sentence references and the words that matter</label><textarea id="references"></textarea><label for="disagreement">Disagreement, alternative interpretation or missing information</label><textarea id="disagreement"></textarea><div class="toolbar"><button id="reset" type="button">Reset deck and notes</button></div><section id="confirmation" hidden><h3>Clear all seven concept names and four explanation fields?</h3><div class="toolbar"><button id="keep" type="button">Keep my work</button><button id="clear" type="button">Clear deck and notes</button></div></section></section><p id="status" role="status" aria-live="polite">No correct-layout score or prose grade is assigned.</p><footer>Temporary discussion notes only. Nothing is saved or submitted. A layout records an emphasis; its explanation needs evidence.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s),positions=[[174,170],[264,221.9615],[174,273.923],[84,221.9615],[84,118.0385],[174,66.077],[264,118.0385]],decks={a:['Rules','Exceptions','Evidence','Review','Resources','Access','Fairness'],b:['Access','Resources','Rules','Evidence','Review','Fairness','Exceptions']};let layout='a';const connections={'rules-exceptions':['Rules and Exceptions','S3 proposes a schedule, while S4 allows requests for exceptions. The exception process operates alongside the proposed rule.','S3 and S4.','The text does not say every exception request will be granted.'],'access-resources':['Access and Resources','S1 gives the groups three shared benches; S2 says both want the shaded area. Access concerns who can use that limited space and when.','S1 and S2.','The passage supplies no final allocation.'],'fairness-exceptions':['Fairness and Exceptions · disputed link','One interpretation is that exceptions could make a schedule fairer; another is that they could favor people who ask most often.','S4 allows requests; S5 proposes later review; S6 supplies no results.','No decision rules or trial results are supplied. What additional information would help examine the disagreement?']};function connection(id){for(const key of Object.keys(connections))$('#'+key).setAttribute('aria-pressed',String(key===id));for(const[n,target]of ['connection-title','explanation','evidence','open'].entries())$('#'+target).textContent=connections[id][n];}function show(next){layout=next;$('#layout-a').setAttribute('aria-pressed',String(next==='a'));$('#layout-b').setAttribute('aria-pressed',String(next==='b'));$('#rules-exceptions').disabled=next!=='a';$('#access-resources').disabled=next!=='b';$('#board').replaceChildren();for(const[n,word]of decks[next].entries()){const b=document.createElement('button');b.id='hex-'+word.toLowerCase();b.type='button';b.className='hex'+(n===0?' center':'');const label=document.createElement('span');label.textContent=word;b.append(label);b.setAttribute('aria-pressed','false');b.style.left=((positions[n][0]-60)/348*100)+'%';b.style.top=((positions[n][1]-51.962)/340*100)+'%';b.addEventListener('click',()=>{for(const el of document.querySelectorAll('.hex'))el.setAttribute('aria-pressed',String(el===b));const ring=decks[layout].slice(1),neighbors=n===0?ring:[decks[layout][0],ring[(n+4)%6],ring[n%6]];$('#concept-neighbors').textContent=word+' shares sides with '+neighbors.join(', ')+'.';});$('#board').append(b);}$('#layout-description').textContent=decks[next][0]+' is centered. Six other cards each share a complete side with the center.';$('#concept-neighbors').textContent='Select a hexagon to name its edge neighbors.';connection(next==='a'?'rules-exceptions':'access-resources');$('#status').textContent='Layout '+next.toUpperCase()+' shown. All eleven typed fields are retained.';}$('#layout-a').addEventListener('click',()=>show('a'));$('#layout-b').addEventListener('click',()=>show('b'));for(const id of Object.keys(connections))$('#'+id).addEventListener('click',()=>connection(id));for(let n=1;n<=7;n++){const l=document.createElement('label'),f=document.createElement('input');l.htmlFor='blank-'+n;l.textContent='Concept '+n;f.id='blank-'+n;l.append(f);$('#blank-deck').append(l);}show('a');$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all seven concept names and four explanation fields.';});$('#clear').addEventListener('click',()=>{for(const el of document.querySelectorAll('input,textarea'))el.value='';$('#confirmation').hidden=true;$('#blank-1').focus();$('#status').textContent='All seven concept names and four explanation fields were cleared. Worked layout, reading and connection are unchanged.';});})();</script></body></html>