What is Subnetris?
Subnetris is a single-page IPv4 subnetting trainer built around one picture: the allocation as a horizontal block, its network number on the left edge in blue, its broadcast on the right edge in red, and its prefix in the middle. You cut the block by dragging inside it. Every cut is a halving, the parent prefix greys out above the bar, and the table underneath fills in exactly as the handout table does.
The lesson it exists to teach is one sentence:
A subnet is a block, and a block can only be cut in half. Everything else follows: sizes are powers of two, boundaries land where the binary says they land, and the two addresses you lose per subnet are the price of having a subnet at all.
Open Subnetris at ../index.html, or pick a guide below.
How it is built, and why that matters to you
Two decisions shape everything in these guides.
The tool cannot draw an illegal subnet. The model is a binary tree, so the only operation that exists is halving a block, and the only thing a bar can do is sit on a power-of-two boundary. That means Binary Law is not a rule the tool checks; it is a rule the tool is made of. When you point at an address that is not a boundary, the cut still lands on one, and the readout tells you which one and how many halvings would reach the address you actually wanted.
Every number is derived, never stored. A block's network number, broadcast, mask and usable count all come from its position in the tree. Nothing can drift out of step, and the table under the diagram is the same arithmetic the diagram is drawn from. If the table says a /26 holds 62 usable addresses, the block on screen is 62 usable addresses wide.
What you will do
- Cut a block. Drag inside it, click it, or point at it and press Enter. Every gesture is one halving: the bar lands on the midpoint of the block you cut, and the readout says what reaching a nearer boundary would cost.
- Read the table. One row per subnet in address order, with the network number and its prefix as one entry, the usable addresses, the broadcast, the host count with the N-2 rule applied, the mask in dotted decimal and the mask in binary.
- Watch the tax. One row under the table carries Total IPs and USABLE IPs side by side. The total never changes; the usable count falls by two every time you make a subnet. The gap between them is the whole cost of subnetting.
- Work the exercises. The lecture problems, the handout's five walkthrough tables, and the study-guide checks are all built in, and Check grades your answer against Bowie's Hierarchy of Subnetting.
- Practise by hand. Drill mode hides the numbers and asks you to fill them in.
Who uses it
- Students open an exercise or a code, cut the block, assign the networks, and press Check. The Student Guide walks that loop end to end.
- Faculty post one random code that gives every student the same problem, or edit the exercise file to add their own. There is no answer key to distribute, because the tool regenerates and grades everything in the browser.
- Maintainers work from the Maintainer Notes: the tree model, the cut primitive, the share-link grammar, the render geometry and the test harnesses.
Under the hood
Subnetris is one HTML page, one stylesheet and thirteen small vanilla-JavaScript modules under a single global namespace. No build step, no framework, no external resources and no network access of any kind. Double-clicking index.html runs it, and the exercise library falls back to a built-in copy when there is no server to fetch the CSV from.
It interoperates with the two tools the course already uses: a link from the ECT Visual Subnet Calculator opens here with its divisions and labels intact, and the menu opens the current plan back in the calculator.