Street 05 › Services › Case study: Circuit Architect (education)
Circuit Architect: a logic-gate puzzle game for learning
A browser puzzle game that teaches how logic gates and truth tables work, from a single NOT gate to a two-bit adder. We built it as our own product and wrote it up the way we would for a client.
The problem
Logic gates are usually taught with static diagrams and truth tables on paper. Learners can read a table without ever testing an idea against it.
The brief we set ourselves: a game a student can open in any browser, with no install or account, where every level is a small truth table to match, and where the game can be trusted to say when an answer is the best one possible.
The approach
- Twenty levels in four chapters (First gates, Combining gates, Deciding, Adding), each chapter opening with a short lesson card. Four gate types: NOT, AND, OR and XOR.
- Players build a circuit by tapping, not dragging, so it works the same with a mouse, a finger or a keyboard. Tapping a row of the truth table lights every wire that is on for that row, so a wrong circuit shows where it goes wrong.
- Stars compare the gates used with par. Hints reveal the reference circuit one gate at a time, and a hinted solve cannot earn three stars.
- The level data is checked automatically on every build: each reference circuit must match its truth table and fit its slots, and for small levels the build searches every smaller circuit to prove par really is the fewest gates possible.
- Progress is saved in the browser, and with an account it syncs across devices. The game sits inside the Skill Lab’s learning cycle (lesson, game, check question, reflection). We make no claims about grades or learning outcomes.
The numbers
Each figure comes from a check in our own repository, named after it, so it can be run again. Measured October 2026.
- 20: levels in 4 chapters, from a NOT gate to a two-bit adder (src/arcade/circuit/levels.js)
- 18 of 20: levels where the build re-proves, on every build, that par is the fewest gates possible (one more was proven offline by exhaustive search) (scripts/check-skill-lab.js)
- 5.4 KB: gzipped size of the game’s own code, loaded only when the game is opened (npm run build)
- 87.7 KB: gzipped first load for the whole site, under a 90 KB budget the build enforces (npm run test:bundle)
- 24 × 24 px: smallest tap target allowed, with text contrast of at least 4.5:1, checked by our accessibility audit on a 375 px phone screen (npm run test:a11y)
How it stays that way
- A headless browser opens the game and builds level 1 from the buttons; the test fails on any console error or sideways scrolling at 375 px (npm run test:smoke).
- The accessibility audit opens the game window and checks every button and input has a name, text contrast and tap-target sizes (npm run test:a11y).
Want something like this?
We build games like this for brands, schools and training teams: Educational & Serious Games.
More case studies: Cyber Velocity (performance).