Le livre de la restauration
Baghdad, 820 AD: learn quadratic equations alongside al-Khwarizmi
A web app for understanding where the quadratic formula comes from, instead of memorising it. The student becomes the apprentice of al-Khwarizmi, whose book al-jabr gave algebra its name. In Story mode, seven chapters in the round city of Baghdad: you cut the rectangle of "ten roots", slide it against the square, complete the corner, then discover the ± the master refused, al-jabr, the "impossible question" (Δ < 0), the parabolic fountains of the Banu Musa brothers and, before the caliph, the master's sentence turning into x = (−b ± √Δ) / 2a. In Course mode, the same moves in twelve plain steps, ready to project in class. Three games round it off: the caliph's questions (how many solutions?), the courtyard to tile (a tile puzzle) and the fountains (tune a, b, c to hit the basins). The colour code follows the pigments of Abbasid ceramics: cobalt blue for x², amber for the roots, copper green for the corner, manganese purple for Δ.
What shines
- A seven-chapter Story mode true to the sources: the 39-dirham problem, the words mal and jidhr, the roots 3 and 7, the "impossible question" and the refusal of negatives all come from al-Khwarizmi's actual book
- The same completing-the-square diagram drives both the numeric example and the general proof, with one colour code shared by the geometry, the formulas and the parabola
- An isolated maths engine with exact fractions: exact roots with radicals, forgiving input (5/2, 2,5, √5), diagnosis of typical mistakes (sign of b, missing ±, missing 2a, wrong Δ) and adaptivity
- A kind pedagogy: graded hints, Sifr the cat who comes to point at the clue after three mistakes, then the master who writes the answer
- Offline PWA, a projection mode for the classroom, nearly a hundred Vitest tests and a Playwright run that plays all seven chapters
How to use it
Enter your first name, then choose the Story (seven chapters on the map of Baghdad) or the Course. Drag the strips against the square, tap the corner to complete it, answer the master; "Continuer" or the Enter key moves the story along
Made with
- Svelte 5 (runes)
- TypeScript
- Vite
- KaTeX
- SVG (diagrammes manipulables, carte, scène des fontaines)
- Pointer Events (glisser-déposer au doigt et à la souris)
- vite-plugin-pwa (installable, hors ligne)
- localStorage
- Fontsource (Alegreya, Alegreya Sans, Reem Kufi)
- Vitest
- Playwright (parcours de bout en bout)
- GitHub Actions et GitHub Pages