A completed polygon model, plus a blank organizer you can fill with your own term

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>Frayer model: polygon</title><style>
*{box-sizing:border-box}body{margin:0;background:#f6f7f4;color:#21362f;font:16px/1.5 system-ui,sans-serif}main{max-width:900px;margin:auto;padding:22px}h1{font-size:27px;line-height:1.2;margin:5px 0 12px}p{margin:8px 0 12px}.intro{font-size:14px;color:#54645c}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}button{font:inherit;min-height:44px;padding:9px 13px;background:white;border:1px solid #607b6d;color:#21362f;border-radius:5px;cursor:pointer}button.primary{background:#305e4a;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a44d18;outline-offset:3px}.term{background:#305e4a;color:white;padding:14px 18px;border-radius:8px 8px 0 0}h2{margin:0;font-size:24px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#97aa9d;border:1px solid #97aa9d}.area{background:white;padding:18px;overflow-wrap:anywhere}h3{font-size:18px;margin:0 0 10px}.area:nth-child(2){background:#eff3df}.area:nth-child(3){background:#e4f1ef}.area:nth-child(4){background:#f9eadb}svg{width:160px;max-width:100%;height:70px;display:block}.why{margin-top:15px}#whyText{padding:12px;border-left:4px solid #a65128;background:#fff4e7}.editor{margin:20px 0;border:1px solid #93a89b;padding:18px;background:white}label{display:block;font-weight:650;margin:15px 0 6px}input,textarea{font:inherit;width:100%;padding:9px;border:1px solid #778d80;border-radius:4px;min-width:0}textarea{min-height:90px;resize:vertical}#notice{color:#8d321d;font-weight:650}#notice:empty{display:none}footer{margin:20px 0;color:#50665a}[hidden]{display:none!important}@media(max-width:500px){main{padding:12px}.grid{grid-template-columns:1fr}.area{padding:16px}h1{font-size:25px}.toolbar{margin:10px 0}}
</style></head><body><main><p class="intro">ORIGINAL TEACHER EXAMPLE · VOCABULARY ORGANIZER</p><h1>Explain the boundary of a concept</h1><div class="toolbar"><button class="primary" id="filled" type="button">Filled polygon model</button><button id="blank" type="button">Blank model</button></div>
<section id="model" aria-label="Frayer organizer"><div class="term"><h2 id="termOut">Polygon</h2></div><div class="grid"><section class="area"><h3>Definition</h3><p id="definitionOut">A closed, flat figure with at least three straight sides.</p></section><section class="area"><h3>Characteristics</h3><p id="characteristicsOut">Straight sides; a closed boundary; sides meet at endpoints. The number of sides can vary.</p></section><section class="area"><h3>Examples</h3><div id="exampleShapes"><svg viewBox="0 0 160 70" role="img" aria-label="A closed triangle and a rectangle"><path d="M8 58 L35 10 L62 58 Z M88 15 H152 V58 H88 Z" fill="none" stroke="#245c58" stroke-width="3"/></svg></div><p id="examplesOut">A triangle and a rectangle. Both have closed boundaries made of straight sides.</p></section><section class="area"><h3>Non-examples</h3><div id="nonexampleShapes"><svg viewBox="0 0 160 70" role="img" aria-label="A circle and an open three-segment path"><circle cx="35" cy="35" r="25" fill="none" stroke="#9c4d20" stroke-width="3"/><path d="M90 55 L90 15 L145 15 L145 55" fill="none" stroke="#9c4d20" stroke-width="3"/></svg></div><p id="nonexamplesOut">A circle has a curved boundary. The open path has straight segments, but its ends do not meet.</p></section></div></section>
<div id="whyPanel" class="why"><button id="why" type="button" aria-expanded="false" aria-controls="whyText">Why the circle is outside</button><p id="whyText" hidden>The circle's boundary is curved. It does not meet the straight-side condition in this definition. Its color does not determine whether it belongs.</p></div>
<section id="editor" class="editor" hidden aria-label="Blank Frayer model"><h2>Your lesson term</h2><label for="term">Term</label><input id="term" autocomplete="off"><label for="definition">Definition</label><textarea id="definition"></textarea><label for="characteristics">Characteristics</label><textarea id="characteristics"></textarea><label for="examples">Examples and why they fit</label><textarea id="examples"></textarea><label for="nonexamples">Non-examples and why they fall outside</label><textarea id="nonexamples"></textarea><div class="toolbar"><button id="build" class="primary" type="button">Build review copy</button></div></section>
<p id="notice" role="status" aria-live="polite"></p><footer>The page checks for missing areas, not correctness of meaning. Changes stay in this open page; keep actual learner work separately.</footer></main><script>
(()=>{'use strict';const $=s=>document.querySelector(s),ids=['term','definition','characteristics','examples','nonexamples'],labels=['Term','Definition','Characteristics','Examples','Non-examples'];const original=Object.fromEntries(ids.map(id=>[id,$('#'+id+'Out').textContent]));
function drawings(show){$('#exampleShapes').hidden=!show;$('#nonexampleShapes').hidden=!show;$('#whyPanel').hidden=!show;$('#whyText').hidden=true;$('#why').setAttribute('aria-expanded','false');}
$('#why').addEventListener('click',()=>{const show=$('#whyText').hidden;$('#whyText').hidden=!show;$('#why').setAttribute('aria-expanded',String(show));});
$('#blank').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#model').hidden=true;$('#editor').hidden=false;drawings(false);$('#notice').textContent='Blank model ready. Add the term and all four areas.';});
$('#filled').addEventListener('click',()=>{for(const id of ids){$('#'+id).value='';$('#'+id+'Out').textContent=original[id];}$('#editor').hidden=true;$('#model').hidden=false;drawings(true);$('#notice').textContent='';});
for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#model').hidden=true;$('#notice').textContent='Entries changed. Build the review copy when all areas are ready.';});
$('#build').addEventListener('click',()=>{const missing=ids.filter(id=>!$('#'+id).value.trim());$('#model').hidden=true;if(missing.length){$('#notice').textContent='Complete: '+missing.map(id=>labels[ids.indexOf(id)]).join(', ')+'.';return;}for(const id of ids)$('#'+id+'Out').textContent=$('#'+id).value.trim();drawings(false);$('#model').hidden=false;$('#notice').textContent='Review copy built. Check the meaning and examples with your teaching materials.';});})();
</script></body></html>