HR Knowledge Duel — Applied HR Policies · DrAIStudio& <link rel="canonical" href="https://draistudio.com/innovative-games/hr-knowledge-duel/"> <meta name="description" content="Pass-and-play HR trivia battle. Two players, ten questions, fastest correct wins the round."/> <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%A5%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%,#1a0a2a 0%,#06121a 60%,#02080d 100%);min-height:100vh;-webkit-user-select:none;user-select:none} .wrap{max-width:780px;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(244,114,182,.3);border-radius:999px;background:rgba(28,8,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:16px} .duel{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} .player{background:linear-gradient(180deg,rgba(28,8,40,.95),rgba(11,8,16,.95));border:1.5px solid rgba(244,114,182,.32);border-radius:14px;padding:14px;text-align:center;transition:border-color .15s,transform .15s} .player.active{border-color:#f472b6;box-shadow:0 0 22px rgba(244,114,182,.3);transform:translateY(-3px)} .player .name{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f9a8d4;font-weight:800;margin-bottom:3px} .player .score{font-size:38px;font-weight:900;color:#f472b6} .player .label{font-size:11px;color:#9cb8be;letter-spacing:.06em;text-transform:uppercase} .hud{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px} .chip{background:rgba(28,8,40,.78);border:1px solid rgba(244,114,182,.4);border-radius:999px;padding:6px 12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700} .chip b{color:#f9a8d4;font-size:14px;margin-left:5px} .q{background:linear-gradient(180deg,rgba(28,18,42,.95),rgba(18,10,28,.95));border:1px solid rgba(244,114,182,.35);border-radius:14px;padding:18px;margin-bottom:14px} .qlabel{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#f9a8d4;font-weight:800;margin-bottom:5px;text-align:center} .qtext{font-size:clamp(16px,2.4vw,19px);line-height:1.4;font-weight:700;text-align:center;margin-bottom:14px} .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media (max-width:520px){.opts{grid-template-columns:1fr}} .opt{background:rgba(11,8,16,.85);border:1.5px solid rgba(244,114,182,.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:#f472b6} .opt.good{background:#16a34a;color:#06121a;border-color:#86efac} .opt.bad{background:#b91c1c;color:#fff;border-color:#f87171} .opt.dim{opacity:.4} .feedback{margin-top:12px;padding:12px;background:rgba(11,8,16,.55);border:1px solid rgba(244,114,182,.25);border-radius:10px;font-size:13px;line-height:1.5;display:none} .feedback.show{display:block} .banner{text-align:center;padding:10px;border-radius:10px;margin-bottom:12px;font-weight:800;letter-spacing:.04em} .banner.p1{background:rgba(56,189,248,.15);color:#7dd3fc;border:1px solid rgba(56,189,248,.4)} .banner.p2{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.4)} .btnbar{text-align:center;margin-top:8px} .btn{cursor:pointer;border:1px solid #f472b6;background:#f472b6;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(244,114,182,.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,#2a0c3a 0%,#0c0414 100%);border:1px solid rgba(244,114,182,.5);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,8,16,.55);border:1px solid rgba(244,114,182,.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} .namerow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0} .namerow input{background:rgba(11,8,16,.85);border:1.5px solid rgba(244,114,182,.3);color:#e8f4f6;border-radius:10px;padding:10px;font:inherit;font-size:14px;text-align:center} </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>🥊 HR Knowledge Duel</h1> <div class="sub">Applied HR Policies · two players, pass-and-play</div> <div class="duel"> <div class="player" id="p1box"> <div class="name" id="p1name">Player 1</div> <div class="score" id="p1score">0</div> <div class="label">points</div> </div> <div class="player" id="p2box"> <div class="name" id="p2name">Player 2</div> <div class="score" id="p2score">0</div> <div class="label">points</div> </div> </div> <div class="hud"> <div class="chip">Round <b><span id="rnum">1</span>/10</b></div> </div> <div class="banner" id="banner">Player 1's turn</div> <div class="q" id="qbox"></div> </div> <div class="modal" id="intro"> <div class="card"> <h2>🥊 Knowledge Duel</h2> <div class="s">Applied HR Policies · 14-week sim · two-player pass-and-play</div> <ul class="rules"> <li>10 rounds. Players alternate.</li> <li>One HR policy scenario per round. 4 options. Pick the answer that reflects best practice.</li> <li>Correct = +10 points. Wrong = +0. Highest score after 10 rounds wins.</li> <li>Designed as a 10-minute classroom closer — works on one device, passed between players.</li> </ul> <div class="namerow"> <input id="p1in" placeholder="Player 1 name" value="Player 1" /> <input id="p2in" placeholder="Player 2 name" value="Player 2" /> </div> <div class="btnrow"> <button class="btn" id="start">Ring the bell →</button> <a class="btn ghost" href="/games/applied-hr-policies/">Source: 14-week sim</a> </div> </div> </div> <div class="modal hidden" id="over"> <div class="card"> <h2 id="overTitle">🥇 Winner</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 Q = [ { q:"An employee files a flexible-work request. The policy says decisions must be made within:", opts:["30 days","60 days","90 days","No fixed timeframe"], a:0, why:"Most flex-work policies (and laws like the UK's Flexible Working Act) require a decision within a defined window — commonly 30 days, sometimes longer." }, { q:"GDPR principle most relevant to HR data?", opts:["Right to compete","Data minimisation","Open access","Unlimited retention"], a:1, why:"Collect only what's necessary; keep it only as long as needed. HR data is among the most heavily regulated personal data categories." }, { q:"For a workplace harassment policy to be defensible, it must include:", opts:["Cash compensation","A clear reporting channel and investigation process","Mandatory mediation only","CEO sign-off on every case"], a:1, why:"A clear, multi-channel reporting + structured investigation process is the bare-minimum legal and operational requirement." }, { q:"A 'last hired, first fired' redundancy approach is risky because:", opts:["It's slower","It can disproportionately affect protected groups","It costs more","It's banned everywhere"], a:1, why:"LIFO can correlate with demographics (recent hires often more diverse), creating indirect discrimination risk. Skills-based or business-need criteria are safer." }, { q:"A bring-your-own-device (BYOD) policy should at minimum require:", opts:["Cash subsidy","Mandatory device encryption + remote wipe consent","One brand only","Annual device replacement"], a:1, why:"Encryption + remote-wipe consent are the foundational data-protection requirements. Brand and replacement are operational, not legal, choices." }, { q:"In a hybrid work policy, who typically OWNS the office anchor-day decision?", opts:["HR","CEO","Team manager (within company guard rails)","Each individual"], a:2, why:"Best practice = company sets guard rails, team manager decides anchor days based on team workflow. Individual choice produces empty offices; HR-set anchors ignore team-level needs." }, { q:"A whistle-blower policy must protect disclosers from:", opts:["Disclosure","Retaliation","Investigation","Promotion"], a:1, why:"The core protection is anti-retaliation. Disclosure is the trigger; protection is from any consequence following it." }, { q:"A drug-and-alcohol testing policy is most defensible when:", opts:["It tests randomly + universally","It tests one team only","It tests after accidents only","Testing isn't documented"], a:0, why:"For-cause + universal random testing is most defensible. Single-group or undocumented testing invites discrimination claims." }, { q:"A 'no dating in the workplace' policy is generally:", opts:["Required by law everywhere","Hard to enforce + often legally questionable","Best practice","Free of risk"], a:1, why:"Blanket dating bans are mostly unenforceable AND raise privacy/freedom-of-association issues. Most modern policies focus on conflicts of interest and disclosure." }, { q:"What's the FIRST step when introducing a new policy that affects employee rights?", opts:["Announce it","Consult and (where required) negotiate with employees / works council","Make it effective tomorrow","Email HR-only"], a:1, why:"Consultation/negotiation is legally required in many jurisdictions before rights-affecting policies take effect — and culturally essential everywhere else." }, ]; const state = { i:0, scores:[0,0], turn:0, names:["P1","P2"] }; function start(){ $('intro').classList.add('hidden'); $('over').classList.add('hidden'); state.i=0; state.scores=[0,0]; state.turn=0; state.names[0] = $('p1in').value || 'Player 1'; state.names[1] = $('p2in').value || 'Player 2'; $('p1name').textContent = state.names[0]; $('p2name').textContent = state.names[1]; Q.sort(()=>Math.random()-0.5); nextQ(); } function refresh(){ $('p1score').textContent = state.scores[0]; $('p2score').textContent = state.scores[1]; $('rnum').textContent = Math.min(state.i+1, Q.length); $('p1box').classList.toggle('active', state.turn===0); $('p2box').classList.toggle('active', state.turn===1); $('banner').className = 'banner ' + (state.turn===0?'p1':'p2'); $('banner').textContent = `${state.names[state.turn]}'s turn`; } function nextQ(){ if (state.i >= 10) return end(); refresh(); const q = Q[state.i]; const box = $('qbox'); box.innerHTML = `<div class="qlabel">Round ${state.i+1}</div><div class="qtext">${esc(q.q)}</div><div class="opts" id="opts"></div><div class="feedback" id="fb"></div><div class="btnbar" id="bb"></div>`; const ob = $('opts'); q.opts.forEach((o,k) => { const b = document.createElement('button'); b.className='opt'; b.textContent=o; b.onclick = () => pick(k, q); ob.appendChild(b); }); } function pick(k, q){ [...document.querySelectorAll('.opt')].forEach((b,i) => { b.onclick = null; if (i === q.a) b.classList.add('good'); else if (i === k) b.classList.add('bad'); else b.classList.add('dim'); }); const fb = $('fb'); fb.classList.add('show'); if (k === q.a) { state.scores[state.turn] += 10; fb.innerHTML = `<b style="color:#86efac">✓ +10 to ${esc(state.names[state.turn])}.</b> ${esc(q.why)}`; } else { fb.innerHTML = `<b style="color:#f87171">✗ Pass.</b> ${esc(q.why)}`; } $('bb').innerHTML = `<button class="btn" id="next">${state.i===9?'See result →':'Pass to next →'}</button>`; $('next').onclick = () => { state.i++; state.turn = state.turn===0?1:0; nextQ(); }; } function end(){ const [s1, s2] = state.scores; let title='', sub=''; if (s1 === s2) { title='🤝 Draw'; sub=`${state.names[0]} ${s1} · ${state.names[1]} ${s2} — tied`; } else if (s1 > s2) { title=`🥇 ${state.names[0]} wins`; sub=`${s1} vs ${s2}`; } else { title=`🥇 ${state.names[1]} wins`; sub=`${s2} vs ${s1}`; } $('overTitle').textContent = title; $('overSub').textContent = sub; $('overNote').innerHTML = 'HR policy is mostly about defensibility — does the policy hold up under legal scrutiny AND treat people fairly? The 14-week Applied HR Policies sim teaches how to draft, consult on, and enforce real policies. <a href="/games/applied-hr-policies/" style="color:#f472b6">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>