Inspect the sources behind a four-quadrant map and choose a follow-up question

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>U1 empathy map · evidence and interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f7f1eb;color:#3c3435;font:16px/1.55 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.18}h2{font-size:23px}h3{font-size:19px}.eyebrow{color:#795f64;letter-spacing:.05em}.card{background:#fff;border:1px solid #d9c9c5;border-radius:6px;padding:18px;margin:16px 0}.source{border-left:5px solid #7c636e}.map{display:grid;grid-template-columns:1fr 1fr;gap:14px}.quadrant{padding:16px;background:#fff;border-top:6px solid #8b6679;min-width:0}.quadrant:nth-child(2){border-color:#97743b}.quadrant:nth-child(3){border-color:#4a7275}.quadrant:nth-child(4){border-color:#94745b}.notes{display:grid;gap:10px}.notes button{text-align:left;background:#faf6f3}.notes button[aria-pressed=true]{background:#69516c;color:white}.interpretation{border-style:dashed!important}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:9px 12px;border:1px solid #886d77;border-radius:4px;background:#fff;cursor:pointer}button:focus-visible,textarea:focus-visible{outline:3px solid #b06124;outline-offset:3px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}.comparison>div{padding:14px;background:#faf3e7}.comparison>div:last-child{background:#eef3eb}label{display:block;font-weight:650;margin:14px 0 5px}textarea{width:100%;max-width:100%;min-width:0;min-height:95px;padding:10px;border:1px solid #9b8589;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}.kind{display:block;font-weight:750}#status{color:#7a471e;font-weight:650}footer{margin:24px 0;color:#6e6064}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.map,.comparison{grid-template-columns:1fr}.card,.quadrant{padding:14px}}</style></head><body><main><p class="eyebrow">ONE FICTIONAL PERSON · TRAIN-TICKET KIOSK WALKTHROUGH U1</p><h1>Follow each note back to its source</h1><p>Separate what U1 said and did from what the team has inferred. Moving a note does not change the evidence behind it.</p><section class="card source"><h2>Original source record · unchanged</h2><p><strong>Q1 · quote:</strong> “I usually use this machine because I know the steps.”</p><p><strong>O1 · observation:</strong> The participant opens Help before confirming a changed fare.</p><p><strong>Q2 · quote:</strong> “I worry I might buy the wrong date when I am rushing.”</p><p><strong>O2 · observation:</strong> The participant rereads the displayed date before confirming.</p><p>These are authored teaching records. U1 is not an actual participant, and this map does not represent all commuters.</p></section><h2>U1's four-quadrant map</h2><div class="map"><section class="quadrant"><h3>Says</h3><div id="says-notes" class="notes"></div></section><section class="quadrant"><h3>Thinks</h3><div id="thinks-notes" class="notes"></div></section><section class="quadrant"><h3>Does</h3><div id="does-notes" class="notes"></div></section><section class="quadrant"><h3>Feels</h3><div id="feels-notes" class="notes"></div></section></div><section class="card" aria-live="polite"><h2>Inspect the selected note</h2><p id="note-text">“I usually use this machine because I know the steps.”</p><p><strong>Type:</strong> <span id="note-kind">Direct quote</span></p><p><strong>Source:</strong> <span id="note-source">Q1</span></p><p><strong>Placement rationale:</strong> <span id="note-rationale">U1's supplied words belong in Says without rewriting them.</span></p><div class="toolbar"><button id="move-thinks" type="button" disabled>Place interpretation in Thinks</button><button id="move-feels" type="button" disabled>Place interpretation in Feels</button></div><p>Only the researcher interpretation can move here. Its wording, Q2/O2 sources and interpretation label remain attached.</p></section><button id="wording" type="button" aria-expanded="false" aria-controls="wording-comparison">Compare wording</button><section id="wording-comparison" class="card" hidden><h2>Replace a general attitude claim</h2><div class="comparison"><div><h3>Unsupported</h3><p>Hates technology.</p><p>No supplied quote or observation establishes this attitude.</p></div><div><h3>Evidence-based replacement</h3><p>Worried about choosing the wrong date while rushing, as reported in Q2.</p><p>A specific reported concern with its context and source.</p></div></div></section><div class="toolbar"><button id="followup" type="button" aria-expanded="false" aria-controls="followup-view">Follow-up</button></div><section id="followup-view" class="card" hidden><h2>Familiarity and opening Help</h2><p>Q1: “I usually use this machine because I know the steps.”</p><p>O1: The participant opens Help before confirming a changed fare.</p><h3>Neutral question to explore</h3><p>What were you checking when you opened Help?</p><p>“Was the fare change confusing?” would supply an explanation. No answer to the neutral question is present in the source record.</p><p><strong>Actual follow-up response:</strong> not supplied.</p></section><section class="card"><h2>Separate blank map · your permitted evidence</h2><p>Attach source IDs and distinguish your interpretations from quotes. The builder arranges supplied text; it cannot verify your research.</p><div id="fields"></div><div class="toolbar"><button id="build" type="button">Build review copy</button><button id="reset" type="button">Reset typed work</button></div><section id="confirmation" hidden><h3>Clear all seven typed fields?</h3><div class="toolbar"><button id="keep" type="button">Keep my text</button><button id="clear" type="button">Clear typed fields</button></div></section><section id="review" class="card copy" hidden><h2>Your supplied map review</h2><p>Check each source and interpretation against the original research record.</p><div id="review-content"></div></section></section><p id="status" role="status" aria-live="polite">Select a map note to inspect its source and rationale.</p><footer>Typed notes stay only in this open page. No participant is contacted, no sentiment score is assigned, and no research record is saved.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s),notes=[{id:'n1',area:'says',text:'“I usually use this machine because I know the steps.”',kind:'Direct quote',source:'Q1',why:"U1's supplied words belong in Says without rewriting them."},{id:'n2',area:'says',text:'“I worry I might buy the wrong date when I am rushing.”',kind:'Direct quote',source:'Q2',why:"U1 explicitly reports this concern and context."},{id:'n3',area:'does',text:'Opens Help before confirming the changed fare.',kind:'Observed action',source:'O1',why:'Records the supplied action without inferring why Help was opened.'},{id:'n4',area:'does',text:'Rereads the displayed date before confirming.',kind:'Observed action',source:'O2',why:'Records the supplied rereading action; it is not a quote.'},{id:'n5',area:'thinks',text:'The selected date must match my journey.',kind:'Researcher interpretation',source:'Q2 and O2',why:'An interpretation of the reported date concern and rereading action, not something U1 directly said.'},{id:'n6',area:'feels',text:'Worried about choosing the wrong date while rushing.',kind:'Reported feeling',source:'Q2',why:'The worry is explicitly reported in Q2; no general attitude toward technology is established.'}];let selected='n1';function render(){for(const area of ['says','thinks','does','feels'])$('#'+area+'-notes').replaceChildren();for(const note of notes){const b=document.createElement('button');b.id=note.id;b.type='button';b.setAttribute('aria-pressed',String(note.id===selected));if(note.id==='n5')b.className='interpretation';const tag=document.createElement('span');tag.className='kind';tag.textContent=note.kind+' · '+note.source;const text=document.createElement('span');text.textContent=note.text;b.append(tag,text);b.addEventListener('click',()=>select(note.id));$('#'+note.area+'-notes').append(b);}}function select(id){selected=id;const note=notes.find(n=>n.id===id);$('#note-text').textContent=note.text;$('#note-kind').textContent=note.kind;$('#note-source').textContent=note.source;$('#note-rationale').textContent=note.why;$('#move-thinks').disabled=id!=='n5';$('#move-feels').disabled=id!=='n5';for(const n of notes)$('#'+n.id).setAttribute('aria-pressed',String(n.id===id));}render();for(const area of ['thinks','feels'])$('#move-'+area).addEventListener('click',()=>{if(selected!=='n5')return;notes.find(n=>n.id==='n5').area=area;render();select('n5');$('#move-'+area).focus();$('#status').textContent='Interpretation placed in '+(area==='thinks'?'Thinks':'Feels')+'. Wording, source and interpretation label are unchanged.';});for(const[button,panel]of [['wording','wording-comparison'],['followup','followup-view']])$('#'+button).addEventListener('click',()=>{const open=$('#'+panel).hidden;$('#'+panel).hidden=!open;$('#'+button).setAttribute('aria-expanded',String(open));});const fields=[['context','Person code and session context'],['sources','Permitted source record with IDs and research reference'],['own-says','Says · exact supplied quotes and source IDs'],['own-does','Does · observed actions and source IDs'],['own-thinks','Thinks · researcher interpretations and supporting IDs'],['own-feels','Feels · reported feelings or labeled interpretations and IDs'],['own-followup','Contradiction, missing evidence and neutral follow-up notes']];for(const[id,label]of fields){const l=document.createElement('label'),f=document.createElement('textarea');l.htmlFor=id;l.textContent=label;f.id=id;f.addEventListener('input',()=>{$('#review').hidden=true;$('#status').textContent='Notes changed. Build a new review copy; U1 original sources are unchanged.';});$('#fields').append(l,f);}$('#build').addEventListener('click',()=>{const missing=[];if(!$('#context').value.trim())missing.push('person and session context');if(!$('#sources').value.trim())missing.push('source record with evidence IDs');if(!fields.slice(2,6).some(([id])=>$('#'+id).value.trim()))missing.push('at least one map note with its source');$('#review').hidden=true;if(missing.length){$('#status').textContent='Complete: '+missing.join(', ')+'.';return;}$('#review-content').replaceChildren();for(const[id,label]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=label;p.textContent=$('#'+id).value.trim()||'No entry supplied.';$('#review-content').append(h,p);}$('#review').hidden=false;$('#status').textContent='Review copy arranged from supplied text. Sources and interpretations still need your review.';});$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all seven typed fields.';});$('#clear').addEventListener('click',()=>{for(const[id]of fields)$('#'+id).value='';$('#review').hidden=true;$('#confirmation').hidden=true;$('#context').focus();$('#status').textContent='All seven typed fields were cleared. U1 map placement and original sources are unchanged.';});})();</script></body></html>