Capstone — Build a Concept Manipulative

Capstone · build & submit · about 2–4 hours.

You have spent this course using manipulatives that make a math idea click. Now you build one. Pick a single concept from Math Foundations and make an interactive web page that teaches it to someone else — the same kind of slider-and-readout tool you have been dragging all along.

The brief

Build a single-page interactive manipulative that teaches one Math Foundations concept. It must:

let the learner change something (a slider, a draggable point, a toggle),
update live as they change it — a number, a bar, a curve, or a shape,
show its math with correct notation, and
run as a single HTML file that opens in any browser with no install.

Your concept: pick one

Choose a concept you understand well enough to teach. A few that lend themselves to a manipulative:

Conditional probability — how a probability changes once you know something A Bayes update — prior → evidence → posterior Vector length or cosine similarity — two arrows and the angle between them A matrix transformation — what a 2×2 matrix does to a shape A gradient-descent step — rolling downhill on a curve The empirical rule — area under the bell curve

One concept, done clearly, beats five done shallowly.

Follow the lifecycle

This is the same build loop from Intro to AI, applied to a math idea: plan it → build it → test & submit. The checklist near the bottom tracks these three stages.

How the starter file works

The editor below opens with a working example: a slider sets a vector's x component, and the page recomputes and re-renders its length \( \lVert v \rVert = \sqrt{x^2 + y^2} \) live. Read it as three moves — the pattern behind every manipulative in this course:

A control the learner changes: <input type="range" id="x">.
A recompute in the script: read the input, compute the new value.
A render: write the math as a TeX string and call renderMathInElement so KaTeX draws it.

Build it here

This is your workbench. Edit the code on the left and it runs live on the right — every change shows instantly, no download needed. It autosaves in this browser as you go. Already built your project elsewhere? Use Upload .html to bring your file in, preview it, and submit it.

The code editor needs JavaScript enabled. You can still build your manipulative in any text editor with an AI assistant.

Upload your project files

Your capstone is one HTML file — but if it pulls in extras (an image, a data file, a screenshot for your teacher), upload them all here so your whole project is in one place. Sign in first; only you and your teacher can see these files. This is separate from the one-click Submit for grading above, and a good way to hand in a project you built outside the editor.

File upload needs JavaScript enabled. You can still Download .html above and submit from your student portal.

Track your progress

This checklist needs JavaScript enabled. The three stages above are the checklist.

Definition of done

Your capstone is complete when it satisfies all of the following criteria:

it conveys a single concept through a functioning, interactive demonstration;
its mathematical notation is rendered correctly — well-formed roots, fractions, and symbols;
it is delivered as a self-contained HTML file that runs in any browser without installation;
an independent user has engaged with it and can articulate the intended concept; and
it has been submitted for assessment.

Submitting: when your manipulative is ready, sign in and click Submit for grading in the toolbar above — it sends your code straight to your teacher. (Built it in a separate file? Upload .html to bring it in first. You can also Download .html to keep a copy, or submit later from your student portal.) A passing score unlocks your certificate.

← Back to the course map