Kitchen Table Maths Lab

Interactive maths tabs for a 12-year-old, each with something to play with and self-checking challenges underneath:

• Circles (test prep): parts of a circle, circumference from d and r with the calculator pi key; going deeper: chord, arc, sector, segment, tangent, working back from C
• Fractions: bar models, comparing, equivalent fractions
• Primes: Sieve of Eratosthenes, factor trees, prime-or-not
• Negatives: number line walks, quick-fire arithmetic
• Balance: solving linear equations on a pan scale
• Angles: drag to make angles, estimate unlabelled ones
• Area: fixed-perimeter, maximum-area fence puzzle
• Patterns: next term, gaps, make-your-own linear rule

The page is plain HTML/CSS/JS, rendered with Quarto and deployed to GitHub Pages by .github/workflows/publish.yml on every push to main.

Deep-link to a tab with its id, e.g. #primes, #algebra, #angles.

Layout

index.qmd          includes, in tab order
_head.html         fonts + all CSS (colour tokens at the top, light and dark)
_core.qmd          header, score bar, shared JS helpers ($, rnd, pick, el, txt, css, mark)
topics/*.qmd       one topic each: a <section class="pane"> plus its own <script>
_footer.qmd        builds the tab strip from every section.pane, theme redraw

Adding a topic

1. Open a "Topic from school" issue and paste the requirements as given.
2. Copy topics/circles.qmd to topics/<name>.qmd. Give the section a unique id, a data-label (tab text) and optionally data-badge (e.g. Test).
3. Add {{< include topics/<name>.qmd >}} to index.qmd where it should sit.
4. Call mark(feedbackId, correct, message) for anything scored, and push any SVG draw function onto ML_REDRAW so it follows light/dark changes.

Local preview

quarto preview