Projections

Projections

A technical-drawing practice app at /Projections/. Every problem is an object built from cubes, and there are two kinds of problem:

• Draw the views: students see an isometric drawing and draw the object's front, right side and top views.
• Build from the views: students see the three views and build the object from cubes.

The three views use the standard US (third-angle) layout: the top view sits directly above the front view, and the right side view sits to the right of the front view. All three are answered and checked together.

A How to play panel below the game explains the controls for the current kind of problem. It starts open; if a student collapses it, it stays collapsed on that device. When a tier brings in something new (hidden lines, build problems, views that must line up), the panel opens once with a short note about it.

---

Drawing the views

Each view has its own grid.

• Click a square to shade it. The outline of the shaded area draws itself.
• Click a line to add or remove it. This is how students draw lines inside the shape, where one surface steps in front of another.
• Hover over a line and press H to make it a hidden (dashed) line. Press H again to remove it. On a touchscreen, turn on Hidden lines and tap the line.
• Clear resets one view; Submit checks all three.

Each view is checked for its shaded squares and its lines. Where a view sits on its grid doesn't matter until Tier 7, when the three views must line up with each other the way they would on a real drawing.

If an answer is wrong, each view gets a ✓ or ✗. The correct marks the student missed are shown in gold and their extra marks in red, placed where they best match the student's drawing. They stay until the student presses Next.

Building from the views

The isometric panel becomes a builder. On wide screens the three views are on the left and the builder on the right. A blue FRONT label marks the side the front view looks at.

With the mouse:

• Click a floor square to put a cube there, or click a cube's face to add a cube against that face. A see-through cube shows where it will go.
• Shift-click or right-click a cube to remove it. On a touchscreen, turn on Remove mode and tap.

With the keyboard, a blue wire cube is the cursor:

• The arrow keys move it along the drawing's lines (↑ back-right, ↓ front-left, → front-right, ← back-left). + and − move it up and down a layer.
• Space adds or removes the cube at the cursor; Delete removes it.
• Q and E turn the drawing a quarter turn to see it from another corner. Turning only changes the view, not the build.
• To show where the cursor is, a tinted plane marks its layer, cubes above that layer fade, and a dark square shows what it sits over.

Every button beside the builder does the same as its key.

Every cube must rest on the floor or connect to one that does (an overhang attached at the side is fine). Cubes that aren't connected turn red, and the student can't submit until they're fixed.

Any build whose three views match exactly is correct, including its hidden lines, and it can sit anywhere in the box. If a build is wrong, the grids switch to the build's own views with the differences marked in gold and red, and Show a correct build shows one answer in the builder.

Tiers

Every student starts at Tier 1. Shapes get bigger and new rules appear as they move up.

Tier	Problems	Largest shape (W × D × H)	Cubes	Rules
1	draw	2 × 2 × 2	3–4	every cube sits on the floor or on another cube; no hidden lines
2	draw	3 × 3 × 2	4–8	same as Tier 1
3	build	3 × 3 × 2	4–8	same as Tier 1
4	draw	3 × 3 × 3	6–12	overhangs allowed; hidden lines shown but not graded
5	build	3 × 3 × 3	6–12	overhangs; hidden lines shown and must match
6	draw	4 × 4 × 3	8–16	hidden lines graded
7	mixed	4 × 4 × 4	10–20	hidden lines graded; drawn views must line up
8	mixed	5 × 5 × 4	12–28	same as Tier 7

Mixed means each problem is a drawing or a build at random, half and half.

Hidden lines in the provided drawings:

• The views show every hidden line.
• The isometric drawing only shows hidden lines for a cube that is completely hidden, since that's the only cube the drawing couldn't show otherwise. These dashes are lighter than the visible lines.
• Tiers 1–3 never hide a cube completely. Tiers 4–5 also avoid a hidden cube sitting exactly behind another one, whose dashes would trace that cube's outline.
• A light blue grid marks the empty floor squares, so students can see where the object sits.

Scoring

An incorrect answer scores 0. A correct answer scores:

points = tier base × speed

• Tier base: 25 at Tier 1, plus 25 for each tier above that (Tier 8 = 200).

• Speed: each tier has a par time. Answering at or under par earns full points. Slower answers earn par ÷ time (twice par earns half), never less than 25%.

  Tier	1	2	3	4	5	6	7	8
  Par	1:00	1:13	1:27	1:40	1:54	2:07	2:21	2:34

The timer runs on the server, from when the problem was first handed out until the answer is submitted. Reloading the page brings back the same problem, with its timer still running, so students can't skip a hard shape or reset the clock. A problem left unanswered for 2 hours is replaced.

Moving between tiers

Tier moves use the student's last 10 answers in their current tier. As in the Ruler Game, each answer also counts as a percent of the points it could have earned.

• Move up when at least 90% of those 10 answers are correct and they average at least 60% of possible points.
• Or move up on a streak: 5 correct in a row that average at least 60% of possible points. This skips the 90% check and doesn't need 10 answers. A wrong answer or a tier change resets the streak.
• Move down when the last 10 answers average below 30% of possible points.

A student's tier is the same across all their classes. The Tier Progress bar below the game shows both routes up, for example "Answers 6/10 · Correct 83% / 90% · Points 71% / 60% · or Streak 3/5", and fills to whichever route is closer.

Play Locally (no sign-in) lets anyone pick a practice tier. Nothing is saved.

Problem codes

Every problem shows a short problem code (for example 333-mjom) with a Copy button. Students can include it when reporting a problem. In local play, opening /Projections/?shape=CODE loads that exact shape, and &tier=N picks the tier. Signed-in play ignores the link, so it can't be used to choose problems.

Daily requirement

Check Projections under Assignment Requirements on the class page and set Projections Correct / Day. Each correct answer counts once toward the day, however long it took. See Daily Practice & Assignments.

Charts

Projections charts appear below the Ruler Game charts:

Where	Charts
All Data tab and a class's page	score over time, accuracy by tier (drawing and building side by side), how many students are on each tier
Student Lookup	score over time, accuracy by tier, highest tier played each day
Student My Progress	score over time, accuracy by tier, highest tier played each day (plus their current tier)

For developers

The rules live in js/projection-core.js, which both the page (js/projection.js) and the server (server/projection.js) load. It holds:

• the tier table and tuning values (CONFIG);
• view and isometric-drawing geometry;
• grading;
• the shape generator;
• problem codes.

Key points:

• Coordinates: x runs right, y runs away from the viewer (0 = front), and z runs up. A cube [x, y, z] is named by its front-left-bottom corner.
• How edges are found: an edge appears wherever the four cube positions around it aren't a flat surface.
• Visible or hidden: an edge is visible when a point just beside it, on either side, has a clear line of sight to the viewer. Where a visible and a hidden line overlap, the visible one wins.
• The server hands out every problem and keeps one open problem per student (projection_problems). Build problems are sent as the three views only; the shape comes back once the student has answered.
• CONFIG.BUILD_ENABLED: set it to false to serve only drawing problems.
• Changing the score formula: bump CONFIG.SCORE_VERSION so older answers are re-scored at startup.
• Tests: node tools/test-projection-core.js.

Tier movement, the progress bar, the How to play panel and the chart configs are shared with the Ruler Game. See Architecture.

See Database Schema and API Reference for storage and endpoints.