Feature Checklist
Extracts ~9 structural features (start at origin, peak in left half, trough in right half, peak before trough, symmetry, smoothness…) and reports which ones passed. Diagnostic — tells you what's wrong.
Sketch y = sin x from 0 to 2π
Grading sandbox
Six ways to grade a sketch
Same task — sketch y = sin x from 0 to 2π — graded six different ways. Try drawing the same shape in each canvas and pressing Show answer to see how each approach reacts. Pattern-first graders are kinder to imperfect drawings that still capture the shape.
Critical-Point Pattern
Finds prominent peaks, troughs, and zero-crossings, then checks the signature [zero, peak, zero, trough, zero] in order. Most permissive on amplitude and offset.
Sketch y = sin x from 0 to 2π
Slope-Sign Pattern
Samples 8 checkpoints and compares slope sign (up / flat / down) to truth's + + 0 − − − 0 +. Tests "do you know when it's increasing?" without caring about magnitude.
Sketch y = sin x from 0 to 2π
Normalized Shape Distance
Rescales the sketch to span [0, 2π] horizontally and [−1, 1] vertically, then computes RMS error vs. sin x. Forgives amplitude and offset, still penalizes wiggles.
Sketch y = sin x from 0 to 2π
Hybrid recommended
Feature checklist (A) drives the headline. Normalized shape distance (D) is a secondary "polish" score. Most-violated feature shows up as a coaching tip. Stars when both pass.
Sketch y = sin x from 0 to 2π
Fairway Band avoid
Draws a tolerance ribbon around y = sin x. Score = % of points inside the band. Sounds forgiving, but it's still pure position-matching with looser pixels.
Sketch y = sin x from 0 to 2π
Smooth Then Grade step 1: smoothing
Cleans up finger-drawing roughness while preserving the overall shape, so grading can run on the cleaned curve instead of raw mouse jitter. Right now: smoothing only — grading is intentionally not yet wired up.
Sketch y = sin x from 0 to 2π
Interaction Ideas
Options 01 – 29Algebra, calculus, and playful exercise formats. Live demos — drag the gold handles, scrub the sliders.
Trig Mechanics
Options 30 – 46Duolingo-style interaction primitives for trig. Tap, drag, sketch, and rotate.
How to read this: Each card shows one interaction primitive (the verb the student performs).
The same primitive can be reused across many topics — these demos pick a single illustrative content
example, but each mechanic is meant to apply across the full diagram catalog.
30Place the point
Tap on a graph to drop a marker at a target location. Snaps to the constraint (here: the unit circle) on release.
Drag the dot to where θ = 5π/6 lands on the unit circle
31Tune to match a ghost
A target curve appears in faded gray. Adjust parameters to overlay your curve on top.
Match the ghost: y = A sin(Bx + C) + D
32Drag the handles, not sliders
No UI chrome — handles live on the curve itself. Pull the crest for amplitude, drag a zero-crossing for period.
Drag the orange handles to reshape the wave
y = 1.00 sin(1.00 x)
33Sketch with your finger
Freehand-draw the curve; the system reveals the analytical answer and scores how close you got.
Sketch y = sin x from 0 to 2π
34Build from Lego pieces
Pre-cut graph fragments snap together. Here: assemble one period of y = sin x from four arc pieces.
Drag arcs into the slots in order
35Animate-and-mark
Scrub a parameter slider; mark every moment that satisfies a condition.
Drop a pin at every θ where sin θ = ½
sin θ = 0.00
36Label drag
Drag word-tiles onto the right parts of a diagram. Many slots, many labels — much higher fidelity than multiple choice.
Label the sides relative to angle θ
opposite
adjacent
hypotenuse
37Decompose into components
Break a vector into its i and j components. Drag the two component arrows so they tip-to-tail back to v.
Decompose v = ⟨4, 3⟩ into horizontal & vertical components
38Rotate as a gesture
Apply a transformation by literally performing it. Rotate the vector by dragging its tip around the origin.
Rotate the vector to 120°
39Sweep a region
Use bracket markers to highlight an interval. Restricting domains, shading sectors, marking solutions all reuse this.
Drag the brackets to restrict sin x to [-π/2, π/2]
40Pin-and-string locus
Physical-metaphor exercise. Move the pencil; it only deposits a dot when the sum of distances to the two foci stays at L.
Move the pencil — leave a trail where d₁ + d₂ ≈ L
d₁ + d₂ = 0.0 / target L = 280
41Equation puzzle
The "graph" here is the equation itself. Drag steps into order to prove an identity.
Prove sin²θ + cos²θ = 1 by ordering the steps
42Hot-cold guess
Drop a marker; color shifts toward green as you get closer. Removes the "I'll just guess" failure mode.
Where on the number line is 4π/3?
43Constraint-driven construction
Drag freely while the system enforces a constraint in real time. Wrong is impossible — only "more or less efficient."
Drag vertex C — angle B is locked at 90°. Make it a 3-4-5 triangle.
44Speed round
Same primitive (place-the-point), but with timer and streak bonuses. Builds fluency once the concept is understood.
Press start — drop the angle on the unit circle as fast as you can
⏱ 15s
⭐ 0
🔥 0
45Mistake-do-over
When you get a multi-part answer partially right, the correct parts lock with a checkmark; only the wrong parts re-open.
A=2 ✓ locked. C=π/4 ✓ locked. Fix only B and D.
46Parameterize the parabola
Three free dots, freely draggable in 2D. Three colinear dots → straight line. Move one off the axis and the curve bends into a parabola passing through all three. Goal: align the dots so the blue curve overlays the gray ghost.
Drag the dots so the blue curve matches the ghost
y = ?