A fraction shapes game is a browser puzzle that converts equal-part rectangles into a fraction-equivalence test: the player reads a target fraction, shades a count of cells, and the game verifies the match by cross products rather than decimal rounding. The Fraction Shape Puzzle runs entirely in the browser and uses five fixed cards on equal-part grids of 4, 6, 8, 10, and 12 cells. The target fractions are 1/2, 2/3, 3/4, 2/5, and 5/6, and the verified shaded answers are 2, 4, 6, 4, and 10 cells respectively. Each approved card awards exactly 200 points, so 200 x 5 = 1,000 points across the five approvals, producing a reproducible 1,000-point finish. The same activity is reachable with a pointer, a touch screen, or a physical keyboard using Arrow keys, Space, and C. Independent tests restate all five part counts, all five target fractions, all five shaded answers, and eight literal cross-product vectors, and also cover empty submissions, zero denominators, repeated wrong masks, second distinct wrong masks, and the terminal freeze on completion or deadlock.
The Equal-Part Visual Model
Each card displays a rectangle divided into equal cells, and the meaning of the fraction follows the standard visual model used in school textbooks: the denominator counts the equal parts that make up the whole, and the numerator counts the parts the player shades. OpenStax Prealgebra's chapter on visualizing fractions describes exactly this construction, with the denominator fixing the grid and the numerator selecting the shaded cells. Because the grids are equal-part rectangles, the same model handles denominators of 4, 6, 8, 10, and 12 without any visual fudging, and the player can read the numerator and denominator straight off the cell counts.
The game is deliberate about keeping each denominator different. The first card uses 4 equal cells, the second uses 6, the third uses 8, the fourth uses 10, and the fifth uses 12. Different denominators are the only way to test whether the player can recognize the same share across different shapes, which is the heart of the equivalence rule the game applies. A student who memorizes a single layout cannot pass card 3 without recognizing that 6 out of 8 is the same share as 3 out of 4.
How the Cross-Product Check Works
Two shaded counts can describe the same share of a whole. Two cells out of four and one cell out of two describe the same share; four cells out of six and two cells out of three describe the same share; six cells out of eight and three cells out of four describe the same share. The Fraction Shape Puzzle does not compare decimals and never rounds a floating-point result. It compares two integers, shadedCount times targetDenominator against targetNumerator times partCount, and accepts the answer only when both products are equal.
An independent LibreTexts prealgebra chapter on equivalent fractions and cross products describes the same test, and the game applies it directly. The same cross-product check also makes the implementation safer at the edges: a zero target denominator, an impossible part count, or an overflow boundary is rejected before the comparison, so the game never produces a misleading result and both cross products stay small enough for the player to verify by hand.
The Five Fixed Cards
The puzzle deliberately uses different visual denominators so the player cannot rely on a single memorized layout. The five cards, the targets, the verified shaded answers, and the literal cross products are listed below. The values in the last two columns are exactly the products the game computes when you press Check shape.
| Card | Equal cells | Target | Shaded | Shaded x target denom | Target num x cells |
|---|---|---|---|---|---|
| 1 | 4 | 1/2 | 2 | 2 x 2 = 4 | 1 x 4 = 4 |
| 2 | 6 | 2/3 | 4 | 4 x 3 = 12 | 2 x 6 = 12 |
| 3 | 8 | 3/4 | 6 | 6 x 4 = 24 | 3 x 8 = 24 |
| 4 | 10 | 2/5 | 4 | 4 x 5 = 20 | 2 x 10 = 20 |
| 5 | 12 | 5/6 | 10 | 10 x 6 = 60 | 5 x 12 = 60 |
The same five cards are always presented in the same order, and any subset of the verified shaded count passes the same cross-product check. The cross-product equality is what makes the pattern correct, not the specific cells that the player picks, which is why the game can offer full keyboard and pointer support without ambiguity. A player who shades the first two cells on card 1, cells 2 through 5 on card 2, or cells 3 through 8 on card 3 will pass the same way as a player who picked a different subset of the same size, as long as the cross products still match.
How to Play Fraction Shape Puzzle
Each card follows the same three-step pattern. The steps below mirror the verified operating steps for the game and use the same cross-product rule the implementation relies on internally.
- Read the target fraction and the equal cell count. Each card displays a target fraction and a rectangle divided into equal cells. The denominator of the target tells you what share of the whole you are matching, and the cell count tells you how the denominator is realized visually. Note the target before you start shading so the next step has a fixed goal.
- Shade cells with the pointer, a touch screen, or Arrow keys and Space. Click a cell to toggle its shading, or move the active cell with the Arrow keys and press Space to add or remove shading. Choose a number of cells that, when compared with the target by cross products, produces equal products. A quick mental shortcut is to multiply the target numerator by the part count and divide by the target denominator, then pick any subset of that size.
- Press Check shape to verify. The game computes shadedCount times targetDenominator and targetNumerator times partCount, accepts the answer only when both products match, and shows both cross products on the interface. A correct check awards 200 points and opens the next card; an incorrect nonempty shading creates one recoverable mistake, and re-checking the same wrong mask is deduplicated so it does not count twice.
Repeat the three steps for cards 2 through 5. After the fifth approval, the run ends with the 1,000-point total shown above, the cell toggles freeze, and Restart returns the game to card 1 with an empty shape, zero score, and zero mistakes.
Scoring, Mistakes, and the Two-Mistake Rule
Scoring is fixed and fully auditable. Each correct card adds 200 points to the visible score, and the five cards together produce 200 x 5 = 1,000 points, which is the only reachable total on a clean run. The game tracks three internal counters: the current card, the cumulative score, and the number of distinct mistakes. A mistake is a nonempty shaded pattern whose cross products do not match the target. Re-checking the same wrong mask on the same card is deduplicated, so the same wrong answer cannot burn two mistakes and the same wrong pattern is treated as a single recoverable error.
A different wrong shading, however, creates the second distinct mistake and ends the run. Unknown, negative, out-of-range, or fractional cell indexes are atomic no-ops, so a stray keyboard event never corrupts the state and never burns a mistake. A zero target denominator, an impossible part count, or an unsafe cross-product boundary is rejected before the comparison runs, which keeps the visible cross products inside the integer range the player can verify by hand and never produces a misleading pass.
An empty shape is treated as incomplete and never counts as a mistake. The interface shows an incomplete message instead of penalizing the player, so it is safe to press Check shape on a blank grid to read the cross-product feedback and to see which fields the game is computing. On completion, on a second distinct wrong mask, or on any deadlock condition, the cell toggles, the cursor, and the Check shape button freeze. Restart returns the run to card 1 with an empty shape, zero score, and zero mistakes, and the standard Boss Key remains available through the shared game shell.
Keyboard and Pointer Controls
The game accepts a pointer, a touch screen, and a physical keyboard without changing any rule. The visible cell buttons toggle on click or tap, and every cell is at least 44 pixels tall so the touch targets stay within the recommended size for browser game controls. Keyboard players move the active cell with the Arrow keys, press Space to toggle the shading of the current cell, and press C to run the cross-product check, with the same arrow keys, Space, and C binding on every card.
Both input paths reach the same deterministic check, the same mistake counter, and the same scoring path. The current cell, the visible cross products, the level progress, the distinct error count, the feedback message, and the score are all on the same screen, so the player can read the result of every check without opening a separate panel. Because the check itself is identical for pointer and keyboard input, players can mix the two without ever triggering a different rule.
Sources for the Fraction Model and Equivalence
The visual model used on each card is the same model described in OpenStax Prealgebra, Section 4.1, Visualize Fractions, where the denominator counts equal parts in the whole and the numerator counts the parts the learner selects. The cross-product equivalence test used by the Check shape button is the test described in the LibreTexts prealgebra chapter on equivalent fractions and cross products, and the game applies it directly without rounding and without floating-point division. The two cited sources support the fraction visualization and the equivalence rule only; they do not endorse the specific cards, the 200-point awards, the mistake counters, or the terminal-freeze rules in the Fraction Shape Puzzle itself.