Newsletter feedback • wording and route studio — Prepare issue-specific feedback questions with a read/not-read screening path, section-specific relevance choices and a bounded revision…

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>Newsletter feedback • wording and route studio</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#f3f7fa);color:var(--ink,#203342);font:16px/1.55 system-ui,Segoe UI,sans-serif}main{max-width:1100px;margin:auto;padding:28px 30px 50px}h1{font-size:clamp(27px,3.5vw,40px);line-height:1.18;letter-spacing:-.035em;margin:8px 0 12px}h2{font-size:21px;line-height:1.35;margin:0 0 16px}h3{font-size:18px}.eyebrow{color:var(--accent,#176783);font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}.intro,.muted,small{color:#516272}.intro{margin:0 0 24px}.panel{padding:24px;border:1px solid var(--line,#d6e0e7);border-radius:12px;background:white;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.grid>*{min-width:0}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit}button{border:1px solid var(--accent,#176783);background:var(--accent,#176783);color:white;padding:10px 16px;min-height:44px;border-radius:7px;font-weight:700;cursor:pointer}button.secondary{background:white;color:var(--accent,#176783)}button[aria-pressed=true]{background:var(--tint,#e3f2f8);color:var(--ink,#203342);box-shadow:inset 0 0 0 2px var(--accent,#176783)}button:hover{filter:brightness(.96)}:focus-visible{outline:3px solid #d56b00;outline-offset:3px}label{display:block;margin:12px 0 5px;font-size:14px;font-weight:650}input:not([type=checkbox]),select,textarea{width:100%;padding:10px 12px;min-height:44px;border:1px solid #94a5b2;background:white;color:inherit;border-radius:7px}textarea{resize:vertical;min-height:120px}input[type=checkbox]{width:20px;height:20px;margin-right:9px}label.inline{display:flex;align-items:center;font-weight:500;gap:7px}.result{padding:24px;background:var(--tint,#e3f2f8);border:1px solid var(--line,#c8dce7);border-radius:12px}.big{font-size:clamp(30px,5vw,48px);font-weight:780;line-height:1.25;letter-spacing:-.035em;margin:10px 0}.trace{font:15px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.error{color:#a12820;font-weight:650;min-height:24px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;border-bottom:1px solid var(--line,#d6e0e7);padding:12px 9px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#516272}code,pre,.code{font:14px/1.65 ui-monospace,Consolas,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint,#eef3f7);padding:16px;border-radius:6px}details{border-top:1px solid var(--line,#d6e0e7);margin:24px 0;padding-top:16px}summary{cursor:pointer;font-weight:700;min-height:44px}footer{border-top:1px solid var(--line,#d6e0e7);margin-top:26px;padding-top:16px;font-size:13px;color:#516272}.bar{height:16px;background:#dce4ea;border-radius:20px;overflow:hidden;margin:12px 0}.bar span{display:block;height:100%;background:var(--accent,#176783)}[hidden]{display:none!important}@media(max-width:720px){main{padding:20px}.grid{grid-template-columns:1fr;gap:12px}.panel,.result{padding:20px}}@media(max-width:400px){main{padding:16px}.panel,.result{padding:16px}button{padding:10px 13px}} .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.metric{padding:20px;background:white;border:1px solid var(--line,#d6e0e7);border-radius:9px}.metric h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#516272;margin:0}.metric .big{font-size:clamp(25px,4vw,39px);margin:8px 0}.metric small{font-size:12px;display:block}.badge{display:inline-block;padding:4px 10px;background:var(--tint,#e3f2f8);border-radius:20px;font-size:13px;font-weight:700}.paper{background:white;padding:26px;border:1px solid var(--line,#d6e0e7)}.feedback{padding:18px;background:var(--tint,#e3f2f8);border-left:4px solid var(--accent,#176783)}.preview{white-space:pre-wrap;overflow-wrap:anywhere}.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.fact-grid article{padding:20px;background:white;border:1px solid var(--line,#d6e0e7)}.record-row{display:grid;grid-template-columns:70px 1fr 1fr 1fr;gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line,#d6e0e7)}.record-row small{display:block}.record-row b{display:block}.export textarea{min-height:170px}@media(max-width:720px){.metrics{grid-template-columns:1fr 1fr}.fact-grid{grid-template-columns:1fr}.record-row{grid-template-columns:55px 1fr 1fr}.record-row .row-extra{grid-column:2/4}}@media(max-width:400px){.metrics{gap:10px}.metric{padding:14px}.metric .big{font-size:29px}.metric h2{font-size:11px}.paper{padding:18px}.record-row{gap:9px;font-size:14px}}
body{--accent:#995239;--bg:#faf6ef;--ink:#46392c;--tint:#f5e6d9;--line:#e4d6c3}.question-paper{padding:28px;background:white;border:1px solid #e4d6c3;border-top:5px solid #995239}.paper-heading{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:11px;letter-spacing:.1em;color:#8c6e55;margin-bottom:22px}.question-paper h2{font:30px/1.4 Georgia,serif}.question-paper h3{font:23px/1.4 Georgia,serif}.printed-options{font-size:19px}.route-note{background:#f7eee1;padding:14px 17px;font-size:14px}.question-paper .grid{padding:14px 0;border-bottom:1px solid #e4d6c3;margin-bottom:20px}.route-result{background:white;border-top:5px solid #995239;padding:26px}.route-result h2{font:28px Georgia,serif}#route-questions{white-space:pre-wrap;line-height:1.8}.panel{border-radius:5px}</style></head><body><main>
<header><span class="eyebrow">Editorial question pack / original issue-specific wording</span><h1>Ask about the issue they read.</h1><p class="intro">A blank question pack and a separate fictional route rehearsal for one editorial decision.</p></header>
<nav class="controls" aria-label="Review surface"><button type="button" id="pack-view" class="secondary">Blank question pack</button><button type="button" id="route-view" class="secondary">Fictional route test</button></nav>
<section id="pack" class="question-paper"><div class="paper-heading"><span>HOW-TO / MEMBER STORY / EVENT DATES</span><b id="issue-display">Fictional October 13, 2026 issue</b></div><h2>Did you read any of this issue?</h2><p class="printed-options">□ Yes &nbsp; □ No &nbsp; □ Not sure</p><p class="route-note">No / Not sure → skip content questions; offer the optional next-issue reading question.</p><div class="grid"><article><span class="eyebrow">Yes path · Q2</span><h3>Which section was most useful to you?</h3><p>□ How-to<br>□ Member story<br>□ Event dates<br>□ None<br>□ Don’t remember</p></article><article><span class="eyebrow">Yes path · Q3</span><h3>Which one section should we revise next?</h3><p>□ How-to<br>□ Member story<br>□ Event dates<br>□ None<br>□ Not sure</p></article></div><p><b>Optional Q4:</b> What would you change about the selected revision section? If Q3 is None or Not sure, ask what to clarify about this issue instead.</p><p><b>No / Not sure path, optional:</b> What would help you decide whether to read the next issue?</p><small>Printed boxes are blank wording, not response controls. Actual collection belongs in the approved survey or paper workflow.</small></section>
<section id="route" hidden><section class="panel"><span class="badge">Explicitly fictional reviewer selections</span><h2>Rehearse a route</h2><div class="controls"><button type="button" id="r1" class="secondary">R1 · did not read</button><button type="button" id="r2" class="secondary">R2 · Event dates revision</button><button type="button" id="q1-yes" class="secondary">Q1: Yes</button><button type="button" id="q1-no" class="secondary">Q1: No</button><button type="button" id="q1-unsure" class="secondary">Q1: Not sure</button></div><div id="yes-controls"><label for="useful">Fictional Q2 most useful section</label><select id="useful"><option value="">Not selected</option><option>How-to</option><option>Member story</option><option>Event dates</option><option>None</option><option>Don't remember</option></select><label for="revision">Fictional Q3 section to revise</label><select id="revision"><option value="">Not selected</option><option>How-to</option><option>Member story</option><option>Event dates</option><option>None</option><option>Not sure</option></select></div></section><section class="route-result"><span class="eyebrow" id="path-label"></span><h2 id="path-title"></h2><div id="route-questions"></div><p id="route-explanation" class="feedback"></p><p id="fictional-comment"></p></section></section>
<section class="panel"><h2>Distribution details to confirm</h2><div class="grid"><div><label for="issue">Issue title/date</label><input id="issue" type="text" value="Fictional October 13, 2026 issue" ><label for="issue-link">Actual issue link — to confirm</label><input id="issue-link" type="text" value="" ><label for="closing">Closing date — to confirm</label><input id="closing" type="text" value="" ></div><div><label for="contact">Approved contact — to confirm</label><input id="contact" type="text" value="" ><label for="destination">Maintained survey / paper destination — to confirm</label><input id="destination" type="text" value="" ><label for="privacy">Approved privacy and response-handling wording — to confirm</label><textarea id="privacy" rows="3"></textarea></div></div><p class="muted">Do not promise anonymity, response handling, or a completion time until those details are established.</p></section>
<section class="panel export"><h2>Blank wording for your maintained form</h2><div class="controls"><button type="button" id="prepare">Prepare text</button><button type="button" id="select-text" class="secondary">Select text</button></div><p id="export-error" class="error" role="alert"></p><label for="export-text">Exact generated plain text — manual copying</label><textarea id="export-text" rows="10" readonly></textarea><small>Select text, then copy it manually into your maintained document. Nothing is saved or sent.</small></section>
<footer>This local wording/route review is not a response collector. Fictional R1/R2 illustrations never enter the blank question pack. No submit, email, unsubscribe, integration, saved response, verified open/click, majority preference, or engagement-effect claim.</footer>
</main><script>const $=id=>document.getElementById(id);const on=(id,e,fn)=>$(id).addEventListener(e,fn);const txt=(id,v)=>$(id).textContent=v;const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const positive=x=>String(x).trim()!==''&&Number.isFinite(Number(x))&&Number(x)>0;const num=x=>Number(x.toPrecision(10)).toString();function enter(id,fn){on(id,'keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&e.keyCode!==229){e.preventDefault();fn()}})}function selectText(id){$(id).focus();$(id).select()}
function clockMinute(s){if(!/^(?:[01]\d|2[0-3]):[0-5]\d$/.test(s))throw Error('Use a valid 24-hour time as HH:MM.');const [h,m]=s.split(':').map(Number);return h*60+m}
function whole(s,label){if(!/^\d+$/.test(String(s))||!Number.isSafeInteger(Number(s)))throw Error(label+' must be a nonnegative whole number.');return Number(s)}
function isoDay(s){if(!/^\d{4}-\d{2}-\d{2}$/.test(s))throw Error('Use a real calendar date as YYYY-MM-DD.');const d=new Date(s+'T00:00:00Z');if(!Number.isFinite(d.getTime())||d.toISOString().slice(0,10)!==s)throw Error('Use a real calendar date as YYYY-MM-DD.');return d.getTime()/86400000}


const blankPack="NEWSLETTER FEEDBACK QUESTION PACK \u2014 BLANK\nIssue: fictional October 13, 2026 issue\nSections: How-to / Member story / Event dates\n\nQ1. Did you read any of this issue?\nChoose one: Yes / No / Not sure\nAnswer: __________\n\nIf Yes, ask Q2 and Q3:\nQ2. Which section was most useful to you?\nChoose one: How-to / Member story / Event dates / None / Don't remember\nAnswer: __________\nQ3. Which one section should we revise next?\nChoose one: How-to / Member story / Event dates / None / Not sure\nAnswer: __________\nIf Q3 names a section, offer Q4 (optional): What would you change about [selected section]?\nAnswer: __________\nIf Q3 is None or Not sure, instead offer (optional): Is there anything you would like us to clarify about this issue?\nAnswer: __________\n\nIf Q1 is No or Not sure, skip Q2, Q3 and section-linked Q4.\nOptional: What would help you decide whether to read the next issue?\nAnswer: __________\nSkipped content questions are not zero-usefulness responses.\nFinish in the approved maintained survey/paper workflow.";let read='No',example='r1',useful='',revision='';
function routeState(read,useful,revision){if(!['Yes','No','Not sure'].includes(read))throw Error('Choose an explicit read-screen route.');if(read!=='Yes')return {title:read+' path · no content rating',questions:'Optional: What would help you decide whether to read the next issue?',explanation:'Q2 and Q3, and the section-linked Q4, are skipped by route. No usefulness value is assigned; a skip is not zero.'};return {title:'Yes path · content questions',questions:'Q2. Which section was most useful to you?\nHow-to / Member story / Event dates / None / Don’t remember\n\nQ3. Which one section should we revise next?\nHow-to / Member story / Event dates / None / Not sure\n\n'+(revision===''?'Choose a fictional Q3 option to inspect the optional follow-up.':revision==='None'||revision==='Not sure'?'Optional: Is there anything you would like us to clarify about this issue?':'Optional Q4: What would you change about '+revision+'?'),explanation:'Most useful: '+(useful||'Not selected')+'. Revision request: '+(revision||'Not selected')+'. These answer different questions; reading any part does not prove every section was read.'}}
function render(){const r=routeState(read,useful,revision);$('yes-controls').hidden=read!=='Yes';txt('path-label','Fictional Q1 selection: '+read);txt('path-title',r.title);txt('route-questions',r.questions);txt('route-explanation',r.explanation);txt('fictional-comment',example==='r2'&&read==='Yes'&&revision==='Event dates'?'Fictional R2 comment: “Put the date and timezone beside the venue.” This supports one Event dates layout review, not a majority or causal engagement claim.':'No fictional comment supplied for this route.');for(const [n,v]of [['q1-yes','Yes'],['q1-no','No'],['q1-unsure','Not sure']])$(n).setAttribute('aria-pressed',String(read===v));$('useful').value=useful;$('revision').value=revision}
function surface(route){$('route').hidden=!route;$('pack').hidden=route;$('route-view').setAttribute('aria-pressed',String(route));$('pack-view').setAttribute('aria-pressed',String(!route))}
on('pack-view','click',()=>surface(false));on('route-view','click',()=>surface(true));
for(const [n,v]of [['q1-yes','Yes'],['q1-no','No'],['q1-unsure','Not sure']])on(n,'click',()=>{read=v;useful='';revision='';example='custom';render()});on('r1','click',()=>{read='No';useful='';revision='';example='r1';render()});on('r2','click',()=>{read='Yes';useful='How-to';revision='Event dates';example='r2';render()});on('useful','change',()=>{useful=$('useful').value;example='custom';render()});on('revision','change',()=>{revision=$('revision').value;example='custom';render()});
for(const n of ['issue','issue-link','closing','contact','destination','privacy'])on(n,'input',()=>{$('export-text').value='';txt('export-error','');if(n==='issue')txt('issue-display',$('issue').value.trim()||'Issue title needed')});on('prepare','click',()=>{if(!$('issue').value.trim()){$('export-text').value='';txt('export-error','Identify the issue before preparing its question pack.');return}$('export-text').value=blankPack.replace('fictional October 13, 2026 issue',()=>$('issue').value.trim())+'\n\nActual issue link: '+($('issue-link').value||'TO CONFIRM')+'\nClosing date: '+($('closing').value||'TO CONFIRM')+'\nContact: '+($('contact').value||'TO CONFIRM')+'\nMaintained destination: '+($('destination').value||'TO CONFIRM')+'\nApproved privacy/handling: '+($('privacy').value||'TO CONFIRM')+'\nNo real responses collected in this review.';txt('export-error','')});on('select-text','click',()=>selectText('export-text'));surface(false);render();
</script></body></html>