Analytics Boss Battle — HR Analytics · DrAIStudio& <link rel="canonical" href="https://draistudio.com/innovative-games/analytics-boss-battle/"> <meta name="description" content="A Bad Manager boss has three weak spots. Land the right metric attack before they fire your team."/> <meta name="theme-color" content="#0b1b24"/> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='52' font-size='52'%3E%F0%9F%93%8A%3C/text%3E%3C/svg%3E"/> <style> *,*::before,*::after{box-sizing:border-box} html,body{margin:0;background:#06121a;color:#e8f4f6;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100%;-webkit-text-size-adjust:100%} body{background:radial-gradient(circle at 50% 0%,#1a3036 0%,#06121a 60%,#02080d 100%);min-height:100vh;-webkit-user-select:none;user-select:none} .wrap{max-width:760px;margin:0 auto;padding:24px 18px 80px} .crumb{display:inline-block;font-size:13px;color:#9cb8be;margin-bottom:16px;padding:6px 12px;border:1px solid rgba(56,189,248,.25);border-radius:999px;background:rgba(8,30,40,.6);text-decoration:none} h1{font-size:clamp(22px,3.6vw,28px);margin:0 0 4px;text-align:center;letter-spacing:-.015em} .sub{font-size:13px;color:#9cb8be;letter-spacing:.04em;text-align:center;margin-bottom:18px} .boss{background:linear-gradient(180deg,#3a1a20 0%,#1a0a10 100%);border:1.5px solid #b91c1c;border-radius:14px;padding:18px;text-align:center;margin-bottom:14px;box-shadow:0 0 32px rgba(248,113,113,.2)} .boss .av{font-size:60px;line-height:1;margin-bottom:4px} .boss h2{margin:0;font-size:20px;color:#fff} .boss .quote{font-style:italic;color:#fda4af;margin-top:4px;font-size:13.5px} .hp{height:22px;background:rgba(11,8,16,.7);border:1px solid rgba(248,113,113,.4);border-radius:999px;margin-top:12px;overflow:hidden;position:relative} .hp .fill{height:100%;background:linear-gradient(90deg,#16a34a 0%,#facc15 60%,#f87171 100%);transition:width .4s;width:100%} .hp .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)} .spots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px} .spot{background:rgba(11,8,16,.85);border:1.5px solid rgba(248,113,113,.4);border-radius:10px;padding:8px;text-align:center;font-size:12px;font-weight:700} .spot .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fda4af;margin-bottom:3px} .spot.weak{border-color:#facc15;background:rgba(40,28,8,.85)} .spot.weak .lbl{color:#facc15;animation:pulse 1s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .spot.broken{background:#16a34a;color:#06121a;border-color:#86efac} .spot.broken .lbl{color:#06121a} .turn{background:linear-gradient(180deg,rgba(15,30,45,.95),rgba(11,27,36,.95));border:1px solid rgba(56,189,248,.3);border-radius:14px;padding:16px;margin-bottom:12px} .turn .label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#38bdf8;font-weight:800;margin-bottom:6px} .turn h3{margin:0 0 6px;font-size:17px} .turn p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:#cfe1e5} .attacks{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media (max-width:520px){.attacks{grid-template-columns:1fr}} .atk{background:rgba(11,27,36,.85);border:1.5px solid rgba(56,189,248,.3);color:#e8f4f6;border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;font-size:13px;font-weight:600;line-height:1.4;transition:border-color .12s,transform .08s} .atk:hover{border-color:#38bdf8;transform:translateY(-2px)} .atk .e{font-size:18px;margin-right:6px} .atk .which{display:block;font-size:11px;color:#7dd3fc;font-weight:800;margin-top:3px;letter-spacing:.06em} .feedback{margin-top:12px;padding:12px;background:rgba(11,27,36,.5);border:1px solid rgba(56,189,248,.25);border-radius:10px;font-size:13px;line-height:1.5;display:none} .feedback.show{display:block} .feedback b.right{color:#86efac} .feedback b.wrong{color:#f87171} .btnrow2{text-align:center;margin-top:10px} .btn{cursor:pointer;border:1px solid #38bdf8;background:#38bdf8;color:#06121a;font-weight:800;padding:10px 20px;border-radius:999px;font-size:14px;letter-spacing:.04em;text-decoration:none;display:inline-block} .btn.ghost{background:transparent;color:#e8f4f6;border-color:rgba(56,189,248,.4)} .team{background:rgba(11,27,36,.5);border:1px solid rgba(56,189,248,.18);border-radius:10px;padding:10px;font-size:12.5px;color:#9cb8be;margin-bottom:10px} .team b{color:#fff} .modal{position:fixed;inset:0;background:rgba(2,8,13,.86);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:20;padding:18px} .modal.hidden{display:none} .card{background:linear-gradient(180deg,#0e2330 0%,#091823 100%);border:1px solid rgba(56,189,248,.4);border-radius:18px;max-width:520px;width:100%;padding:26px;text-align:center} .card h2{margin:0 0 6px;font-size:23px} .card .s{color:#9cb8be;font-size:14px;margin-bottom:14px} .rules{text-align:left;background:rgba(11,27,36,.55);border:1px solid rgba(56,189,248,.18);border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin-bottom:14px} .btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} </style> <link rel="stylesheet" href="/assets/light-theme.css?v=2026-05-31-gold" /> <script defer src="/assets/analytics.js?v=2026-05-20"></script> </head><body> <div class="wrap"> <a class="crumb" href="/innovative-games/">← Innovative Games</a> <h1>📊 Analytics Boss Battle</h1> <div class="sub">HR Analytics · land the right metric to defeat the Bad Manager</div> <div class="boss"> <div class="av">😤</div> <h2>The Bad Manager</h2> <div class="quote" id="quote">"Our retention is fine. People just don't want to work hard anymore."</div> <div class="hp"><div class="fill" id="hpFill"></div><div class="label" id="hpLabel">HP 100/100</div></div> <div class="spots" id="spots"></div> </div> <div class="team" id="team">⭐ Good performers on the team: <b id="teamCount">3</b> remaining (Boss can fire one each round you fail)</div> <div class="turn" id="turn"></div> </div> <div class="modal" id="intro"> <div class="card"> <h2>📊 Boss Battle Rules</h2> <div class="s">HR Analytics · 14-week sim</div> <ul class="rules"> <li>The Bad Manager has three weak spots: <b>Attrition</b>, <b>Engagement</b>, <b>Pay equity</b>.</li> <li>Each turn, the manager makes a claim. Pick the metric attack that DIRECTLY refutes it.</li> <li>Right attack = HP damage and the weak spot starts to break.</li> <li>Wrong attack = boss fires one of your top performers.</li> <li>Break all 3 weak spots before you lose 3 performers.</li> </ul> <div class="btnrow"> <button class="btn" id="start">Enter the boardroom →</button> <a class="btn ghost" href="/games/hr-analytics/">Source: 14-week sim</a> </div> </div> </div> <div class="modal hidden" id="over"> <div class="card"> <h2 id="overTitle">⚔️ Battle complete</h2> <div class="s" id="overSub"></div> <div class="rules" id="overNote"></div> <div class="btnrow"><button class="btn" id="again">Rematch</button><a class="btn ghost" href="/innovative-games/">More games</a></div> </div> </div> <script> (() => { const $ = id => document.getElementById(id); const SPOTS = ['attrition','engagement','equity']; const SPOT_LABELS = { attrition:'⚠️ Attrition', engagement:'😐 Engagement', equity:'⚖️ Pay equity' }; // attacks (metrics) tagged with which weak spot they hit const ATTACKS = { attrition: [ { e:'📉', label:'Regrettable attrition rate (top performers / yr)', short:'Regrettable attrition' }, { e:'📅', label:'Tenure-band attrition curve (0-6mo, 6-12mo, 1-2yr)', short:'Tenure curve' }, { e:'🎯', label:'Internal-vs-external promotion ratio', short:'Promotion ratio' }, ], engagement: [ { e:'💬', label:'eNPS score split by department', short:'eNPS by dept' }, { e:'🗂️', label:'Stay-interview themes (qualitative codes)', short:'Stay-interview themes' }, { e:'📊', label:'Engagement survey delta vs. last cycle', short:'Engagement delta' }, ], equity: [ { e:'⚖️', label:'Unexplained pay gap by gender/race after controls', short:'Unexplained pay gap' }, { e:'🔍', label:'Compa-ratio distribution by demographic', short:'Compa-ratio dist.' }, { e:'💸', label:'Starting-salary gap analysis (new hires)', short:'Starting-salary gap' }, ], }; // distractor (wrong-fit) metrics const DISTRACTORS = [ { e:'🍕', label:'Office pizza spend / quarter', short:'Pizza spend' }, { e:'☕', label:'Coffee machine downtime', short:'Coffee downtime' }, { e:'📸', label:'LinkedIn brand impressions', short:'LinkedIn impressions' }, { e:'🏆', label:'Employee of the month nominations', short:'EOTM nominations' }, { e:'📧', label:'Average email open rate', short:'Email open rate' }, { e:'🎂', label:'Birthday cake count', short:'Birthday cakes' }, ]; const ROUNDS = [ { spot:'attrition', claim:"\"Our retention is fine. People just don't want to work hard anymore.\"", explain:"This is a meta-narrative ('the kids these days'). What kills it: the actual numbers, specifically what's happening to your TOP performers and in the first 2 years." }, { spot:'engagement', claim:"\"My team is happy — they tell me so in 1:1s.\"", explain:"The Bad Manager is reading social cues from people who report to him. Direct rater bias. Counter with structured, anonymous data and qualitative themes from exit/stay interviews." }, { spot:'equity', claim:"\"We pay everyone what the market pays. That's fair.\"", explain:"'Market pay' often perpetuates historical bias. What lands: unexplained gap AFTER controls (role, tenure, performance) AND compa-ratio distribution by demographic." }, { spot:'attrition', claim:"\"Sure people leave — but only the underperformers.\"", explain:"Total attrition matters less than WHICH employees leave. Regrettable attrition (top performers) is the real signal." }, { spot:'engagement', claim:"\"Engagement survey scores are last year's noise. Useless.\"", explain:"Single snapshots ARE noisy. The fix is the DELTA over time (trend) and the qualitative coding of stay/exit reasons — not throwing out engagement work." }, { spot:'equity', claim:"\"If there's a gap, it's because of choices people make — kids, careers, that's life.\"", explain:"That framing handwaves accountability. The right counter is the gap that REMAINS after controlling for those choices — that's the unexplained portion that policy can act on." }, ]; const state = { i:0, hp:100, broken:{attrition:false,engagement:false,equity:false}, team:3 }; function start(){ $('intro').classList.add('hidden'); $('over').classList.add('hidden'); state.i=0; state.hp=100; state.broken={attrition:false,engagement:false,equity:false}; state.team=3; renderBoss(); renderTurn(); } function renderBoss(){ const f = $('hpFill'); f.style.width = state.hp + '%'; $('hpLabel').textContent = `HP ${state.hp}/100`; const s = $('spots'); s.innerHTML=''; SPOTS.forEach(sp => { const next = ROUNDS[state.i] && ROUNDS[state.i].spot === sp; const cls = state.broken[sp] ? 'broken' : next ? 'weak' : ''; s.innerHTML += `<div class="spot ${cls}"><div class="lbl">${SPOT_LABELS[sp].split(' ')[0]} ${state.broken[sp]?'✓':next?'WEAK':''}</div>${SPOT_LABELS[sp].split(' ').slice(1).join(' ')}</div>`; }); $('teamCount').textContent = state.team; } function renderTurn(){ if (state.team <= 0) return end(false); if (Object.values(state.broken).every(v=>v)) return end(true); if (state.i >= ROUNDS.length) { // ran out of rounds — boss still standing if (state.hp <= 0 || Object.values(state.broken).every(v=>v)) return end(true); return end(false); } const r = ROUNDS[state.i]; $('quote').textContent = r.claim; const t = $('turn'); // build a mix of attacks: 2 correct-spot + 2 distractors (or wrong-spot) const correct = ATTACKS[r.spot][Math.floor(Math.random()*ATTACKS[r.spot].length)]; // 1 wrong-spot const wrongSpot = SPOTS.filter(s=>s!==r.spot)[Math.floor(Math.random()*2)]; const wrong1 = ATTACKS[wrongSpot][Math.floor(Math.random()*ATTACKS[wrongSpot].length)]; // 2 distractors const dShuffle = DISTRACTORS.slice().sort(()=>Math.random()-0.5); const items = [ { ...correct, kind:'correct', spot:r.spot, label:`${correct.label}`, short:correct.short }, { ...wrong1, kind:'wrong-spot', spot:wrongSpot, label:`${wrong1.label}`, short:wrong1.short }, { ...dShuffle[0], kind:'distractor', label:dShuffle[0].label, short:dShuffle[0].short }, { ...dShuffle[1], kind:'distractor', label:dShuffle[1].label, short:dShuffle[1].short }, ].sort(()=>Math.random()-0.5); t.innerHTML = `<div class="label">Round ${state.i+1} / ${ROUNDS.length}</div><h3>The Bad Manager just claimed:</h3><p>${esc(r.claim)}</p><p style="font-size:12.5px;color:#9cb8be"><i>Hint:</i> the weakest spot lighting up is — <b>${esc(SPOT_LABELS[r.spot])}</b>. Pick the metric that DIRECTLY refutes the claim.</p><div class="attacks" id="atks"></div><div class="feedback" id="fb"></div><div class="btnrow2" id="bt"></div>`; const ae = $('atks'); items.forEach(it => { const b = document.createElement('button'); b.className='atk'; b.innerHTML = `<span class="e">${it.e}</span>${esc(it.label)}<span class="which">${esc(it.short)}</span>`; b.onclick = () => attack(it, r); ae.appendChild(b); }); } function attack(it, r){ [...document.querySelectorAll('.atk')].forEach(x=>x.onclick=null); const fb = $('fb'); fb.className='feedback show'; if (it.kind === 'correct') { state.hp = Math.max(0, state.hp - 34); state.broken[r.spot] = true; fb.innerHTML = `<b class="right">✓ Direct hit on ${esc(SPOT_LABELS[r.spot])}.</b> ${esc(r.explain)}`; } else if (it.kind === 'wrong-spot') { state.team -= 1; fb.innerHTML = `<b class="wrong">✗ Right tool, wrong target.</b> That metric is real, but it doesn't refute THIS claim. The Bad Manager fires ${esc(['Aaliyah','Marcus','Sara','Yara','Mei'][Math.floor(Math.random()*5)])}.<br><br>${esc(r.explain)}`; } else { state.team -= 1; fb.innerHTML = `<b class="wrong">✗ That's not a metric, that's a vibe.</b> Pizza spend doesn't refute attrition claims. The Bad Manager fires ${esc(['Diego','Hana','Sara','Ben','Mei'][Math.floor(Math.random()*5)])}.<br><br>${esc(r.explain)}`; } state.i++; renderBoss(); $('bt').innerHTML = `<button class="btn" id="advance">${state.i>=ROUNDS.length || Object.values(state.broken).every(v=>v) || state.team<=0 ? 'See final scoreboard →' : 'Next turn →'}</button>`; $('advance').onclick = renderTurn; } function end(won){ $('overTitle').textContent = won ? '🏆 Boss defeated' : '💀 Team scattered'; $('overSub').textContent = won ? `All 3 weak spots broken. Team remaining: ${state.team}.` : `Boss still standing. Team remaining: ${state.team}.`; $('overNote').innerHTML = 'Real HR-analytics work is exactly this — picking the metric that DIRECTLY refutes the misinterpretation in front of you, and not getting distracted by vanity metrics. The 14-week HR Analytics sim covers metric design, descriptive vs. inferential analytics, and the conversation rituals that turn data into decisions. <a href="/games/hr-analytics/" style="color:#7dd3fc">Play the full sim →</a>'; $('over').classList.remove('hidden'); } function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]))} $('start').onclick=start; $('again').onclick=start; })(); </script> </body></html>