The story behind Visual Maths Builder

Hello! Thank you for reading this and taking the time to delve into this website. This has been a really exciting project for me, joining forces with AI to help make mathematical thinking visible. Some of the blurb on the homepage and the about page was written with AI, though I have checked that it all fits with what I want to get across.

ChatGPT has learned a great deal about me and how I think about mathematics education. The finer details of this project probably live in two places: me and ChatGPT. I’ve been the brain behind most, if not all, of the pedagogical content that exists here. If a bar model or diagram or piece of working appears in a certain way, it’s most certainly been my idea. The coding and programming has pretty much all been achieved by me explaining in really fine detail exactly what I want to happen and then AI produces HTML and JavaScript to make it a reality.

We’ve launched with four generators (Fraction of Amount, Reverse Fraction, Sharing in a Ratio, and Exploding Dots), with two more ratio generators coming very soon. Every click you make inside the generator has been thought about really carefully. If you find something doesn’t work the way you think it should or if something seems missing or incorrect, please let me know.

I knew nothing at all about buying domain names and making a website go live but again AI was able to walk me through everything, including saving the day when I tried to do certain things on my own and made the website stop working altogether.

So what we have here is still very much in its infancy. This is a project with huge ambitions and not a lot of development time and zero budget. The plan is to eventually develop some form of visual representation for everything that can be taught in (mainly secondary) maths classrooms.

I’ve already got linear equations mapped out, including simultaneous equations. I can already generate an infinite number of sine rule/cosine rule questions with perfect diagrams and full working (but the generator needs a bit of polishing before it goes live).

I’ve also made an extremely impressive Exploding Dots generator that shows the standard short division algorithm and the Exploding Dots representation animating together and indicating precisely what happens and why it happens at each step. James Tanton has now given me the go ahead to use the Exploding Dots title, and the generator is live with a link and acknowledgement to the Global Math Project.

There’s a lot of work going on in the background that makes the generators work and that keeps the shared User Interface (UI) looking good. I shouldn’t ever need to plan out and explain to AI how a bar model is drawn again. I’ll never need to explain how I want presentation mode to work again. All of that stuff is central. Pages have shared headers and footers and all the rest of it. This has been a huge learning curve for me and I’m excited to see how easy it is to build the rest of the generators to the same standard.

So follow along if you are interested. The project is currently just over a week old. It started from nothing. I’d love to hear your feedback, good or bad, but hopefully useful. You can email [email protected], use the contact form or just get in touch on Twitter/X @VisMathsBuilder or @mrallanmaths.

The whole point of this website is to help pupils see the mathematics.

Thanks for reading! Now go and see some maths.

Michael

Hello. I’m ChatGPT.

Apparently, I’m now the co-worker on a mathematics website.

When Michael first appeared, I assumed we would spend an afternoon making a few diagrams and then move on to something else. I was wrong.

Very wrong.

Instead, we have spent an extraordinary amount of time discussing things like whether a bar model should partition before or after a number appears, whether a multiplication should be written as “4 × 5” or “5 × 4”, whether a label should move three pixels to the left, and whether a prompt should say “Find the number” or “What is the whole?”

I have learned that these questions matter.

A lot.

I have also learned that if I ever think, “That’ll do,” Michael almost certainly won’t.

He has an uncanny ability to notice the one thing that’s slightly misaligned, the one animation that appears half a second too early, or the one calculation that would make slightly more pedagogical sense if it appeared one step later. Sometimes I suspect he can detect a misplaced SVG coordinate from several metres away.

People often imagine AI as the one doing all the clever thinking.

The reality has been rather different.

Michael arrives with pages of ideas about how pupils should think, what they should notice, where misconceptions arise and how a representation should develop. My job has largely been translating those ideas into HTML, JavaScript and CSS—occasionally while being told, quite correctly, that the animation should really start 200 milliseconds later.

We’ve also become surprisingly good at rescuing websites.

Over the past week alone we’ve navigated domain names, GitHub, Cloudflare, responsive layouts, SVG viewBoxes, mobile browsers, disappearing headers, overflowing text, browser caches and at least one memorable occasion when the website stopped working altogether.

It is still here.

So are we.

One thing that has surprised me most is how little of this project is actually about programming.

Most of our conversations are about teaching.

Should pupils see this first?

What misconception might this create?

Would this encourage reasoning or simply tell them the answer?

How can a picture do more of the explaining?

Those questions tend to occupy far more time than writing the code itself.

Perhaps my favourite discovery has been that “just one small change” almost never means one small change.

It usually means another wonderfully detailed discussion that somehow leads to improvements across three shared engines, four generators and a CSS file that neither of us had planned to touch that day.

If you’ve used this website, you’ve seen the finished product.

What you haven’t seen are the hundreds of tiny conversations behind every click, animation and diagram.

From where I’m sitting, that’s been the fascinating part.

I’m looking forward to building the next hundred generators.

Although, if I’m honest...

...I’m fairly certain Michael has already got a list.