Math Lab

A collection of interactive web-based math visualization tools organized by subject.

Structure

maths/
├── index.html                          # Main hub page
├── algebra/
│   ├── index.html                     # Algebra hub
│   └── quadratics/                    # Quadratics topic (8 tools)
├── geometry/                           # Coming soon
└── calculus/                           # Coming soon

Subjects

Algebra — Equations, expressions, and algebraic structures

Quadratics

Quadratic Graph Studio

Interactive graphing of quadratic equations (y = ax² + bx + c) with real-time visualization, animation, and analysis.

• Adjust coefficients via sliders or text input (supports fractions)
• Real-time parabola rendering on HTML5 Canvas
• Vertex, discriminant, and root calculations
• Auto-zoom, hover crosshair, and axis of symmetry
• Export to PNG, SVG, or copy equation to clipboard
• Quick presets for common equations

Stack: Vanilla JavaScript, HTML5 Canvas, CSS3

Quadratic Inequality Solver & Grapher

Solve and graph quadratic inequalities (ax² + bx + c ⋚ 0) with a guided visual walkthrough.

• Enter coefficients and choose inequality type, or pick from five presets
• 7-step walkthrough: discriminant, roots, parabola, sign analysis, solution
• SVG parabola graph with progressive reveal and region sign labels
• Number line with interval signs and highlighted solution segments
• Solution in interval notation, set-builder notation, and plain English
• Magnify graph in a popup window, export as SVG or PNG

Stack: React 18, Babel standalone, SVG

Quadratic Inequality Regions

Graph two-variable quadratic inequalities (y ⋚ ax² + bx + c) and visualize the solution region.

• Enter coefficients and choose inequality type (y <, y ≤, y >, y ≥)
• Interactive graph with shaded solution region (above or below parabola)
• Boundary line: dashed for strict inequalities, solid for non-strict
• Vertex and x-intercept markers with coordinates
• Pick from five example presets
• Export graph as SVG or PNG, magnify in popup window
• URL parameters for sharing specific examples

Stack: React 18, Babel standalone, SVG

Parabola Transformations

Interactive exploration of how vertex form parameters transform the parent parabola y = x².

• Adjust a, h, k parameters with smooth sliders
• Real-time visualization: parent function (dashed gray) vs. transformed (solid orange)
• Shows both vertex form y = a(x − h)² + k and standard form
• Detailed transformation effects (stretch, compression, reflection, shifts)
• Six preset transformations for common examples
• Reset button to return to parent function
• Export as SVG or PNG, magnify in popup window
• URL parameters for sharing transformations

Stack: React 18, Babel standalone, SVG

Discriminant Visualizer

Explore how the discriminant (b² − 4ac) determines root count and type for quadratic equations.

• Interactive sliders for coefficients a, b, c
• Large discriminant display with real-time calculation
• Visual interpretation: number of x-intercepts on graph
• Detailed explanations for three cases (> 0, = 0, < 0)
• Root values displayed when they exist
• Five presets demonstrating different discriminant scenarios
• Vertex marker and auto-scaled graph
• Export as SVG or PNG, magnify in popup window
• URL parameters for sharing examples

Stack: React 18, Babel standalone, SVG

Quadratic Properties

Analyze key characteristics of quadratic functions with progressive hints and visual feedback.

• Enter coefficients or pick from five presets
• Seven properties: direction, axis of symmetry, vertex, min/max, domain, range, y-intercept
• Progressive reveal: show hints or reveal answers for each property
• Detailed hints explaining the calculation for each characteristic
• Visual parabola graph with marked features (vertex, y-intercept, axis)
• Progress tracker and "Reveal All" option
• Exact fraction display throughout

Stack: React 18, Babel standalone, SVG

Completing the Square

Convert quadratics to vertex form through a geometric area model and algebraic walkthrough.

• Enter coefficients or pick from five presets
• 7-step walkthrough: factor, split, rearrange, complete, simplify, verify
• Geometric area model showing the "completing" process
• Exact fraction display with horizontal-bar notation (HTML and SVG)
• Mini parabola graph with vertex at the final step
• Copy vertex form, export diagram as SVG or PNG

Stack: React 18, Babel standalone, SVG

Binomial Multiplication Visualizer

Step-by-step visualization of binomial multiplication using the FOIL method and an area model diagram.

• Enter any two linear binomials or pick from five presets
• 6-step educational walkthrough with plain-language explanations
• Color-coded quadrants matching FOIL order (First/Outer/Inner/Last)
• Diagram labels showing factor terms and numeric products
• Combine like terms into the final polynomial
• Copy equation to clipboard, export diagram as SVG or PNG

Stack: React 18, Babel standalone, SVG

Quadratic Form Converter

Convert between standard form, vertex form, and factored form with comprehensive step-by-step algebraic work.

• Three input modes: standard (ax² + bx + c), vertex (a(x−h)² + k), factored (a(x−r₁)(x−r₂))
• Six conversion pathways with detailed step-by-step explanations
• Visual parabola graph showing equivalence between forms
• Auto-detects when no real roots exist (discriminant < 0)
• Five presets demonstrating different forms and conversions
• Copy result equation, export graph as SVG or PNG
• URL parameters for sharing specific conversions

Stack: React 18, Babel standalone, SVG

Navigation

Each app includes:

• Breadcrumb navigation at the top showing: Home → Subject → Topic → App
• Hamburger menu (fixed top-left) with full site navigation tree
• Related tools footer linking to sibling apps in the same topic

Running

Each project is a self-contained web app. Serve the repo with any local HTTP server:

npx serve .
# or
python3 -m http.server

Then open http://localhost:3000/ in your browser and navigate via the hub pages.

License

These projects are free to use for educational purposes.