✏️ Jack's Letters

Finger-trace all 26 lowercase letters in the correct stroke order

What this is

A handwriting game. Colouring a letter in is not writing it, so this checks formation: the right starting point, the right direction, the right stroke order — the things a child is actually marked on when learning to write.

Each of the 26 lowercase letters is drawn as one to three strokes over school writing guides (ascender line, x-height, baseline, descender). A green dot and an arrow show where each stroke starts and which way it goes. The finger has to follow the line; lifting it half way starts that stroke again.

The letters are taught in movement families rather than alphabetically, which is how handwriting schemes sequence them — everything that starts with the same anticlockwise curve is learned together, then everything that goes straight down, and so on.

🎮 How to play

1️⃣   Find the green dot 🟢

Every letter starts in one particular place. The arrow shows the direction.

2️⃣   Slide, don't lift 👆

Follow the grey line with one finger. Lift it and that stroke resets.

3️⃣   The stroke turns green ✅

On to the next one. Some letters have two or three.

⚽   You wrote it!

The whole letter fills in, and it turns green in the alphabet strip at the top.

🔤 The four families

⭕ Curve round first	c   a   d   g   o   q   s   e   f
⬇️ Straight down	i   l   t   u   j   y
🌉 Down, then over the bridge	r   n   m   h   b   p   k
⚡ Zig-zag	v   w   x   z

Any letter can be tapped in the strip to jump straight to it — useful when a child wants to write their own initial first.

🎯 What it practises

• ✍️   Starting each letter in the correct place
• 🔄   Moving in the correct direction, especially the anticlockwise family
• 📏   Letter height against the baseline and x-height

🎯 Accuracy

Getting inside the tolerance is a pass; hugging the line is better than a pass. While the finger moves, every sample is scored by how far it sits from the line of the stroke being traced — full marks up to 3 board units, falling away to nothing at TOL — and the meter under the board shows the running mean, red at 0% and green at 100%. Samples of a stroke that has to be started again are thrown away; samples of finished strokes count.

Accuracy	What happens
95% or more	"Super neat! Bonus football!" — a bonus ⚽ on top of the usual one, so a neat letter is worth two
75–89%	"Nice and tidy!"
under 75%	"Good. Try to stay on the line."

The best score per letter is kept in localStorage (jackLettersBest), and a letter with a best of 90% or more keeps a small ⭐ on its chip in the alphabet strip. The reset button clears it along with everything else.

⚙️ How the checking works

Each stroke is an SVG path in a 100 × 140 box. About twenty checkpoints are sampled along it with SVGPathElement.getPointAtLength(), and the finger must reach them in order, within a tolerance radius. Passing several checkpoints in one fast swipe is fine; skipping the middle of a stroke is not. Ink is drawn on a <canvas> above the SVG using pointer events with touch-action: none, so a finger draws instead of scrolling the page.

TOL (17 board units, near the top of the script) is the single knob to turn if it feels too fussy or too forgiving for a particular child.

🎈 The other games

Game	What it is
📖 Jack's Words	Hear a word, build it from letter tiles, then read it in a sentence	▶ play
🥅 Jack's Match	Tell real words from decodable nonsense words, then spell by ear	▶ play
✏️ Jack's Letters	Finger-trace all 26 lowercase letters in the correct stroke order	▶ play 👈 this one
🔢 Jack's Numbers	Count, add and subtract with footballs — to 10, then to 20	▶ play
💯 Jack's Big Numbers	Tens and ones, adding and taking away all the way to 100	▶ play
🍎 Jack's Apples	Trace 1–20, then fill the missing numbers into the apple grid	▶ play
👀 Jack's Sight Words	The twenty most common English words on big cards — tap one and hear it read out	▶ play
♟️ Jackies Schach	Full FIDE rules with a coach that marks the safe squares (German)	▶ play

All eight on one start page: jackbenn.ing

🛠 Built like this

Every game in this organisation is one self-contained index.html — no build step, no framework, no package manager, no analytics, and no network calls once the page has loaded. That is a deliberate constraint: a game a child depends on should still work in five years, and a parent should be able to read the whole thing in one sitting.

• Speech — the browser's Web Speech API, preferring a British English voice. It always waits for a tap first, because Chrome and iOS block audio without user activation.
• Progress — kept in localStorage on the device. Nothing is collected, sent or stored anywhere else.
• Made for an iPad mini in either orientation: finger-sized targets, no hover-only interactions, prefers-reduced-motion respected.

Run it locally:

python3 -m http.server 8000

The start page at jackbenn.ing is built from google814/Jack, which is the source of truth. The repos in this organisation are copies kept in step by tools/sync-game-repos.sh in that repo, so each game also has its own page and its own link.