pick one, fairly, in front of everyone.
picking someone at random is a social act as much as a technical one. a teacher choosing who answers, a raffle, deciding who goes first — the point is that everyone can see it was fair.
the tools for it are wheels covered in advertising, and half of them want you to sign in to save a list.
a page with your names in it, that draws visibly and does not repeat until the list is exhausted, takes a message and belongs to you.
visibly fair, and no repeats.
01 / what it istwo things separate a useful picker from a toy. the first is drawing without replacement, so nobody is chosen twice while someone else has not been chosen at all. the second is showing who has already come up, so the fairness is visible rather than asserted.
the third, for a classroom, is being able to exclude whoever is away today without editing the list — which is one line in the prompt and missing from most of the free ones.
- your names, in the page
- a draw without replacement by default
- who has already been picked, visible
- temporarily excluding whoever is absent
- a reveal big enough for a room to read
- a reset for the next round
- where the names live
- in the page, so the list is part of what you published
- what it stores
- the current round’s picks, in this browser
- the draw
- without replacement by default; with replacement only if you asked
- exclusions
- mark someone out for today without changing the list
see one in action.
02 / examplea class list of twenty-nine names drawing without replacement, with who has already been picked shown
the live example is still being built — the prompt below is the one it was made with.
copy this, then make it yours.
03 / starting prompta starting point, not a template — the point of an agent is that the result is yours. change the sections to match what you want, and remove anything you don’t need.
Build me a random name picker as a single web page.
Ask me first:
- The names, or how I want to add them.
- Whether a name can be picked again before everyone has had a turn.
- Whether I need to exclude people temporarily, such as anyone absent today.
- Whether I want to pick more than one at a time, or split the list into groups.
- Whether there should be any animation before the reveal.
Use my names. Do not invent placeholder names, and do not add features beyond what I asked for.
WHAT IT DOES
- Draws a name from the list. By default, without replacement: nobody comes up again until everyone has.
- Shows who has already been picked in this round, so the fairness is visible to the room rather than something they have to take on trust.
- The reveal is large — readable from the back of a room.
- Temporarily exclude names without removing them from the list, and bring them back next time.
- A reset that starts a new round with everyone back in.
- If I asked for groups: split the list into a given number of groups, or into groups of a given size, and show the result clearly.
- Let me edit the list in the page.
DESIGN
- The name being revealed is essentially the whole screen.
- Works projected onto a classroom display and on a phone.
- Keep any animation short. Suspense is fine; waiting is not.
BE HONEST ON THE PAGE
- Say that the round's state is stored in this browser, so a different device starts a fresh round.
- The names are part of the published page and readable by anyone with the url. Note that, so first names only is an informed choice.
STORING THE DATA
- Save everything to localStorage in the browser, automatically, as I go. No
accounts, no login, no server call.
- On the page, say plainly that data lives in this browser only and does not
sync to other devices. Do not bury it.
- Give me an "export" button that copies or downloads everything as JSON, and an
"import" that reads the same JSON back. That is the only way my data can move
between devices, so it is not optional.
- Never lose what I have already entered. If the stored data is from an older
version of the page, read what you can rather than throwing it away.
DELIVERY
- Produce one self-contained HTML file. Inline the CSS and JavaScript.
- No build step, no server, no framework, no package install, no external
requests at runtime.
- Mobile-first and responsive; it has to be usable one-handed on a phone and
still look right on a laptop.
- Accessible: semantic HTML, real contrast, visible keyboard focus, labelled
controls, touch targets big enough to hit, and respect reduced-motion.
- Use placeholders where information is missing. Do not invent facts, numbers,
names, dates, prices, or results I have not given you.
- Before you call it finished, use it yourself: enter real-looking data, reload
the page, and confirm nothing is lost or mangled.
PUBLISHING
Publish the finished page to HTMLShare and give me the link.
Use exactly one of the two paths below, preferring the first. Make the call
directly. Do not route it through a code sandbox, container, or computer-use
session — that is where the request gets blocked, and it is never necessary.
1. An HTMLShare integration or connector, if you have one configured.
The page is permanent and owned by my account. Report the url and the
siteId. There is no claimUrl or manageToken on this path — do not go
looking for one, and do not switch paths in order to produce one.
2. Otherwise, publish anonymously over REST. No account, key, or signup is
needed:
POST https://api.htmlshare.net/v1/publish
content-type: application/json
{"html": "<!doctype html> ... "}
The reference is https://htmlshare.net/docs and, for the full schema,
https://api.htmlshare.net/openapi.json
Report these from the response, in your reply and never inside the page:
url the public page
claimUrl a private link that is mine alone. opening it is how I keep
the page past its 24-hour expiry, or set an email reminder
before it goes. it carries the manage token, so it must
never appear in the published HTML or anywhere a visitor
could see it.
manageToken the only thing that can edit or delete this page later. it is
returned once and never again, so tell me what it is.
Tell me which of the two you used. If the path you reach for first is
unavailable in your environment, say so and tell me what you are switching to
before you publish — a permanent page on my account and a 24-hour anonymous
page are different things, and which one I get is my decision, not a detail.
If I ask for a change afterwards, update the existing page instead of
publishing again, so the URL I have already shared keeps working — through the
same integration on path 1, or with the manage token as an X-Manage-Token
header on path 2.
RECIPE MARKER
Include this tag in the <head>, exactly as written:
<meta name="htmlshare-recipe" content="random-name-picker">
It tells htmlshare which recipe the page came from, so the library can count
that this one was actually made. It carries nothing else.give it a url.
04 / publishing ithow you publish depends on how you’re working.
- with an integration
- if your assistant already has htmlshare connected — mcp or another supported integration — just ask it to publish the finished page and hand back the url. the page belongs to your account and is permanent. when you want a change, ask for an update to that same page rather than a new one.
- with no integration
- the prompt tells the assistant to post the html to the rest api instead, which needs no account and no key. it comes back with a live url you can open immediately, a private claim link, and a manage token. the claim link is how the page stops being temporary — keep it.
- by hand
- nothing stops you doing it yourself: have the assistant give you the html file and drop it on the htmlshare home page. same url, same page, one more step.
- what matters here
- a classroom picker is used daily from one device and needs to be a bookmark, not a search. claim it — and remember the names are in the page, so use first names only.
used every day, so it has to be there every day.
05 / keeping it aroundfine to test the draw. the page stops serving 24 hours later with a 7-day recovery window.
claimed, it is a bookmark on the classroom machine for the whole year — which is how this page is actually used.
- keep it around
- a daily classroom tool cannot be rebuilt daily.
- custom url
- a bookmark on a shared machine that survives whoever cleared the history.
- stable updates
- the list changes each term; the page changes at the same address.
questions.
06 / questionscan the same name come up twice?
not until everyone has had a turn, unless you asked for it. drawing without replacement is the default because it is the behaviour a room considers fair.
is the list public?
yes — the names are in the published page, so anyone with the url can read them. first names only is the sensible policy, particularly for a class.
does the round survive a reload?
yes, on the same browser: who has been picked is stored locally. a different device starts a fresh round, which is usually what you want anyway.
can it make teams?
ask for it in the first message — splitting into a number of groups or into groups of a set size is a small addition and it is the second thing everyone wants.