Two notices, shared features and a separate place for unknowns

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>Venn comparison: shared, different, unknown</title><style>
*{box-sizing:border-box}body{margin:0;background:#f2f4fa;color:#1e2e4c;font:17px/1.5 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:26px 22px 40px}h1{font-size:clamp(29px,5vw,42px);line-height:1.12;margin:10px 0 16px;max-width:23ch}h2{font-size:21px;margin:0 0 10px}h3{font-size:18px;margin:0 0 10px}p{margin:10px 0 15px}.eyebrow{font-size:14px;letter-spacing:.07em;font-weight:750;color:#465b88}.notices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.notice{padding:20px;background:white;border:1px solid #b9c6df;border-radius:8px}.notice.a{border-top:5px solid #4a6bb1}.notice.b{border-top:5px solid #986033}.notice p{margin:7px 0}.regions{position:relative;isolation:isolate;display:grid;grid-template-columns:34% 32% 34%;gap:0;aspect-ratio:100/66}.regions::before,.regions::after{box-sizing:border-box;content:"";position:absolute;top:0;width:66%;height:100%;border:3px solid;border-radius:50%;pointer-events:none;z-index:0}.regions::before{left:0;border-color:#4a6bb1;background:rgba(74,107,177,.08)}.regions::after{right:0;border-color:#986033;background:rgba(152,96,51,.08)}.region{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0;background:transparent;padding:60px 27px;min-width:0}.region.both{padding:60px 10px}.region ul{font-size:16px;line-height:1.45}.region ul{margin:0;padding-left:20px}.region li{margin:8px 0}.unknown{border:1px dashed #7c6f95;background:#f1ebf8;padding:14px 18px;border-radius:8px;margin-top:12px}.work{background:white;border:1px solid #b9c6df;border-radius:8px;padding:20px;margin-top:24px}label{display:block;font-weight:700;margin:12px 0 6px}select,textarea{font:inherit;width:100%;color:inherit;padding:10px;border:1px solid #879bbf;border-radius:5px;min-width:0;background:white}textarea{min-height:100px;resize:vertical}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}button{font:inherit;background:white;color:#244575;border:1px solid #5a75a4;border-radius:6px;padding:10px 13px;cursor:pointer}button[aria-pressed=true],.primary{background:#2e5189;color:white}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #bd7100;outline-offset:3px}.feedback{min-height:2em;background:#edf2fb;padding:14px;border-radius:6px}.hint{font-size:15px;color:#4f607f}.model{border-left:4px solid #739a8f;padding:12px 18px;background:white;margin-top:22px}.confirm{background:#fff0d5;padding:14px;border:1px solid #bc9459;border-radius:6px}[hidden]{display:none!important}footer{font-size:14px;color:#4f607f;margin-top:22px}@media(max-width:600px){main{padding:20px 14px 30px}.notices{grid-template-columns:1fr}.regions{grid-template-columns:1fr;gap:10px;aspect-ratio:auto}.regions::before,.regions::after{display:none}.region{display:block;border:2px solid #92a8d0;border-radius:9px;padding:16px;background:#e5edf9}.region.both{border-color:#739a8f;background:#e4f0e9;padding:16px}.region.b{border-color:#bb9574;background:#f6eadf}.toolbar button{flex-grow:1}}
</style></head><body><main><div class="eyebrow">ORIGINAL FICTIONAL WORKSHOP NOTICES</div><h1>Same time. Different registration. Price unknown.</h1><p>Compare one feature against both notices before placing it. A missing price cannot establish free entry.</p><div class="notices"><section class="notice a"><h2>A · Watercolor drop-in</h2><p>A1 · Saturday, 10 a.m.</p><p>A2 · Library activity room</p><p>A3 · Supplies provided</p><p>A4 · Drop in; no registration required</p></section><section class="notice b"><h2>B · Origami workshop</h2><p>B1 · Saturday, 10 a.m.</p><p>B2 · Library activity room</p><p>B3 · Supplies provided</p><p>B4 · Registration required</p></section></div><section aria-label="Worked Venn comparison"><div class="regions"><div class="region"><h3>A only</h3><ul><li>Watercolor</li><li>No registration required</li></ul></div><div class="region both"><h3>Both</h3><ul><li>Saturday, 10 a.m.</li><li>Library activity room</li><li>Supplies provided</li></ul></div><div class="region b"><h3>B only</h3><ul><li>Origami</li><li>Registration required</li></ul></div></div><aside class="unknown"><strong>Not established:</strong> Free entry. Neither notice states a price.</aside></section><section class="work"><h2>Check a feature placement</h2><label for="feature">Feature card</label><select id="feature"><option value="">Choose a feature</option><option value="time">Saturday, 10 a.m.</option><option value="room">Library activity room</option><option value="supplies">Supplies provided</option><option value="registration">Registration required</option><option value="dropin">No registration required</option><option value="free">Free entry</option></select><p id="destination-label">Place the feature in:</p><div class="toolbar" role="group" aria-labelledby="destination-label"><button type="button" data-place="a" aria-pressed="false">A only</button><button type="button" data-place="both" aria-pressed="false">Both</button><button type="button" data-place="b" aria-pressed="false">B only</button><button type="button" data-place="unknown" aria-pressed="false">Not established</button></div><button class="primary" type="button" id="check">Check placement</button><p class="feedback" id="feedback" role="status">Choose a feature and a destination, then check the source lines.</p><label for="explanation">Your comparison and evidence</label><textarea id="explanation" placeholder="Both… A differs because… The lines that support this are…"></textarea><p class="hint">A teacher or partner reviews your writing. The fixed card checks do not grade arbitrary claims.</p><button type="button" id="reset">Reset practice</button><div class="confirm" id="confirm" hidden><p>Clear your writing and current placement?</p><div class="toolbar"><button type="button" id="clear">Clear practice</button><button type="button" id="keep">Keep practice</button></div></div></section><section class="model"><h2>A supported comparison</h2><p>Both fictional workshops meet on Saturday at 10 a.m. in the library activity room and provide supplies. The watercolor session allows drop-ins without registration; the origami workshop requires registration. Neither notice states a price.</p></section><footer>Practice stays in this page session. Nothing is sent, submitted or saved as a student record.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);let place='';const cards={time:{place:'both',reason:'A1 and B1 both say Saturday, 10 a.m.'},room:{place:'both',reason:'A2 and B2 both name the library activity room.'},supplies:{place:'both',reason:'A3 and B3 both say Supplies provided. That wording does not state an entry price.'},registration:{place:'b',reason:'B4 requires registration. A4 explicitly says no registration is required.'},dropin:{place:'a',reason:'A4 says no registration is required; B4 requires it.'},free:{place:'unknown',reason:'Neither notice states a price. Supplies provided does not establish free entry.'}};const names={a:'A only',both:'Both',b:'B only',unknown:'Not established'};
function pending(){$('feedback').textContent='Placement changed. Check it against both notices.';$('confirm').hidden=true;}
$('feature').addEventListener('change',pending);document.querySelectorAll('[data-place]').forEach(button=>button.addEventListener('click',()=>{place=button.dataset.place;document.querySelectorAll('[data-place]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));pending();}));$('check').addEventListener('click',()=>{const card=cards[$('feature').value];if(!card||!place){$('feedback').textContent='Choose a feature and a destination before checking.';return;}$('feedback').textContent=(place===card.place?'Supported placement. ':'Review this placement. The supported category is '+names[card.place]+'. ')+card.reason;});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('feedback').textContent='Reset canceled. Your writing and placement are unchanged.';$('reset').focus();});$('clear').addEventListener('click',()=>{$('feature').value='';place='';document.querySelectorAll('[data-place]').forEach(b=>b.setAttribute('aria-pressed','false'));$('explanation').value='';$('confirm').hidden=true;$('feedback').textContent='Practice cleared. Choose a feature and a destination.';$('feature').focus();});
</script></body></html>