Quiz / flashcard images

An educator needs this while building study material. Each card has a front and a back. The question sits on the front. The answer sits on the back. In a folder of 200 images, a front and a back that belong together have to stay paired. The pairing cannot be a naming habit you keep in your head.

This happens while you build the set, and again when you add cards. The person doing it already owns the questions and answers. They should not duplicate the wrong side in a design file.

The job is PNG pairs: card-01.png and card-01-back.png. You keep named exports Front and Back on one component. Per-card data is keyed by variant. One export writes both sides. The next card is another keyed file, or another artboard using the same named exports.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same card, named-export variants, paired files.

The component is .lerret/course/flashcard.jsx with named exports Front and Back. One file, two variants. The question fields feed Front. The answer fields feed Back. The card chrome stays shared, so the pair looks like a pair.

Data is per-card data keyed by variant: question on the front, answer on the back. This is the third of the four bulk patterns: named-export variants plus per-variant keyed data in one data file. The filenames follow the variant naming convention, which is how card-01.png and card-01-back.png stay together. There is no batch product, no queue, no orchestrator.

The images are PNG pairs, card-01.png and card-01-back.png. Front reads the question. Back reads the answer. The variant names are how the two files stay a pair when the folder holds 200 images.

Front and back stay paired by the variant naming convention, so nothing gets mismatched in a folder of 200 images. A design file with 400 frames will mismatch the first time someone duplicates the wrong side. You use Lerret because the pair is the named exports, and the names are the files.

Question on the front, answer on the back. The pair is a still from a local file. Front and back stay paired by the variant naming convention, so nothing gets mismatched in a folder of 200 images.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.