A prompt for the front and an answer for the back of each one.
The activity
Its name and the style of card.
Only used as the page title. Students do not see it inside the card.
Look
Colours and card height.
Brand coloursThe topic tag is worked out from the main colour and darkened until it stays readable.
480 pixels. Make it taller if your answers are long.
Your link
Everything lives inside the link itself, so you can load an old one back in to edit it.
The cards live inside the link itself, so pasting one back in brings all its content with it.
Working out where the flip card page is…
Preview
How this works
The usual problem with these widgets is that they need a file hosted somewhere,
and plenty of universities will not let their careers teams host files. This one
removes that step entirely.
The flip card 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 the cards and shows them. That is why the link is so long,
and why there is nothing for you to upload.
Using it
Write your cards on the left.
Click Copy embed code.
Paste it into your careers platform, SharePoint, Moodle or your CMS, anywhere that
accepts an embed or iframe.
Worth knowing
Nothing is stored. The part of the link after the #
never leaves the browser, so your card content is never sent to this server and never
appears 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 deck.
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.
Do not put personal information in the cards. Anyone with the link can
read everything in it.
Running your own copy
Both this builder and the flip card 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 and no database.
Copy this folder structure across, keeping the shape:
The builder looks for a copy of the flip card 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.
If you only want the flip card page and not the builder, that single file is
all you need — build links here and change the address to yours.
Making it fit the page
An embedded frame cannot grow to fit its contents on its own, so the embed code
sets a fixed height based on your card height. If your web team can add a small script
to the host page, the widget sends its real height as a message
(flipcards:height) that they can listen for.