/** @jsxImportSource https://esm.sh/react */ import { generateLessonHtml } from "https://esm.town/v/petermillspaugh/lessonTemplate"; import { renderToString } from "npm:react-dom/server"; /* * Note: this lesson is a work in progress 👷‍♂️ */ const TITLE = "Generation"; const FILL_BLANK = <>TODO; const CONTENT = ( <>

Generation

Generation is when you attempt to solve a problem before being presented with the solution or relevant knowledge. Generation produces more durable learning.

Trying to solve a problem before you know the solution is an effective technique.

Desirable difficulties.

This course uses generation in the pre-lesson exercise.

Learning is more durable when it’s effortful. Josh Comeau uses this tactic in his{" "} courses, challenging students to solve a coding exercise before he introduces the relevant content.

The case for writing

The act of writing allows you to elaborate and reflect on what you've learned (or know), often forging new connections between related mental models. It often includes retrieval practice as you recall the information while translating your thoughts to paper. Writing can also expose gaps and fuzzy spots in your knowledge, forcing you to refine what you know.

Chapter 4 of Make It Stick{" "} on embracing difficulties includes the story of "The Blundering Gardener" Bonnie Blodgett who became an expert gardener by getting her hands dirty and learning things one at a time by trial and error. Bonnie also writes extensively about her gardening in a quarterly called The Garden Letter. The book notes that "in{" "} writing{" "} about her experiences, Bonnie is engaging in two potent learning processes beyond the act of gardening itself. She is retrieving the details and story of what she has discovered—say, about an experiment in grafting two species of fruit trees—and then she is elaborating by explainging the experience to her readers, connecting the outcome to what she already knows about the subject or has learned as a result."

); const QUIZ = [ { question: "", answer: "", }, ]; export const generation = { title: TITLE, fillBlank: FILL_BLANK, quiz: QUIZ, fetchHtml: (email: string, lesson: number) => generateLessonHtml({ email, lesson, title: `Lesson ${lesson + 1}: ${TITLE}`, fillBlank: FILL_BLANK, content: CONTENT, quiz: QUIZ, }), };