Files
mathmax/README.md
T
tiennm99 9d5d3f04a0 feat: 3 interactive demo pages + transforms/sieve/linear engines
Lessons:
- /hinh-hoc/dinh-ly-pythagoras (lớp 7) — drag right-angle vertex; "Chứng minh"
  button plays Euclid-style dissection-shear animation tweening two leg-squares
  into the hypotenuse-square. Respects prefers-reduced-motion.
- /so-hoc/sang-eratosthenes (lớp 6) — 10×10 grid; click 2/3/5/7 → ripple
  cross-out of multiples in 4 colors; roving tabindex; aria-live announces.
- /dai-so/duong-thang (lớp 7) — y = ax + b plot; 2 sliders + 2 draggable
  anchors bidirectionally bound via draggable.onChange + viewport clamping +
  rounded epsilon gate (no oscillation at any drag speed).

Engines:
- geom-engine/transforms.js — translate, rotate, shear, compose, applyToPolygon (13 tests)
- numtheory-engine/sieve.js — sieveUpTo, multiplesOf, isPrime (10 tests)
- algebra-engine/linear.js — lineFromPoints, yAt, linePoints (6 tests); new module bootstrapped

Glue:
- registry: insert 3 new lessons in topic+grade order
- tailwind: extend colors.pair to 4 entries (pair.4 = #5E60CE for prime 7)
- README: bump count 5→8, list new URLs, update architecture section
2026-05-15 20:35:22 +07:00

2.5 KiB

MathMax

Toán tương tác cho học sinh THCS Việt Nam (lớp 6-9). Số học, Đại số, Hình học qua kéo-thả và minh hoạ trực quan.

Status

8 bài đã ra mắt — số học, đại số, hình học đều có ít nhất hai bài.

  • Lớp 6 — Ước chung lớn nhất (Euclid): /so-hoc/uoc-chung-lon-nhat/
  • Lớp 6 — Sàng Eratosthenes: /so-hoc/sang-eratosthenes/
  • Lớp 7 — Hiệu hai bình phương: /dai-so/hieu-hai-binh-phuong/
  • Lớp 7 — Đồ thị y = ax + b: /dai-so/duong-thang/
  • Lớp 7 — Định lý Pythagoras: /hinh-hoc/dinh-ly-pythagoras/
  • Lớp 7 — Tam giác bằng nhau (SSS): /hinh-hoc/tam-giac-bang-nhau/
  • Lớp 8 — Tam giác đồng dạng: /hinh-hoc/tam-giac-dong-dang/
  • Lớp 9 — Góc nội tiếp: /hinh-hoc/goc-noi-tiep/

Develop

Yêu cầu: Node 24+, pnpm 11+.

pnpm install
pnpm dev          # http://localhost:5173/mathmax/
pnpm test         # Vitest (geom-engine unit tests)
pnpm check        # svelte-check + JSDoc strict
pnpm build        # Static output → build/
pnpm preview      # Serve build/

Deploy

Auto-deploy lên GitHub Pages từ main qua actions/deploy-pages@v4. Xem RUNBOOK.md để rollback / chuyển domain.

Live URL: https://tiennm99.github.io/mathmax/

Architecture

  • Static: SvelteKit + @sveltejs/adapter-static, paths.base = '/mathmax', output build/.
  • Styling: Tailwind 3 (PostCSS) + Be Vietnam Pro (woff2 qua @fontsource). Tick palette colors.pair.{1,2,3,4} được khai báo trong tailwind.config.js.
  • Language: JavaScript only (Svelte 5, JSDoc qua jsconfig.json với checkJs: true).
  • Math engines: src/lib/geom-engine/ (vec, triangle, circle, ticks, transforms), src/lib/numtheory-engine/ (gcd, lcm, gcdSteps, sieve), src/lib/algebra-engine/ (linear). Module thuần, không phụ thuộc DOM. Vitest unit tests đi kèm.
  • Math typography: src/lib/components/tex.svelte — wrapper KaTeX duy nhất. SSR qua renderToString, không cần JS phía client để hiển thị.
  • Lessons: mỗi bài là một +page.svelte; copy tiếng Việt colocate trong src/lib/lessons/<slug>/copy.vi.js.
  • Drag: Svelte action use:draggable (src/lib/actions/draggable.svelte.js) — Pointer Events + bàn phím mũi tên cho a11y.
  • i18n: Hiện chỉ có tiếng Việt. Site chrome ở src/lib/i18n/site.vi.js. English thêm sau bằng cách tạo *.en.js song song.

License

Apache-2.0. Xem LICENSE.