Skip to main content

The DEEP Build Kit · Card 13

The Build Menu

Nine ready-made problems (seven for a class, one for staff training, one for your own preparation), each with an outcome, three success checks, a red line and two fill-in-the-blanks prompts: a quick Show build, then a Respond build.

For: Level 1 ● Blue (and Level 2 ▲ Orange without a problem ready)

Card 13 · Level 1 ● Blue · Brief it and Build it

Choose a build · 9 options

How to use it

  1. Pick one item that matches something your class, colleagues or you keep getting stuck on. Make it yours: your user, your task.
  2. Copy its outcome, three success checks and red line onto your Outcome Canvas (card 02), filling the [brackets]. The checks are for your Respond build; your target rung is Respond.
  3. Write the content yourself and check every line by hand: the words, questions or steps. The AI builds the page; you supply the facts. No student names, ever.
  4. Quick Show build (about 15 minutes): fill the blanks in the Show prompt. Predict what you'll get, then paste it into Canva Code or any AI chat tool with a preview (card 09).
    • Canva: Canva builds straight away. Open the preview.
    • AI chat tools only: the prompt asks it to tell you in three lines what it will make before it builds. Read them, then reply "Go ahead". If it builds straight away, check what it made against the prompt.
  5. Then a Respond build: paste the Respond prompt, with the same content, into a fresh chat. Save each version, then run your three checks exactly as written. Level 1 ● Blue in Canva: Your save point is the version number. Canva builds need internet; skip the offline test.

What you learn while building: use your level's timed learning plan (cards 10, 11 or 12). At the save point, save the version you have, even if partial. Level 1 explains one input → rule → response; Level 2 authors normal, invalid and boundary expectations before generation and explains a design choice; Level 3 separates content, state and interface, enables a colleague content edit and tests two boundaries. The useful task and checked content stay the focus.

Personal preparation work: menu 9 is valid at every level. Use its workflow prompts and checks instead of the classroom quiz scaffold. A ready personal workflow takes S12 first. It starts clean on reload: do not add remembered progress against that red line.

The menu: 1 Key words · 2 Last lesson's quiz · 3 Steps in order · 4 Labelled diagram · 5 Sort it · 6 Number facts · 7 What would you do? · 8 A worked example that fades · 9 Lesson-ready checklist

Show builds have no answers to mark, so their checks are about content, layout and moving through the page. Every classroom Respond build has a check that a right answer is accepted, not only that wrong ones are caught. For a teacher workflow, check that the intended action works, that it can be undone, and that reset and empty states are clear. Item 9 uses workflow checks; it needs no quiz or retrieval question.

• • •

1. Key words

After using this, [your class] will know the key words for [your topic] and what each one meansView brief and promptsClose this build

For when students keep mixing up the key words of a topic.

Best for: any subject, primary or secondary · Rungs: Show, then Respond

Outcome: After using this, [your class] will know the key words for [your topic] and what each one means, which I'll see when they match every word to its meaning on paper next lesson, without the page.

Success checks:

  1. When I choose the right word for a meaning, it says "Correct" in words and shows the word in its example sentence.
  2. When I choose a wrong word, it says so in words, gives the right word and says what the word I chose means.
  3. When I check every word, meaning and example on the page against my list, they match word for word.

Red line: it must never use a word, meaning or example that is not on my list.

Show prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can say what each key word for [topic] means.
It should show each key word with its meaning and one example sentence, each word in its own box, in the order of my list.
The content is: [paste 6–10 key words, each with a one-line meaning and an example sentence, checked by you].
It must work on a phone and with a keyboard alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; use a word, meaning or example that is not on my list.
It is working when:
1. When I check every word, meaning and example against my list, they match word for word.
2. When I open it at phone width, each word sits with its own meaning and nothing scrolls sideways.
3. When I look for extras, it has no pictures, fun facts or words I did not give it.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can match each key word for [topic] to its meaning.
It should ask which word matches each meaning, one meaning at a time with three words from my list to choose from, and, after each answer, say whether it is right and explain why, using only the meanings on my list.
After two wrong tries on a question, it says "Ask your teacher" or shows a worked example.
The content is: [paste 6–10 key words, each with a one-line meaning and an example sentence, checked by you].
It must work on a phone and with a keyboard alone, and show right and wrong in words, not colour alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; use a word, meaning or example that is not on my list.
It is working when:
1. When I choose the right word for a meaning, it says "Correct" in words and shows the word in its example sentence.
2. When I choose a wrong word, it says so in words, gives the right word and says what the word I chose means.
3. When I check every word, meaning and example on the page against my list, they match word for word.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: one meaning per screen; the wrong options are other words from your list, never made-up ones; the feedback names both words. The fractions quiz starter uses the same feedback pattern.

• • •

2. Last lesson's quiz

After using this, [your class] will recall the key points of [last lesson's topic] without notesView brief and promptsClose this build

For when students seem to have forgotten last lesson by the start of this one.

Best for: any subject, primary or secondary, as a starter or plenary · Rungs: Show, then Respond

Outcome: After using this, [your class] will recall the key points of [last lesson's topic] without notes, which I'll see when they answer three unseen questions on it on paper a week later.

Success checks:

  1. When I choose the right answer to any question, it says "Correct" in words and explains why.
  2. When I choose a wrong answer, it says so in words, shows the right answer and explains why.
  3. When I press Check without choosing an answer, it asks me to choose one and does not give the answer away.

Red line: it must never add a question or answer I did not give it, or use "all of the above" or "none of the above".

Show prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can recall the key points of [last lesson's topic] without notes.
It should show one question at a time, large enough to project, for the class to answer on paper or mini-whiteboards, with the answer and why shown only when I press "Show answer".
The content is: [paste 5–8 questions, each with its answer and one sentence on why, checked by you].
It must work on a phone and with a keyboard alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; add a question or answer I did not give it.
It is working when:
1. When I open a question, it shows the question only, with no answer visible.
2. When I press "Show answer", it shows the answer and the why from my list, word for word.
3. When I open it at phone width, the question is easy to read and nothing scrolls sideways.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can recall the key points of [last lesson's topic] without notes.
It should ask my questions one at a time, each with three options, and, after each answer, say whether it is right and explain why; at the end, list the questions to look at again.
After two wrong tries on a question, it says "Ask your teacher" or shows a worked example.
The content is: [paste 5–8 questions, each with three options, the right answer and one sentence on why, checked by you].
It must work on a phone and with a keyboard alone, and show right and wrong in words, not colour alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; add a question or answer I did not give it, or use "all of the above" or "none of the above".
It is working when:
1. When I choose the right answer to any question, it says "Correct" in words and explains why.
2. When I choose a wrong answer, it says so in words, shows the right answer and explains why.
3. When I press Check without choosing an answer, it asks me to choose one and does not give the answer away.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: the equivalent-fractions quiz starter, the problem from the opening demo. Eight questions, three plausible options each, a why on every answer, a note on the wrong option chosen, and a list of questions to look at again.

• • •

3. Steps in order

After using this, [your class] will carry out the steps of [your method] in the right orderView brief and promptsClose this build

For when students know the steps of a method but do them in the wrong order, or skip one.

Best for: any subject with a method or process: a calculation, a practical, a writing process, a routine · Rungs: Show, then Respond

Outcome: After using this, [your class] will carry out the steps of [your method] in the right order, which I'll see when they write the steps in order, without notes, next lesson.

Success checks:

  1. When I choose the steps in the right order, it accepts each one and says why it comes next.
  2. When I choose a step too early, it says so in words, names the step that comes first and says why.
  3. When I finish, it shows the whole method, numbered, in the order on my list.

Red line: it must never change, add or drop any of my steps, or make dragging the only way to move them.

Check your steps first: could any two of them swap and still be right? If so, join them into one step, or the page will reject a right answer.

Show prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can carry out the steps of [method] in the right order.
It should show the steps one at a time, numbered, each with one line on why it comes at that point, with Next and Back buttons.
The content is: [paste 4–8 steps in the right order, each with one sentence on why it comes there, checked by you].
It must work on a phone and with a keyboard alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; change, add or drop any of my steps.
It is working when:
1. When I check each step and its why against my list, they match word for word and come in the same order.
2. When I use only the keyboard, it lets me go forward and back through every step and always shows where I am.
3. When I open it at phone width, each step fits with no sideways scrolling.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can carry out the steps of [method] in the right order.
It should show my steps jumbled and ask which step comes next, one choice at a time, and, after each answer, say whether it is right and explain why, until the method is complete.
After two wrong tries on a question, it says "Ask your teacher" or shows a worked example.
The content is: [paste 4–8 steps in the right order, each with one sentence on why it comes there, checked by you].
It must work on a phone and with a keyboard alone, and show right and wrong in words, not colour alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; change, add or drop any of my steps, or make dragging the only way to move them.
It is working when:
1. When I choose the steps in the right order, it accepts each one and says why it comes next.
2. When I choose a step too early, it says so in words, names the step that comes first and says why.
3. When I finish, it shows the whole method, numbered, in the order on my list.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: one choice at a time ("Which comes next?"), not a drag-and-drop puzzle; the finished method shown in order at the end, so the last thing students see is the right order.

• • •

4. Labelled diagram

After using this, [your class] will name and find the parts of [the thing] and say what each doesView brief and promptsClose this build

For when students can't name the parts of something, or say where they are.

Best for: science, geography, design and technology, PE, languages; primary or secondary · Rungs: Show, then Respond

Outcome: After using this, [your class] will name and find the parts of [the thing] and say what each does, which I'll see when they label a blank paper copy, without notes, next lesson.

Success checks:

  1. When I choose the right name for the marked part, it says "Correct" in words and says what that part does.
  2. When I choose a wrong name, it says so in words, gives the right name and says where the part I chose is.
  3. When I move to the next part, it marks that part with a thicker outline and a number, not colour alone.

Red line: it must never add parts I did not list, or make the drawing realistic, 3D or moving.

Show prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can name and find the parts of [the thing] and say what each does.
It should show a simple, flat drawing of [the thing] with each label next to its part and a line to it, a one-line job for each part, and a note that the drawing is simplified and not to scale.
The content is: [paste 4–8 parts, each with a one-line job and roughly where it is, checked by you].
It must work on a phone and with a keyboard alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; add parts I did not list, or make the drawing realistic, 3D or moving.
It is working when:
1. When I follow each label's line, it ends on the part it names.
2. When I check each label and job against my list, they match word for word, with no extra parts.
3. When I open it at phone width, the drawing and its labels fit, with no label on top of another.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can name and find the parts of [the thing] and say what each does.
It should mark one part of a simple, flat drawing at a time, ask which of three names is right, and, after each answer, say whether it is right and explain why, using the jobs on my list.
After two wrong tries on a question, it says "Ask your teacher" or shows a worked example.
The content is: [paste 4–8 parts, each with a one-line job and roughly where it is, checked by you].
It must work on a phone and with a keyboard alone, and show right and wrong in words, not colour alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; add parts I did not list, or make the drawing realistic, 3D or moving.
It is working when:
1. When I choose the right name for the marked part, it says "Correct" in words and says what that part does.
2. When I choose a wrong name, it says so in words, gives the right name and says where the part I chose is.
3. When I move to the next part, it marks that part with a thicker outline and a number, not colour alone.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: the KS3 animal and plant cells starter. Labels beside their parts, a "How to read this model" note first, and nothing moves. Keep your drawing simple: boxes and lines are fine. If a label points at the wrong part, that is your first fix.

• • •

5. Sort it

After using this, [your class] will sort [your items] into [your groups] and say whyView brief and promptsClose this build

For when students keep putting things in the wrong group (fact or opinion, for example).

Best for: any subject with two or three groups to tell apart; primary or secondary · Rungs: Show, then Respond

Outcome: After using this, [your class] will sort [your items] into [your groups] and say why, which I'll see when they sort five new items on paper and give a reason for each.

Success checks:

  1. When I put an item in its right group, it says "Correct" in words and gives the reason.
  2. When I put an item in the wrong group, it says so in words, names the right group and gives the reason.
  3. When I finish, it shows every item under its right group, matching my list.

Red line: it must never make dragging the only way to sort: every item can be placed with a click or a key.

Check your items first: could any item fairly go in two groups? Take it out, or keep it for a class discussion, or the page will mark a right answer wrong.

Show prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can sort [items] into [groups] and say why.
It should show [groups] as headed columns, with each item under its group and one line on why it belongs there.
The content is: [paste 2 or 3 group names, then 6–12 items, each with its group and one sentence on why, checked by you].
It must work on a phone and with a keyboard alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; add items or groups I did not give it.
It is working when:
1. When I check every item, group and reason against my list, they match word for word.
2. When I open it at phone width, the groups stack one under another and nothing scrolls sideways.
3. When I look for extras, it has no pictures, fun facts or items I did not give it.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can sort [items] into [groups] and say why.
It should show one item at a time with the groups as buttons, ask which group it belongs in, and, after each answer, say whether it is right and explain why; at the end, show every item under its right group.
After two wrong tries on a question, it says "Ask your teacher" or shows a worked example.
The content is: [paste 2 or 3 group names, then 6–12 items, each with its group and one sentence on why, checked by you].
It must work on a phone and with a keyboard alone, and show right and wrong in words, not colour alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; make dragging the only way to sort.
It is working when:
1. When I put an item in its right group, it says "Correct" in words and gives the reason.
2. When I put an item in the wrong group, it says so in words, names the right group and gives the reason.
3. When I finish, it shows every item under its right group, matching my list.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: one item at a time, the groups as big buttons, the reason in every piece of feedback, and the finished sort shown at the end.

• • •

6. Number facts

After using this, [your class] will recall [your set of facts] by heartView brief and promptsClose this build

For when students keep working out facts they should know by heart.

Best for: primary maths (times tables, number bonds, doubles and halves), and catch-up groups · Rungs: Show, then Respond

Outcome: After using this, [your class] will recall [your set of facts] by heart, which I'll see when they answer ten of them, mixed up, on paper at the end of the week.

Success checks:

  1. When I type the right answer, even with a space before or after it, it says "Correct" in words.
  2. When I type a wrong answer, it says so in words, gives the right answer and shows the strategy from my list.
  3. When I press Check with nothing typed, or with letters, it asks for a number and does not mark it wrong.

Red line: it must never ask a fact that is not on my list, or keep a streak or running score.

Show prompt

Build a single web page for [year group or age] in maths.
The change I want: after using it, they can recall [set of facts] by heart.
It should show [set of facts] in order in a table, with the strategy from my list written above it.
The content is: [paste each fact with its answer, and the one strategy you teach for this set, checked by you].
It must work on a phone and with a keyboard alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; show a fact that is not on my list.
It is working when:
1. When I check every fact and answer against my list, they match.
2. When I read the strategy, it matches the one on my list word for word.
3. When I open it at phone width, the table fits with no sideways scrolling.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [year group or age] in maths.
The change I want: after using it, they can recall [set of facts] by heart.
It should ask my facts one at a time, in a mixed order, with a box to type the answer, and, after each answer, say whether it is right and explain why, using the strategy on my list.
After two wrong tries on a question, it says "Ask your teacher" or shows a worked example.
The content is: [paste each fact with its answer, and the one strategy you teach for this set, checked by you].
It must work on a phone and with a keyboard alone, and show right and wrong in words, not colour alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; ask a fact that is not on my list, or keep a streak or running score.
It is working when:
1. When I type the right answer, even with a space before or after it, it says "Correct" in words.
2. When I type a wrong answer, it says so in words, gives the right answer and shows the strategy from my list.
3. When I press Check with nothing typed, or with letters, it asks for a number and does not mark it wrong.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: one fact at a time, a large answer box, and feedback that shows the strategy, not just the answer. Check 1 matters most here: a right answer typed with a stray space must never be marked wrong.

• • •

7. What would you do?

After using this, [staff group] will choose the first step our [policy] expects in [kind of situation]View brief and promptsClose this build

For when staff know the policy but aren't sure what it looks like in the moment.

Best for: school leaders, pastoral and support staff; staff induction and training on a routine or procedure · Rungs: Show, then Respond

Made-up scenarios only. No real students, staff, families, schools or events. This one is for staff, so its Respond prompt has no stop rule: every answer quotes the policy line instead. Paste only the policy lines you need, never a whole document with names or contact details in it.

Outcome: After using this, [staff group] will choose the first step our [policy] expects in [kind of situation], which I'll see when they talk through two new made-up scenarios at the next briefing and pick the right first step.

Success checks:

  1. When I choose the response our policy expects, it says so in words and quotes the policy line behind it.
  2. When I choose another response, it says so in words, gives the response the policy expects and says why, without judging the person.
  3. When I check every scenario, option and reason against our policy, they match, and none describes a real person or event.

Red line: it must never describe a real person, student, family or event, or give advice that is not in our policy. It practises the policy; it does not replace it.

Check your options first: could two responses both be right in your school? If so, say so in the feedback, or drop that scenario.

Show prompt

Build a single web page for [staff group] on [policy or procedure].
The change I want: after using it, they can choose the first step our [policy] expects in [kind of situation].
It should show one made-up scenario at a time, then the steps our policy expects, in order, each with the policy line it comes from.
The content is: [paste 3–5 made-up scenarios, the steps our policy expects for each, and the policy lines they come from, checked by you].
It must work on a phone and with a keyboard alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; describe a real person, student, family or event, or give advice that is not in our policy.
It is working when:
1. When I check every step and policy line against our policy, they match word for word.
2. When I read each scenario, it names no real person, student, family, school or event.
3. When I open it at phone width, each scenario and its steps fit with no sideways scrolling.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [staff group] on [policy or procedure].
The change I want: after using it, they can choose the first step our [policy] expects in [kind of situation].
It should show one made-up scenario at a time, ask what to do first from three options, and, after each answer, say whether it is right and explain why, quoting our policy.
The content is: [paste 3–5 made-up scenarios, each with three options, the one our policy expects and the policy line that says so, checked by you].
It must work on a phone and with a keyboard alone, and show right and wrong in words, not colour alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; describe a real person, student, family or event, or give advice that is not in our policy.
It is working when:
1. When I choose the response our policy expects, it says so in words and quotes the policy line behind it.
2. When I choose another response, it says so in words, gives the response the policy expects and says why, without judging the person.
3. When I check every scenario, option and reason against our policy, they match, and none describes a real person or event.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: short scenarios of three or four sentences, three realistic options, and feedback that quotes your own policy's words.

• • •

8. A worked example that fades

After using this, [your class] will [do the method] on their ownView brief and promptsClose this build

For when students can follow your example but freeze when they try one alone.

Best for: any method with steps: calculations in maths and science, analytical writing, grammar; upper primary or secondary · Rungs: Show, then Respond

Outcome: After using this, [your class] will [do the method] on their own, which I'll see when they complete one new [problem or task] without the page next lesson.

Success checks:

  1. When I give the right answer to a step I have to do, it says "Correct" in words and says why that step works.
  2. When I give a wrong answer to a step, it says so in words, shows the right step and says why.
  3. When I go through it, it shows the full example first, then a partly worked one, then one to try, and no answer appears before I have tried.

Red line: it must never show the answer to a step before the student has tried it.

Show prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can [do the method] on their own.
It should show one fully worked example of [method], one step at a time, with a "Why?" button under each step that shows the reason.
The content is: [paste one worked example, step by step, with one sentence on why for each step, checked by you].
It must work on a phone and with a keyboard alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; change any step or reason I gave it.
It is working when:
1. When I check each step and its why against my example, they match word for word.
2. When I press Next, it shows one more step, in order, and no later step appears early.
3. When I use only the keyboard, it lets me show every step and every why and always shows where I am.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [year group or age] in [subject].
The change I want: after using it, they can [do the method] on their own.
It should show my worked example step by step, then a partly worked one where students do the last steps, then one to try alone; for each step they do, it should ask for their answer, chosen from three options, and, after each answer, say whether it is right and explain why.
After two wrong tries on a question, it says "Ask your teacher" or shows a worked example.
The content is: [paste one full worked example, one partly worked example and one to try, each step with its answer and why, checked by you].
It must work on a phone and with a keyboard alone, and show right and wrong in words, not colour alone.
It must never: ask for names or save anything; call AI or any website; use timers, points, leaderboards or confetti; show the answer to a step before the student has tried it.
It is working when:
1. When I give the right answer to a step I have to do, it says "Correct" in words and says why that step works.
2. When I give a wrong answer to a step, it says so in words, shows the right step and says why.
3. When I go through it, it shows the full example first, then a partly worked one, then one to try, and no answer appears before I have tried.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: the PEEL paragraph starter. A full example revealed one part at a time with a "why?" at each, then a partly finished one, then the student's own, with example answers shown only after they have written something.

• • •

Not on the menu: simulations. They are the highest-risk build, because the maths in the code can be quietly wrong. See the two-dice starter and try one at Level 2 ▲ Orange.

• • •

9. Lesson-ready checklist

After using this, [you or a colleague] will prepare [your lesson or routine] using the checked listView brief and promptsClose this build

For when you repeatedly forget one preparation step, or a colleague needs to use your preparation routine without explanation.

Best for: teachers and colleagues preparing a lesson, meeting or routine · Rungs: Show, then Respond

Outcome: After using this, [you or a colleague] will prepare [your lesson or routine] using the checked list, which I'll see when they mark the completed steps, identify what remains and reset it without my help.

Success checks:

  1. When I complete one step, only that step changes and the remaining count falls by one; when I undo it, the step and count return to their original state.
  2. When I press Reset or reload, every step is incomplete and the remaining count equals the list length; when the supplied list is empty, it says "No preparation steps yet" and shows no misleading completion message.
  3. When I put the mouse away, I can complete, undo and reset every step with the keyboard, can see focus and status in words, and can read the page at phone width without sideways scrolling.

Red line: it must never save completion or typed content, ask for names or personal details, or add a step I did not supply. This is a teacher workflow, so it must not add quiz questions, scores or student learning activities.

Sample content, ready to adapt:

  1. Check the lesson goal and final task.
  2. Check that the printed instructions match the lesson goal.
  3. Check equipment against the approved preparation list.
  4. Open the lesson resources on the teaching laptop.
  5. Test the example activity with made-up content.
  6. Prepare a paper fallback if the technology fails.

Use these six steps for a first test, then replace them with your own checked, non-confidential routine. Do not paste pupil information, private school policies, passwords or real meeting records. You still decide whether the list is complete for its purpose.

Show prompt

Build a single web page for [you or a colleague] preparing [your lesson or routine].
The change I want: they can follow my checked preparation list and see each step clearly.
It should show a heading and my steps in their supplied order, with one step per row and a short note that this reference list does not save progress.
The content is: [paste the six sample steps above, or 6–10 of your own checked, non-confidential steps].
This is a teacher workflow, not a student learning activity. Do not add quiz questions, right/wrong feedback or retrieval activities.
It must work on a phone and with a keyboard alone. Every control has a visible label and focus outline; ordinary text contrast is at least 4.5:1; it fits at 320 CSS pixels wide without sideways scrolling.
It must never: ask for names or personal information; save anything; call AI or any website; load external scripts, fonts or images; use timers, points, leaderboards or confetti; add, remove or rewrite my steps.
It is working when:
1. When I compare the page with my list, all steps appear in the same order and wording.
2. When I open it at 320 CSS pixels wide, every step is readable with no sideways scrolling.
3. When the supplied list is empty, it says "No preparation steps yet" rather than showing an empty checklist as complete.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

Respond prompt

Build a single web page for [you or a colleague] preparing [your lesson or routine].
The change I want: they can check off preparation steps, see what remains and start again without my help.
It should show my steps in order as labelled checkboxes, a remaining-count message in words, and a Reset button. Checking and unchecking one step changes only that step and the remaining count. Reset and reload both start clean. With no supplied steps, show "No preparation steps yet" and do not claim completion.
The content is: [paste the six sample steps above, or 6–10 of your own checked, non-confidential steps].
This is a teacher workflow, not a student learning activity. Do not add quiz questions, right/wrong feedback or retrieval activities.
It must work on a phone and with a keyboard alone. Every control has a visible label and focus outline; changes in status are announced to a screen reader; status is never colour alone; ordinary text contrast is at least 4.5:1; it fits at 320 CSS pixels wide without sideways scrolling.
It must never: ask for names or personal information; save anything; call AI or any website; load external scripts, fonts or images; use timers, points, leaderboards or confetti; add, remove or rewrite my steps.
It is working when:
1. When I complete one step, only that step changes and the remaining count falls by one; when I undo it, the step and count return to their original state.
2. When I press Reset or reload, every step is incomplete and the remaining count equals the list length; when the supplied list is empty, it says "No preparation steps yet" and shows no misleading completion message.
3. When I put the mouse away, I can complete, undo and reset every step with the keyboard, can see focus and status in words, and can read the page at phone width without sideways scrolling.
Give me one self-contained HTML file. Before you build, tell me in three lines what you will make.

What good looks like: your own useful preparation list, a clear "4 steps remaining" message, reversible checkboxes and one Reset button. Your partner uses it without coaching. At Level 2, adapt it to your own routine and test the empty list; at Level 3, complete both S13 and S14 as core work: a colleague changes checked content without logic edits, and you test two boundaries and rerun the original checks. Nothing persists after reload.

DEEP Education Network · Build with AI · Two rules: no student names or data anywhere; nothing student-facing calls AI.