Recognize exact PNG boundaries and reject a plausible decoy.
Digital forensics + learning design / 2026Individual project · Politecnico di Torino
Shattered Bytes.
Recovery is not enough.
A six-part browser game that teaches students to recover digital evidence from raw data. Players are assessed not only on what they find, but also on how clearly they can justify their method and conclusion.
RoleDesigner & developer
Duration10–15 minutes
StackReact, Vite, Tailwind
Format6-act serious game
01 / The design problem
Teach forensic reasoning, not pattern matching.
Data carving means recovering files directly from raw bytes. It is often taught as a simple search for the beginning and end of a file, but real investigations are less tidy: a match can be a decoy, a file can be split into pieces, and recoverable data may have nothing to do with the case.
Shattered Bytes teaches players to treat each match as a clue, not a conclusion. The player is a junior analyst investigating a fictional ransomware incident, and every recovery must help answer a case question.
InspectHypothesizeSelectRecoverValidateReport
02 / Campaign
One new complication at a time.
Each act keeps the skills learned before it and adds one new complication. The final challenge therefore combines familiar ideas instead of introducing an unrelated puzzle.
Reassemble two byte runs without including unrelated gap residue.
Choose the recoverable artefact that actually answers the case question.
Parse little-endian MBR data and derive the correct LBA byte offset.
Decode partial XOR-obfuscated evidence and avoid overclaiming recovery.
Combine fragmentation, decoy rejection, XOR recovery, and incident relevance.
Before analysis, an evidence-intake interaction introduces the sealed drive, write blocker, workstation, and hash verification. After the final recovery, players arrange six artefacts into a coherent incident chain-because evidence only becomes useful when it supports a defensible reconstruction.
03 / Assessment
The game scores how you think.
Completion alone hides the difference between disciplined analysis and lucky extraction. The game records search commands, navigation, byte selections, fragment stashing, compose attempts, XOR operations, report claims, hint use, and procedural decisions.
Those actions produce both a score and a skill profile. The final feedback covers accuracy, reconstruction, careful experimentation, evidence handling, reasoning, and report quality.
Assessment for learning
Wrong actions are allowed rather than silently blocked. Broad selections, premature carving, and unsupported reports remain visible in the investigation timeline and affect the final feedback. The mistake becomes part of the lesson.
04 / Implementation
The same action always receives the same result.
Shattered Bytes is a static React application with no backend. A level generator creates the data used by the game and records exactly where genuine evidence, decoys, and fragments are located.
Because the validation rules are explicit, classroom sessions are repeatable and feedback can be explained. The game does not depend on hidden AI or an unknown server decision, and it runs as a public demo without installation.
Source assetsLevel generatorJSON dumpsReact game stateMastery report
05 / Boundaries
A training environment, not a forensic suite.
The dumps are synthetic, the chain-of-custody interaction is simplified, and single-byte XOR introduces obfuscation rather than modeling modern encryption. The score is educational feedback, not professional certification.
Those constraints are deliberate: they keep the experience short, inspectable, and suitable for comparing methods in a laboratory debrief. The next meaningful validation step is classroom testing-observing not just whether students enjoy the game, but whether they can explain why their recovery is defensible.