Fraction Shape Puzzle for beginners is a five-card browser game that turns each target fraction into one concrete task: shade the correct number of equal cells. Each card displays a rectangular shape divided into equal cells, a target fraction, and a current shaded fraction. The shape’s total cell count is the denominator of the current fraction; its shaded-cell count is the numerator. You can select cells with a pointer or touch screen, or move the current cell with the Arrow keys and toggle it with Space. After choosing a shading, press “Check shape” or C. The game compares two integer cross products rather than rounded decimals, so approval means the selected cells represent the same share as the target. For a beginner, this removes guesswork: read the target, identify the number of equal cells, shade enough cells to match the target share, and confirm the result. Each approved card adds 200 points, and approving all five fixed cards produces exactly 1,000 points. The Fraction Shape Puzzle opens the next fixed shape after a correct check, giving you a short, repeatable route from an empty grid to a completed run.

What Each Beginner Card Shows
The first beginner mistake is to assume that the denominator printed in the target must equal the number of cells in the rectangle. Those numbers can differ. The rectangle represents the whole, every visible cell represents one equal part, and the count of selected cells determines the current shaded fraction. The goal is equivalence with the target, not visual duplication of its denominator. The five cards deliberately use different visual denominators, so each card requires a fresh reading rather than the same answer repeated on a new outline.
This equal-part model follows the visual approach described in OpenStax Prealgebra’s guide to visualizing fractions. Here are the five fixed targets and their required shade counts:
| Card | Target fraction | Equal cells in the shape | Cells to shade |
|---|---|---|---|
| 1 | 1/2 | 4 | 2 |
| 2 | 2/3 | 6 | 4 |
| 3 | 3/4 | 8 | 6 |
| 4 | 2/5 | 10 | 4 |
| 5 | 5/6 | 12 | 10 |
Keep this reference visible during a first playthrough. Once the mapping feels familiar, cover the final column and work from the target and equal-cell count. The cells do not need to form a special picture: the check evaluates the number of shaded cells compared with the total number of equal parts.
How to Shade and Check All Five Cards
Follow this order for a clean beginner run. It solves all five fixed cards without changing a target or the number of equal parts.
- Begin with a fresh grid. A new run or restart opens Card 1. Read its target of one half, notice that the rectangle has four equal cells, and confirm that no cells are shaded yet.
- Choose mouse, touch, or keyboard. With a pointer or touch screen, select the visible cell buttons. For keyboard play, use the Arrow keys to move the current cell and Space to toggle its shading.
- Shade the required count rather than a guessed pattern. For the complete route, shade 2 of 4 cells on Card 1, 4 of 6 on Card 2, 6 of 8 on Card 3, 4 of 10 on Card 4, and 10 of 12 on Card 5.
- Run one check. Press the “Check shape” button or use C. After a valid check, the interface shows the target, current shaded fraction, both cross products, level progress, distinct errors, feedback, and score.
- Continue after approval. A correct card awards 200 points and opens the next fixed shape. If the shading does not match, use the visible information to locate the error before submitting another pattern.
- Read every new card from scratch. Do not carry the previous card’s numerator or denominator forward. Each rectangle has a different number of equal cells, so the target must be matched against the new total.
- Complete all five approvals. A full run produces exactly 1,000 points. Once the puzzle is complete, cell toggles, cursor movement, and further checks are frozen.
The target and current fraction remain visible throughout play, while progress and score show how far you have advanced. For a first attempt, the reference table is useful for avoiding a simple counting error; for later attempts, work from the fraction itself and use the check as verification rather than as a substitute for reading the grid.
Why the Fraction Check Is Exact
The game does not ask you to judge decimal equality. Its test is shadedCount × targetDenominator = targetNumerator × partCount. Because the comparison uses integers, the implementation avoids floating-point rounding and tests the same underlying fraction rule on every card.
Worked example: On Card 1, a two-cell shading on a four-cell shape gives 2 × 2 = 1 × 4. Both cross products are 4, so two shaded cells out of four represent the target share of one half.
Equal cross products mean that the current and target fractions describe the same share of the whole; unequal products mean they do not. This equivalence test is supported by Mathematics LibreTexts’ explanation of equivalent fractions and cross products. The cited sources support fraction visualization and equivalence; they do not endorse the game’s cards, scoring, or mistake rules.
Choosing Mouse, Touch, or Keyboard
Both control paths operate on the same visible cells and use the same exact check. The pointer route is straightforward: select a cell to toggle it, adjust the shading, and press “Check shape.” Every cell is at least 44 pixels tall, which gives touch selections a clear target.
- Pointer or touch: Use the visible cell buttons to add or remove shading.
- Arrow keys: Move the current cell around the grid.
- Space: Toggle shading on the current cell.
- C: Check the current shape without using the pointer.
There is no timer, so score does not depend on speed. All game state stays in the browser, with no account, upload, API, model call, or assessment service. The standard Boss Key also remains available through the shared game shell.
Recovering From a Mistake
Checking an empty shape is treated as incomplete rather than wrong. The game shows an incomplete message, and that check does not spend an error or change the score. The guide on why an empty Fraction Shape Puzzle grid is not counted as a mistake explains this edge case in detail.
A nonempty shading that fails to match creates one recoverable mistake. The game records the card and shaded-cell pattern as an error signature, so its mistake handling has three important rules:
- One wrong nonempty shading: The first nonmatching set creates one recoverable mistake.
- The identical wrong shading: Rechecking the same card with the same shaded-cell mask is deduplicated and does not create another distinct mistake.
- A different wrong shading: A different nonmatching mask creates the second distinct mistake and closes the run.
After a first failed check, re-read the target and current fraction before changing the pattern. Repeatedly checking the same mask is safe from the duplicate-error rule, but submitting another arbitrary wrong mask can close the run. Completion and deadlock both freeze cell toggles, cursor movement, and checks. At that point, use Restart to restore the first card, an empty shape, zero score, and zero mistakes.
What a Complete Practice Session Teaches
After each approval, explain the match aloud in terms of the model: the denominator is the number of equal cells in the whole, while the numerator is the number of shaded cells. Then compare that current fraction with the target. This turns the score screen into a quick check of the underlying fraction idea rather than just a record of finished cards.
Each approved card contributes 200 points, and the five-card route ends at exactly 1,000 points. Those are fixed progress rewards, not a measure of ability. Fraction Shape Puzzle is educational entertainment, not a graded test, placement decision, tutoring guarantee, or cognitive assessment. Its value for a beginner comes from practicing equal-part visualization, careful counting, and exact fraction comparison in a deterministic browser game.
Related reading: Gear Rotation Puzzle Solution: Place Every Gear Correctly.