Trace a broad thesis through its warrant and counterargument, then inspect the paragraphs changed by a qualified thesis

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>When the counterargument changes the paper</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f1e7;color:#433727;font:16px/1.65 system-ui,sans-serif}main{max-width:920px;margin:auto;padding:24px}h1{font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.18}h2{font-size:1.35rem}.eyebrow{font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#846137}.panel{background:white;border:1px solid #ddccad;border-radius:10px;padding:22px;margin:18px 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}button,input,textarea{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #9c713e;border-radius:7px;background:#fff;color:#6b431d;cursor:pointer}button[aria-pressed=true],button.primary{background:#805525;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #326c96;outline-offset:3px}.notice{background:#fff2db;padding:14px;border-left:4px solid #ac7b3e}.outline{padding-left:22px}.outline li{padding:12px 0;border-bottom:1px solid #e2d2b6}.changed{background:#fff0cf}label{display:block;margin-top:16px;font-weight:650}input,textarea{display:block;width:100%;min-width:0;padding:10px;border:1px solid #a68a65;border-radius:6px;margin-top:5px}textarea{min-height:90px}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:550px){main{padding:16px}.panel{padding:16px}}</style></head><body><main><p class="eyebrow">An argument revision desk</p><h1>When the counterargument changes the paper</h1><p>Original fictional campus exercise. E1 requests silent study areas. E2 records a need for group-project rooms. These authored practice notes are not a real campus survey.</p>
<section class="panel"><h2>Compare the thesis</h2><div class="actions"><button type="button" id="initial" aria-pressed="true">Initial thesis</button><button type="button" id="revised" aria-pressed="false">Qualified thesis</button></div><p id="thesis" class="notice">All campus study rooms should become silent rooms.</p><p id="revisionNote">Initial claim: E1 supports discussing quiet space, not making every room silent.</p><h2>Inspect the reasoning</h2><div class="actions"><button type="button" id="evidence">Evidence</button><button type="button" id="warrant">Warrant</button><button type="button" id="counter">Fair counterargument</button><button type="button" id="response">Response and limits</button></div><p id="reasoning" role="status">Select a part of the argument to inspect its job.</p></section>
<section class="panel"><h2>Follow the paragraph dependencies</h2><ol class="outline" id="outline"><li>Introduction: competing study needs, but the initial thesis demands all rooms silent.</li><li>Body 1: E1 requests quiet space; the leap from some need to all rooms is unsupported.</li><li>Body 2: E2 group-project needs fairly challenge an all-silent policy.</li><li>Body 3: A response must address that competing need; the broad claim needs revision.</li><li>Conclusion: cannot responsibly repeat an allocation the evidence has not established.</li></ol><p>Organization follows the argument. These five sections are a worked example, not a mandatory paragraph quota.</p></section>
<section class="panel"><h2>Your ordered outline</h2><label for="claim">Debatable thesis · required</label><textarea id="claim"></textarea><label for="support">Evidence and source · required</label><textarea id="support"></textarea><label for="bridge">Warrant connecting the evidence to the claim</label><textarea id="bridge"></textarea><label for="opposition">Fair counterargument</label><textarea id="opposition"></textarea><label for="reply">Qualified response and unresolved questions</label><textarea id="reply"></textarea><div class="actions"><button type="button" id="build" class="primary">Build outline record</button><button type="button" id="reset">Reset practice</button></div><p id="notice" class="notice" role="status">Keep support and reasoning attached to the claim.</p><pre id="output" hidden></pre><div id="resetPanel" hidden><p>Clear your outline entries?</p><button type="button" id="cancel">Keep outline</button> <button type="button" id="confirm">Clear outline</button></div></section></main><script>
'use strict';const $=s=>document.querySelector(s);const original=Array.from($('#outline').children).map(li=>li.textContent);const revised=['Introduction: establish E1 quiet-study and E2 group-work needs; state the qualified thesis.','Body 1: E1 supports protected quiet space. Warrant: concentration needs justify some reserved space, not all rooms.','Body 2: E2 supports the opposing need for collaboration rooms; represent that challenge fairly.','Body 3: connect both notes to designated uses. Booking and access arrangements remain unresolved.','Conclusion: retain both needs and identify next investigation; do not invent room allocation.'];function setVersion(isNew){$('#thesis').textContent=isNew?'Campus study space should include designated silent areas while retaining rooms for group work. Clear use rules, booking, and access need further decisions.':'All campus study rooms should become silent rooms.';$('#revisionNote').textContent=isNew?'Revision changes the introduction, Body 1 warrant, Body 3 response, and conclusion together. No room count, demand scale, or allocation is supplied.':'Initial claim: E1 supports discussing quiet space, not making every room silent.';$('#initial').setAttribute('aria-pressed',String(!isNew));$('#revised').setAttribute('aria-pressed',String(isNew));Array.from($('#outline').children).forEach((li,n)=>{li.textContent=(isNew?revised:original)[n];li.classList.toggle('changed',isNew&&[0,1,3,4].includes(n))})}$('#initial').addEventListener('click',()=>setVersion(false));$('#revised').addEventListener('click',()=>setVersion(true));const text={evidence:'Evidence: E1 requests silent areas; E2 records group-project meeting needs. Both are authored practice notes, not statistics or real survey findings.',warrant:'Warrant: concentration needs justify reserving some suitable quiet space. The initial leap to all rooms ignores the competing E2 need; name and examine that bridge.',counter:'Fair counterargument: group collaboration also requires suitable rooms, so making every room silent leaves that need unaddressed. E2 supports this point; do not dismiss the people making it.',response:'Response: designate silent areas while retaining group-work rooms. Booking, access, room capacity, and allocation remain unresolved. The response qualifies the thesis across the paper.'};for(const id of Object.keys(text))$('#'+id).addEventListener('click',()=>{$('#reasoning').textContent=text[id]});const ids=['claim','support','bridge','opposition','reply'];let built=false;for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#output').hidden=true;$('#notice').textContent=built?'Entries changed. Outline record is stale; build again.':'Outline entries changed.';$('#resetPanel').hidden=true});$('#build').addEventListener('click',()=>{const missing=[['claim','Thesis'],['support','Evidence and source']].filter(([id])=>!$('#'+id).value.trim()).map(([,n])=>n);if(missing.length){$('#notice').textContent='Complete: '+missing.join(', ')+'.';$('#output').hidden=true;return}$('#output').textContent=['ORDERED ARGUMENT RECORD — no grade assigned','1. Thesis: '+$('#claim').value,'2. Evidence/source: '+$('#support').value,'3. Warrant: '+($('#bridge').value||'To examine'),'4. Counterargument: '+($('#opposition').value||'To develop'),'5. Response/limits: '+($('#reply').value||'To develop')].join('\n\n');$('#output').hidden=false;$('#notice').textContent='Outline record built. Field completeness does not validate sources or persuasive quality.';built=true});$('#reset').addEventListener('click',()=>{$('#resetPanel').hidden=false;$('#notice').textContent='Reset requested. Choose whether to keep the outline.'});$('#cancel').addEventListener('click',()=>{$('#resetPanel').hidden=true;$('#notice').textContent='Reset canceled. Outline entries retained.'});$('#confirm').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#output').hidden=true;$('#output').textContent='';$('#resetPanel').hidden=true;built=false;$('#notice').textContent='Practice outline cleared. Original and qualified model versions are retained.'});
</script></body></html>