/** @jsxImportSource https://esm.sh/react */ import { JSX } from "npm:react"; import { renderToString } from "npm:react-dom/server"; interface QuizQuestion { question: string; answer: string; } interface GenerateLessonHtmlParams { email: string; lesson: number; title: string; fillBlank: JSX.Element; content: JSX.Element; quiz: QuizQuestion[]; } export function generateLessonHtml({ email, lesson, title, fillBlank, content, quiz }: GenerateLessonHtmlParams) { const lessonJsx = (

{title}

The fill-in-the-blank and review questions in this (and every) lesson are there only to strengthen learning. What you fill out will be emailed to you once you complete the lesson, but nothing will be recorded or "graded."

Pre-lesson writing exercise

Fill in the blank below. If you're not sure, just take a guess.

{fillBlank}

{content}

<h2>Review</h2>
          <p>
            <em>
              Take a stab at each question by filling in the blank. Answers will be included in the email with your
              responses. You are welcome to look back at the lesson content or search the Internet for these questions,
              of course. I'd encourage you to give each one a try first, though, because the effort of retrieval will
              lead to more durable learning.
            </em>
          </p>
          {quiz.map(({ question }) => (
            <div key={question}>
              <p>{question}</p>
              <label htmlFor={`ANSWER-${question}`}>Your answer</label>
              <br />
              <textarea name={`ANSWER-${question}`} id={`ANSWER-${question}`} rows={2} cols={40} />
            </div>
          ))}

<h2>Reflection</h2>
          <p>
            Jot down a few takeways from this lesson. Try explaining new learnings in your own words and connecting the
            concepts to your existing knowledge and mental models. Come up with your own examples for each topic, if
            possible.
          </p>
          <label htmlFor="reflection">Your notes:</label>
          <br />
          <textarea id="reflection" name="reflection" rows={10} cols={40} />
          <br />

<button type="submit">Complete lesson</button>

{lesson < 9
            ? (
              <p>
                The next lesson will arrive in your inbox tomorrow once you've completed this one by clicking the button
                above.
              </p>
            )
            : (
              <p>
                That's a wrap! Congrats, and thank you for going through all 10 lessons. I hope you liked the course.
              </p>
            )}
        </form>

<hr />

<footer>
          <p>If you have any feedback, I'd love to hear it. Send me an email at pete@petemillspaugh.com. Thanks!</p>
          <p>
            <a href={`https://petermillspaugh-unsubscribe.web.val.run?email=${email}`}>Unsubscribe</a>
          </p>
        </footer>
      </body>
    </html>
  );

return renderToString(lessonJsx);
}</article></body></html>

lessonTemplate