A gamified Python-and-C++ fundamentals trainer, set inside the same fictional studio as Anchorlight Games — Design Interview. Students play a new hire going through engineering onboarding with Sam Okafor, Lead Programmer: seven levels, each pairing a Python example with the equivalent C++, followed by two multiple-choice coding challenges.
Play it live: https://jamesbell2021.github.io/bmet-coding-fundamentals/
Built for Level 3 Creative Media — Computer Games Development at Belfast Met, as the run-up to students writing C++ inside Unreal Engine.
| # | Level | What it sets up for Unreal |
|---|---|---|
| 1 | Variables & Types | Python's "figure it out for me" typing vs. C++'s strict, declared typing |
| 2 | Operators & Expressions | Arithmetic/comparison syntax both languages share, plus % and the = vs == trap |
| 3 | Conditionals | Python indentation vs. C++ { } braces and semicolons |
| 4 | Loops | The three-part C++ for loop and the classic off-by-one gotcha |
| 5 | Functions | Declared return types (int, void) — used constantly in Unreal event handlers |
| 6 | Arrays & Lists | Zero-indexing and out-of-bounds access — a real bug class in C++, not just Python |
| 7 | Classes & Objects | A C++ class is the exact shape of every Actor you'll script in Unreal |
Each level ends with a short "what's next" nudge, and the final level's completion screen unlocks a closing checklist for actually opening Unreal Engine for the first time.
C++ can't realistically run in a browser without a heavy WASM toolchain, and this page deliberately treats Python and C++ the same way rather than giving one language a fancier live-execution treatment the other can't match. Instead, every challenge is a "predict the output," "spot the bug," or "fill in the blank" question — the same techniques real CS-ed platforms use, and ones that work identically well for both languages.
Levels don't lock — a student (or you, live) can jump straight to whichever concept is on today's lesson plan rather than being forced through in order. Progress (per-level best score, shown as the XP bar in the header) is saved in the browser via localStorage, so it persists between sessions on the same machine but is private to that device — it isn't shared or synced anywhere.
No build step, no dependencies beyond the page itself.
- Online: use the GitHub Pages link above.
- Offline: download the whole folder (
index.htmlplusassets/theme.mid) and openindex.htmlin a browser — the background music won't load if you only save the HTML file on its own.
All seven levels — briefing text, both code samples, the key insight, and both challenges — live in the LEVELS array near the top of the <script> block in index.html. Add an eighth level (pointers and references would be the natural next step before Unreal) by copying the shape of an existing entry; the map, XP bar and challenge flow all generate themselves from that array.
🤖 Built with Claude Code