Ethics of AI
4.2.4 Architecture Design
Acquiring technical skills to design the overall structure and components of AI systems that are effective and responsible.
Page Audit / API
Page Anatomy and the Slop Audit
Overview
# Overview
Curriculum.UnitsAuditing a live page for unsupported claims and grounding an agent in your own content. Students score a page against five measures, remove unsupported “slop”, and build a password-protected agent that answers only from supplied material.
# Objectives
Curriculum.Units- 01 By the end, you can Audit a live page against the five measures and name the one problem to fix first.
- 02 By the end, you can Cut "slop" — any claim that would still be true if the product were something else entirely.
- 03 By the end, you can Build a live agent that answers only from your own content and refuses anything outside it, keeping its key in environment variables.
- 04 By the end, you can Fix problems by reading the real error message instead of guessing.
# Sessions
Curriculum.Sessions- Site Audit Against Five Measures
- Worksheet Audit A Stranger's Site Spend 15 minutes clicking through an unfamiliar website, then report one broken thing and how it should work.
- Designing Your Chatbot's Persona
- Discussion Spot The Bland Line Show three websites side by side and pick out any bland line that could belong to any of them.
- What an API Is and Wiring One Up
- Game Name The Page Part In two rounds learners name the part of a web page that does a job, then name highlighted parts.
- Using Codex to Wire and Debug APIs
- Demo Follow The Error Message The teacher deliberately breaks the API wiring, then the class reads the real error text out loud and traces it back to the exact line that caused it.
- Build Split The Big File Using Codex, each learner cuts one long page file into smaller per-section files and checks the page still loads exactly the same.
- Role-play Explain It To The Duck Before asking Codex for help, each learner explains their bug out loud step by step to a rubber duck to see if they can spot the fix themselves.
- Wiring Up Your AI Agent
- Build Give The Agent Its Voice Learners connect the browser's built-in speech tools so their chatbot listens to a spoken question and reads its written answer back out loud.
- Game Try To Break The Bot In pairs one learner fires off-topic and tricky questions to see if the partner's bot correctly refuses anything outside its own content, scoring a point for each refusal.
- Demo Lock The Door The teacher shows how a password gate hides the page and where the secret key lives in the host's settings instead of inside the code.
Applied · App Development
# Knowledge & Skills
ACA-AppliedNearly every landing page has the same six sections in the same order: the menu bar at the top, the big opening section, the list of features, the prices, quotes from customers, and the footer at the bottom.
Four ideas run through all six sections: the call to action (the button that tells the visitor what to do next), social proof (signs that other people use or trust the product), hierarchy (what looks more or less important), and what sits above the fold (the part seen before scrolling). If you cannot say what a page's call to action is, you do not know what the page is for.
A landing page works like an FAQ turned into one page. Each section answers one question a visitor has, in the order a stranger would really ask them, not the order that was easiest to fill in on the planning sheet.
The planning sheet used before building the page has three boxes that should never appear as text on the finished page. Putting them on the page anyway is the common mistake.
Slop is any wording on the page that would still be true if the product were something completely different.
Slop falls into six types, including made-up numbers, made-up people such as fake customers, prices for a product nobody can buy, and buttons that do not work.
The fix for slop is to make it true, not to delete it. A number can stay if the claim next to it is made true.
Fixing a problem works by reading the real error message, not by guessing what went wrong. point w3d2-s4-p2
Check a live website against five things (how much someone wants it, what it offers, reasons to act, worries it raises, and anything that makes it hard to use), then name the one problem to fix first. point w3d2-s1-p1; evidence w3d2-e4
Run the loop: build something small, sell it, interview your first customer, then improve it. point w3d2-s2-p1; evidence w3d2-e6
Split one large code file into separate files, one for each section. point w3d2-s3-p1; evidence w3d2-e7
Watch six real people use your site on a phone, and write down what it fails to answer. point w3d2-s1-p2; evidence w3d2-e5
Fix problems by reading the real error message instead of guessing. from objectives
Anxiety & Friction What's stopping the visitor, and how hard is the next step?
Debug From the Error Fix from the actual error message instead of guessing.
Incentive What's in it for the visitor to act now?
Motivation Does the visitor have a reason to be here?
Name the One Fix After auditing, name a single priority fix rather than a list.
Password-Gated Access The shipped agent page sits behind a password before it's public.
Server-Side Key Storage The API key lives in an environment variable on the host, never in the browser-visible bundle.
Value Proposition Can a stranger say what the product does in five seconds?
AI
# AI Competencies
ACA-AI.CompetenciesAligned with UNESCO · AI Competency Framework for Students View framework →
# AI Skills
ACA-Tools.SkillsAligned with Derived from course activity
Derived from course activity
Deployment & Secret Management
Setting up a dev environment and deploying live while keeping API keys out of source, held as environment variables. Evidence: "SETTING UP A DEVELOPMENT ENVIRONMENT: 1. Make a folder on your laptop..." and "holding the API key as an environment variable" (api/app-development).
# Competency Goals
ACA-AI.GoalsAligned with UNESCO · AI Competency Framework for Students View framework →
UNESCO · AI Competency Framework for Students
CG4.2.4.2 Technical Skills to Build AI
Gaining hands-on ability to implement AI components, integrate systems, and manage the technical aspects of AI projects.
UNESCO · AI Competency Framework for Students
Build a Voice Chatbot Page
Build a working chatbot page that answers only about your own content, takes spoken questions and replies out loud, sits behind a password, and keeps its secret key in the host's settings.
Deliverable
# The API
Projects.BriefsCheck a live website against five measures. Then build a working agent (chatbot) page that only talks about your own content, fixed using real error messages, and hand it in by 10pm. A live agent (chatbot) page: a working web address, protected by a password, that can hear spoken questions and reply out loud, and only answers about your own content. The secret key is kept in the host's environment variables (its settings area). Plus one written website check.
Transfers to: Debugging from the real error instead of guessing.
# Assessed toward these aims
Projects.RubricsThis deliverable is where students demonstrate
- B Convert the canvas into a deployed page, and audit it for unsupported contentLook out for
- Website check: Each of the five measures gets a score and one sentence explaining why. One problem to fix first is named. This matches Objective 1.
- What the agent can talk about: The agent answers questions about your own content and refuses anything outside it. This matches Objective 2.
- Keeping the secret key safe: The secret key is kept in the host's environment variables (its settings area) and cannot be seen in the page. This matches Objective 2.
- Fixing problems (debugging): Each fix is based on the real error message, not a guess. This matches Objective 4.
- No empty claims (no slop): No claim on the page would still be true if the product were something else. Any number that is kept on the page is made true. This matches Objective 1.