A six-event story mapped to five stages, with a turning-point explanation

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>Plot diagram: what changes at the turning point?</title><style>
*{box-sizing:border-box}body{margin:0;background:#f7f1fa;color:#382844;font:17px/1.55 system-ui,sans-serif}main{max-width:1020px;margin:auto;padding:26px 22px 40px}h1{font-size:clamp(29px,5vw,43px);line-height:1.12;margin:10px 0 16px;max-width:22ch}h2{font-size:21px;margin:0 0 12px}p{margin:10px 0 16px}.eyebrow{font-size:14px;color:#7a5585;font-weight:750;letter-spacing:.07em}.story{background:white;border:1px solid #cfb9d8;padding:20px;border-radius:8px;margin:20px 0}.story ol{margin:0;padding-left:25px}.story li{padding:7px 0 7px 4px}.story strong{color:#73517e}.diagram{background:#fff;border-radius:8px;border:1px solid #cfb9d8;padding:16px}.diagram svg{display:block;width:100%;height:auto;max-height:230px}.diagram text{font:16px system-ui,sans-serif;fill:#50355f}.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:16px}.stage{background:#f0e6f5;border-radius:6px;padding:13px;min-width:0}.stage h3{font-size:16px;line-height:1.3;margin:0 0 8px}.stage p{font-size:15px;margin-bottom:0}.stage.turn{background:#e8dcf2;border:2px solid #805098}.work{margin-top:23px;background:white;border-left:5px solid #9a76ad;padding:20px}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}button{font:inherit;border:1px solid #81549a;background:#fff;color:#57326c;padding:10px 13px;border-radius:6px;cursor:pointer}button[aria-pressed=true],.primary{background:#714188;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #ad6500;outline-offset:3px}.feedback{padding:15px;border:1px solid #cdb3da;border-radius:7px;background:#f8f2fb;min-height:4em}label{display:block;font-weight:700;margin:18px 0 7px}textarea{font:inherit;width:100%;padding:12px;border:1px solid #9d7aaf;color:inherit;border-radius:5px;min-height:110px;resize:vertical}.hint{font-size:15px;color:#705c79}.confirm{padding:14px;background:#fff0d3;border:1px solid #b98c47;border-radius:6px}[hidden]{display:none!important}footer{font-size:14px;color:#705c79;margin-top:22px}@media(max-width:650px){main{padding:20px 14px 30px}.stages{grid-template-columns:1fr}.stage{padding:14px}.stage h3{font-size:18px}.stage p{font-size:16px}.toolbar button{flex-grow:1}.diagram svg{max-height:180px}}
</style></head><body><main><div class="eyebrow">ORIGINAL FICTIONAL STORY · ONE WORKED INTERPRETATION</div><h1>Which event changes Ada's way forward?</h1><p>The wind creates the problem. Moving to shelter changes the response. Read the story, then explain what the later events show.</p><section class="story"><h2>Ada's reading booth</h2><ol><li><strong>E1</strong> Ada sets up an outdoor reading booth for the neighborhood fair.</li><li><strong>E2</strong> A gust scatters the paper sign before the booth opens.</li><li><strong>E3</strong> Ada tapes the sign back up, but the next gust pulls it loose.</li><li><strong>E4</strong> With the host's permission, Ada moves the booth onto a sheltered porch.</li><li><strong>E5</strong> Ada fixes the sign inside the porch, where it stays in place.</li><li><strong>E6</strong> The booth opens, and visitors stop to read.</li></ol></section><section class="diagram"><h2>A plot map for this story</h2><svg viewBox="0 0 700 210" role="img" aria-label="Plot line rises from E1 through E2 and E3 to E4, then falls through E5 to E6. Full stages and reasons follow in text."><path d="M50 165 L170 165 L355 35 L545 165 L650 165" fill="none" stroke="#805098" stroke-width="5"/><g fill="#805098"><circle cx="90" cy="165" r="7"/><circle cx="245" cy="112" r="7"/><circle cx="355" cy="35" r="9"/><circle cx="470" cy="113" r="7"/><circle cx="610" cy="165" r="7"/></g><text x="70" y="195">E1</text><text x="196" y="100">E2–E3</text><text x="340" y="20">E4</text><text x="485" y="102">E5</text><text x="600" y="195">E6</text></svg><div class="stages"><div class="stage"><h3>Exposition · E1</h3><p>Ada, the fair and her goal.</p></div><div class="stage"><h3>Rising action · E2–E3</h3><p>The wind and a failed repair.</p></div><div class="stage turn"><h3>Turning point · E4</h3><p>A move to shelter, with permission.</p></div><div class="stage"><h3>Falling action · E5</h3><p>The sign stays in place.</p></div><div class="stage"><h3>Resolution · E6</h3><p>The booth opens to visitors.</p></div></div></section><section class="work"><h2>Compare two explanations</h2><p>Name the event that changes how Ada can solve the wind problem, then cite what happens afterward.</p><div class="toolbar" role="group" aria-label="Turning-point event"><button type="button" id="e2" aria-pressed="false">E2: the sign scatters</button><button type="button" id="e4" aria-pressed="true">E4: Ada moves to the porch</button></div><button type="button" id="read" class="primary">Read this interpretation</button><p id="feedback" class="feedback" role="status">Worked model · E4 changes Ada's approach: she moves to shelter with permission. E5 shows the sign staying in place afterward. That connection supports E4 as the turning point in this model.</p><label for="explanation">Your event, reason and later evidence</label><textarea id="explanation" placeholder="I propose E__ because… The later event that supports my reading is…"></textarea><p class="hint">A teacher reviews alternative interpretations. This page compares two authored explanations; it does not automatically grade your writing.</p><button type="button" id="reset">Reset discussion</button><div class="confirm" id="confirm" hidden><p>Clear your explanation and restore the E4 worked model?</p><div class="toolbar"><button type="button" id="clear">Clear explanation</button><button type="button" id="keep">Keep explanation</button></div></div></section><footer>Current-page practice only. No student writing is submitted or saved as a classroom record.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);let event='e4';const readings={e2:'Discussion · E2 introduces the wind obstacle. E3 still shows an unsuccessful repair, so E2 has not yet supplied a workable response. A learner proposing E2 as the turning point should explain that interpretation and account for what follows.',e4:"Worked model · E4 changes Ada's approach: she moves to shelter with permission. E5 shows the sign staying in place afterward. That connection supports E4 as the turning point in this model."};function choose(id){event=id;for(const k of ['e2','e4'])$(k).setAttribute('aria-pressed',String(k===id));$('feedback').textContent='Event changed. Read its interpretation, then compare it with the story.';$('confirm').hidden=true;}for(const id of ['e2','e4'])$(id).addEventListener('click',()=>choose(id));$('read').addEventListener('click',()=>{$('feedback').textContent=readings[event];});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('feedback').textContent='Reset canceled. Your explanation and event choice are unchanged.';$('reset').focus();});$('clear').addEventListener('click',()=>{$('explanation').value='';choose('e4');$('feedback').textContent=readings.e4;$('explanation').focus();});
</script></body></html>