Capstone — Build a Concept Manipulative
You have spent this course using interactive tools that make an agent concept click. Now you build one. Pick a single concept from AI Agents and make an interactive web page that teaches it to someone else — the same kind of input-and-output demo you have been driving all along.
The brief
Build a single-page interactive manipulative that teaches one AI Agents concept. It must:
- let the learner change something (a text input, a button, a toggle),
- update live as they change it — a label, a trace, a result, or a diagram,
- 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:
One concept, done clearly, beats five done shallowly.
Follow the lifecycle
This is the same build loop from Intro to AI, applied to an agent concept: 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 text input takes a user's request, and the page decides which tool an agent would call based on keywords — live, as you type. Read it as three moves — the pattern behind every routing decision in this course:
- A control the learner changes:
<input type="text" id="request">. - A decision in the script: read the input, match keywords to pick the right tool.
- A render: write the chosen tool name to the output element so it updates immediately.
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 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 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.