  
    
<head>
<meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, viewport-fit=cover&quot;>
<title>The Likable Leader Diagnostic</title>
<style>
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#faf8f4;--card:#fff;--ink:#1f2933;--mute:#5f6b76;--line:#e3ddd2;--sw:#d9798f;--lk:#2f8f6b;--vd:#4a4f6a;--acc:#1f4e79}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme=&quot;light&quot;]){--bg:#15181c;--card:#1e2328;--ink:#eceff1;--mute:#a3adb6;--line:#333b43;--sw:#e58aa0;--lk:#4cc29a;--vd:#8f95bd;--acc:#8ab8e6}}
:root[data-theme=&quot;dark&quot;]{--bg:#15181c;--card:#1e2328;--ink:#eceff1;--mute:#a3adb6;--line:#333b43;--sw:#e58aa0;--lk:#4cc29a;--vd:#8f95bd;--acc:#8ab8e6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,&quot;Times New Roman&quot;,serif;line-height:1.5}
main{max-width:760px;margin:0 auto;padding:24px 16px 48px}
h1{font-size:2rem;margin:0 0 4px;line-height:1.2}
h2{font-size:1.25rem;margin:0 0 8px}
.sub{color:var(--mute);margin:0 0 20px;font-family:system-ui,sans-serif}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 14px}
.sans{font-family:system-ui,-apple-system,&quot;Segoe UI&quot;,sans-serif}
.q{font-weight:600;margin:0 0 10px}
.q span{color:var(--mute);margin-right:6px}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.opts label{border:1px solid var(--line);border-radius:8px;padding:8px 4px;text-align:center;font-size:.8rem;cursor:pointer;font-family:system-ui,sans-serif;display:block}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts input:checked+span{font-weight:700}
.opts label:has(input:checked){background:var(--acc);color:#fff;border-color:var(--acc)}
.opts label:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
button{font:600 1rem system-ui,sans-serif;padding:12px 22px;border-radius:10px;border:0;background:var(--acc);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc);margin-left:8px}
#msg{color:#c0392b;font-family:system-ui,sans-serif;margin:8px 0;min-height:1.2em}
.spec{position:relative;height:18px;border-radius:9px;margin:34px 0 8px;background:linear-gradient(90deg,var(--sw) 0%,var(--sw) 18%,var(--lk) 38%,var(--lk) 62%,var(--vd) 82%,var(--vd) 100%)}
.pin{position:absolute;top:-10px;width:8px;height:38px;background:var(--ink);border-radius:4px;transform:translateX(-50%);border:2px solid var(--bg)}
.ends{display:flex;justify-content:space-between;font:.8rem system-ui,sans-serif;color:var(--mute)}
.bar{display:flex;align-items:center;gap:10px;margin:8px 0;font:.9rem system-ui,sans-serif}
.bar b{width:112px;flex:none}
.track{flex:1;height:12px;background:var(--line);border-radius:6px;overflow:hidden}
.fill{height:100%;border-radius:6px}
.bar i{width:44px;text-align:right;font-style:normal;color:var(--mute)}
ul{margin:6px 0 0;padding-left:20px}
.hide{display:none}
@media print{body{background:#fff;color:#000}button,.noprint{display:none}.card{break-inside:avoid}}
</style>
</head>
<body>
<main>
<h1>The Likable Leader Diagnostic</h1>
<p class=&quot;sub&quot;>Where do you fall between Snow White and Darth Vader? Takes about 5 minutes. Answer for how you <em>actually</em> lead, not how you'd like to.</p>

<div class=&quot;card sans noprint&quot;><b>Rate each statement:</b> 1 = Rarely &amp;nbsp; 2 = Sometimes &amp;nbsp; 3 = Often &amp;nbsp; 4 = Almost always</div>

<div id=&quot;quiz&quot;></div>
<div id=&quot;msg&quot; role=&quot;alert&quot;></div>
<button id=&quot;go&quot;>See my results</button>

<section id=&quot;out&quot; class=&quot;hide&quot;>
  <div class=&quot;card&quot;>
    <h2 id=&quot;title&quot;></h2>
    <p id=&quot;tag&quot; class=&quot;sans&quot; style=&quot;color:var(--mute);margin:0&quot;></p>
    <div class=&quot;spec&quot;><div class=&quot;pin&quot; id=&quot;pin&quot;></div></div>
    <div class=&quot;ends&quot;><span>Too Nice (Snow White)</span><span>Likable Leader</span><span>Fear &amp;amp; Control (Darth Vader)</span></div>
  </div>
  <div class=&quot;card&quot;><h2>Your scores</h2><div id=&quot;bars&quot;></div></div>
  <div class=&quot;card&quot;><h2>What this means</h2><div id=&quot;desc&quot; class=&quot;sans&quot;></div></div>
  <div class=&quot;card&quot;><h2>Your I-VIBE profile</h2><p class=&quot;sans&quot; style=&quot;margin-top:0;color:var(--mute)&quot;>Scores on the five likable-leader habits (4 = strongest).</p><div id=&quot;vibe&quot;></div><p id=&quot;grow&quot; class=&quot;sans&quot;></p></div>
  <button class=&quot;noprint&quot; onclick=&quot;window.print()&quot;>Print results</button>
  <button class=&quot;ghost noprint&quot; id=&quot;reset&quot;>Start over</button>
</section>
</main>

<script>
// s = Snow White (too nice), l = Likable, v = Vader (fear/control). l items carry an I-VIBE letter.
var Q=[
[&quot;l&quot;,&quot;I&quot;,&quot;I know what's happening in my team members' lives and ask about it sincerely.&quot;],
[&quot;s&quot;,&quot;&quot;,&quot;I put off hard conversations because I don't want to upset anyone.&quot;],
[&quot;v&quot;,&quot;&quot;,&quot;I make decisions without asking for input because I know what's best.&quot;],
[&quot;l&quot;,&quot;V&quot;,&quot;I recognize people's contributions specifically and regularly.&quot;],
[&quot;s&quot;,&quot;&quot;,&quot;I let missed deadlines slide to keep the peace.&quot;],
[&quot;v&quot;,&quot;&quot;,&quot;When something goes wrong, my first move is to find who's at fault.&quot;],
[&quot;l&quot;,&quot;In&quot;,&quot;I invite different voices into the discussion, and still make the final call when needed.&quot;],
[&quot;s&quot;,&quot;&quot;,&quot;I worry more about being liked than about whether we hit our goals.&quot;],
[&quot;v&quot;,&quot;&quot;,&quot;I believe a little fear keeps people sharp.&quot;],
[&quot;l&quot;,&quot;B&quot;,&quot;I invest real time in helping people grow toward their own goals.&quot;],
[&quot;s&quot;,&quot;&quot;,&quot;I take on my team's work myself rather than hold them accountable.&quot;],
[&quot;v&quot;,&quot;&quot;,&quot;People on my team would hesitate to bring me bad news.&quot;],
[&quot;l&quot;,&quot;E&quot;,&quot;I bring steady energy and the same standards whether it's a good day or a bad one.&quot;],
[&quot;s&quot;,&quot;&quot;,&quot;I soften feedback so much that the real message gets lost.&quot;],
[&quot;v&quot;,&quot;&quot;,&quot;I rarely explain the \&quot;why\&quot; behind directives; I expect compliance.&quot;]
];
var VN={I:&quot;Interest&quot;,V:&quot;Value&quot;,In:&quot;Inclusion&quot;,B:&quot;Benefit&quot;,E:&quot;Engagement&quot;};
var TIPS={I:&quot;Schedule a 5-minute personal check-in with each team member this week.&quot;,V:&quot;Send one specific, named thank-you each day for a week.&quot;,In:&quot;Before your next decision, ask 'What am I missing?' and listen before you decide.&quot;,B:&quot;Ask each person: 'What skill do you want to build this year?' Then put it on the calendar.&quot;,E:&quot;Pick one standard and one routine you will hold the same way every day, good mood or bad.&quot;};
var R={
 s:{t:&quot;Snow White Leader&quot;,g:&quot;Warm and well-liked, but standards slip.&quot;,d:&quot;<p>People love working for you, and your care is real. The risk is that kindness becomes avoidance: expectations blur, accountability gets postponed, and high performers can grow frustrated carrying others.</p><ul><li><b>Strength:</b> trust, warmth, loyalty</li><li><b>Watch for:</b> unspoken expectations, delayed feedback, being the safety net for missed work</li><li><b>Next step:</b> pick one conversation you've been avoiding and have it this week. Lead with care, state the standard clearly, agree on next steps.</li></ul>&quot;},
 l:{t:&quot;Likable Leader&quot;,g:&quot;Warm and credible, caring and accountable.&quot;,d:&quot;<p>You balance people and mission. Your team knows you care and knows where the bar is. The goal now is consistency, especially under pressure, when it's easiest to slide toward either end of the spectrum.</p><ul><li><b>Strength:</b> trust paired with clear accountability</li><li><b>Watch for:</b> stress-driven drift toward control or avoidance</li><li><b>Next step:</b> work on your lowest I-VIBE habit below, and ask your team how you show up when things get hard.</li></ul>&quot;},
 v:{t:&quot;Darth Vader Leader&quot;,g:&quot;Driven and decisive, but people may follow out of fear.&quot;,d:&quot;<p>You get results and you're not afraid of hard calls. But authority built on control produces compliance rather than commitment. People hide problems, hold back ideas, and leave when they can.</p><ul><li><b>Strength:</b> decisiveness, drive, clear direction</li><li><b>Watch for:</b> silence in meetings, bad news arriving late, turnover</li><li><b>Next step:</b> in your next meeting, explain the 'why' behind one decision and ask for one honest concern. Thank whoever offers it.</li></ul>&quot;}
};
var quiz=document.getElementById(&quot;quiz&quot;);
Q.forEach(function(q,i){
 var h='<div class=&quot;card&quot;><p class=&quot;q&quot;><span>'+(i+1)+'.</span>'+q[2]+'</p><div class=&quot;opts&quot; role=&quot;radiogroup&quot;>';
 for(var n=1;n<=4;n++)h+='<label><input type=&quot;radio&quot; name=&quot;q'+i+'&quot; value=&quot;'+n+'&quot;><span>'+n+'</span></label>';
 quiz.insertAdjacentHTML(&quot;beforeend&quot;,h+'</div></div>');
});
function color(k){return k==&quot;s&quot;?&quot;var(--sw)&quot;:k==&quot;l&quot;?&quot;var(--lk)&quot;:&quot;var(--vd)&quot;}
document.getElementById(&quot;go&quot;).onclick=function(){
 var sc={s:0,l:0,v:0},vb={},miss=0;
 Q.forEach(function(q,i){
  var c=document.querySelector('input[name=&quot;q'+i+'&quot;]:checked');
  if(!c){miss++;return}
  var n=+c.value;sc[q[0]]+=n;if(q[1])vb[q[1]]=n;
 });
 var m=document.getElementById(&quot;msg&quot;);
 if(miss){m.textContent=&quot;Please answer all statements (&quot;+miss+&quot; left).&quot;;return}
 m.textContent=&quot;&quot;;
 // dominant style; on ties the likable leader wins only if it ties the top score
 var key=[&quot;s&quot;,&quot;l&quot;,&quot;v&quot;].sort(function(a,b){return sc[b]-sc[a]||(b==&quot;l&quot;?1:-1)})[0];
 var lean=(sc.v-sc.s)/15; // -1 (all Snow White) .. +1 (all Vader)
 var pos=Math.max(4,Math.min(96,50+lean*50));
 var r=R[key],lt=&quot;&quot;;
 if(key==&quot;l&quot;&amp;&amp;Math.abs(lean)>=0.25)lt=&quot; You lean slightly toward &quot;+(lean<0?&quot;Snow White&quot;:&quot;Darth Vader&quot;)+&quot; under pressure.&quot;;
 document.getElementById(&quot;title&quot;).textContent=&quot;You're a &quot;+r.t;
 document.getElementById(&quot;tag&quot;).textContent=r.g+lt;
 document.getElementById(&quot;pin&quot;).style.left=pos+&quot;%&quot;;
 document.getElementById(&quot;desc&quot;).innerHTML=r.d;
 var names={s:&quot;Snow White&quot;,l:&quot;Likable Leader&quot;,v:&quot;Darth Vader&quot;},b=&quot;&quot;;
 [&quot;s&quot;,&quot;l&quot;,&quot;v&quot;].forEach(function(k){var p=(sc[k]-5)/15*100;
  b+='<div class=&quot;bar&quot;><b>'+names[k]+'</b><div class=&quot;track&quot;><div class=&quot;fill&quot; style=&quot;width:'+p+'%;background:'+color(k)+'&quot;></div></div><i>'+sc[k]+'/20</i></div>'});
 document.getElementById(&quot;bars&quot;).innerHTML=b;
 var v=&quot;&quot;,low=&quot;I&quot;;
 Object.keys(VN).forEach(function(k){if(vb[k]<vb[low])low=k;
  v+='<div class=&quot;bar&quot;><b>'+VN[k]+'</b><div class=&quot;track&quot;><div class=&quot;fill&quot; style=&quot;width:'+((vb[k]-1)/3*100)+'%;background:var(--lk)&quot;></div></div><i>'+vb[k]+'/4</i></div>'});
 document.getElementById(&quot;vibe&quot;).innerHTML=v;
 document.getElementById(&quot;grow&quot;).innerHTML=&quot;<b>Growth area: &quot;+VN[low]+&quot;.</b> &quot;+TIPS[low];
 document.getElementById(&quot;out&quot;).classList.remove(&quot;hide&quot;);
 document.getElementById(&quot;out&quot;).scrollIntoView({behavior:&quot;smooth&quot;});
};
document.getElementById(&quot;reset&quot;).onclick=function(){
 document.querySelectorAll(&quot;input:checked&quot;).forEach(function(i){i.checked=false});
 document.getElementById(&quot;out&quot;).classList.add(&quot;hide&quot;);window.scrollTo(0,0);
};
</script>
</body>
</html>
">


  
  
Becca Spahr
