The Draw! card

[badlydrawnrob]

You can find a long-winded old issue here also. "Usually a <figure> is an image, illustration, diagram, code snippet, etc."

1. It's fine to use <figure> with images and code snippets.
2. A <figcaption> might be useful, especially for a "hint" on the front.

Having something visual makes the flashcards more fun to revise — especially for kids. It's also great for adults to not only vary your inputs (a picture speaks a thousand words), but allowing the brain to work in diffuse mode.[^1]

Ideas for cards

As always ONE idea per card. Aim for most cards to be answered in 10—60 seconds (unless a puzzle).

1. A fun .gif with an animation,
2. A simple sketch (or iPad drawing),
3. A diagram showing the "flow" of data,
4. UI elements (and how to reason about them),
5. Anything visual, such as shapes
6. A small presentation, or some slides,
7. A game still, such as Ozaria or Codecombat.
8. Visualising some programming terminology
9. A visual stepper (stepping through a function's output)

Puzzles

Some concepts are difficult, or "dry" (and boring). Visualising it can sometimes help!

You could even create a puzzle for yourself, perhaps a problem that you haven't an answer for yet. Or a data definition, purpose statement, and type signature, when there's a few potential routes to solve the problem (see HTDP to learn how to design functions). What design decisions did you make (a simple example)?

[^1]: One good example is working with types (also type driven development, but that's advanced). Take a small UI element, like a form and validation. There's many ways to tackle that problem; sometimes writing the problem statement down, doodling, then stepping away can help. You let the background brain do the work and you'll often get better results than grinding it out in front of the computer.