DEI Escape Room — International HRM · DrAIStudio& <link rel="canonical" href="https://draistudio.com/innovative-games/dei-escape-room/"> <meta name="description" content="A leadership team is stuck in a meeting room. Solve 4 DEI puzzles to unlock the door."/> <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%9A%AA%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%,#22182a 0%,#06121a 60%,#02080d 100%);min-height:100vh;-webkit-user-select:none;user-select:none} .wrap{max-width:780px;margin:0 auto;padding:28px 22px 80px} .crumb{display:inline-block;font-size:13px;color:#9cb8be;margin-bottom:18px;padding:6px 12px;border:1px solid rgba(255,193,7,.22);border-radius:999px;background:rgba(28,18,42,.6);text-decoration:none} .crumb:hover{color:#facc15;border-color:#facc15} 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} .hud{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px} .chip{background:rgba(28,18,42,.78);border:1px solid rgba(255,193,7,.4);border-radius:999px;padding:6px 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700} .chip b{color:#facc15;font-size:15px;margin-left:5px} .chip.danger b{color:#f87171} .door{background:linear-gradient(180deg,#2a2238 0%,#18102a 100%);border:1.5px solid rgba(255,193,7,.4);border-radius:14px;padding:18px;text-align:center;margin-bottom:16px} .door .icon{font-size:54px;line-height:1;margin-bottom:6px} .door .progress{display:flex;gap:5px;justify-content:center;margin-top:8px} .door .lock{width:32px;height:32px;background:rgba(255,193,7,.1);border:2px solid rgba(255,193,7,.4);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,193,7,.55)} .door .lock.solved{background:#16a34a;border-color:#86efac;color:#06121a} .puzzle{background:linear-gradient(180deg,rgba(28,18,42,.95),rgba(18,10,28,.95));border:1px solid rgba(255,193,7,.35);border-radius:14px;padding:18px;margin-bottom:14px} .puzzle .label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#facc15;font-weight:800;margin-bottom:5px} .puzzle h2{margin:0 0 6px;font-size:18px} .puzzle p{margin:0 0 12px;font-size:14px;line-height:1.55;color:#cfe1e5} .opts{display:grid;gap:10px} .opts.tg{grid-template-columns:1fr 1fr} @media (max-width:480px){.opts.tg{grid-template-columns:1fr}} .opt{background:rgba(11,8,16,.85);border:1.5px solid rgba(255,193,7,.32);color:#e8f4f6;border-radius:10px;padding:12px;cursor:pointer;text-align:left;font-size:13.5px;font-weight:600;line-height:1.4} .opt:hover{border-color:#facc15} .opt.good{background:#16a34a;color:#06121a;border-color:#86efac} .opt.bad{background:#b91c1c;color:#fff;border-color:#f87171} .feedback{margin-top:12px;padding:12px;background:rgba(11,8,16,.55);border:1px solid rgba(255,193,7,.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 #facc15;background:#facc15;color:#06121a;font-weight:800;padding:11px 22px;border-radius:999px;font-size:14px;letter-spacing:.04em;text-decoration:none;display:inline-block} .btn.ghost{background:transparent;color:#e8f4f6;border-color:rgba(255,193,7,.4)} .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,#28182f 0%,#0c0814 100%);border:1px solid rgba(255,193,7,.5);border-radius:18px;max-width:540px;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,8,16,.55);border:1px solid rgba(255,193,7,.2);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>🚪 DEI Escape Room</h1> <div class="sub">International HRM · 4 puzzles · escape the boardroom</div> <div class="hud"> <div class="chip">Puzzles solved <b><span id="solved">0</span>/4</b></div> <div class="chip danger">Wrong tries <b id="wrong">0</b></div> </div> <div class="door"> <div class="icon" id="doorIcon">🚪</div> <div style="font-size:13px;color:#9cb8be">Solve all 4 puzzles to unlock the door</div> <div class="progress" id="locks"></div> </div> <div id="puzzle"></div> </div> <div class="modal" id="intro"> <div class="card"> <h2>🚪 Escape Room Rules</h2> <div class="s">International HR Management · 14-week sim</div> <ul class="rules"> <li>Your leadership team is stuck in a boardroom. Four DEI puzzles, four locks.</li> <li>Each puzzle has multiple options — only the right one unlocks its lock.</li> <li>Wrong tries don't kick you out, but they count toward your "wrong attempts" score.</li> <li>Solve all four to escape.</li> </ul> <div class="btnrow"> <button class="btn" id="start">Pick the first lock →</button> <a class="btn ghost" href="/games/international-hr-management/">Source: 14-week sim</a> </div> </div> </div> <div class="modal hidden" id="over"> <div class="card"> <h2 id="overTitle">🚪 You're free</h2> <div class="s" id="overSub"></div> <div class="rules" id="overNote"></div> <div class="btnrow"><button class="btn" id="again">Lock yourself back in</button><a class="btn ghost" href="/innovative-games/">More games</a></div> </div> </div> <script> (() => { const $ = id => document.getElementById(id); const PUZZLES = [ { label:"Puzzle 1 — Bias Audit", title:"The hiring scorecard has a quiet problem", p:"You inherit an interview scorecard that rates 'culture fit' as 25% of the final score. Hiring outcomes show 70% homogeneous in the past 18 months. The first puzzle: what unlocks?", opts:[ {t:"Replace 'culture fit' with 'culture add' — defined behaviours, not vibes",correct:true,why:"'Culture add' shifts from sameness to diversity-as-strength; defined behaviours make it measurable and defensible."}, {t:"Increase the weight of 'culture fit' to 35%",correct:false,why:"Doubles down on the very pattern producing homogeneity."}, {t:"Remove all subjective criteria — only test scores",correct:false,why:"Goes too far. Some judgement is needed; the fix is bounding judgement, not eliminating it."}, {t:"Add diversity as a separate +10% bonus",correct:false,why:"Tokenising diversity into a bonus can backfire — both ethically and legally in many jurisdictions."}, ], }, { label:"Puzzle 2 — Inclusive Language", title:"The all-staff email needs editing", p:"Draft says: 'Guys, manning the new helpline, we'll go from chairman to leadership team, and his/her own success will determine raises.' Which rewrite is best?", opts:[ {t:"'Team, staffing the new helpline, we'll move from chairman to leadership team, and individual success will determine raises'",correct:false,why:"Almost there — but 'chairman' kept gendered."}, {t:"'Team, staffing the helpline, we'll move from Chair to leadership team, and individual success will determine raises'",correct:true,why:"Chair (gender-neutral) + 'team' + 'staffing' + 'individual' — clean, inclusive, unambiguous."}, {t:"'Folks, manning the helpline, we'll go from Chairman to leadership team, and his/her own success will decide raises'",correct:false,why:"'Manning' and 'Chairman' both keep gendered terms; 'his/her' is dated binary framing."}, {t:"'Everyone, manning the helpline, we'll go from chairman to leadership, and personal success will determine raises'",correct:false,why:"'Manning' and 'chairman' remain — still gendered language."}, ], }, { label:"Puzzle 3 — Equity vs. Equality", title:"Two teams asking for the same budget", p:"Marketing (12 people, mostly senior) and Customer Support (40 people, mostly junior) both ask for $30k learning budgets. Which framing fits an EQUITY mindset?", opts:[ {t:"Split it equally: $15k / $15k",correct:false,why:"That's equality, not equity. The teams have different sizes and different needs."}, {t:"Give it to Marketing — they generate more revenue",correct:false,why:"Concentrates resources on the already-resourced. Not equity."}, {t:"Distribute proportional to need: more for the larger, junior, fast-changing team",correct:true,why:"Equity = matching resources to need. Junior support team has higher per-person training need."}, {t:"Skip it this year — no budget is fair",correct:false,why:"Withholding budget entirely doesn't solve anything."}, ], }, { label:"Puzzle 4 — Allyship Pact", title:"A senior leader says 'I don't see colour'", p:"In front of the team, a senior leader proudly declares 'I don't see colour, I just see hard workers.' Your team-mates' faces drop. Best response?", opts:[ {t:"Stay silent; you don't want to embarrass them publicly",correct:false,why:"Silence is the most common allyship failure — the moment passes and the harm settles in."}, {t:"Affirm and move on: 'great mindset, thanks'",correct:false,why:"Affirms a phrase that, while well-meant, erases people's actual experiences."}, {t:"Privately later, share that the phrase can erase lived experience — and offer a better framing",correct:true,why:"Public correction can shame; private follow-up keeps the relationship and the learning. Best allyship is durable, not performative."}, {t:"Publicly correct them in front of the team",correct:false,why:"Sometimes appropriate, but usually backfires — defensive reaction and team discomfort."}, ], }, ]; const state = { i:0, solved:0, wrong:0 }; function start(){ $('intro').classList.add('hidden'); $('over').classList.add('hidden'); state.i=0; state.solved=0; state.wrong=0; refresh(); renderPuzzle(); } function refresh(){ $('solved').textContent = state.solved; $('wrong').textContent = state.wrong; const locks = $('locks'); locks.innerHTML=''; for (let k=0;k<4;k++){ const e=document.createElement('div'); e.className='lock'+(k<state.solved?' solved':''); e.textContent = k<state.solved?'✓':'🔒'; locks.appendChild(e); } $('doorIcon').textContent = state.solved===4 ? '🚪✨' : '🚪'; } function renderPuzzle(){ if (state.i >= 4) return end(); const p = PUZZLES[state.i]; const el = $('puzzle'); el.innerHTML = `<div class="puzzle"><div class="label">${esc(p.label)}</div><h2>${esc(p.title)}</h2><p>${esc(p.p)}</p><div class="opts tg" id="o"></div><div class="feedback" id="fb"></div><div class="btnrow2" id="bt"></div></div>`; const o = $('o'); const opts = p.opts.slice(); opts.forEach((opt,k) => { const b = document.createElement('button'); b.className='opt'; b.textContent=opt.t; b.onclick = () => pick(opt, b, opts); o.appendChild(b); }); } function pick(opt, btn, opts){ if (opt.correct) { btn.classList.add('good'); state.solved++; [...document.querySelectorAll('.opt')].forEach(x=>x.onclick=null); $('fb').className='feedback show'; $('fb').innerHTML = `<b class="right">✓ Lock opened.</b> ${esc(opt.why)}`; $('bt').innerHTML = `<button class="btn" id="advance">Next puzzle →</button>`; $('advance').onclick = () => { state.i++; renderPuzzle(); }; } else { btn.classList.add('bad'); btn.onclick=null; state.wrong++; $('fb').className='feedback show'; $('fb').innerHTML = `<b class="wrong">✗ Lock unmoved.</b> ${esc(opt.why)}`; } refresh(); } function end(){ let title = state.wrong===0 ? '🏆 Escaped — clean run' : state.wrong<=2 ? '👍 Escaped — minor stumbles' : '🚪 Escaped — but bruised'; $('overTitle').textContent = title; $('overSub').textContent = `4 puzzles solved · ${state.wrong} wrong attempts along the way`; $('overNote').innerHTML = 'DEI work is rarely about one big policy and almost always about hundreds of small decisions: word choice, scorecard design, budget allocation, allyship moments. The 14-week International HR Management sim covers DEI frameworks, cross-cultural management, and the inclusion levers that actually move the needle. <a href="/games/international-hr-management/" 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>