Back to work

Educational Web Game · 2026

AD:Planet

An educational city-builder for Hong Kong secondary students, where understanding a concept is the only currency that builds anything.

One student's phone through a live classroom session: join a team, vote on strategy, answer for resources, and watch the city advance era by era.

Overview

Most educational games reward correct answers with points, then let players spend those points on whatever they like. AD:Planet removes that layer: knowledge is capability, not currency. A team that has not understood the material cannot buy its way past it — the resources simply are not there, and the city does not get built.

The classroom mode runs as a 30-minute team competition. Each era opens with the team distributing a budget across six pillars — political, economic, social, cultural, environmental, technological — and voting on the proposal. Students then claim questions off a shared bounty board; a wrong answer returns a full worked solution rather than just a penalty. Sudden events force resource trade-offs mid-round, and the era closes with an isometric city rebuilt from what the team actually earned, plus a chronicle of how they got there. Four eras run Stone Age to Future, each gated by the teacher so the whole class advances together.

It is a Next.js application with a PixiJS renderer for the city, Prisma over Azure SQL, and Server-Sent Events keeping every phone in a classroom in step. Questions are generated per era by Gemini against the teacher's chosen topic, so a session is never the same set of questions twice.

Highlights

  • Knowledge gates capability — unmastered material yields no resources, so nothing gets built
  • Wrong answers return a step-by-step worked solution, not just a score penalty
  • PESTLE six-pillar budget proposed and voted on by the whole team each era
  • Isometric city regenerated per era across four eras, from Stone Age to Future
  • AI-generated questions per era, scoped to the topic the teacher picked
  • Teacher-paced era gates keep a whole class synchronised over SSE

Screens

Teams gather at the campfire while the night's route is laid out.
Teams gather at the campfire while the night's route is laid out.
Each era starts with a budget across six pillars — proposed by one student, voted on by the team.
Each era starts with a budget across six pillars — proposed by one student, voted on by the team.
A wrong answer is met with the full working, not just a red cross.
A wrong answer is met with the full working, not just a red cross.
The city is rebuilt from what the team actually earned that era.
The city is rebuilt from what the team actually earned that era.
Every era closes with a chronicle of the team's decisions and luck.
Every era closes with a chronicle of the team's decisions and luck.
Final standings: accuracy, streaks, and the score the city was built on.
Final standings: accuracy, streaks, and the score the city was built on.
Back to work