Capstone — Build a Concept Manipulative

Project · the rest of the course was preparation for this.

You have the skills. This is where you use all of them at once: you are going to build and ship a small, real app — start to finish — with an AI assistant.

The brief

Build a concept manipulative: a single web page someone can interact with to understand one idea. A manipulative does not just explain — it lets the learner do something and see what happens.

One concept: conditional probability. How the chance of something changes once you know that something else has happened.
One HTML file. HTML, CSS, and JavaScript in a single file that opens in any browser — no install, no account.
One core interaction. The MVP is the smallest version that makes the concept click.

Your concept: conditional probability

For this capstone the concept is fixed: build a manipulative that makes conditional probability click — how the chance of something changes once you know that something else has happened. You met the idea in Lesson 2; now you will build the thing that teaches it to someone else.

It is a perfect fit for a manipulative, because it only really lands when you can change the conditions and watch the probability move. Pick one concrete situation and let the learner poke at it. A few angles, only to spark your own:

A bag of marbles: how the chance of the next draw changes once you know what came out first — with versus without replacement
A bag of colored tokens: how the chance the next token is red changes once you know the color of the one already drawn
A medical test: how the chance you truly have a condition shifts after a positive result, as the false-positive rate changes
A two-way table the learner fills in, with P(A given B) updating live as the counts change
A probability tree where dragging one branch's odds re-computes the outcomes
Weather: the chance of rain on its own, versus the chance of rain given that the morning was cloudy

Whichever situation you choose, the learner should be able to do one thing — change a condition — and immediately see how the probability responds. If you can describe your situation, name who it is for, and say what they change on the page, you are ready.

Follow the lifecycle

Run the project through the seven stages from Lesson 5. Here is what each one means for this build.

Idea and audience

Write one sentence: which situation, for whom. Example: "A bag-of-marbles manipulative, for a student meeting conditional probability for the first time."

Define the MVP

Name the single core interaction — the one thing the learner does. Everything else (themes, scoring, extra modes) goes on a "later" list.

Plan in small steps

With your AI assistant, turn the MVP into an ordered list of small steps — layout, then the interaction, then the visual feedback.

Build with an AI assistant

Work step by step. Give context, ask for one step at a time, and read what the AI changed before moving on. Keep everything in one HTML file.

Test it

Open the file and use it. Does the core interaction work? Does the concept actually come across? Try it on a phone-sized screen.

Iterate

Hand it to someone unfamiliar with the concept and watch — do not help. Fix the most confusing thing they hit. Then, if you want, pull one item off the "later" list.

Ship it

Send the finished file to at least one real person. That is what makes it shipped rather than just saved.

How the starter file works

The editor below starts with a tiny working example: a slider that fills a bar. It is only about 40 lines, and every web page — however fancy — is built from these same parts. Read this once and you will be able to follow what your AI assistant writes, and ask for changes in the right words.

The big picture

An HTML file is just a text file with a structure. Every page has two halves wrapped in one <html> container:

<!DOCTYPE html>
<html lang="en">
<head> <!-- settings the visitor never sees: title, styling, setup --> </head>
<body> <!-- everything the visitor actually sees and clicks --> </body>
</html>

The head is backstage; the body is the stage. Keep that picture in mind and the rest falls into place.

1 · The opening lines

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html> tells the browser "this is a modern HTML page." <html lang="en"> opens the container that holds the whole page and notes that it is written in English. Notice the angle brackets — that is how you write a tag. Most tags come in pairs: an opening <html> and a closing </html> with a slash, like a pair of brackets around everything in between.

2 · The head — backstage setup

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Concept Manipulative</title>
<style> ... </style>
</head>

Nothing here shows up in the page body, but it matters:

<meta charset="UTF-8"> — lets the page show every character correctly, including accents and symbols like °.
<meta name="viewport" ...> — makes the page fit a phone screen instead of looking zoomed-out. This is the one line that makes your page work on mobile.
<title> — the text shown on the browser tab.
<style> — where the page's appearance lives. That is the next part.

The words inside a tag like charset="UTF-8" are attributes — extra settings, written as name="value", that tell a tag how to behave.

3 · The style block — how it looks (CSS)

<style>
  body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
  h1 { font-size: 22px; }
  .bar { height: 28px; background: #3b82f6; border-radius: 6px; width: 50%; }
  .value { font-size: 18px; margin: 12px 0; }
</style>

This is CSS — the language for appearance. Each rule has two parts: a selector that says what to style, and a set of properties in { } that say how.

body styles the whole page; h1 styles every big heading.
.bar and .value start with a dot, which means "any element I have labeled with this class." So .bar styles the element marked class="bar" down in the body.
A property like background: #3b82f6; is a setting and a value, ending in a semicolon. #3b82f6 is a color written as a hex code.

4 · The body — what the learner sees

<body>
  <h1>My Concept Manipulative</h1>
  <p>Drag the slider and watch what changes.</p>

  <!-- The control the learner interacts with -->
  <input type="range" id="slider" min="0" max="100" value="50">
  <div class="value">Value: <span id="out">50</span></div>

  <!-- The visual feedback -->
  <div class="bar" id="bar"></div>
</body>

This is the visible page, built from elements — a tag, its content, and its closing tag together:

<h1> is the heading; <p> is a paragraph of text.
The gray lines wrapped in  are comments — notes for humans that the browser ignores. Use them to remind yourself what a part does.
<input type="range"> is the slider. Its attributes set the range (min, max) and starting point (value).
<div> is a plain box for grouping things; <span> is a small inline box around a bit of text.
id="slider", id="out", id="bar" are name tags. An id gives one element a unique name so the next part — the script — can find it and change it.

5 · The script — what it does (JavaScript)

<script>
  // The core interaction: input -> update -> show feedback.
  var slider = document.getElementById("slider");
  var out = document.getElementById("out");
  var bar = document.getElementById("bar");

  slider.addEventListener("input", function () {
    out.textContent = slider.value;
    bar.style.width = slider.value + "%";
  });
</script>

This is JavaScript — the language for behavior, for making the page do something. Read it as three moves:

Find the parts. document.getElementById("slider") reaches into the page and grabs the element whose id is slider, so the script can work with it. It does the same for out and bar.
Listen for the action. slider.addEventListener("input", ...) means "every time someone moves this slider, run the steps inside." That is an event listener — it waits for something to happen.
Update the feedback. Inside, out.textContent = slider.value writes the slider's number into the page, and bar.style.width = slider.value + "%" stretches the bar to match. // ... lines are comments, ignored when the page runs.

That loop — the learner acts, the page reads it, the page shows the result — is the heart of every manipulative. When you swap in your own concept, you are really just changing what gets read and what changes in response.

The terms, in one place

Term	What it means
Tag	A word in angle brackets, like `<p>`. Usually paired with a closing tag `</p>`.
Element	An opening tag, its content, and its closing tag together — one piece of the page.
Attribute	A setting inside a tag, written `name="value"`, e.g. `id="bar"` or `type="range"`.
Head vs body	Head = backstage setup the visitor never sees. Body = everything on the visible page.
id / class	Name tags on an element. An `id` is unique (for the script to find); a `class` is a shared label (for styling).
HTML	The structure — the parts of the page and how they nest.
CSS	The appearance — colors, sizes, spacing. Lives in `<style>`.
JavaScript	The behavior — what happens when the learner interacts. Lives in `<script>`.
Comment	A note for humans the browser ignores: `<!-- -->` in HTML, `//` in JavaScript.

Now you can read what the AI writes. You do not need to memorize this or write it from scratch. When your AI assistant hands you a more advanced file, you will recognize the head and body, spot the <style> and <script>, and know what to ask for: "make the bar green," "add a second slider," "show a message when the value passes 80." Knowing the basic structure is what lets you steer.

Build it here

This is your workbench. Write or paste your manipulative into the editor on the left and it runs live on the right — every change shows instantly, with no download needed. It autosaves in this browser as you go. When you want to share or ship it, download the file: it opens straight in any browser with no setup, and that downloaded file is your shipped capstone.

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

Warm up: six small steps

The editor above starts with the slider-and-bar example. Before you build your own, work through these six steps — one at a time, changing only the highlighted part. For the first five, the box shows the file as it stands just before that step, next to its live output — make the highlighted edit right there in the box and watch the output change as you type (no scrolling back up). By the end of step 5 you will have turned a plain slider into a working conditional-probability manipulative. Then, in step 6, you hand it to an AI assistant and take it further — which is the real skill this whole course has been building toward.

Step 1 · Recolor the slider

Find the <style> block near the top of the file. The slider starts a plain grey — change its color by editing the #slider line:

#slider { accent-color: #ef4444; }  /* change the color */

That bright red (#ef4444) jumps out against the grey. Once it works, swap it for #22c55e (green) or #3b82f6 (blue). accent-color is the color of the slider itself; a hex code like #ef4444 is just a color written in code. Type the whole six-character hex before you stop — a half-typed code like #ef4 isn't a real color yet, so nothing will change until it's complete.

You should see: the slider — the round knob and the filled part of its track — change from grey to your color a moment after you stop typing. (The big rectangle below it is a separate piece called the bar; it stays as-is for now — you'll get to it later.)

Enable JavaScript to see this step running.

Step 2 · Make it about a real situation

Now give the page a job. In the <body>, find the heading and the line under it and change the words:

<h1>Chance of rain today</h1>
<p>Drag the slider to set how likely rain is.</p>

You are not changing what the code does yet — only what it says. The slider is now standing in for the chance of one real thing happening: rain.

You should see: the title and instruction now describe rain.

Enable JavaScript to see this step running.

Step 3 · Read the number as a chance

A probability is a percentage. Find the value line in the <body> and add a percent sign, and reword the label:

<div class="value">Chance of rain: <span id="out">50</span>%</div>

Now the slider reads as "Chance of rain: 50%". Same number, but it finally means something.

You should see: the readout now ends in a % sign as you drag.

Enable JavaScript to see this step running.

Step 4 · Add the condition — this is the whole idea

Conditional probability is what happens to a chance once you know something else. Add a checkbox the learner can tick, then replace your whole <script> so the chance reacts to it.

First, add these two lines in the <body>, just under the slider:

<label><input type="checkbox" id="cloudy"> I know the morning was cloudy</label>
<p id="explain"></p>

Then replace the whole <script> with this:

<script>
  var slider  = document.getElementById("slider");
  var out     = document.getElementById("out");
  var bar     = document.getElementById("bar");
  var cloudy  = document.getElementById("cloudy");   // the thing you now know
  var explain = document.getElementById("explain");

  function update() {
    var base  = Number(slider.value);                // chance of rain on its own
    var boost = 30;                              // how much "cloudy" raises it
    var chance = cloudy.checked ? Math.min(base + boost, 100) : base;

    out.textContent = chance;
    bar.style.width = chance + "%";
    explain.textContent =
      "On its own, rain is " + base + "%. Knowing it's cloudy, it's " +
      Math.min(base + boost, 100) + "%.";
  }

  slider.addEventListener("input", update);
  cloudy.addEventListener("change", update);
  update();
</script>

Tick the box. The chance jumps — the same rain, a different probability, because now you know it was cloudy. That gap is conditional probability.

You should see: ticking "cloudy" changes the number, the bar, and the sentence below.

Enable JavaScript to see this step running.

Step 5 · Make the idea yours

Now experiment, so the concept really sticks:

Change boost from 30 to 5, then to 60. A big boost means the condition tells you a lot; a small one means it barely matters.
Drag the slider with the box ticked and unticked. Watch the sentence state both chances at once — that is P(rain) versus P(rain given cloudy).
Swap rain and "cloudy" for your own situation: drawing a marble after seeing the first, a test result after a symptom, a card after a card. Change the words; the code still works.

When your own situation makes the chance visibly move the moment you change the condition, the hard part is done — by hand. There is one move left, and it is the most important one.

Your hand-built warm-up — the working conditional-probability manipulative:

Enable JavaScript to see this step running.

Step 6 · Now hand it to an AI assistant

You just built a working manipulative by hand. This last step is the real skill the whole course has been about: letting an AI assistant take your app further — while you stay in charge of it.

1. Copy your whole file from the editor above (click inside it, select all, copy).

2. Open any AI assistant — Claude, ChatGPT, and Gemini all work. Paste this prompt, then paste your code where it says:

I built a small web page that teaches one idea: conditional probability.
It is a single HTML file that runs in a browser. I am a beginner, so please:

1. Make ONE change at a time, and explain in plain English what you changed and why.
2. Keep everything in one HTML file that runs with no install.
3. Do not add anything I did not ask for.

The first change I want: add a "Reset" button that sets the slider back to 50
and unticks the checkbox.

Here is my current code:

[paste all of your code here]

3. Read the reply before you trust it. The AI is fast, but it is not always right — checking its work is your job, and the course taught you how:

Did it explain, in plain words, what it changed?
Is it still one HTML file, with no install?
Paste the new code into the editor above and watch the live preview — does the Reset button actually work, and did anything else break?
If something broke, tell the AI exactly what you saw ("the bar disappeared") and ask it to fix just that — one thing at a time.

Then ask for one more upgrade at a time, testing each in the preview before the next:

"Add a short sentence that explains, in words, why the two chances are different."
"Add a second condition (like 'windy') and show how it combines with cloudy."
"Make it look good on a phone-sized screen."

That loop — ask for one small thing, read what changed, test it, correct it — is exactly how you will build your real capstone above. You are not writing the code; you are steering it. That is what it means to build with AI.

Track your progress

Tick each step as you finish it. Your progress is saved in this browser, so you can come back to it.

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

Definition of done

Your capstone is finished when all of these are true:

It is a single HTML file that opens in a browser with no setup.
It explains conditional probability, and the core interaction works.
Someone who did not know the concept used it and came away understanding it.
It works on both a desktop and a phone-sized screen.
You shipped it — at least one person has it.

That is the whole course. You learned what an AI assistant is, how to work with one, how to prompt and verify, and how to take an idea through to a shipped MVP — and then you did it. The same lifecycle scales from this one-file manipulative all the way up to a real product.

← All Intro to AI lessons