← All Inside Large Language Models modules

Capstone — Build a Concept Manipulative

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

You have spent this course using interactive tools that make an LLM idea click. Now you build one. Pick a single concept from Inside Large Language Models 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 Large Language Models 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 output correctly, 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:

Next-token prediction — given the words so far, what comes next? Tokens & embeddings — words as vectors in a high-dimensional space Attention weights — which earlier tokens does the model lean on? How self-attention works — queries, keys, and values The transformer block — the unit that repeats inside every LLM Sampling & temperature — how logit scores become token probabilities

One concept, done clearly, beats five done shallowly.

Follow the lifecycle

This is the same build loop from Intro to AI, applied to an LLM 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 temperature slider controls how a set of fixed logit scores are divided before softmax, and the probability bars update live. Read it as three moves — the pattern behind every manipulative in this course:

A control the learner changes: <input type="range" id="temp">.
A recompute in the script: divide each logit by T, then run softmax to get probabilities.
An update: write each probability percentage to its bar element so the display changes instantly.

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.

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 seven 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 output is rendered correctly and updates as the input changes;
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. (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