A grid of cards that flip to good practice or common mistake.
Hosted edition
Configuration
Leave both this and the line below empty to show the cards on their own.
Brand coloursThe two verdict colours are darkened automatically until the white
text on them is readable. Pick the shade you want — it will be adjusted only if it has to be.
i
Drops to one on a phone.
Wording on the cards
Cards
The cards live inside the link itself, so pasting one back in brings all its content with it.
Working out where the grid page is…
Live preview
!
How this works
A grid of statements. Students read one, decide for themselves whether it is good
practice or a mistake, then tap to find out. The deciding is the activity — a
list of rules gets skimmed, a card you have to commit to does not.
The grid page itself is hosted once, here. Your cards are not stored anywhere
— they are squashed down and packed into the link. When someone opens it, their
browser unpacks them. That is why the link is so long, and why there is nothing for
you to upload.
Writing good cards
Mix them up. If the first three are all DOs, students stop reading and
start pattern-matching. The builder keeps a count for you.
Make the wrong ones tempting. A DON’T that is obviously silly teaches
nothing. The good ones are things students genuinely believe.
Keep the front short. It is a card, not a paragraph. The explanation on
the back is where the detail goes.
Worth knowing
The grid never changes height. Flipping a card swaps its two faces in
place, so nothing on the page below it shifts. That matters in some careers platforms, where
a growing embed slides down over the Submit button.
Verdict colours are checked for you. The usual bright green and red are
too light for white text — they land around 2.5:1 and 3.8:1 against the 4.5:1
that readable text needs. Whatever you pick is darkened just enough to pass, keeping
the colour you chose.
Nothing is stored. The part of the link after the #
never leaves the browser, so your cards are never sent to this server and never
appear in any log here.
To change a card later, paste your link back into the box at the bottom
left, edit it, and swap the link over.
Keep the whole link. If it gets cut short in an email or a text box, it
will not open. The page will say so rather than showing half a grid.
It needs this site to be up. The page is served from here, so if this
server is down the embed shows an empty box.
Running your own copy
Both this builder and the grid page are plain HTML files with no server behind
them, so they will sit on any hosting that serves static files — Kinsta, GitHub
Pages, SharePoint, a university web server, anything. There is nothing to install, no
database, and nothing loaded from anywhere else at all.
Copy this folder structure across, keeping the shape:
The builder looks for a copy of the grid page alongside itself when it loads. If it
finds one, your links point at your own hosting and you are entirely independent. If it
does not, they point back at the original. Either way the address it settled on is shown
at the bottom of the settings, and you can type a different one in.