Lessonline

• 

Inspiration

The answer is three. What would make it become two?

That question captures why I built Lessonline. A worked answer can show the procedure, but understanding also means knowing what happens when the question changes.

I wanted learners to connect a mathematics question, its explanation, and an editable visualization without switching between separate tools.

What it does

Lessonline follows a simple journey: paste → check → solve → explore.

Paste a supported mathematics question or choose an example. Check the interpreted task and values, read the worked solution, then change values to see the answer, steps, visualization, and table update together.

For example:

• Start with 2x + 1 = 7, giving x = 3.
• Change only the constant from 1 to 3.
• The equation becomes 2x + 3 = 7, giving x = 2.
• The graph shows the current line meeting the target at (2, 7).

The original confirmed question remains visible alongside the current variation. Incomplete exploration inputs display a warning while retaining the last valid solution. Reset restores the original values.

Lessonline supports 17 defined tasks across basic arithmetic, linear equations, quadratic calculus, population statistics, and binomial probability. Fraction arithmetic uses exact reduced fractions, with decimal approximations labeled separately.

Support is deliberately bounded: this is not an unrestricted mathematics or word-problem solver.

How we built it

I built Lessonline as a solo project using React, TypeScript, Vite, CSS, and JSXGraph, and deployed it on Vercel.

The main question-solving flow uses deterministic calculations in the browser. Its answers do not depend on generated AI responses or require an API key.

The interface separates interpretation, worked reasoning, and exploration into clearly labeled stages. I worked on readable layouts, labeled controls, keyboard focus, and feedback that explains what the app is showing.

AI-assisted tools supported planning, implementation, testing, and video editing. The demonstration uses my own narration, enhanced with Adobe Podcast.

Challenges we ran into

The hardest challenge was keeping every representation consistent. An incomplete input must not leave the graph showing one question while the steps explain another. I addressed this by retaining the complete last valid mathematical state until the draft becomes valid.

Another challenge was distinguishing the original question from an exploration. Changing a value should invite experimentation without losing the learner’s starting point.

Scope also mattered. Earlier versions included image input and downloadable lessons. I removed those controls from the active experience to concentrate on a clearer workflow: paste, check, solve, and explore.

Accomplishments that we're proud of

• Built and deployed a working interactive mathematics app.
• Connected worked steps, editable values, visualizations, and numeric tables.
• Preserved exact fraction arithmetic and labeled approximate results.
• Added predictable invalid-input feedback and reset behavior.
• Passed 123 regression tests and the production build.
• Exercised all 17 supported task types through browser checks.

The accomplishment I value most is the central interaction: one small change produces a mathematical consequence the learner can inspect in several ways.

What we learned

A mathematics interface needs to explain its state as carefully as its equations.

Showing the interpretation before solving makes the app’s understanding visible. Separating original and current values makes exploration easier to follow. Clear feedback and reset behavior make experimentation more predictable.

I also learned that narrowing a prototype can strengthen it. Focusing on one coherent learning journey communicated the idea more clearly than adding more features.

What's next for Lessonline

My next priority is feedback from students and teachers: which steps are confusing, and which interactions help explain why an answer changes?

I would use that feedback to improve the existing explanations before expanding the supported mathematics. Each new question type should include verified calculations, clear limits, and a visualization that explains a meaningful relationship.

Try Lessonline: https://lessonline-gamma.vercel.app/

Source code: https://github.com/basit9632584-bit/lessonline

Demo: https://youtu.be/6rGK_u6bctY

Built With

• css
• jsxgraph
• react
• typescript
• vercel
• vite