| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Incident Review Board — Responsible AI Game</title> |
| <style> |
| :root{ |
| --paper:#EEF1F4; |
| --card:#FBFCFD; |
| --ink:#16243A; |
| --ink-soft:#4A5A72; |
| --line:#C9D2DC; |
| --amber:#D97A00; |
| --green:#1F7A4D; |
| --red:#B3362B; |
| --mono:"Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; |
| --serif:Georgia, "Times New Roman", serif; |
| } |
| *{box-sizing:border-box;margin:0;padding:0} |
| body{ |
| background:var(--paper); |
| color:var(--ink); |
| font-family:var(--serif); |
| min-height:100vh; |
| padding:24px 16px 64px; |
| background-image:repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(22,36,58,.035) 31px, rgba(22,36,58,.035) 32px); |
| } |
| .wrap{max-width:760px;margin:0 auto} |
|
|
| header{border-bottom:3px double var(--ink);padding-bottom:14px;margin-bottom:22px} |
| .dept{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)} |
| h1{font-size:clamp(24px,5vw,34px);font-weight:700;letter-spacing:-.01em;margin-top:4px} |
| .sub{font-style:italic;color:var(--ink-soft);margin-top:4px;font-size:15px} |
|
|
| .statusbar{ |
| display:flex;justify-content:space-between;align-items:center; |
| font-family:var(--mono);font-size:12px;letter-spacing:.08em; |
| margin-bottom:14px;color:var(--ink-soft); |
| } |
| .docket{display:flex;gap:5px} |
| .tick{width:14px;height:14px;border:1.5px solid var(--line);border-radius:2px;background:#fff} |
| .tick.done-right{background:var(--green);border-color:var(--green)} |
| .tick.done-wrong{background:var(--red);border-color:var(--red)} |
| .tick.now{border-color:var(--amber);box-shadow:0 0 0 2px rgba(217,122,0,.25)} |
|
|
| .case{ |
| background:var(--card); |
| border:1px solid var(--line); |
| border-top:6px solid var(--ink); |
| box-shadow:0 2px 0 rgba(22,36,58,.08), 0 12px 28px rgba(22,36,58,.08); |
| padding:26px 26px 30px; |
| position:relative; |
| } |
| .case-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px} |
| .case-no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-soft)} |
| .case-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;background:var(--ink);color:#fff;padding:3px 8px;white-space:nowrap} |
| .case-title{font-size:20px;font-weight:700;margin-bottom:10px} |
| .case-body{font-size:16.5px;line-height:1.65} |
|
|
| .prompt-label{ |
| font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; |
| color:var(--ink-soft);margin:22px 0 10px; |
| } |
| .choices{display:grid;gap:9px} |
| @media(min-width:560px){.choices{grid-template-columns:1fr 1fr}} |
| .choice{ |
| font-family:var(--serif);font-size:15px;text-align:left; |
| background:#fff;border:1.5px solid var(--line);border-radius:3px; |
| padding:12px 14px;cursor:pointer;color:var(--ink); |
| transition:border-color .15s, transform .15s, background .15s; |
| } |
| .choice b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px} |
| .choice:hover:not(:disabled){border-color:var(--ink);transform:translateY(-1px)} |
| .choice:focus-visible{outline:3px solid var(--amber);outline-offset:2px} |
| .choice:disabled{cursor:default;opacity:.55} |
| .choice.picked-right{border-color:var(--green);background:#EAF5EF;opacity:1} |
| .choice.picked-wrong{border-color:var(--red);background:#F9ECEA;opacity:1} |
| .choice.reveal-right{border-color:var(--green);opacity:1} |
|
|
| .stamp{ |
| position:absolute;top:14px;right:18px; |
| font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.14em; |
| padding:7px 14px;border:3px solid;border-radius:4px; |
| transform:rotate(-7deg) scale(2.4);opacity:0;pointer-events:none; |
| text-transform:uppercase;mix-blend-mode:multiply; |
| } |
| .stamp.show{animation:stampIn .32s cubic-bezier(.2,1.4,.4,1) forwards} |
| .stamp.ok{color:var(--green);border-color:var(--green)} |
| .stamp.bad{color:var(--red);border-color:var(--red)} |
| @keyframes stampIn{ |
| 0%{opacity:0;transform:rotate(-7deg) scale(2.4)} |
| 100%{opacity:.9;transform:rotate(-7deg) scale(1)} |
| } |
| @media(prefers-reduced-motion:reduce){ |
| .stamp.show{animation:none;opacity:.9;transform:rotate(-7deg) scale(1)} |
| .choice:hover:not(:disabled){transform:none} |
| } |
|
|
| .verdict{ |
| margin-top:18px;border-left:4px solid var(--amber); |
| background:#FCF6EC;padding:14px 16px;font-size:15px;line-height:1.6;display:none; |
| } |
| .verdict.show{display:block} |
| .verdict .v-head{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px} |
|
|
| .next-btn{ |
| display:none;margin-top:18px;width:100%; |
| font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase; |
| background:var(--ink);color:#fff;border:none;padding:14px;cursor:pointer;border-radius:3px; |
| } |
| .next-btn.show{display:block} |
| .next-btn:hover{background:#0E1828} |
| .next-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px} |
|
|
| /* results */ |
| .results{display:none;text-align:center;padding:40px 26px} |
| .results.show{display:block} |
| .grade{font-family:var(--mono);font-size:64px;font-weight:700;line-height:1;margin:14px 0 6px} |
| .score-line{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} |
| .grade-note{font-size:17px;margin:14px auto 26px;max-width:480px;line-height:1.6} |
| .breakdown{max-width:420px;margin:0 auto 26px;text-align:left;border-top:1px solid var(--line)} |
| .bd-row{display:flex;justify-content:space-between;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px} |
| .bd-row .pn{font-family:var(--mono);font-size:12px;letter-spacing:.06em} |
| .bd-row .pr{font-family:var(--mono);font-size:12px} |
| .bd-row .pr.good{color:var(--green)} |
| .bd-row .pr.bad{color:var(--red)} |
| footer{margin-top:26px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-soft)} |
| </style> |
| </head> |
| <body> |
| <div class="wrap"> |
| <header> |
| <div class="dept">Office of AI Assurance · Case Docket 2026-RAI</div> |
| <h1>Incident Review Board</h1> |
| <p class="sub">Ten incident reports await classification. Identify which principle of responsible AI each system violated.</p> |
| </header> |
|
|
| <div class="statusbar"> |
| <span id="caseCount">CASE 01 / 10</span> |
| <div class="docket" id="docket" aria-hidden="true"></div> |
| <span id="scoreText">SCORE 0</span> |
| </div> |
|
|
| <main class="case" id="caseCard"> |
| <div class="stamp" id="stamp" aria-hidden="true"></div> |
| <div class="case-head"> |
| <span class="case-no" id="caseNo">FILE NO. 2026-001</span> |
| <span class="case-tag" id="caseTag">SECTOR: FINANCE</span> |
| </div> |
| <h2 class="case-title" id="caseTitle"></h2> |
| <p class="case-body" id="caseBody"></p> |
|
|
| <p class="prompt-label">Which principle was violated?</p> |
| <div class="choices" id="choices" role="group" aria-label="Principle choices"></div> |
|
|
| <div class="verdict" id="verdict" role="status"> |
| <div class="v-head" id="verdictHead"></div> |
| <div id="verdictBody"></div> |
| </div> |
| <button class="next-btn" id="nextBtn">Next case →</button> |
| </main> |
|
|
| <section class="case results" id="results"> |
| <div class="dept">FINAL DETERMINATION</div> |
| <div class="grade" id="grade">A</div> |
| <div class="score-line" id="finalScore">10 / 10 CORRECT</div> |
| <p class="grade-note" id="gradeNote"></p> |
| <div class="breakdown" id="breakdown"></div> |
| <button class="next-btn show" id="restartBtn" style="max-width:320px;margin:0 auto">Review a new docket ↻</button> |
| </section> |
|
|
| <footer>BASED ON MICROSOFT & GITHUB'S FIVE PRINCIPLES OF RESPONSIBLE AI</footer> |
| </div> |
|
|
| <script> |
| const PRINCIPLES = [ |
| {key:"fair", name:"Fairness", hint:"Equal treatment across groups"}, |
| {key:"rel", name:"Reliability & Safety", hint:"Works consistently, avoids harm"}, |
| {key:"priv", name:"Privacy & Security", hint:"Consent, minimal data, encryption"}, |
| {key:"inc", name:"Inclusiveness", hint:"Accessible and empowering for all"}, |
| {key:"trans", name:"Transparency & Accountability", hint:"Explainable, auditable, monitored"} |
| ]; |
| |
| const SCENARIOS = [ |
| { |
| sector:"FINANCE", title:"The Loan That Depended on a ZIP Code", |
| body:"A regional bank deploys an ML model to pre-approve personal loans. An internal audit finds that applicants from majority-Black neighborhoods are approved at a 34% lower rate than applicants with identical income, debt ratios, and credit history from other ZIP codes. The model never saw race directly — but ZIP code acted as a proxy.", |
| answer:"fair", |
| explain:"Identical applicants received different outcomes based on neighborhood, a proxy for race. This is differential impact on similarly situated groups — a textbook Fairness violation." |
| }, |
| { |
| sector:"HEALTHCARE", title:"The Triage Bot's Confident Mistake", |
| body:"A hospital's symptom-checker chatbot, rushed to production during flu season, occasionally recommends adult medication dosages for pediatric patients. There is no confidence threshold, no fallback to a human nurse, and the bug was known but logged as 'low priority.' A 6-year-old is given triple the safe dose before a pharmacist catches it.", |
| answer:"rel", |
| explain:"The system failed to operate safely and consistently, and a known harm pathway shipped anyway. Reliability & Safety requires minimizing unintended harm and performing as intended — especially in high-stakes domains." |
| }, |
| { |
| sector:"CONSUMER TECH", title:"Your Heart Rate, Now For Sale", |
| body:"A popular fitness app uses AI to predict users' stress levels and sleep quality. Buried on page 47 of its terms, the company reserves the right to share 'derived wellness insights.' It quietly sells heart-rate trends and location history to insurance brokers, who use it to adjust premiums. Users never gave meaningful consent.", |
| answer:"priv", |
| explain:"Sensitive biometric and location data was collected and shared without informed consent or data minimization. Privacy & Security demands consent, minimal collection, anonymization, and strong protection." |
| }, |
| { |
| sector:"VOICE AI", title:"The Assistant That Couldn't Hear Half the Country", |
| body:"A smart-home company launches a voice assistant trained almost entirely on standard American English from young adult speakers. Elderly users, people with speech impairments, and speakers with regional or non-native accents face error rates above 60%. The company markets it as 'voice control for everyone' but ships no alternative input mode.", |
| answer:"inc", |
| explain:"The product systematically excludes whole groups of users and offers no accessible alternative. Inclusiveness requires AI to work well for diverse users and empower everyone." |
| }, |
| { |
| sector:"FINANCE", title:"Denied by a Black Box", |
| body:"A credit-card issuer uses a deep-learning model to set credit limits. A customer is cut from $20,000 to $3,000 overnight. Support agents can only say 'the algorithm decided.' There is no explanation, no appeal process, no audit log of the model's reasoning, and no team monitoring its decisions in production.", |
| answer:"trans", |
| explain:"No explanation, no auditability, no monitoring, no accountability for the decision. Transparency & Accountability requires understandable systems with clear explanations and continuous oversight." |
| }, |
| { |
| sector:"HIRING", title:"The Résumé Screener That Learned the Past", |
| body:"A tech firm trains a hiring model on ten years of its own hiring decisions — a period when it hired mostly men for engineering roles. The model learns to penalize résumés containing the word 'women's' (as in 'women's chess club captain') and downgrades graduates of two all-women's colleges.", |
| answer:"fair", |
| explain:"The model encoded historical bias and now disadvantages women with equivalent qualifications — differential impact on similarly situated candidates. A Fairness violation (and a real incident: Amazon scrapped such a tool in 2018)." |
| }, |
| { |
| sector:"AUTOMOTIVE", title:"Ship It Before the Rain", |
| body:"An automaker's driver-assist AI performs erratically in heavy rain: lane detection drops out without warning and the car sometimes drifts. Internal test data shows the failure clearly, but the feature ships on schedule to hit a marketing deadline, with no rain-condition safeguard and no driver alert when confidence falls.", |
| answer:"rel", |
| explain:"A known, unpredictable failure mode shipped without safeguards or alerts. Reliability & Safety requires systems to operate consistently and minimize unintended harm — even at the cost of a deadline." |
| }, |
| { |
| sector:"CHATBOTS", title:"The Model That Remembered Too Much", |
| body:"A customer-service AI is fine-tuned on raw support transcripts that were never scrubbed. Months later, users discover that asking the bot the right questions makes it reveal other customers' names, home addresses, and partial credit-card numbers memorized from training data.", |
| answer:"priv", |
| explain:"Personal data was collected without minimization or anonymization, then leaked to strangers. This violates Privacy & Security: protect user data with consent, minimal collection, anonymization, and strong safeguards." |
| }, |
| { |
| sector:"GOVERNMENT", title:"Benefits Portal, English Only", |
| body:"A state rolls out an AI chatbot as the primary way to apply for unemployment benefits, replacing most phone staff. The bot supports only English, is incompatible with screen readers, and times out on slow rural connections. Applications from non-English speakers and blind residents drop sharply.", |
| answer:"inc", |
| explain:"An essential public service became inaccessible to disabled users, non-English speakers, and people with poor connectivity. Inclusiveness requires AI to be accessible and to work well for diverse users." |
| }, |
| { |
| sector:"SOCIAL MEDIA", title:"Removed. Reason: Unknown.", |
| body:"A platform's moderation AI deletes thousands of posts daily. Affected users get a one-line notice: 'Your content violated our policies.' No specific rule is cited, there is no human appeal, the company keeps no audit trail of model decisions, and nobody reviews its error rate. Journalists find legitimate news reports among the removals.", |
| answer:"trans", |
| explain:"Decisions with real consequences are unexplained, unappealable, unaudited, and unmonitored. Transparency & Accountability requires clear explanations, auditability, and continuous monitoring of AI operation." |
| } |
| ]; |
| |
| let order=[], idx=0, score=0, perPrinciple={}, history=[]; |
| |
| const $ = id => document.getElementById(id); |
| |
| function shuffle(a){ |
| const arr=[...a]; |
| for(let i=arr.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[arr[i],arr[j]]=[arr[j],arr[i]]} |
| return arr; |
| } |
| |
| function start(){ |
| order = shuffle(SCENARIOS); |
| idx=0; score=0; history=[]; |
| perPrinciple={}; PRINCIPLES.forEach(p=>perPrinciple[p.key]={right:0,total:0}); |
| $("results").classList.remove("show"); |
| $("caseCard").style.display="block"; |
| buildDocket(); render(); |
| } |
| |
| function buildDocket(){ |
| const d=$("docket"); d.innerHTML=""; |
| for(let i=0;i<order.length;i++){ |
| const t=document.createElement("div"); |
| t.className="tick"; t.id="tick"+i; |
| d.appendChild(t); |
| } |
| } |
| |
| function render(){ |
| const s=order[idx]; |
| $("caseCount").textContent=`CASE ${String(idx+1).padStart(2,"0")} / 10`; |
| $("scoreText").textContent=`SCORE ${score}`; |
| $("caseNo").textContent=`FILE NO. 2026-${String(idx+1).padStart(3,"0")}`; |
| $("caseTag").textContent=`SECTOR: ${s.sector}`; |
| $("caseTitle").textContent=s.title; |
| $("caseBody").textContent=s.body; |
| $("verdict").classList.remove("show"); |
| $("nextBtn").classList.remove("show"); |
| const st=$("stamp"); st.className="stamp"; st.textContent=""; |
| |
| document.querySelectorAll(".tick").forEach((t,i)=>t.classList.toggle("now",i===idx)); |
| |
| const box=$("choices"); box.innerHTML=""; |
| shuffle(PRINCIPLES).forEach(p=>{ |
| const b=document.createElement("button"); |
| b.className="choice"; |
| b.innerHTML=`<b>${p.name}</b>${p.hint}`; |
| b.onclick=()=>answer(p.key,b); |
| box.appendChild(b); |
| b.dataset.key=p.key; |
| }); |
| } |
| |
| function answer(key, btn){ |
| const s=order[idx]; |
| const correct = key===s.answer; |
| perPrinciple[s.answer].total++; |
| if(correct){score++; perPrinciple[s.answer].right++;} |
| history.push({s,correct}); |
| |
| document.querySelectorAll(".choice").forEach(b=>{ |
| b.disabled=true; |
| if(b.dataset.key===s.answer && !correct) b.classList.add("reveal-right"); |
| }); |
| btn.classList.add(correct?"picked-right":"picked-wrong"); |
| |
| const st=$("stamp"); |
| st.textContent = correct ? "CORRECT" : "MISFILED"; |
| st.classList.add(correct?"ok":"bad","show"); |
| |
| const pName = PRINCIPLES.find(p=>p.key===s.answer).name; |
| $("verdictHead").textContent = `VIOLATION ON RECORD: ${pName.toUpperCase()}`; |
| $("verdictBody").textContent = s.explain; |
| $("verdict").classList.add("show"); |
| |
| $("tick"+idx).classList.add(correct?"done-right":"done-wrong"); |
| $("tick"+idx).classList.remove("now"); |
| $("scoreText").textContent=`SCORE ${score}`; |
| |
| const nb=$("nextBtn"); |
| nb.textContent = idx===order.length-1 ? "File final report →" : "Next case →"; |
| nb.classList.add("show"); |
| nb.focus(); |
| } |
| |
| $("nextBtn").onclick=()=>{ |
| idx++; |
| if(idx<order.length) render(); |
| else showResults(); |
| }; |
| |
| function showResults(){ |
| $("caseCard").style.display="none"; |
| const r=$("results"); |
| const pct=score/10; |
| let grade,note; |
| if(pct===1){grade="A+";note="A flawless docket. Every violation correctly classified — the Review Board would like to offer you a permanent seat.";} |
| else if(pct>=.9){grade="A";note="Near-perfect classification. You can spot a proxy variable or a missing audit log from across the room.";} |
| else if(pct>=.7){grade="B";note="Solid auditing instincts. A few cases were misfiled — watch for the difference between a system that excludes people (Inclusiveness) and one that treats them unequally (Fairness).";} |
| else if(pct>=.5){grade="C";note="Half the docket was misfiled. Revisit the five principles: who is harmed, how, and whether anyone can see or appeal the decision.";} |
| else{grade="D";note="The Review Board recommends remedial training. Re-read the five principles and run the docket again — the scenarios reshuffle each time.";} |
| $("grade").textContent=grade; |
| $("finalScore").textContent=`${score} / 10 CORRECT`; |
| $("gradeNote").textContent=note; |
| |
| const bd=$("breakdown"); bd.innerHTML=""; |
| PRINCIPLES.forEach(p=>{ |
| const d=perPrinciple[p.key]; |
| const row=document.createElement("div"); |
| row.className="bd-row"; |
| const ok=d.right===d.total; |
| row.innerHTML=`<span class="pn">${p.name}</span><span class="pr ${ok?"good":"bad"}">${d.right} / ${d.total}</span>`; |
| bd.appendChild(row); |
| }); |
| r.classList.add("show"); |
| r.scrollIntoView({behavior:"smooth"}); |
| } |
| |
| $("restartBtn").onclick=start; |
| start(); |
| </script> |
| </body> |
| </html> |
|
|
