Branch & Bug — An Interactive Weighted Graph Traversal Game

Author / Site: Course-developed interactive resource (no external author credited in the file)

Summary: A self-contained HTML/JavaScript activity presented as a 'field-study board': a weighted graph is displayed as a specimen tray on the left, while the right-hand column holds a token pile and a live readout showing current cost, best-known cost, the route taken, and a step log. Students place tokens along edges to build a route through the graph while the on-screen 'bug' tracks and reports path cost, competing routes, and the final result. The interface is fully responsive, keyboard-focusable, and includes light/dark theming for accessibility.

Relevance to Module: The game externalizes the core mechanics of this module — vertices, edges, adjacency, and the order in which nodes are visited — by making students physically choose which neighbor to explore next. Because the graph is weighted and the readout records the route and running cost, it directly reinforces the idea that different traversal strategies (frontier-first versus go-deep) produce different visit orders and different outcomes. The visible route log mirrors the queue- and stack-driven behavior students will later encode in their own Graph class.

Pedagogical Purpose

This resource provides low-stakes, gamified practice for MO3: students repeatedly trace visit orders through a graph and can immediately compare their chosen route against the bug's 'best' route, turning abstract BFS/DFS trace exercises into an iterative feedback loop. The branching choices and route log also support MO5 by giving students concrete experience of when exploring broadly beats exploring deeply (and vice versa), which they can then justify in writing. Instructors can use it as a pre-coding warm-up before the MO4 implementation task, and as a discussion prompt for MO1 by asking students whether the modeled relationships are best represented as directed or undirected edges.

Added October 19, 2026