Which project format would you like to try?

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Which project format would you like to try?</title><style>*{box-sizing:border-box}:root{--ink:#24333d;--muted:#586872;--line:#cfd9de;--accent:#27627b;--soft:#edf3f5;--paper:white;color-scheme:light}body{margin:0;background:#f2f4f4;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:1100px;padding:28px 32px 64px;margin:auto}header{margin-bottom:20px}h1{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.035em;line-height:1.18;margin:0 0 9px}h2{font-size:1.2rem;line-height:1.3;margin:0 0 15px}h3{font-size:1rem;margin:0 0 8px}p{margin:9px 0 16px}header p{margin-bottom:0}.eyebrow{font-size:.75rem;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}.muted,small{color:var(--muted)}.panel{background:var(--paper);border:1px solid var(--line);padding:24px;border-radius:12px}.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.triple{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}.below{margin-top:24px}label{display:block;font-size:.9rem;font-weight:650}input,select,textarea,button{font:inherit}input,select,textarea{display:block;width:100%;min-width:0;margin-top:6px;padding:10px 12px;border:1px solid #879da8;border-radius:6px;background:white;color:var(--ink)}input,select{min-height:46px}textarea{resize:vertical;line-height:1.6}button{min-height:44px;border:1px solid var(--accent);border-radius:6px;padding:9px 15px;background:var(--accent);color:white;font-weight:650;cursor:pointer}button.secondary{background:white;color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button:hover:enabled{filter:brightness(.95)}:focus-visible{outline:3px solid #bb6b22;outline-offset:3px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.result{padding:26px;background:var(--ink);color:white;border-radius:12px}.result .muted{color:#d1e0e7}.big{font-size:clamp(2rem,5vw,3.5rem);line-height:1.15;letter-spacing:-.04em;font-weight:750;font-variant-numeric:tabular-nums;margin:10px 0;overflow-wrap:anywhere}.formula{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.error{min-height:24px;color:#a33028;font-weight:650;margin:9px 0 0}.status{font-size:.9rem;color:var(--muted)}.note{padding:12px 16px;background:#fff3de;border-left:3px solid #b67e38;color:#65481d}table{width:100%;border-collapse:collapse;font-size:.92rem}th{text-align:left;color:var(--muted);font-size:.83rem}th,td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}th:first-child,td:first-child{padding-left:0}details{padding:16px 0;border-top:1px solid var(--line)}summary{font-weight:650;cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:.87rem/1.6 ui-monospace,Consolas,monospace;background:#edf1f3;border:1px solid #d7e0e4;padding:18px;border-radius:7px}svg{display:block;width:100%;height:auto}.badge{display:inline-block;padding:3px 9px;background:var(--soft);color:var(--accent);font-size:.78rem;font-weight:700;border-radius:25px}.rule{height:1px;background:var(--line);margin:18px 0}[hidden]{display:none!important}a{color:var(--accent)}@media(max-width:720px){main{padding:22px 20px 45px}.grid{grid-template-columns:1fr;gap:18px}.panel{padding:20px}.triple{grid-template-columns:1fr 1fr}.triple>label:first-child{grid-column:1/-1}}@media(max-width:400px){main{padding:18px 16px 36px}.panel{padding:16px}.fields{gap:12px}.result{padding:20px}.big{font-size:2.2rem}th,td{padding:9px 5px}}:root{--accent:#665288;--soft:#f0eaf6}body{background:#f5f2f8}.quiz-result{border:2px solid #b9a7cc;background:white;padding:24px;border-radius:16px}.quiz-result h2{font-size:1.5rem;margin:16px 0}.route-counts{display:flex;gap:10px;margin-bottom:12px}.route-counts span{padding:7px 16px;background:#eee7f4;color:#5f497c;font-weight:750;border-radius:6px}.quiz-result article{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.quiz-result p{margin-bottom:0}.question-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}fieldset{margin:0;border:1px solid #c8bbd6;border-radius:10px;padding:18px 16px;background:#fff}legend{font-weight:750;padding:0 5px;line-height:1.4}.choice{display:flex;gap:10px;align-items:center;border-top:1px solid #e1d8e9;padding:13px 0;font-weight:500;cursor:pointer}.choice input{width:20px;height:20px;min-height:20px;margin:0;flex:none;accent-color:#79608e}.choice:has(input:checked){color:#60467c;font-weight:750}@media(max-width:720px){.question-grid{grid-template-columns:1fr}.quiz-result{padding:20px}.quiz-result h2{font-size:1.3rem}}</style></head><body><main><header><h1>Which project format would you like to try?</h1><p>An activity suggestion from three choices, not a personality or skill measurement.</p></header>
<section class="quiz-result" aria-live="polite"><span id="resultKind" class="badge">Fictional worked example · W / W / V</span><h2 id="resultTitle">Try a short written explanation.</h2><div id="counts" class="route-counts"><span>W · 2</span><span>V · 1</span><span>P · 0</span></div><div id="suggestions"><p>Two of three fictional choices mapped to writing. Start with one paragraph explaining your idea to a reader. You may still choose another format.</p></div></section>
<section class="below"><h2>Your choices · all three required</h2><div class="question-grid"><fieldset id="groupQ1"><legend>Q1 · How would you like to start?</legend><label class="choice" for="Q1-W"><input type="radio" id="Q1-W" name="Q1" value="Q1-W"><span>Outline ideas in words</span></label><label class="choice" for="Q1-V"><input type="radio" id="Q1-V" name="Q1" value="Q1-V"><span>Sketch relations</span></label><label class="choice" for="Q1-P"><input type="radio" id="Q1-P" name="Q1" value="Q1-P"><span>Try a paper mechanism</span></label></fieldset><fieldset id="groupQ2"><legend>Q2 · What would you like to produce?</legend><label class="choice" for="Q2-W"><input type="radio" id="Q2-W" name="Q2" value="Q2-W"><span>One paragraph</span></label><label class="choice" for="Q2-V"><input type="radio" id="Q2-V" name="Q2" value="Q2-V"><span>One labeled diagram</span></label><label class="choice" for="Q2-P"><input type="radio" id="Q2-P" name="Q2" value="Q2-P"><span>One tabletop prototype</span></label></fieldset><fieldset id="groupQ3"><legend>Q3 · How would you like to review it?</legend><label class="choice" for="Q3-W"><input type="radio" id="Q3-W" name="Q3" value="Q3-W"><span>Read and revise wording</span></label><label class="choice" for="Q3-V"><input type="radio" id="Q3-V" name="Q3" value="Q3-V"><span>Compare label placement</span></label><label class="choice" for="Q3-P"><input type="radio" id="Q3-P" name="Q3" value="Q3-P"><span>Try the action and adjust</span></label></fieldset></div><div class="actions"><button type="button" id="submit">Show my suggestion</button><button type="button" id="reset" class="secondary">Reset all choices</button></div><p id="error" class="error" role="status"></p></section>
<section class="below panel"><label for="order">Suggestion display order<select id="order"><option value="WVP">Writing, diagram, prototype</option><option value="PWV">Prototype, writing, diagram</option></select></label><p class="status">Display order does not break a tie. Every highest-count option remains coequal.</p></section>
<details class="below"><summary>Author version 1 · inspect the route rule</summary><p>Each question has one declared W, V, or P answer. Its stable ID adds one count to that outcome. There is no correct-answer score, probability, confidence, trait, or grade. A complete W/V/P split gives one count each and displays all three options.</p><p>An unanswered or invalid choice produces no accepted outcome. Editing a choice clears the accepted result until resubmission. Reset clears every response and result. This fixed bank has no editor; a revised bank needs a new author version and new evidence. No names, responses, or results are saved or sent.</p></details></main><script>const $=id=>document.getElementById(id),put=(id,s)=>{$(id).textContent=s};
function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
function gcd(a,b){a=a<0n?-a:a;b=b<0n?-b:b;while(b){[a,b]=[b,a%b]}return a||1n;}
function R(n,d=1n){n=BigInt(n);d=BigInt(d);if(d===0n)throw Error('Undefined denominator.');if(d<0n){n=-n;d=-d}const g=gcd(n,d);return {n:n/g,d:d/g};}
function mul(a,b){return R(a.n*b.n,a.d*b.d)}function div(a,b){return R(a.n*b.d,a.d*b.n)}function add(a,b){return R(a.n*b.d+b.n*a.d,a.d*b.d)}function sub(a,b){return R(a.n*b.d-b.n*a.d,a.d*b.d)}function cmp(a,b){const x=a.n*b.d-b.n*a.d;return x<0n?-1:x>0n?1:0}
function parse(s,{max=1000000,positive=false,places=6}={}){const t=String(s).trim();if(!t)throw Error('Enter a value; blank is not zero.');const re=new RegExp('^[0-9]+(?:\.[0-9]{1,'+places+'})?$');if(!re.test(t))throw Error('Use digits and a US decimal point, up to '+places+' places; no signs, commas, or exponents.');const v=Number(t);if(!Number.isFinite(v)||v>max||(positive&&v===0))throw Error('Value must be '+(positive?'greater than zero':'nonnegative')+' and at most '+max+'.');const [a,b='']=t.split('.');return R(BigInt(a+b),10n**BigInt(b.length));}
function format(a,places=6){const neg=a.n<0n,n=neg?-a.n:a.n,scale=10n**BigInt(places),v=n*scale,q=v/a.d,rem=v%a.d,k=q+(rem*2n>=a.d?1n:0n);const f=(k%scale).toString().padStart(places,'0').replace(/0+$/,'');return {text:(neg&&k!==0n?'-':'')+(k/scale)+(f?'.'+f:''),approx:rem!==0n};}
function exact(a){let d=a.d;while(d%2n===0n)d/=2n;while(d%5n===0n)d/=5n;if(d!==1n)return a.n+'/'+a.d;let places=0,p=1n;while(p%a.d!==0n&&places<40){p*=10n;places++}return format(a,places).text;}
function display(a,places=6){if(a.n>0n&&cmp(a,R(1n,10n**BigInt(places)))<0)return '< '+format(R(1n,10n**BigInt(places)),places).text;const f=format(a,places);return (f.approx?'≈ ':'')+f.text;}
function listen(ids,fn){ids.forEach(id=>{ $(id).addEventListener('input',fn);$(id).addEventListener('change',fn); });}

const bank={Q1:{'Q1-W':'W','Q1-V':'V','Q1-P':'P'},Q2:{'Q2-W':'W','Q2-V':'V','Q2-P':'P'},Q3:{'Q3-W':'W','Q3-V':'V','Q3-P':'P'}},outcomes={W:{title:'Try a short written explanation.',noun:'writing',step:'Write one paragraph explaining an idea to a reader.'},V:{title:'Try an annotated diagram.',noun:'a diagram',step:'Draw one diagram and label the important relationships.'},P:{title:'Try a paper prototype.',noun:'a prototype',step:'Make one tabletop paper model and try its intended action.'}};let accepted=null;
function evaluate(selections){const counts={W:0,V:0,P:0};for(const q of ['Q1','Q2','Q3']){const selected=selections[q];if(!Array.isArray(selected)||selected.length!==1)throw Error(q+': select exactly one answer.');if(!Object.hasOwn(bank[q],selected[0]))throw Error(q+': the answer does not belong to this question.');counts[bank[q][selected[0]]]++;}const high=Math.max(...Object.values(counts));return {counts,winners:Object.keys(counts).filter(k=>counts[k]===high)};}
function render(r){put('resultKind','Current local selections · author version 1');$('counts').innerHTML=$('order').value.split('').map(k=>'<span>'+k+' · '+r.counts[k]+'</span>').join('');put('resultTitle',r.winners.length===1?outcomes[r.winners[0]].title:'Your choices are evenly split. Choose a format to try.');$('suggestions').innerHTML=$('order').value.split('').filter(k=>r.winners.includes(k)).map(k=>'<article><h3>'+outcomes[k].title+'</h3><p>'+r.counts[k]+' of your three choices in this round mapped to '+outcomes[k].noun+'. '+outcomes[k].step+' You may choose another format.</p></article>').join('');}
function invalidate(){accepted=null;put('resultKind','Pending · no accepted outcome');put('resultTitle','Complete all three questions, then submit.');$('counts').innerHTML='';$('suggestions').innerHTML='';put('error','');}
function submit(){try{const values={};for(const q of ['Q1','Q2','Q3'])values[q]=['W','V','P'].map(k=>$(q+'-'+k)).filter(el=>el.checked).map(el=>el.value);accepted=evaluate(values);render(accepted);put('error','');}catch(e){invalidate();put('error',e.message);const q=e.message.slice(0,2);if(bank[q])$(q+'-W').focus();}}
for(const q of ['Q1','Q2','Q3'])for(const k of ['W','V','P'])$(q+'-'+k).addEventListener('change',invalidate);$('submit').addEventListener('click',submit);$('reset').addEventListener('click',()=>{for(const q of ['Q1','Q2','Q3'])for(const k of ['W','V','P'])$(q+'-'+k).checked=false;invalidate();$('Q1-W').focus()});$('order').addEventListener('change',()=>{if(accepted)render(accepted)});globalThis.Tool={evaluate,submit,invalidate,render};</script></body></html>