Facebook
Instagram
Mail-bulk
About
Creative Leadership
Creative Bites Newsletter
Partner with us
Your Cart
About
Creative Leadership
Creative Bites Newsletter
Partner with us
Your Cart
[t,0])),pass:Object.fromEntries(PASSIONS.map(p=>[p,0]))}; const BANK=[ {id:'prof',type:'profile',title:'Tell us a bit about you',fields:[ {key:'name',label:'Your name',type:'text'}, {key:'role',label:'Primary role',type:'select',options:['Student','Creator / Artist','Entrepreneur','Manager','Educator','Researcher','Other']}, {key:'experience',label:'Years creating professionally',type:'select',options:['0–1','2–4','5–9','10+']}, {key:'consent',label:'I agree this assessment runs locally and I choose if I export/share.',type:'checkbox',required:true} ]}, {id:'style',type:'single',title:'How do you begin a new creative task?',options:[ {label:'Research + references',t:{Explorer:2,Synthesizer:1}}, {label:'Sketch structures',t:{Synthesizer:2,Visionary:1}}, {label:'Prototype immediately',t:{Maker:2,Storyteller:1}}, {label:'Jam with a collaborator',t:{Connector:2,Storyteller:1}}, ]}, {id:'risk',type:'likert',title:'Comfort with ambiguity',scale:[1,2,3,4,5],weightTrait:'Explorer'}, {id:'systems',type:'likert',title:'I spot patterns across ideas',scale:[1,2,3,4,5],weightTrait:'Synthesizer'}, {id:'narr',type:'likert',title:'I turn concepts into stories',scale:[1,2,3,4,5],weightTrait:'Storyteller'}, {id:'hands',type:'likert',title:'Making energizes me',scale:[1,2,3,4,5],weightTrait:'Maker'}, {id:'social',type:'likert',title:'I love connecting people',scale:[1,2,3,4,5],weightTrait:'Connector'}, {id:'vision',type:'likert',title:'I imagine long‑term futures',scale:[1,2,3,4,5],weightTrait:'Visionary'}, {id:'domains',type:'multi',title:'Which areas draw you now? (max 3)',max:3,options:[ {label:'Visual Arts',p:{'Visual Arts':3}}, {label:'Music',p:{'Music':3}}, {label:'Writing',p:{'Writing':3}}, {label:'Tech / AI',p:{'Tech/AI':3}}, {label:'Social Impact',p:{'Social Impact':3}}, {label:'Entrepreneurship',p:{'Entrepreneurship':3}}, {label:'Space / Science',p:{'Space/Science':3}}, ]}, {id:'flow',type:'single',title:'What gets you into flow quickest?',options:[ {label:'Sketching & visuals',t:{Explorer:1,Maker:1},p:{'Visual Arts':2}}, {label:'Journaling/structure',t:{Storyteller:2},p:{'Writing':2}}, {label:'Coding / promptcraft',t:{Maker:1,Visionary:1},p:{'Tech/AI':2}}, {label:'Hosting / moderating',t:{Connector:2,Storyteller:1}}, ]}, {id:'impact',type:'single',title:'Which impact resonates most?',options:[ {label:'Help society imagine futures',t:{Visionary:2},p:{'Social Impact':1}}, {label:'Bring great people together',t:{Connector:2},p:{'Entrepreneurship':1}}, {label:'Craft artifacts that move people',t:{Maker:1,Storyteller:1},p:{'Visual Arts':1,'Writing':1}}, {label:'Explore the edge of tech & space',t:{Explorer:2},p:{'Tech/AI':1,'Space/Science':1}}, ]}, {id:'time',type:'single',title:'Hours/week for creative practice?',options:[ {label:'1–2h',t:{Maker:1}},{label:'3–5h',t:{Explorer:1,Synthesizer:1}},{label:'6–10h',t:{Visionary:1,Maker:1}},{label:'10h+',t:{Connector:1,Visionary:1}} ]}, {id:'collab',type:'likert',title:'I prefer to co‑create vs solo',scale:[1,2,3,4,5],weightTrait:'Connector'}, {id:'proto',type:'likert',title:'I prototype quickly and iterate',scale:[1,2,3,4,5],weightTrait:'Maker'}, {id:'curious',type:'likert',title:'I chase curiosities down rabbit holes',scale:[1,2,3,4,5],weightTrait:'Explorer'}, {id:'syn2',type:'likert',title:'I merge opposing ideas into a third way',scale:[1,2,3,4,5],weightTrait:'Synthesizer'}, {id:'fut',type:'likert',title:'Futures thinking shows up in my work',scale:[1,2,3,4,5],weightTrait:'Visionary'}, {id:'medium',type:'multi',title:'Mediums to invest in next (max 3)',max:3,options:[ {label:'Short video / talk show',p:{'Writing':1},t:{Storyteller:2}}, {label:'Interactive web / installations',p:{'Tech/AI':2,'Visual Arts':1},t:{Maker:1,Explorer:1}}, {label:'Audio / podcast',p:{'Music':2},t:{Storyteller:1,Connector:1}}, {label:'Workshops / facilitation',p:{'Social Impact':1},t:{Connector:2}}, {label:'Space/science storytelling',p:{'Space/Science':2},t:{Visionary:1,Storyteller:1}}, {label:'Venture building / products',p:{'Entrepreneurship':2},t:{Maker:1,Visionary:1}}, ]}, ]; function toast(m){const t=$('toast');t.textContent=m;t.dataset.show='1';setTimeout(()=>t.dataset.show='0',1600)} function save(){localStorage.setItem(KEY,JSON.stringify({step:state.step,answers:state.answers,user:state.user}));toast('Saved locally')} function load(){try{const v=JSON.parse(localStorage.getItem(KEY)||'{}');if(v){state.answers=v.answers||{};state.user=v.user||null;state.step=v.step||1;toast('Loaded');return true}}catch(e){}toast('Nothing saved');return false} function reset(){localStorage.removeItem(KEY);state.step=0;state.answers={};state.user=null;render(0)} function render(i){ // hide all $('s0').hidden=true; $('res').hidden=true; document.querySelectorAll('.step').forEach(n=>n.remove()); if(i===0){$('s0').hidden=false; $('p0').style.width='0%'; return} if(i> BANK.length){ compute(); $('res').hidden=false; return } const q=BANK[i-1]; const host=document.getElementById('survey'); const sec=document.createElement('section'); sec.className='card pad step'; sec.id='q-'+q.id; host.appendChild(sec); const pct=Math.round((i-1)/BANK.length*100); let html=`<div class="progress" aria-label="Progress"><span style="width:${pct}%"></span></div><form id="f-${q.id}"><fieldset><legend>${i}. ${q.title}</legend><div class="g" id="o-${q.id}"></div></fieldset><div style="display:flex;gap:8px;margin-top:12px"><button type="button" class="btn ghost" id="prev">Back</button><button type="submit" class="btn p">Next</button></div></form>`; sec.innerHTML=html; const ow=$('o-'+q.id); if(q.type==='profile'){ q.fields.forEach(f=>{const wrap=document.createElement('label'); wrap.className='q'; wrap.innerHTML=`<span><strong>${f.label}</strong>${f.required? ' <span style="opacity:.7">(required)</span>':''}</span>`; let input; if(f.type==='select'){input=document.createElement('select'); (f.options||[]).forEach(op=>{const o=document.createElement('option'); o.value=op; o.textContent=op; input.appendChild(o);});} else if(f.type==='checkbox'){input=document.createElement('input'); input.type='checkbox';} else {input=document.createElement('input'); input.type=f.type||'text';} input.name=f.key; input.style.padding='10px'; input.style.border='1px solid rgba(255,255,255,.18)'; input.style.borderRadius='10px'; input.style.background='rgba(255,255,255,.06)'; input.style.color='var(--ink)'; if(state.user && state.user[f.key]!=null){ if(f.type==='checkbox') input.checked=!!state.user[f.key]; else input.value=state.user[f.key]; } wrap.appendChild(input); ow.appendChild(wrap); }); } else if(q.type==='likert'){ q.scale.forEach(v=>{const lab=document.createElement('label'); lab.className='opt'; lab.innerHTML=`<input type="radio" name="${q.id}" value="${v}" ${state.answers[q.id]==v?'checked':''}> <span>${v} / 5</span>`; ow.appendChild(lab);}); } else if(q.type==='single'){ q.options.forEach((o,ix)=>{const lab=document.createElement('label'); lab.className='opt'; lab.innerHTML=`<input type="radio" name="${q.id}" value="${ix}" ${state.answers[q.id]==ix?'checked':''}> <span>${o.label}</span>`; ow.appendChild(lab);}); } else if(q.type==='multi'){ q.options.forEach((o,ix)=>{const lab=document.createElement('label'); lab.className='opt'; const checked=Array.isArray(state.answers[q.id]) && state.answers[q.id].includes(ix); lab.innerHTML=`<input type="checkbox" name="${q.id}" value="${ix}" ${checked?'checked':''}> <span>${o.label}</span>`; ow.appendChild(lab);}); const help=document.createElement('p'); help.style.opacity='.75'; help.textContent=`Pick up to ${q.max||999}`; ow.appendChild(help); } sec.querySelector('#prev').onclick=()=>{state.step=Math.max(0,state.step-1); render(state.step); save()}; sec.querySelector('form').onsubmit=(e)=>{e.preventDefault(); const frm=new FormData(e.target); if(q.type==='multi'){ const vals=Array.from(sec.querySelectorAll('input[type="checkbox"]:checked')).map(i=>+i.value); if(q.max && vals.length>q.max){toast(`Please select up to ${q.max}.`); return;} state.answers[q.id]=vals; } else if(q.type==='profile'){ const user={}; q.fields.forEach(f=>{const el=sec.querySelector(`[name="${f.key}"]`); user[f.key]= (f.type==='checkbox') ? !!el.checked : (el.value||'');}); if(q.fields.some(f=>f.required && !user[f.key])){toast('Complete required fields'); return;} state.user=user; localStorage.setItem(KEY+'-user',JSON.stringify(user)); } else { const val=frm.get(q.id); if(val==null){toast('Please choose an answer.'); return;} state.answers[q.id]= +val; } state.step=i+1; render(state.step); save(); }; } function compute(){ TRAITS.forEach(t=>state.trait[t]=0); PASSIONS.forEach(p=>state.pass[p]=0); BANK.forEach(q=>{const ans=state.answers[q.id]; if(ans==null) return; if(q.type==='likert'){ if(q.weightTrait) state.trait[q.weightTrait]+= Number(ans); } else if(q.type==='single'){ const o=q.options[ans]; if(!o) return; if(o.t) for(const [k,v] of Object.entries(o.t)) state.trait[k]+=v; if(o.p) for(const [k,v] of Object.entries(o.p)) state.pass[k]+=v; } else if(q.type==='multi'){ (ans||[]).forEach(ix=>{ const o=q.options[ix]; if(o?.t) for(const [k,v] of Object.entries(o.t)) state.trait[k]+=v; if(o?.p) for(const [k,v] of Object.entries(o.p)) state.pass[k]+=v; }); } }); const tMax=Math.max(...Object.values(state.trait),1); const pMax=Math.max(...Object.values(state.pass),1); const tBars=$('tBars'); tBars.innerHTML=''; TRAITS.forEach(t=>{const pct=Math.round(state.trait[t]/tMax*100); const d=document.createElement('div'); d.className='bar'; d.innerHTML=`<div style="display:flex;justify-content:space-between"><strong>${t}</strong><span style="opacity:.75">${pct}%</span></div><div class="row"><div class="fill" style="width:${pct}%"></div></div>`; tBars.appendChild(d); }); const pBars=$('pBars'); pBars.innerHTML=''; PASSIONS.forEach(p=>{const pct=Math.round(state.pass[p]/pMax*100); const d=document.createElement('div'); d.className='bar'; d.innerHTML=`<div style="display:flex;justify-content:space-between"><strong>${p}</strong><span style="opacity:.75">${pct}%</span></div><div class="row"><div class="fill" style="width:${pct}%"></div></div>`; pBars.appendChild(d); }); const topT=[...TRAITS].sort((a,b)=>state.trait[b]-state.trait[a]).slice(0,2); const topP=[...PASSIONS].sort((a,b)=>state.pass[b]-state.pass[a]).slice(0,3); $('badge').textContent=`✨ ${topT.join(' + ')} × ${topP[0]}`; const recs=$('recs'); recs.innerHTML=''; const plan=[ `${state.user?.name||'You'}, Day 1: 20m curiosity walk → collect 5 textures/sounds`, `Day 2: 30m ${topT[0]} sprint on ${topP[0]} + 1 share`, `Day 3: 25m synthesis journal — connect 3 dots`, `Day 4: Prototype a tiny ${topP[0]} artifact (1 iteration)`, `Day 5: Ask 1 collaborator for feedback`, `Day 6: Refine & publish a 60–90s update`, `Day 7: Retro — what to double down on next week?` ].join("\n"); recs.dataset.plan=plan; const sec1=document.createElement('div'); sec1.className='q'; sec1.innerHTML='<strong>Weekly Practice</strong><ul style="opacity:.85;margin:0;padding-left:18px"><li>1× 45m sprint</li><li>1× 30m synthesis journal</li><li>1× 60–90s public share</li></ul>'; recs.appendChild(sec1); const sec2=document.createElement('div'); sec2.className='q'; sec2.innerHTML='<strong>Ideal Co‑Creators</strong><ul style="opacity:.85;margin:0;padding-left:18px"><li>Pair with a complementary style</li><li>Invite a domain expert for critique</li><li>Find a finisher who ships</li></ul>'; recs.appendChild(sec2); const sec3=document.createElement('div'); sec3.className='q'; sec3.innerHTML=`<strong>Starter Projects</strong><ul style="opacity:.85;margin:0;padding-left:18px"><li>Quick ${topP[0]} micro‑project</li><li>One story about a near future</li><li>Publish and gather feedback</li></ul>`; recs.appendChild(sec3); } // header buttons $('start').onclick=()=>{state.step=1; render(1)}; $('resume').onclick=()=>{ if(load()) render(state.step) }; $('import').onclick=()=>{const v=prompt('Paste share link'); if(!v) return; try{ const m=v.match(/#cb=([^&]+)/); if(!m) throw 0; const json=decodeURIComponent(escape(atob(m[1]))); const d=JSON.parse(json); state.answers=d.answers||{}; state.step=BANK.length+1; render(state.step); toast('Imported'); }catch(e){ toast('Invalid link') }}; $('save').onclick=save; $('load').onclick=()=>{ if(load()) render(state.step) }; $('reset').onclick=()=>{ if(confirm('Reset all progress?')) reset() }; // results buttons document.addEventListener('click', (e)=>{const b=e.target.closest('button'); if(!b) return; if(b.id==='jexp'){const blob=new Blob([JSON.stringify({answers:state.answers,trait:state.trait,passion:state.pass},null,2)],{type:'application/json'}); const url=URL.createObjectURL(blob); dl(url,'creative-bites-profile.json'); URL.revokeObjectURL(url);} if(b.id==='cexp'){const tRows=TRAITS.map(k=>`traits,${k},${state.trait[k]}`).join('\n'); const pRows=PASSIONS.map(k=>`passions,${k},${state.pass[k]}`).join('\n'); const csv=`section,key,value\n${tRows}\n${pRows}`; const blob=new Blob([csv],{type:'text/csv'}); const url=URL.createObjectURL(blob); dl(url,'creative-bites-profile.csv'); URL.revokeObjectURL(url);} if(b.id==='share'){const payload={answers:state.answers}; const b64=btoa(unescape(encodeURIComponent(JSON.stringify(payload)))); const link=location.href.split('#')[0]+'#cb='+b64; navigator.clipboard?.writeText(link).then(()=>toast('Link copied')).catch(()=>toast(link));} if(b.id==='copy'){const plan=$('recs').dataset.plan||''; if(!plan){toast('Generate results first'); return;} navigator.clipboard?.writeText(plan).then(()=>toast('7‑day plan copied')).catch(()=>toast(plan));} if(b.id==='print'){window.print()} if(b.id==='again'){reset()} }); function dl(url,name){const a=document.createElement('a'); a.href=url; a.download=name; document.body.appendChild(a); a.click(); a.remove(); } // start render(0); })(); </script> </body></html>'>
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.
Ok
