taylorbell.com
Writing
Notes
Contact

On Flashcards

Several years ago I had a subscription to Wired Magazine. In one issue they ran an article about Piotr Wozniak, inventor of a "Spaced Repetition" algorithm that changed his (and in turn, my studying life).

When studying flashcards, if you just study the ones that you already know, you're not going to be as likely to learn to remember the things you don't already.

Kind of a weird sentence, but here's what I'm saying.

Think of old school index card flashcards. The approach that was most common when I was growing up was too write a fact on the front, and several bullet points on the back. Then you'd flip through each one, day what you could, then rotate it to the back of the stack.

There lies the problem, though. You're seeing the things you don't have down yet just as much as the things you do (assuming you could remember all the bullet point items in the first place).

The SuperMemo algorithm fixes this problem by having you the Learner rank how well you know the material on the card. The less you "know" it, the sooner you'll see it. Kinda like putting a card just 2 places back instead of the very end.

Formulating Knowledge

The SuperMemo algorithm is great, but designing the cards you feed it is how you get the most out of it.

The 20 Rules of Formulating Knowledge is a great read, but here are some of my notes and tweaks to the process.

The first couple rules are related to the idea that you shouldn’t use the software to learn things until you understand them.

For, things you, like, want to learn for real this makes total sense.

Unfortunately, in the university setting there are times where are you have to do rote memorization of facts in order to pass tests. The most immediate example that comes to mind is my art history class-- more on that in a minute.

Wozniak says you should make flashcards as simple as possible. Instead of having multiple things on one card, it’s best to have just one. The goal is to get yourself to the point where you can answer question almost immediately upon seeing it.

The biggest rule takeaway is to have the smallest amount of information on the card as possible. This leads to faster recall when the material is learned, and saves you from forgetting one of the sub-bullets that would be on the paper index card.

Let's revisit my art history class.

How to build cards

There were dozens of works studied in each section of the class, and each of them got several cards created.

With the same image on the front of each card, I'd make several and prompt for:

  • Name of the piece
  • Artist
  • Year
  • Original location
  • Current museum
  • Media
  • what is it depicting?
  • At least three separate "fact" cards.

Cloze deletion for remembering sentences

Close deletion is a technique where a Learner writes out about sentence or two, then replaces a word or phrase with ...hint` like Madlibs in reverse.

The other part of making cards like this is overlapping lines.

For example:

  • Front: This piece of art was given to (...person) for their big day.

  • Back: This piece of art was given to Whomever for their big day.

  • Front: After Whomever received Whatever, they (...reaction)

  • Front: After Whomever received Whatever, they Reacted Appropriately.

There's a much better example in the original 20 Rules article, but I think you catch the vibe. Memorizing things this way sets you up for answering essay prompts and the ilk.

On top of all this I did the cards forward and backwards so that I would have the name of the piece of art and then be able to draw a picture of it in my head for flipping the card.

I got an A without ever going to class. I have mixed feelings about that.

Another example about flashcards

My most valuable experience with Anki was when I was taking Mandarin. We had to write words and sentences using traditional characters as well as in the Pinyin. We also had to know which tone to use when speaking.

So what I did was made a color code for each of the four tones. Then when building the cards, I would write the characters in the pinyin both in the appropriate color. This allowed me to memorize the tone "for free".

The cool & weird part was developing a sorta mild synesthesia-- when looking at the writing on tests, I couldn't not see the words in color. Again, it is important to do the cards forwards and backwards (as in, the front of one card is the back for another and vice-versa).

A Question Per Lesson

If each lesson has one big idea, there are a few ways to create a question from it.

Write a little bit of code, do Cloze deletion for a rule of thumb, ask what a particular method does, fill in the blank for function parameters, etc.

Here are some examples of how to know of the flashcards that I made for Kent C. Dodds’ React for Beginners course. They should be useful in helping people create questions for their own lessons or for our content review team two.

Short and sweet:

    {
      title: 'Manipulate the DOM with React refs',
      text: 'What React prop is used for directly accessing DOM nodes?',
      answer: {
        value: 'React’s `ref` prop is used for directly accessing DOM nodes.',
      },
    }

This one is probably a little bit long, but in the interest of one per lesson...

    {
      title: 'Stop Memory Leaks with `componentWillUnmount`',
      text: 'When is `componentWillUnmount` called and when should it be used?',
      answer: {
        value:
          'It’s called before the component is removed from the page. It should be used when your component has things running which need to be cleaned up, especially asynchronous tasks like `setTimeout`, `setInterval`, or ajax requests.',
      },
    }

A straight forward couple sentences that get the point across and don't have to be memorized verbatim:

    {
      title: 'Use Class Components',
      text:
        'Why should we use arrow functions as instance methods inside of class components?',
      answer: {
        value:
          'Arrow functions have their own lexical `this`. When we use arrow functions, we don’t have to manually bind them to the class.',
      },
    }

A mini code sample:

    {
      title: 'Make Dynamic Forms with React',
      text: `
How would you update this \`input\` tag to call a function \`this.update\` every time a key is pressed in the input form?
    <input
      type="text"
      name="username"
    />
`,
      answer: {
        value: `
Add an \`onChange\` handler:
    <input
      type="text"
      onChange={this.update}
      name="username"
    />
`,
      }

This one is a bit big for a quiz maybe, but a good challenge question:

    {
      title: 'Use Component State with React',
      text:
        'Create a stateful counter component called `Counter` that renders a button with a number that represents the times that button has been clicked. When the button is clicked, the count should be incremented by one.',
      answer: {
        value: `
Initialize the \`state\` to have a \`count\` of \`0\`, have a \`handleClick\` property that calls \`this.setState\` with an updater function to increment the count, and render the button with \`this.state.count\` as the children and \`this.handleClick\` as the \`onClick\` handler.
    class Counter extends React.Component {
      state = {count: 0}
      handleClick = () => {
        this.setState(state => ({count: state.count + 1}))
      }
      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.count}
          </button>
        )
      }
    }`,
      },
    }