Compare slide-polish features with a proposed versioned handoff and inspect the assumed matches

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>Slide-review service · a working value map</title><style>*{box-sizing:border-box}body{margin:0;background:#f7f1e8;color:#4c3e33;font:16px/1.55 system-ui,sans-serif}main{max-width:1040px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#8a7159}.card{padding:20px;margin:18px 0;background:white;border:1px solid #d9c9b4;border-radius:6px}.map{display:grid;grid-template-columns:1fr 1fr;gap:18px}.map>section{padding:18px;border:2px solid #c9b68e;background:#fff}.map>section:last-child{border-color:#8ca9a0}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #9c805a;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#85613d;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b76922;outline-offset:3px}.stack{display:grid;gap:12px}.stack button{text-align:left}.stack strong{display:block}.hypothesis{padding:12px;background:#fff0cc;border-left:5px solid #ba8f32}.connection{background:#edf5ee;border-left:6px solid #6c917c}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.comparison>div{padding:16px;background:#f7f2e8}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;max-width:100%;min-width:0;min-height:95px;padding:10px;border:1px solid #ad987e;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#80551b}footer{margin:24px 0;color:#816f5c}[hidden]{display:none!important}@media(max-width:620px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.map,.comparison{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">HYPOTHETICAL CONFERENCE-SPEAKER SERVICE · WORKING VALUE MAP</p><h1>A version reference addresses a different need from visual polish</h1><p>Original scenario using Strategyzer's jobs, pains, gains and offer relationships. All needs and matches below are hypotheses, not interview findings, validated demand or willingness to pay.</p><div class="map"><section><h2>Customer profile</h2><div class="stack"><button id="job" type="button" aria-pressed="true"><strong>J1 · Job</strong>Deliver a correctly ordered final slide deck to the organizer.</button><button id="pain" type="button" aria-pressed="false"><strong>P1 · Pain hypothesis</strong>Last-minute edits leave competing file copies.</button><button id="gain" type="button" aria-pressed="false"><strong>G1 · Gain hypothesis</strong>Know which exact version the organizer will project.</button></div><p class="hypothesis">Provisional priority: version certainty. The team still needs customer evidence about the actual handoff.</p></section><section><h2>Products / service elements</h2><div class="stack"><button id="o1" type="button" aria-pressed="false"><strong>O1 · Visual slide-polish review</strong>Readability need not established in this profile.</button><button id="o2" type="button" aria-pressed="true"><strong>O2 · Versioned organizer handoff note</strong>Hypothesized match to version uncertainty.</button><button id="o3" type="button" aria-pressed="false"><strong>O3 · Decorative title templates</strong>Unmatched in the supplied profile.</button></div></section></div><section class="card connection" aria-live="polite"><h2 id="connection-title">J1 ↔ O2 · proposed relationship</h2><p id="connection">An explicit final-version reference could support the speaker's final-deck handoff. Whether the current process needs it remains to investigate.</p><h3>Product / service</h3><p id="product">A versioned organizer handoff note.</p><h3>Hypothesized pain relief</h3><p id="relief">Reduce uncertainty about which competing copy is intended as final.</p><h3>Hypothesized gain creation</h3><p id="creation">Give speaker and organizer an explicit final-version reference to discuss.</p><p id="evidence-status" class="hypothesis">Evidence status: hypothesis only. No customer response or fit score is supplied.</p></section><div class="tabs"><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare offers</button><button id="research" type="button" aria-expanded="false" aria-controls="research-view">Inspect next research question</button></div><section id="comparison" class="card" hidden><h2>What changed in the proposed offer?</h2><div class="comparison"><div><h3>Visual-polish only</h3><p>Review visual wording and layout. A version-control benefit is not established by that description.</p></div><div><h3>Add versioned handoff</h3><p>Identify the final deck reference in an organizer handoff note. This specifically targets the assumed competing-copy problem.</p></div></div><p>O2's description is a reason to investigate the match. O3 stays unmatched rather than acquiring an invented pain.</p></section><section id="research-view" class="card" hidden><h2>Ask about the actual prior handoff</h2><p>Walk me through the last time you handed a final slide deck to an organizer. Which files and messages did you use, and where did you need to check which version was intended?</p><p>Investigate existing alternatives too. The current process may already handle version uncertainty, or another problem may matter more.</p><p><strong>Actual response:</strong> not supplied.</p><p>Research O3's relevance, change the offer or leave it out. No customer need has been established for it here.</p></section><section class="card"><h2>Your customer / offer hypotheses and research notes</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build working-map review</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all ten map fields?</h3><div class="tabs"><button id="keep" type="button">Keep my map</button><button id="clear" type="button">Clear typed map</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied working map</h3><div id="copy"></div><p>Working hypotheses and evidence notes for review. This page has not verified fit, adoption, customer demand or willingness to pay.</p></section></section><footer>Temporary notes only; no invented interviews or saved research record. Method attribution: Strategyzer's Value Proposition Canvas; layout and teaching example are original.</footer></main><script>'use strict';const $=id=>document.getElementById(id);let profile='job',offer='o2';const keys={job:'J1',pain:'P1',gain:'G1'},elements={o1:['Visual slide-polish review.','No pain relief for competing copies is established by visual-polish wording.','Readability may be relevant, but the supplied profile has not established that need.'],o2:['A versioned organizer handoff note.','Reduce uncertainty about which competing copy is intended as final.','Give speaker and organizer an explicit final-version reference to discuss.'],o3:['Decorative title templates.','No relationship to P1 is established.','No relationship to G1 is established.']};function render(){for(const id of Object.keys(keys))$(id).setAttribute('aria-pressed',String(id===profile));for(const id of Object.keys(elements))$(id).setAttribute('aria-pressed',String(id===offer));$('connection-title').textContent=keys[profile]+' ↔ '+offer.toUpperCase()+' · '+(offer==='o2'?'proposed relationship':'unestablished relationship');$('connection').textContent=offer==='o2'?{job:'An explicit final-version reference could support the speaker’s final-deck handoff. Whether the current process needs it remains to investigate.',pain:'An explicit handoff reference is hypothesized to address uncertainty among competing copies. No customer evidence confirms that pain or the proposed relief.',gain:'An explicit reference is hypothesized to help identify what the organizer will project. Actual value to the speaker and organizer remains to test.'}[profile]:offer==='o1'?'Visual polish addresses visual review. It has not established a need or version-control benefit for the selected profile entry.':'O3 remains unmatched to the supplied job/pain/gain. Investigate another need or change/remove the offer element without inventing a match.';for(const[i,id]of ['product','relief','creation'].entries())$(id).textContent=elements[offer][i];}for(const id of Object.keys(keys))$(id).addEventListener('click',()=>{profile=id;render();});for(const id of Object.keys(elements))$(id).addEventListener('click',()=>{offer=id;render();});for(const[button,panel]of [['compare','comparison'],['research','research-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['segment','Customer segment'],['own-job','Specific customer job · required'],['own-pain','Pain with evidence or explicit hypothesis label'],['own-gain','Gain with evidence or explicit hypothesis label'],['own-offer','Product or service element · required'],['own-relief','Hypothesized pain relief'],['own-creation','Hypothesized gain creation'],['rationale','Relationship rationale and uncertainty · required'],['question','Next research question and evidence to seek'],['evidence','Actual evidence/source, only if collected']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Working map changed. Build again to review current wording.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=['own-job','own-offer','rationale'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({'own-job':'customer job','own-offer':'offer element',rationale:'relationship rationale'})[id]).join(', ')+'.';return;}$('copy').replaceChildren();for(const[id,title]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Working-map review assembled from supplied words.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const[id]of fields)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Ten map fields cleared; hypothetical worked profile and offer selection unchanged.';$('own-job').focus();});</script></body></html>