Hand-coded HTML · Gamified
Deepfake Detective
A hand-coded browser game that trains employees to spot AI-generated media and phishing, with points, streaks and a final badge.
The challenge
AI-generated voice notes, images and emails are making phishing much harder to spot. Annual slide-based security training wasn't changing behaviour.
My approach
- A fast 'real or fake?' game built in plain HTML, CSS and JavaScript, with no authoring tool and no LMS needed.
- Rounds get harder, from obvious fakes to convincing deepfakes.
- Points, streak bonuses and a final badge encourage replay.
- Each answer reveals the tell-tale clue, so learners build a mental checklist.
Objectives and how each is assessed
Every assessment item was written before the content, and maps to exactly one objective.
| Learning objective | Assessment |
|---|---|
| Identify visual, audio and text signs of manipulated or AI-generated media. | Cases 1-6: timed genuine-or-fake calls on images, voice notes, video frames and a news screenshot, with each tell pinned on the evidence |
| Verify an urgent or unusual request through an independent channel before acting. | Cases 7-9: a deepfake CFO call, a look-alike payroll email and a routine manager request; learners choose Genuine, Fake or Verify first |
| Report a suspected deepfake through the correct process. | Case 10: put the four reporting steps in order (drag and drop or keyboard) |
Results and reflection
Add pilot results, reviewer quotes or what you would do differently next time.
Design artefacts
- Storyboard (PDF) — coming soon
- Action map — coming soon