From ca4fa4ec6adab8fdc15dd3b9bd3f9aabda5c64af Mon Sep 17 00:00:00 2001
From: Kenneth Cassel <kennethcassel@gmail.com>
Date: Thu, 4 Nov 2021 16:31:30 -0500
Subject: [PATCH 01/15] fix: wip adding solutions/reset code to quizzes

---
 components/CreateQuizForm.tsx | 237 ++++++++++++++++------------------
 components/PreviewQuiz.tsx    | 174 +++++++++++++++++++++++++
 package.json                  |   2 +
 pages/q/[id].tsx              |  35 ++++-
 pages/quizzes/create.tsx      |   2 +-
 types.ts                      |   1 +
 yarn.lock                     |  10 ++
 7 files changed, 331 insertions(+), 130 deletions(-)
 create mode 100644 components/PreviewQuiz.tsx

diff --git a/components/CreateQuizForm.tsx b/components/CreateQuizForm.tsx
index b9fa2cb..bbf7f3b 100644
--- a/components/CreateQuizForm.tsx
+++ b/components/CreateQuizForm.tsx
@@ -1,11 +1,10 @@
 import { Session } from "@supabase/supabase-js";
 import React, { FormEvent, useState } from "react";
-import { SaveQuiz } from "../types";
-import { supabase } from "../utils/supabaseClient";
+import classNames from "clsx";
+import { Profile, SaveQuiz } from "../types";
 import Editor from "@monaco-editor/react";
 
-import Hashids from "hashids";
-const hashids = new Hashids();
+import PreviewQuiz from "./PreviewQuiz";
 
 type FormInputProps = {
   name: string;
@@ -15,154 +14,140 @@ type FormInputProps = {
 };
 
 const FormInput = (props: FormInputProps) => (
-  <div className="sm:col-span-6 space-y-3">
-    <label htmlFor={props.name} className="text-base font-normal text-white">
+  <div className='space-y-3 sm:col-span-6'>
+    <label htmlFor={props.name} className='text-base font-normal text-white'>
       {props.label}
     </label>
-    <p className="text-sm text-white text-opacity-50">{props.sublabel}</p>
-    <div className="">{props.children}</div>
+    <p className='text-sm text-white text-opacity-50'>{props.sublabel}</p>
+    <div className=''>{props.children}</div>
   </div>
 );
 
 type CreateQuizFormProps = {
   session: Session;
+  profile: Profile;
 };
 
-export default function CreateQuizForm({ session }: CreateQuizFormProps) {
+export default function CreateQuizForm({
+  session,
+  profile,
+}: CreateQuizFormProps) {
   const [description, setDescription] = useState("");
+  const [preview, setPreview] = useState(false);
+  const [solution, setSolution] = useState("");
   const [startCode, setStartCode] = useState("");
   const [output, setOutput] = useState("");
   const [loading, setLoading] = useState(false);
-  const [createdUrl, setCreatedUrl] = useState(null);
-
-  const saveQuiz = async (e: FormEvent) => {
-    setLoading(true);
-    e.preventDefault();
-
-    const now = new Date();
-    const quiz: SaveQuiz = {
-      description,
-      start_code: startCode,
-      target_output: output,
-      language: "typescript",
-      created_at: now,
-      updated_at: now,
-      created_by: session.user.id,
-    };
-
-    // Insert the quiz without a friendly ID
-    // Note that friendly ID isn't required, it's just helpful for debugging
-    const { data: insertData, error: insertError } = await supabase
-      .from("quizzes")
-      .insert(quiz);
-    setLoading(false);
-    if (insertError) throw insertError;
-
-    // Generate the friendly (hashed) ID for the created quiz
-    const insertedId = insertData[0].id;
-    const hashedId = hashids.encode(insertedId);
-
-    const url = `${process.env.NEXT_PUBLIC_HOME_URL}/q/${hashedId}`;
-    setCreatedUrl(url);
-
-    // Update the quiz to include the friendly ID
-    await supabase
-      .from("quizzes")
-      .update({ friendly_id: hashedId })
-      .eq("id", insertedId);
-  };
 
   return (
-    <form onSubmit={saveQuiz}>
-      <div>
-        <div>
-          <div className="mt-6 grid grid-cols-1 gap-y-12 sm:grid-cols-6">
-            <FormInput
-              key="description"
-              name="description"
-              label="Enter a description"
-              sublabel="Introduce your quiz and let users know what they should make the code do."
-            >
-              <textarea
-                id="description"
-                name="description"
-                rows={5}
-                className="bg-gray-600 bg-opacity-25 text-white focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 block w-full sm:text-sm border-0 rounded-xl resize-none"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                required={true}
-              />
-            </FormInput>
+    <>
+      <div className='flex justify-end'>
+        {preview ? (
+          <p className='text-white'>
+            This is what your quiz will look like when you share it. Complete it
+            and we'll include your solution!
+          </p>
+        ) : null}
+      </div>
 
-            <FormInput
-              key="startCode"
-              name="startCode"
-              label="Start code"
-              sublabel="Enter the starter code that the user should update."
+      {preview ? (
+        <PreviewQuiz
+          quiz={{
+            language: "typescript",
+            description,
+            solution,
+            start_code: startCode,
+            target_output: output,
+          }}
+          session={session}
+          profile={profile}
+        />
+      ) : null}
+      <form>
+        <div>
+          <div>
+            <div
+              className={classNames(
+                preview ? "hidden" : "",
+                "grid grid-cols-1 mt-6 gap-y-12 sm:grid-cols-6"
+              )}
             >
-              <div className="relative group">
-                <div className="absolute bg-4 w-full h-full group-hover:ring-4 group-hover:ring-indigo-500  group-hover:ring-opacity-50 rounded-xl" />
-                <Editor
-                  height="15rem"
-                  defaultLanguage="typescript"
-                  defaultValue=""
-                  onChange={(code: string) => setStartCode(code)}
-                  className="block bg-[#1E1E1E] rounded-xl p-2 sm:text-sm"
-                  theme="vs-dark"
-                  options={{
-                    fontSize: 12,
-                    minimap: { enabled: false },
-                    overviewRulerLanes: 0,
-                    renderLineHighlight: "none",
-                  }}
+              <FormInput
+                key='description'
+                name='description'
+                label='Enter a description'
+                sublabel='Introduce your quiz and let users know what they should make the code do.'
+              >
+                <textarea
+                  id='description'
+                  name='description'
+                  rows={5}
+                  className='block w-full text-white bg-gray-600 bg-opacity-25 border-0 resize-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl'
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  required={true}
                 />
-              </div>
-            </FormInput>
+              </FormInput>
 
-            <FormInput
-              key="output"
-              name="output"
-              label="Target output"
-              sublabel="What should the user make the code output?"
-            >
-              <input
-                id="output"
-                name="output"
-                type="text"
-                className="bg-gray-600 bg-opacity-25 text-white focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 block w-full sm:text-sm border-0 rounded-xl py-4"
-                value={output}
-                onChange={(e) => setOutput(e.target.value)}
-                required={true}
-              />
-            </FormInput>
+              <FormInput
+                key='startCode'
+                name='startCode'
+                label='Start code'
+                sublabel='Enter the starter code that the user should update.'
+              >
+                <div className='relative group'>
+                  <div className='absolute w-full h-full bg-4 group-hover:ring-4 group-hover:ring-indigo-500 group-hover:ring-opacity-50 rounded-xl' />
+                  <Editor
+                    height='15rem'
+                    defaultLanguage='typescript'
+                    defaultValue=''
+                    onChange={(code: string) => setStartCode(code)}
+                    className='block bg-[#1E1E1E] rounded-xl p-2 sm:text-sm'
+                    theme='vs-dark'
+                    options={{
+                      fontSize: 12,
+                      minimap: { enabled: false },
+                      overviewRulerLanes: 0,
+                      renderLineHighlight: "none",
+                    }}
+                  />
+                </div>
+              </FormInput>
+
+              <FormInput
+                key='output'
+                name='output'
+                label='Target output'
+                sublabel='What should the user make the code output?'
+              >
+                <input
+                  id='output'
+                  name='output'
+                  type='text'
+                  className='block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl'
+                  value={output}
+                  onChange={(e) => setOutput(e.target.value)}
+                  required={true}
+                />
+              </FormInput>
+            </div>
           </div>
         </div>
-      </div>
+      </form>
 
-      <div className="pt-5 mt-6">
-        <div className="flex justify-between items-center">
-          {createdUrl ? (
-            <span className="text-white text-lg">
-              Quiz created successfully!{" "}
-              <a
-                className="font-medium underline"
-                href={createdUrl}
-              >
-                {createdUrl}
-              </a>
-            </span>
-          ) : (
-            <span />
-          )}
+      <div className='pt-5 mt-6'>
+        <div className='flex items-center justify-start space-x-4'>
           <button
-            type="submit"
-            className="gradient-cta rounded-xl px-20 py-4 font-medium text-white focus:ring-2 focus:ring-white hover:scale-105 transition disabled:opacity-50"
-            disabled={loading}
+            type='button'
+            className='w-32 py-4 text-sm font-medium text-center text-white transition bg-black border border-gray-800 rounded-md margin-auto hover:scale-105 disabled:hover:scale-100 disabled:opacity-50'
+            onClick={() => setPreview(!preview)}
           >
-            {loading ? "Saving..." : "Save"}
+            {/* <span className='text-gray-100 transition duration-200 group-hover:text-gray-100'> */}
+            {preview ? "Back to Setup" : "Next Step"}
+            {/* </span> */}
           </button>
         </div>
       </div>
-    </form>
+    </>
   );
 }
diff --git a/components/PreviewQuiz.tsx b/components/PreviewQuiz.tsx
new file mode 100644
index 0000000..65725b3
--- /dev/null
+++ b/components/PreviewQuiz.tsx
@@ -0,0 +1,174 @@
+import React, { FormEvent, useRef, useState } from "react";
+import Hashids from "hashids";
+import { Session } from "@supabase/supabase-js";
+import Confetti from "react-dom-confetti";
+import useRunCode from "../hooks/useRunCode";
+import { SaveQuiz } from "../types";
+import useTypescript from "../hooks/useTypescript";
+import { Profile, Quiz } from "../types";
+import { confettiConfig } from "../utils/confettiConfig";
+import OutputEditor from "./OutputEditor";
+import RunCodeEditor from "./RunCodeEditor";
+import { supabase } from "../utils/supabaseClient";
+
+const hashids = new Hashids();
+
+declare global {
+  interface Window {
+    ts: any;
+  }
+}
+
+type PropTypes = {
+  quiz: Quiz;
+  profile: Profile;
+  session: Session;
+};
+
+export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
+  const { tsClient, tsLoading } = useTypescript();
+  const codeRef = useRef(quiz.start_code);
+  const [loading, setLoading] = useState(false);
+  const [createdUrl, setCreatedUrl] = useState(null);
+  const { runCode, codeRunning, output, errors, hasCodeRun, success } =
+    useRunCode(tsClient, codeRef, quiz.target_output);
+
+  async function saveQuiz() {
+    setLoading(true);
+
+    const now = new Date();
+    const insertQuiz: SaveQuiz = {
+      ...quiz,
+      solution: codeRef.current,
+      created_at: now,
+      updated_at: now,
+      created_by: session.user.id,
+    };
+
+    // Insert the quiz without a friendly ID
+    // Note that friendly ID isn't required, it's just helpful for debugging
+    const { data: insertData, error: insertError } = await supabase
+      .from("quizzes")
+      .insert(insertQuiz);
+    setLoading(false);
+    if (insertError) throw insertError;
+
+    // Generate the friendly (hashed) ID for the created quiz
+    const insertedId = insertData[0].id;
+    const hashedId = hashids.encode(insertedId);
+
+    const url = `${process.env.NEXT_PUBLIC_HOME_URL}/q/${hashedId}`;
+    setCreatedUrl(url);
+
+    // Update the quiz to include the friendly ID
+    await supabase
+      .from("quizzes")
+      .update({ friendly_id: hashedId })
+      .eq("id", insertedId);
+  }
+
+  return (
+    <>
+      <div className='max-w-4xl pt-20 mx-auto sm:px-6 lg:px-8'>
+        <div className='max-w-3xl mx-auto'>
+          <div className='flex justify-between px-4'>
+            <div className='flex flex-row'>
+              <img
+                src={profile.avatar_url}
+                alt='avatar'
+                className='w-12 h-12 mr-4 rounded-full'
+              />
+              <div>
+                <div>
+                  <p className='font-bold text-white text-md'>
+                    {profile.full_name}
+                  </p>
+                  <a
+                    className='text-sm font-bold text-gray-500'
+                    href={`https://www.twitter.com/${profile.username}`}
+                    target='_blank'
+                  >
+                    @{profile.username}
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className='flex flex-col justify-end mx-8 text-sm text-gray-500'>
+              <p className='text-gray-200'>1337 views</p>
+              {quiz.language}
+            </div>
+          </div>
+          <p className='max-w-md px-4 mx-auto mt-4 mb-12 text-base text-left text-white whitespace-pre-wrap sm:mt-12 md:mx-auto sm:text-lg md:mt-16 md:text-xl md:max-w-3xl'>
+            {quiz.description}
+          </p>
+
+          <RunCodeEditor
+            codeRef={codeRef}
+            runCode={runCode}
+            hasCodeRun={hasCodeRun}
+            output={output}
+            height='20rem'
+          />
+
+          <div className='px-4 pt-8 sm:px-0'>
+            <button
+              className='relative flex items-center px-4 py-2 text-sm font-medium text-white transition rounded-md font-ibm gradient-cta hover:scale-105 disabled:hover:scale-100 disabled:opacity-50'
+              onClick={runCode}
+              disabled={codeRunning || tsLoading}
+            >
+              <Confetti active={success} config={confettiConfig} />
+              <span className='text-gray-100 transition duration-200 group-hover:text-gray-100'>
+                {tsLoading || codeRunning ? "Loading..." : "Run Code →"}
+              </span>
+            </button>
+          </div>
+
+          {errors.length > 0 ? (
+            <div>
+              <label className='block pt-8 pb-2 text-sm font-medium text-white'>
+                Errors
+              </label>
+              <div className='p-4 bg-gray-300 rounded-md bg-opacity-20 max-w-max lg:bg-transparent'>
+                {errors.map((error, index) => (
+                  <div key={index}>
+                    <p className='text-sm text-red-400'>{error}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          <div>
+            <label className='block pt-8 pb-2 text-sm font-medium text-white'>
+              Output
+            </label>
+
+            <OutputEditor output={output} height='10rem' />
+          </div>
+        </div>
+      </div>
+      <div className='justify-end pt-5 mt-6 right-64'>
+        <div className='flex items-center justify-end space-x-4'>
+          <button
+            type='submit'
+            className='px-20 py-4 font-medium text-white transition gradient-cta rounded-xl focus:ring-2 focus:ring-white hover:scale-105 disabled:opacity-50'
+            disabled={!success}
+            onClick={saveQuiz}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+      {createdUrl ? (
+        <span className='text-lg text-white'>
+          Quiz created successfully!{" "}
+          <a className='font-medium underline' href={createdUrl}>
+            {createdUrl}
+          </a>
+        </span>
+      ) : (
+        <span />
+      )}
+    </>
+  );
+}
diff --git a/package.json b/package.json
index 7a61c60..e75ca92 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
+    "@heroicons/react": "^1.0.5",
     "@monaco-editor/react": "^4.3.1",
     "@run-wasm/run-wasm": "0.0.3",
     "@run-wasm/ts": "0.0.3",
     "@supabase/supabase-js": "^1.25.0",
     "@tailwindcss/forms": "^0.3.4",
+    "clsx": "^1.1.1",
     "fathom-client": "^3.0.0",
     "hashids": "^2.2.8",
     "next": "^12.0.1",
diff --git a/pages/q/[id].tsx b/pages/q/[id].tsx
index ed90204..82341ac 100644
--- a/pages/q/[id].tsx
+++ b/pages/q/[id].tsx
@@ -2,8 +2,9 @@ import { supabase } from "../../utils/supabaseClient";
 import Hashids from "hashids";
 import { Profile, Quiz } from "../../types";
 const hashids = new Hashids();
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import RunCodeEditor from "../../components/RunCodeEditor";
+import { RefreshIcon } from "@heroicons/react/outline";
 import Confetti from "react-dom-confetti";
 import useTypescript from "../../hooks/useTypescript";
 import useRunCode from "../../hooks/useRunCode";
@@ -18,7 +19,9 @@ export async function getServerSideProps({ params }) {
 
   const { data, error } = await supabase
     .from("quizzes")
-    .select("description, start_code, target_output, language, created_by, id")
+    .select(
+      "description, start_code, target_output, language, created_by, id, solution"
+    )
     .eq("id", supabaseId)
     .single();
 
@@ -54,10 +57,20 @@ type PropTypes = {
 
 export default function ShowQuiz({ quiz, profile }: PropTypes) {
   const { tsClient, tsLoading } = useTypescript();
-  const codeRef = useRef(quiz.start_code);
+  const [showSolution, setShowSolution] = useState(false);
+  let codeRef = useRef(quiz.start_code);
   const { runCode, codeRunning, output, errors, hasCodeRun, success } =
     useRunCode(tsClient, codeRef, quiz.target_output);
 
+  function setSolution() {
+    setShowSolution(true);
+    codeRef.current = quiz.solution;
+  }
+
+  function resetCode() {
+    codeRef.current = quiz.start_code;
+  }
+
   return (
     <>
       <div className='max-w-4xl pt-20 pb-48 mx-auto sm:px-6 lg:px-8'>
@@ -92,6 +105,22 @@ export default function ShowQuiz({ quiz, profile }: PropTypes) {
           <p className='max-w-md px-4 mx-auto mt-4 mb-12 text-base text-left text-white whitespace-pre-wrap sm:mt-12 md:mx-auto sm:text-lg md:mt-16 md:text-xl md:max-w-3xl'>
             {quiz.description}
           </p>
+          <div className='flex justify-end mt-16 pt-18'>
+            <button
+              type='button'
+              className='px-2 py-2 text-xs font-medium text-center text-white transition bg-black bg-opacity-25 border-l border-gray-800 border-tl ml-2w-48 rounded-tl-md margin-auto hover:bg-opacity-100'
+              onClick={resetCode}
+            >
+              <RefreshIcon className='w-4 h-4' />
+            </button>
+            <button
+              type='button'
+              className='px-2 py-2 text-xs font-medium text-center text-white transition bg-black bg-opacity-25 border-r border-gray-800 border-tr ml-2w-48 rounded-tr-md margin-auto hover:bg-opacity-100'
+              onClick={() => setSolution()}
+            >
+              Show Solution
+            </button>
+          </div>
 
           <RunCodeEditor
             codeRef={codeRef}
diff --git a/pages/quizzes/create.tsx b/pages/quizzes/create.tsx
index b40524a..ab8f1a4 100644
--- a/pages/quizzes/create.tsx
+++ b/pages/quizzes/create.tsx
@@ -69,7 +69,7 @@ export default function Create({ serverSideSession }) {
             <div className='max-w-4xl px-4 pt-8 pb-40 mx-auto sm:px-6 lg:px-8'>
               <div className='max-w-3xl mx-auto'>
                 <PageTitle>Create Quiz</PageTitle>
-                <CreateQuizForm session={session} />
+                <CreateQuizForm session={session} profile={profile} />
               </div>
             </div>
           </div>
diff --git a/types.ts b/types.ts
index 89b109d..d248c08 100644
--- a/types.ts
+++ b/types.ts
@@ -4,6 +4,7 @@ export type Quiz = {
   description: string;
   start_code: string;
   target_output: string;
+  solution: string;
   language: string;
   views?: string;
 };
diff --git a/yarn.lock b/yarn.lock
index c9cf093..6aebb42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -108,6 +108,11 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17"
   integrity sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==
 
+"@heroicons/react@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.5.tgz#2fe4df9d33eb6ce6d5178a0f862e97b61c01e27d"
+  integrity sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==
+
 "@isaacs/string-locale-compare@^1.0.1", "@isaacs/string-locale-compare@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz#291c227e93fd407a96ecd59879a35809120e432b"
@@ -1092,6 +1097,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 cmd-shim@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"

From 6e0472ce3563869f34949fef5228bfd0245401aa Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Wed, 10 Nov 2021 10:53:42 -0700
Subject: [PATCH 02/15] fix solution previewing

---
 components/PreviewQuiz.tsx   |  54 +++++++-------
 components/RunCodeEditor.tsx |   8 ++-
 hooks/useForceUpdate.ts      |  13 ++++
 hooks/useRunCode.ts          |   4 +-
 pages/q/[id].tsx             | 136 +++++++++++++++++++++--------------
 schema.sql                   |  30 ++++----
 6 files changed, 144 insertions(+), 101 deletions(-)
 create mode 100644 hooks/useForceUpdate.ts

diff --git a/components/PreviewQuiz.tsx b/components/PreviewQuiz.tsx
index 65725b3..efbcd7b 100644
--- a/components/PreviewQuiz.tsx
+++ b/components/PreviewQuiz.tsx
@@ -69,36 +69,36 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
 
   return (
     <>
-      <div className='max-w-4xl pt-20 mx-auto sm:px-6 lg:px-8'>
-        <div className='max-w-3xl mx-auto'>
-          <div className='flex justify-between px-4'>
-            <div className='flex flex-row'>
+      <div className="max-w-4xl pt-20 mx-auto sm:px-6 lg:px-8">
+        <div className="max-w-3xl mx-auto">
+          <div className="flex justify-between px-4">
+            <div className="flex flex-row">
               <img
                 src={profile.avatar_url}
-                alt='avatar'
-                className='w-12 h-12 mr-4 rounded-full'
+                alt="avatar"
+                className="w-12 h-12 mr-4 rounded-full"
               />
               <div>
                 <div>
-                  <p className='font-bold text-white text-md'>
+                  <p className="font-bold text-white text-md">
                     {profile.full_name}
                   </p>
                   <a
-                    className='text-sm font-bold text-gray-500'
+                    className="text-sm font-bold text-gray-500"
                     href={`https://www.twitter.com/${profile.username}`}
-                    target='_blank'
+                    target="_blank"
                   >
                     @{profile.username}
                   </a>
                 </div>
               </div>
             </div>
-            <div className='flex flex-col justify-end mx-8 text-sm text-gray-500'>
-              <p className='text-gray-200'>1337 views</p>
+            <div className="flex flex-col justify-end mx-8 text-sm text-gray-500">
+              <p className="text-gray-200">1337 views</p>
               {quiz.language}
             </div>
           </div>
-          <p className='max-w-md px-4 mx-auto mt-4 mb-12 text-base text-left text-white whitespace-pre-wrap sm:mt-12 md:mx-auto sm:text-lg md:mt-16 md:text-xl md:max-w-3xl'>
+          <p className="max-w-md px-4 mx-auto mt-4 mb-12 text-base text-left text-white whitespace-pre-wrap sm:mt-12 md:mx-auto sm:text-lg md:mt-16 md:text-xl md:max-w-3xl">
             {quiz.description}
           </p>
 
@@ -107,17 +107,17 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
             runCode={runCode}
             hasCodeRun={hasCodeRun}
             output={output}
-            height='20rem'
+            height="20rem"
           />
 
-          <div className='px-4 pt-8 sm:px-0'>
+          <div className="px-4 pt-8 sm:px-0">
             <button
-              className='relative flex items-center px-4 py-2 text-sm font-medium text-white transition rounded-md font-ibm gradient-cta hover:scale-105 disabled:hover:scale-100 disabled:opacity-50'
+              className="relative flex items-center px-4 py-2 text-sm font-medium text-white transition rounded-md font-ibm gradient-cta hover:scale-105 disabled:hover:scale-100 disabled:opacity-50"
               onClick={runCode}
               disabled={codeRunning || tsLoading}
             >
               <Confetti active={success} config={confettiConfig} />
-              <span className='text-gray-100 transition duration-200 group-hover:text-gray-100'>
+              <span className="text-gray-100 transition duration-200 group-hover:text-gray-100">
                 {tsLoading || codeRunning ? "Loading..." : "Run Code →"}
               </span>
             </button>
@@ -125,13 +125,13 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
 
           {errors.length > 0 ? (
             <div>
-              <label className='block pt-8 pb-2 text-sm font-medium text-white'>
+              <label className="block pt-8 pb-2 text-sm font-medium text-white">
                 Errors
               </label>
-              <div className='p-4 bg-gray-300 rounded-md bg-opacity-20 max-w-max lg:bg-transparent'>
+              <div className="p-4 bg-gray-300 rounded-md bg-opacity-20 max-w-max lg:bg-transparent">
                 {errors.map((error, index) => (
                   <div key={index}>
-                    <p className='text-sm text-red-400'>{error}</p>
+                    <p className="text-sm text-red-400">{error}</p>
                   </div>
                 ))}
               </div>
@@ -139,19 +139,19 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
           ) : null}
 
           <div>
-            <label className='block pt-8 pb-2 text-sm font-medium text-white'>
+            <label className="block pt-8 pb-2 text-sm font-medium text-white">
               Output
             </label>
 
-            <OutputEditor output={output} height='10rem' />
+            <OutputEditor output={output} height="10rem" />
           </div>
         </div>
       </div>
-      <div className='justify-end pt-5 mt-6 right-64'>
-        <div className='flex items-center justify-end space-x-4'>
+      <div className="justify-end pt-5 mt-6 right-64">
+        <div className="flex items-center justify-end space-x-4">
           <button
-            type='submit'
-            className='px-20 py-4 font-medium text-white transition gradient-cta rounded-xl focus:ring-2 focus:ring-white hover:scale-105 disabled:opacity-50'
+            type="submit"
+            className="px-20 py-4 font-medium text-white transition gradient-cta rounded-xl focus:ring-2 focus:ring-white hover:scale-105 disabled:opacity-50"
             disabled={!success}
             onClick={saveQuiz}
           >
@@ -160,9 +160,9 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
         </div>
       </div>
       {createdUrl ? (
-        <span className='text-lg text-white'>
+        <span className="text-lg text-white">
           Quiz created successfully!{" "}
-          <a className='font-medium underline' href={createdUrl}>
+          <a className="font-medium underline" href={createdUrl}>
             {createdUrl}
           </a>
         </span>
diff --git a/components/RunCodeEditor.tsx b/components/RunCodeEditor.tsx
index f7879ee..ca09b4f 100644
--- a/components/RunCodeEditor.tsx
+++ b/components/RunCodeEditor.tsx
@@ -8,6 +8,7 @@ type PropTypes = {
   hasCodeRun: Boolean;
   output: Array<string>;
   height: string;
+  readOnly?: boolean;
 };
 
 export default function RunCodeEditor(props: PropTypes) {
@@ -37,19 +38,20 @@ export default function RunCodeEditor(props: PropTypes) {
     <div className={hasCodeRun && output.length === 0 ? "animate-shake" : null}>
       <Editor
         height={height}
-        defaultLanguage='typescript'
+        defaultLanguage="typescript"
         value={codeRef.current}
         onChange={(code: string) => {
           codeRef.current = code;
         }}
-        className='block text-white rounded-lg dark:border-purple-300 focus:ring-gray-500 sm:text-sm'
-        theme='vs-dark'
+        className="block text-white rounded-lg dark:border-purple-300 focus:ring-gray-500 sm:text-sm"
+        theme="vs-dark"
         options={{
           fontSize: 14,
           minimap: { enabled: false },
           overviewRulerLanes: 0,
           padding: { top: 15, bottom: 4, left: 4, right: 4 },
           renderLineHighlight: "none",
+          readOnly: props.readOnly,
         }}
         onMount={handleEditorDidMount}
       />
diff --git a/hooks/useForceUpdate.ts b/hooks/useForceUpdate.ts
new file mode 100644
index 0000000..d14f4eb
--- /dev/null
+++ b/hooks/useForceUpdate.ts
@@ -0,0 +1,13 @@
+import { useCallback, useState } from "react";
+
+type Updater = () => void;
+
+const useForceUpdate = (): Updater => {
+  const [_, setCount] = useState(0);
+
+  return useCallback(() => {
+    setCount((prev) => prev + 1);
+  }, [setCount]);
+};
+
+export default useForceUpdate;
diff --git a/hooks/useRunCode.ts b/hooks/useRunCode.ts
index 9eefb6c..1279fcd 100644
--- a/hooks/useRunCode.ts
+++ b/hooks/useRunCode.ts
@@ -38,6 +38,6 @@ export default function useRunCode(
     output,
     errors,
     hasCodeRun,
-    success
-  }
+    success,
+  };
 }
diff --git a/pages/q/[id].tsx b/pages/q/[id].tsx
index 82341ac..b7fb3a3 100644
--- a/pages/q/[id].tsx
+++ b/pages/q/[id].tsx
@@ -12,6 +12,7 @@ import { confettiConfig } from "../../utils/confettiConfig";
 import OutputEditor from "../../components/OutputEditor";
 import Footer from "../../components/Footer";
 import ViewCounter from "../../components/ViewCounter";
+import useForceUpdate from "../../hooks/useForceUpdate";
 
 export async function getServerSideProps({ params }) {
   const id: string = params.id;
@@ -58,112 +59,141 @@ type PropTypes = {
 export default function ShowQuiz({ quiz, profile }: PropTypes) {
   const { tsClient, tsLoading } = useTypescript();
   const [showSolution, setShowSolution] = useState(false);
+  const forceUpdate = useForceUpdate();
   let codeRef = useRef(quiz.start_code);
-  const { runCode, codeRunning, output, errors, hasCodeRun, success } =
-    useRunCode(tsClient, codeRef, quiz.target_output);
+  let solutionCodeRef = useRef(quiz.solution);
+  const userCodeInterpreter = useRunCode(tsClient, codeRef, quiz.target_output);
+  const solutionInterpreter = useRunCode(
+    tsClient,
+    solutionCodeRef,
+    quiz.target_output
+  );
 
-  function setSolution() {
-    setShowSolution(true);
-    codeRef.current = quiz.solution;
-  }
+  const activeInterpreter = showSolution
+    ? solutionInterpreter
+    : userCodeInterpreter;
 
   function resetCode() {
     codeRef.current = quiz.start_code;
+    forceUpdate();
   }
 
   return (
     <>
-      <div className='max-w-4xl pt-20 pb-48 mx-auto sm:px-6 lg:px-8'>
-        <div className='max-w-3xl mx-auto'>
-          <div className='flex justify-between px-4'>
-            <div className='flex flex-row'>
+      <div className="max-w-4xl pt-20 pb-48 mx-auto sm:px-6 lg:px-8">
+        <div className="max-w-3xl mx-auto">
+          <div className="flex justify-between px-4">
+            <div className="flex flex-row">
               <img
                 src={profile.avatar_url}
-                alt='avatar'
-                className='w-12 h-12 mr-4 rounded-full'
+                alt="avatar"
+                className="w-12 h-12 mr-4 rounded-full"
               />
               <div>
                 <div>
-                  <p className='font-bold text-white text-md'>
+                  <p className="font-bold text-white text-md">
                     {profile.full_name}
                   </p>
                   <a
-                    className='text-sm font-bold text-gray-500'
+                    className="text-sm font-bold text-gray-500"
                     href={`https://www.twitter.com/${profile.username}`}
-                    target='_blank'
+                    target="_blank"
                   >
                     @{profile.username}
                   </a>
                 </div>
               </div>
             </div>
-            <div className='flex flex-col justify-end mx-8 text-sm text-gray-500'>
-              <p className='text-gray-200'>{ViewCounter(parseInt(quiz.id))}</p>
+            <div className="flex flex-col justify-end mx-8 text-sm text-gray-500">
+              <p className="text-gray-200">{ViewCounter(parseInt(quiz.id))}</p>
               {quiz.language}
             </div>
           </div>
-          <p className='max-w-md px-4 mx-auto mt-4 mb-12 text-base text-left text-white whitespace-pre-wrap sm:mt-12 md:mx-auto sm:text-lg md:mt-16 md:text-xl md:max-w-3xl'>
+          <p className="max-w-md px-4 mx-auto mt-4 mb-12 text-base text-left text-white whitespace-pre-wrap sm:mt-12 md:mx-auto sm:text-lg md:mt-16 md:text-xl md:max-w-3xl">
             {quiz.description}
           </p>
-          <div className='flex justify-end mt-16 pt-18'>
+          <div className="flex justify-end mt-16 pt-18">
+            {!showSolution && (
+              <button
+                type="button"
+                className="px-2 py-2 text-xs font-medium text-center text-white transition bg-black bg-opacity-25 border-l border-gray-800 border-tl ml-2w-48 rounded-tl-md margin-auto hover:bg-gray-900"
+                onClick={resetCode}
+                title="Reset Code"
+              >
+                <RefreshIcon className="w-4 h-4" />
+              </button>
+            )}
             <button
-              type='button'
-              className='px-2 py-2 text-xs font-medium text-center text-white transition bg-black bg-opacity-25 border-l border-gray-800 border-tl ml-2w-48 rounded-tl-md margin-auto hover:bg-opacity-100'
-              onClick={resetCode}
+              type="button"
+              className="px-2 py-2 text-xs font-medium text-center text-white transition bg-black bg-opacity-25 border-r border-gray-800 border-tr ml-2w-48 rounded-tr-md margin-auto hover:bg-gray-900"
+              onClick={() => setShowSolution((prev) => !prev)}
             >
-              <RefreshIcon className='w-4 h-4' />
-            </button>
-            <button
-              type='button'
-              className='px-2 py-2 text-xs font-medium text-center text-white transition bg-black bg-opacity-25 border-r border-gray-800 border-tr ml-2w-48 rounded-tr-md margin-auto hover:bg-opacity-100'
-              onClick={() => setSolution()}
-            >
-              Show Solution
+              {showSolution ? (
+                <span>Hide Solution</span>
+              ) : (
+                <span>Show Solution</span>
+              )}
             </button>
           </div>
 
-          <RunCodeEditor
-            codeRef={codeRef}
-            runCode={runCode}
-            hasCodeRun={hasCodeRun}
-            output={output}
-            height='20rem'
-          />
-
-          <div className='px-4 pt-8 sm:px-0'>
+          {showSolution && (
+            <RunCodeEditor
+              codeRef={solutionCodeRef}
+              runCode={solutionInterpreter.runCode}
+              hasCodeRun={solutionInterpreter.hasCodeRun}
+              output={solutionInterpreter.output}
+              height="20rem"
+              readOnly
+            />
+          )}
+          {!showSolution && (
+            <RunCodeEditor
+              codeRef={codeRef}
+              runCode={userCodeInterpreter.runCode}
+              hasCodeRun={userCodeInterpreter.hasCodeRun}
+              output={userCodeInterpreter.output}
+              height="20rem"
+            />
+          )}
+          <div className="px-4 pt-8 sm:px-0">
             <button
-              className='relative flex items-center px-4 py-2 text-sm font-medium text-white transition rounded-md font-ibm gradient-cta hover:scale-105 disabled:hover:scale-100 disabled:opacity-50'
-              onClick={runCode}
-              disabled={codeRunning || tsLoading}
+              className="relative flex items-center px-4 py-2 text-sm font-medium text-white transition rounded-md font-ibm gradient-cta hover:scale-105 disabled:hover:scale-100 disabled:opacity-50"
+              onClick={activeInterpreter.runCode}
+              disabled={activeInterpreter.codeRunning || tsLoading}
             >
-              <Confetti active={success} config={confettiConfig} />
-              <span className='text-gray-100 transition duration-200 group-hover:text-gray-100'>
-                {tsLoading || codeRunning ? "Loading..." : "Run Code →"}
+              <Confetti
+                active={activeInterpreter.success}
+                config={confettiConfig}
+              />
+              <span className="text-gray-100 transition duration-200 group-hover:text-gray-100">
+                {tsLoading || activeInterpreter.codeRunning
+                  ? "Loading..."
+                  : "Run Code →"}
               </span>
             </button>
           </div>
 
-          {errors.length > 0 ? (
+          {activeInterpreter.errors.length && (
             <div>
-              <label className='block pt-8 pb-2 text-sm font-medium text-white'>
+              <label className="block pt-8 pb-2 text-sm font-medium text-white">
                 Errors
               </label>
-              <div className='p-4 bg-gray-300 rounded-md bg-opacity-20 max-w-max lg:bg-transparent'>
-                {errors.map((error, index) => (
+              <div className="p-4 bg-gray-300 rounded-md bg-opacity-20 max-w-max lg:bg-transparent">
+                {activeInterpreter.errors.map((error, index) => (
                   <div key={index}>
-                    <p className='text-sm text-red-400'>{error}</p>
+                    <p className="text-sm text-red-400">{error}</p>
                   </div>
                 ))}
               </div>
             </div>
-          ) : null}
+          )}
 
           <div>
-            <label className='block pt-8 pb-2 text-sm font-medium text-white'>
+            <label className="block pt-8 pb-2 text-sm font-medium text-white">
               Output
             </label>
 
-            <OutputEditor output={output} height='10rem' />
+            <OutputEditor output={activeInterpreter.output} height="10rem" />
           </div>
         </div>
       </div>
diff --git a/schema.sql b/schema.sql
index d141e5a..6a1464a 100644
--- a/schema.sql
+++ b/schema.sql
@@ -2,22 +2,6 @@ create extension if not exists "moddatetime" with schema "extensions" version '1
 
 create type "public"."language" as enum ('typescript');
 
-alter table "public"."quizzes" add column "views" bigint default '0'::bigint;
-
-
-CREATE OR REPLACE FUNCTION public.increment(x integer, row_id integer)
- RETURNS integer
- LANGUAGE sql
- SECURITY DEFINER
-AS $function$
-  update quizzes 
-  set views = views + x
-  where id = row_id;
-
-  select views from quizzes where id = row_id ;
-$function$
-;
-
 create table "public"."profiles" (
     "id" uuid not null,
     "created_at" timestamp with time zone not null,
@@ -42,6 +26,19 @@ create table "public"."quizzes" (
     "friendly_id" character varying
 );
 
+alter table "public"."quizzes" add column "views" bigint default '0'::bigint;
+CREATE OR REPLACE FUNCTION public.increment(x integer, row_id integer)
+ RETURNS integer
+ LANGUAGE sql
+ SECURITY DEFINER
+AS $function$
+  update quizzes 
+  set views = views + x
+  where id = row_id;
+
+  select views from quizzes where id = row_id ;
+$function$
+;
 
 alter table "public"."quizzes" enable row level security;
 
@@ -285,3 +282,4 @@ CREATE TRIGGER create_profile_on_signup AFTER INSERT ON auth.users FOR EACH ROW
 CREATE TRIGGER handle_updated_at BEFORE UPDATE ON public.quizzes FOR EACH ROW EXECUTE FUNCTION moddatetime('updated_at');
 
 
+alter table "public"."quizzes" add column "solution" character varying;

From 3048354642edf53a944dc598698817f8055374ec Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Wed, 10 Nov 2021 11:16:23 -0700
Subject: [PATCH 03/15] don't render solution button if no solution

---
 pages/q/[id].tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/pages/q/[id].tsx b/pages/q/[id].tsx
index b7fb3a3..4c2cd32 100644
--- a/pages/q/[id].tsx
+++ b/pages/q/[id].tsx
@@ -123,17 +123,19 @@ export default function ShowQuiz({ quiz, profile }: PropTypes) {
                 <RefreshIcon className="w-4 h-4" />
               </button>
             )}
-            <button
-              type="button"
-              className="px-2 py-2 text-xs font-medium text-center text-white transition bg-black bg-opacity-25 border-r border-gray-800 border-tr ml-2w-48 rounded-tr-md margin-auto hover:bg-gray-900"
-              onClick={() => setShowSolution((prev) => !prev)}
-            >
-              {showSolution ? (
-                <span>Hide Solution</span>
-              ) : (
-                <span>Show Solution</span>
-              )}
-            </button>
+            {quiz.solution && (
+              <button
+                type="button"
+                className="px-2 py-2 text-xs font-medium text-center text-white transition bg-black bg-opacity-25 border-r border-gray-800 border-tr ml-2w-48 rounded-tr-md margin-auto hover:bg-gray-900"
+                onClick={() => setShowSolution((prev) => !prev)}
+              >
+                {showSolution ? (
+                  <span>Hide Solution</span>
+                ) : (
+                  <span>Show Solution</span>
+                )}
+              </button>
+            )}
           </div>
 
           {showSolution && (

From a20bb6fddefb88871f0c20ba6d33b0cb48d090bc Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Wed, 10 Nov 2021 16:36:39 -0700
Subject: [PATCH 04/15] init explanation

---
 components/Editor.tsx         | 26 +++++++++++
 components/LineHighlights.tsx | 30 ++++++++++++
 components/PreviewQuiz.tsx    | 88 ++++++++++++++++++++++++++++++++++-
 components/RunCodeEditor.tsx  | 10 ++--
 package.json                  |  2 +
 styles.css                    | 46 +++++++++++-------
 types.ts                      |  8 ++++
 yarn.lock                     |  7 ++-
 8 files changed, 196 insertions(+), 21 deletions(-)
 create mode 100644 components/Editor.tsx
 create mode 100644 components/LineHighlights.tsx

diff --git a/components/Editor.tsx b/components/Editor.tsx
new file mode 100644
index 0000000..c73ca2c
--- /dev/null
+++ b/components/Editor.tsx
@@ -0,0 +1,26 @@
+import MonacoEditor, { Monaco, EditorProps } from "@monaco-editor/react";
+import React, { FC, useState, createContext, useContext } from "react";
+
+const EditorContext = createContext(null);
+
+const Editor: FC<EditorProps> = ({ onMount, children, ...otherProps }) => {
+  const [editor, setEditor] = useState(null);
+
+  function handleMount(editor: any, monaco: Monaco) {
+    setEditor(editor);
+    onMount(editor, monaco);
+  }
+
+  return (
+    <EditorContext.Provider value={editor}>
+      <MonacoEditor {...otherProps} onMount={handleMount}></MonacoEditor>
+      {children}
+    </EditorContext.Provider>
+  );
+};
+
+export const useEditor = () => {
+  return useContext(EditorContext);
+};
+
+export default Editor;
diff --git a/components/LineHighlights.tsx b/components/LineHighlights.tsx
new file mode 100644
index 0000000..914c185
--- /dev/null
+++ b/components/LineHighlights.tsx
@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useState, FC } from "react";
+import { useMonaco } from "@monaco-editor/react";
+import { useEditor } from "./Editor";
+
+interface LineHighlightsProps {
+  lines?: number[];
+}
+
+const LineHighlights: FC<LineHighlightsProps> = ({ lines = [] }) => {
+  const monaco = useMonaco();
+  const editor = useEditor();
+
+  useEffect(() => {
+    editor?.deltaDecorations(
+      [],
+      lines.map((line) => ({
+        range: new monaco.Range(line, 1, line, 1),
+        options: {
+          isWholeLine: true,
+          className: "editor-highlight-line",
+          glyphMarginClassName: "editor-glyph",
+        },
+      }))
+    );
+  }, [editor, JSON.stringify(lines)]);
+
+  return null;
+};
+
+export default LineHighlights;
diff --git a/components/PreviewQuiz.tsx b/components/PreviewQuiz.tsx
index efbcd7b..88580b3 100644
--- a/components/PreviewQuiz.tsx
+++ b/components/PreviewQuiz.tsx
@@ -3,16 +3,44 @@ import Hashids from "hashids";
 import { Session } from "@supabase/supabase-js";
 import Confetti from "react-dom-confetti";
 import useRunCode from "../hooks/useRunCode";
-import { SaveQuiz } from "../types";
+import { ExplanationStep, SaveQuiz } from "../types";
 import useTypescript from "../hooks/useTypescript";
 import { Profile, Quiz } from "../types";
 import { confettiConfig } from "../utils/confettiConfig";
 import OutputEditor from "./OutputEditor";
 import RunCodeEditor from "./RunCodeEditor";
 import { supabase } from "../utils/supabaseClient";
+import { nanoid } from "nanoid";
 
 const hashids = new Hashids();
 
+const useExplanation = (defaultSteps: ExplanationStep[]) => {
+  const [selected, setSelected] = useState<string | null>(null);
+  const [steps, setSteps] = useState<ExplanationStep[]>(defaultSteps);
+
+  const addStep = () => {
+    setSteps((prev) => [...prev, { id: nanoid(), message: "", lines: [] }]);
+  };
+
+  const removeStep = (id) => {
+    setSteps((prev) => prev.filter((step) => step.id !== id));
+  };
+
+  const selectedStep = steps.find((step) => step.id === selectedStep);
+
+  const selectStep = (id) => {
+    setSelected(id);
+  };
+
+  return {
+    steps,
+    selectedStep,
+    selectStep,
+    addStep,
+    removeStep,
+  };
+};
+
 declare global {
   interface Window {
     ts: any;
@@ -30,6 +58,8 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
   const codeRef = useRef(quiz.start_code);
   const [loading, setLoading] = useState(false);
   const [createdUrl, setCreatedUrl] = useState(null);
+  const explanation = useExplanation([]);
+
   const { runCode, codeRunning, output, errors, hasCodeRun, success } =
     useRunCode(tsClient, codeRef, quiz.target_output);
 
@@ -145,6 +175,62 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
 
             <OutputEditor output={output} height="10rem" />
           </div>
+          <div>
+            <div className="flex justify-between items-center h-8 mt-8 mb-2">
+              <label className="block pt-2 pb-2 text-sm font-medium text-white">
+                Explanation of Solution
+              </label>
+              <button
+                onClick={() => explanation.addStep()}
+                className="relative flex items-center px-4  text-sm font-medium text-white transition rounded-md font-ibm gradient-cta hover:scale-105 disabled:hover:scale-100 disabled:opacity-50 h-8"
+              >
+                Add Step
+              </button>
+            </div>
+            <div>
+              {explanation.steps.length === 0 && (
+                <p className="text-white text-sm opacity-60 my-4">
+                  No steps yet, but explanation is optional.
+                </p>
+              )}
+              {explanation.steps.map((step, i) => (
+                <div
+                  key={step.id}
+                  tabIndex={0}
+                  onClick={() => explanation.selectStep(step.id)}
+                >
+                  <label
+                    htmlFor={step.id}
+                    className="block pt-2 pb-2 text-sm font-medium text-white"
+                  >
+                    <p>Step {i + 1}</p>
+                  </label>
+                  <div className="flex">
+                    <input
+                      type="text"
+                      className="flex-1 block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl"
+                      value={step.message}
+                      placeholder="Explanation"
+                    />
+                    <div className="w-4" />
+                    <input
+                      type="text"
+                      className="w-40 block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl"
+                      value={step.lines.toString()}
+                      placeholder="Line Numbers"
+                    />
+                    <div className="w-4" />
+                    <button
+                      className="relative flex items-center px-4  text-sm font-medium text-white rounded-xl font-ibm h-100 bg-gray-600 bg-opacity-25 hover:bg-opacity-40"
+                      onClick={() => explanation.removeStep(step.id)}
+                    >
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
       <div className="justify-end pt-5 mt-6 right-64">
diff --git a/components/RunCodeEditor.tsx b/components/RunCodeEditor.tsx
index ca09b4f..b75e592 100644
--- a/components/RunCodeEditor.tsx
+++ b/components/RunCodeEditor.tsx
@@ -1,6 +1,8 @@
-import Editor, { Monaco } from "@monaco-editor/react";
+import { Monaco } from "@monaco-editor/react";
+import Editor from "./Editor";
 import React, { MutableRefObject } from "react";
 import { CustomKeyBinding, addKeyBinding } from "../utils/keyBindings";
+import LineHighlights from "./LineHighlights";
 
 type PropTypes = {
   codeRef: MutableRefObject<string>;
@@ -49,12 +51,14 @@ export default function RunCodeEditor(props: PropTypes) {
           fontSize: 14,
           minimap: { enabled: false },
           overviewRulerLanes: 0,
-          padding: { top: 15, bottom: 4, left: 4, right: 4 },
+          padding: { top: 15, bottom: 4 },
           renderLineHighlight: "none",
           readOnly: props.readOnly,
         }}
         onMount={handleEditorDidMount}
-      />
+      >
+        <LineHighlights lines={[6, 7, 8]} />
+      </Editor>
     </div>
   );
 }
diff --git a/package.json b/package.json
index e75ca92..1e21cb4 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
     "clsx": "^1.1.1",
     "fathom-client": "^3.0.0",
     "hashids": "^2.2.8",
+    "monaco-editor": "^0.30.1",
+    "nanoid": "^3.1.30",
     "next": "^12.0.1",
     "npm": "^8.1.0",
     "react": "^17.0.2",
diff --git a/styles.css b/styles.css
index 3d3d9f6..a268f09 100644
--- a/styles.css
+++ b/styles.css
@@ -1,29 +1,43 @@
-
 /* Custom page background */
 body {
-    min-width: 100%;
-    min-height: 100vh;
-    background:
-        /* For small screens put each gradient at 500px width, this makes them merge nicely when narrow */
-        radial-gradient(ellipse 500px 80% at bottom 15% left -50px, #6A3428, transparent),
-        radial-gradient(ellipse 500px 80% at top 15% right -50px, #6A285C, black);
+  min-width: 100%;
+  min-height: 100vh;
+  background:
+        /* For small screens put each gradient at 500px width, this makes them merge nicely when narrow */ radial-gradient(
+      ellipse 500px 80% at bottom 15% left -50px,
+      #6a3428,
+      transparent
+    ),
+    radial-gradient(ellipse 500px 80% at top 15% right -50px, #6a285c, black);
 }
 
 /* For larger screens put each gradient at 40% width, this keeps them prominent */
 @media (min-width: 1024px) {
-    body {
-        background:
-            radial-gradient(ellipse 40% 80% at bottom 15% left -50px, #6A3428, transparent),
-            radial-gradient(ellipse 40% 80% at top 15% right -50px, #6A285C, black);
-    }
+  body {
+    background: radial-gradient(
+        ellipse 40% 80% at bottom 15% left -50px,
+        #6a3428,
+        transparent
+      ),
+      radial-gradient(ellipse 40% 80% at top 15% right -50px, #6a285c, black);
+  }
 }
 
 /* Clean Monaco cursor: see https://stackoverflow.com/a/68930913/1375972 */
 .monaco-editor textarea:focus {
-    box-shadow: none !important;
-  }
+  box-shadow: none !important;
+}
 
 /* Custom button background */
 .gradient-cta {
-    background: linear-gradient(263.56deg, #F0C06F -0.6%, #DA4142 49.43%, #8447A4 100%);
-}
\ No newline at end of file
+  background: linear-gradient(
+    263.56deg,
+    #f0c06f -0.6%,
+    #da4142 49.43%,
+    #8447a4 100%
+  );
+}
+
+.editor-highlight-line {
+  background-color: #333;
+}
diff --git a/types.ts b/types.ts
index d248c08..350b741 100644
--- a/types.ts
+++ b/types.ts
@@ -20,3 +20,11 @@ export type SaveQuiz = Quiz & {
   updated_at: Date;
   created_by: string;
 };
+
+export type ExplanationStep = {
+  id: string;
+  message: string;
+  lines: number[];
+};
+
+export type Explanation = ExplanationStep[];
diff --git a/yarn.lock b/yarn.lock
index 6aebb42..d72ffb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2801,6 +2801,11 @@ modern-normalize@^1.1.0:
   resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
   integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
 
+monaco-editor@^0.30.1:
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.30.1.tgz#47f8d18a0aa2264fc5654581741ab8d7bec01689"
+  integrity sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -2821,7 +2826,7 @@ mute-stream@~0.0.4:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-nanoid@^3.1.23, nanoid@^3.1.28:
+nanoid@^3.1.23, nanoid@^3.1.28, nanoid@^3.1.30:
   version "3.1.30"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
   integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==

From 66bf2d70c80dbd5db068f4e0bbb4d505817f08c0 Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Wed, 10 Nov 2021 19:11:14 -0700
Subject: [PATCH 05/15] progress

---
 components/ComplexInput.tsx   | 91 +++++++++++++++++++++++++++++++++++
 components/LineHighlights.tsx |  7 +--
 components/PreviewQuiz.tsx    | 55 +++++++++++++++++----
 components/RunCodeEditor.tsx  |  6 ++-
 4 files changed, 145 insertions(+), 14 deletions(-)
 create mode 100644 components/ComplexInput.tsx

diff --git a/components/ComplexInput.tsx b/components/ComplexInput.tsx
new file mode 100644
index 0000000..5d9df92
--- /dev/null
+++ b/components/ComplexInput.tsx
@@ -0,0 +1,91 @@
+import React, { FC, HTMLProps, useEffect, useState } from "react";
+
+interface ComplexInputProps<T>
+  extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
+  stringify: (val: T) => string;
+  parse: (val: string) => T;
+  value: T;
+  onChange: (value: T) => void;
+}
+
+function ComplexInput<T>({
+  stringify,
+  parse,
+  value,
+  onChange,
+  ...otherProps
+}: ComplexInputProps<T>) {
+  const [draft, setDraft] = useState<string>(stringify(value));
+
+  useEffect(() => {
+    setDraft(stringify(value));
+  }, [value]);
+
+  const process = () => {
+    let shouldNotify = false;
+    let parsed;
+    try {
+      parsed = parse(draft);
+      shouldNotify = true;
+    } catch (err) {
+      setDraft(stringify(value));
+    }
+    if (shouldNotify) {
+      onChange(parsed);
+    }
+  };
+
+  return (
+    <input
+      {...otherProps}
+      onBlur={() => process()}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.currentTarget.blur();
+        }
+        otherProps.onKeyDown?.(e);
+      }}
+      value={draft}
+      onChange={(e) => {
+        setDraft(e.target.value);
+      }}
+    />
+  );
+}
+
+const stringify = (value: number[]) => {
+  return JSON.stringify(value);
+};
+
+const parse = (value: string) => {
+  const parsed = JSON.parse(value);
+  if (!Array.isArray(parsed)) {
+    throw new Error("Should be array");
+  }
+  if (parsed.some((x) => typeof x !== "number")) {
+    throw new Error("Should contain only numbers");
+  }
+  return parsed;
+};
+
+interface NumberArrayInputProps
+  extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
+  value: number[];
+  onChange: (value: number[]) => void;
+}
+
+export const NumberArrayInput: FC<NumberArrayInputProps> = ({
+  value,
+  onChange,
+  ...otherProps
+}) => {
+  return (
+    <ComplexInput
+      {...otherProps}
+      stringify={stringify}
+      parse={parse}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
diff --git a/components/LineHighlights.tsx b/components/LineHighlights.tsx
index 914c185..17c2a9e 100644
--- a/components/LineHighlights.tsx
+++ b/components/LineHighlights.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, FC } from "react";
+import { useEffect, useRef, FC } from "react";
 import { useMonaco } from "@monaco-editor/react";
 import { useEditor } from "./Editor";
 
@@ -9,10 +9,11 @@ interface LineHighlightsProps {
 const LineHighlights: FC<LineHighlightsProps> = ({ lines = [] }) => {
   const monaco = useMonaco();
   const editor = useEditor();
+  const prevDecorationsRef = useRef([]);
 
   useEffect(() => {
-    editor?.deltaDecorations(
-      [],
+    prevDecorationsRef.current = editor?.deltaDecorations(
+      prevDecorationsRef.current || [],
       lines.map((line) => ({
         range: new monaco.Range(line, 1, line, 1),
         options: {
diff --git a/components/PreviewQuiz.tsx b/components/PreviewQuiz.tsx
index 88580b3..893434b 100644
--- a/components/PreviewQuiz.tsx
+++ b/components/PreviewQuiz.tsx
@@ -11,6 +11,7 @@ import OutputEditor from "./OutputEditor";
 import RunCodeEditor from "./RunCodeEditor";
 import { supabase } from "../utils/supabaseClient";
 import { nanoid } from "nanoid";
+import { NumberArrayInput } from "./ComplexInput";
 
 const hashids = new Hashids();
 
@@ -26,18 +27,34 @@ const useExplanation = (defaultSteps: ExplanationStep[]) => {
     setSteps((prev) => prev.filter((step) => step.id !== id));
   };
 
-  const selectedStep = steps.find((step) => step.id === selectedStep);
+  const selectedStep = steps.find((step) => step.id === selected);
 
-  const selectStep = (id) => {
+  const selectStep = (id: string) => {
     setSelected(id);
   };
 
+  const udpateStep = (id, patch: Partial<ExplanationStep>) => {
+    setSteps((prev) =>
+      prev.map((step) => {
+        if (step.id !== id) {
+          return step;
+        } else {
+          return {
+            ...step,
+            ...patch,
+          };
+        }
+      })
+    );
+  };
+
   return {
     steps,
     selectedStep,
     selectStep,
     addStep,
     removeStep,
+    udpateStep,
   };
 };
 
@@ -138,6 +155,7 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
             hasCodeRun={hasCodeRun}
             output={output}
             height="20rem"
+            highlightLines={explanation.selectedStep?.lines}
           />
 
           <div className="px-4 pt-8 sm:px-0">
@@ -172,11 +190,10 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
             <label className="block pt-8 pb-2 text-sm font-medium text-white">
               Output
             </label>
-
             <OutputEditor output={output} height="10rem" />
           </div>
           <div>
-            <div className="flex justify-between items-center h-8 mt-8 mb-2">
+            <div className="flex justify-between items-center h-8 mt-8 mb-4">
               <label className="block pt-2 pb-2 text-sm font-medium text-white">
                 Explanation of Solution
               </label>
@@ -197,11 +214,16 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
                 <div
                   key={step.id}
                   tabIndex={0}
-                  onClick={() => explanation.selectStep(step.id)}
+                  onMouseDown={() => explanation.selectStep(step.id)}
+                  className={
+                    explanation.selectedStep?.id === step.id
+                      ? "bg-white bg-opacity-10 p-6 rounded-xl"
+                      : "p-6 rounded-xl"
+                  }
                 >
                   <label
                     htmlFor={step.id}
-                    className="block pt-2 pb-2 text-sm font-medium text-white"
+                    className="block pb-2 text-sm font-medium text-white"
                   >
                     <p>Step {i + 1}</p>
                   </label>
@@ -211,18 +233,33 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
                       className="flex-1 block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl"
                       value={step.message}
                       placeholder="Explanation"
+                      onChange={(e) =>
+                        explanation.udpateStep(step.id, {
+                          message: e.target.value,
+                        })
+                      }
                     />
                     <div className="w-4" />
-                    <input
+                    <NumberArrayInput
                       type="text"
                       className="w-40 block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl"
-                      value={step.lines.toString()}
+                      value={step.lines}
+                      onChange={(lines) => {
+                        explanation.udpateStep(step.id, {
+                          lines,
+                        });
+                      }}
                       placeholder="Line Numbers"
                     />
                     <div className="w-4" />
                     <button
                       className="relative flex items-center px-4  text-sm font-medium text-white rounded-xl font-ibm h-100 bg-gray-600 bg-opacity-25 hover:bg-opacity-40"
-                      onClick={() => explanation.removeStep(step.id)}
+                      onMouseDown={(e) => {
+                        e.stopPropagation();
+                      }}
+                      onClick={(e) => {
+                        explanation.removeStep(step.id);
+                      }}
                     >
                       Remove
                     </button>
diff --git a/components/RunCodeEditor.tsx b/components/RunCodeEditor.tsx
index b75e592..a503ac8 100644
--- a/components/RunCodeEditor.tsx
+++ b/components/RunCodeEditor.tsx
@@ -11,10 +11,12 @@ type PropTypes = {
   output: Array<string>;
   height: string;
   readOnly?: boolean;
+  highlightLines?: number[];
 };
 
 export default function RunCodeEditor(props: PropTypes) {
-  const { codeRef, runCode, hasCodeRun, output, height } = props;
+  const { codeRef, runCode, hasCodeRun, output, height, highlightLines } =
+    props;
   const editorRef = React.useRef(null);
   const [monaco, setMonaco] = React.useState<Monaco>(null);
 
@@ -57,7 +59,7 @@ export default function RunCodeEditor(props: PropTypes) {
         }}
         onMount={handleEditorDidMount}
       >
-        <LineHighlights lines={[6, 7, 8]} />
+        <LineHighlights lines={highlightLines} />
       </Editor>
     </div>
   );

From d76834cc4af3688a558d0455e65169d3781fe655 Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Tue, 16 Nov 2021 05:40:17 -0500
Subject: [PATCH 06/15] progress

---
 components/ContentWidget.tsx  | 60 +++++++++++++++++++++++++++++++++++
 components/Editor.tsx         | 17 +++++++---
 components/LineDecoration.tsx | 37 +++++++++++++++++++++
 components/LineSelector.tsx   | 50 +++++++++++++++++++++++++++++
 components/PreviewQuiz.tsx    | 54 ++++++-------------------------
 components/RunCodeEditor.tsx  | 20 +++++++++---
 components/Step.tsx           | 36 +++++++++++++++++++++
 hooks/useExplanation.ts       | 58 +++++++++++++++++++++++++++++++++
 hooks/useLineCount.ts         | 23 ++++++++++++++
 pages/q/[id].tsx              | 18 +++++++++--
 schema.sql                    |  2 ++
 styles.css                    | 36 +++++++++++++++++++++
 types.ts                      |  7 ++--
 13 files changed, 361 insertions(+), 57 deletions(-)
 create mode 100644 components/ContentWidget.tsx
 create mode 100644 components/LineDecoration.tsx
 create mode 100644 components/LineSelector.tsx
 create mode 100644 components/Step.tsx
 create mode 100644 hooks/useExplanation.ts
 create mode 100644 hooks/useLineCount.ts

diff --git a/components/ContentWidget.tsx b/components/ContentWidget.tsx
new file mode 100644
index 0000000..828e4dc
--- /dev/null
+++ b/components/ContentWidget.tsx
@@ -0,0 +1,60 @@
+import { useLayoutEffect, useRef, FC, ReactNode } from "react";
+import { useMonaco } from "@monaco-editor/react";
+import { useEditor } from "./Editor";
+import ReactDOM from "react-dom";
+
+interface ContentWidgetProps {
+  children: any;
+  line: number;
+  widgetId: string;
+}
+
+const ContentWidget: FC<ContentWidgetProps> = ({
+  widgetId,
+  line,
+  children,
+}) => {
+  const monaco = useMonaco();
+  const editor = useEditor();
+
+  useLayoutEffect(() => {
+    if (editor) {
+      // Add a content widget (scrolls inline with text)
+      var contentWidget = {
+        domNode: null,
+        allowEditorOverflow: true,
+        getId: function () {
+          return widgetId;
+        },
+        getDomNode: function () {
+          if (!this.domNode) {
+            this.domNode = document.createElement("div");
+            this.domNode.style.position = "relative";
+            this.domNode.style.width = 0;
+          }
+          return this.domNode;
+        },
+        afterRender: function () {
+          ReactDOM.render(children, this.domNode);
+        },
+        getPosition: function () {
+          return {
+            position: {
+              lineNumber: line,
+              column: 0,
+            },
+            preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE],
+          };
+        },
+      };
+      editor.addContentWidget(contentWidget);
+      return () => {
+        editor.removeContentWidget(contentWidget);
+      };
+    }
+  }, [editor, children]);
+
+  return null;
+};
+
+export default ContentWidget;
diff --git a/components/Editor.tsx b/components/Editor.tsx
index c73ca2c..3510bd5 100644
--- a/components/Editor.tsx
+++ b/components/Editor.tsx
@@ -1,10 +1,15 @@
 import MonacoEditor, { Monaco, EditorProps } from "@monaco-editor/react";
 import React, { FC, useState, createContext, useContext } from "react";
+import * as m from "monaco-editor/esm/vs/editor/editor.api";
 
-const EditorContext = createContext(null);
+const EditorContext = createContext<m.editor.IStandaloneCodeEditor | null>(
+  null
+);
 
 const Editor: FC<EditorProps> = ({ onMount, children, ...otherProps }) => {
-  const [editor, setEditor] = useState(null);
+  const [editor, setEditor] = useState<m.editor.IStandaloneCodeEditor | null>(
+    null
+  );
 
   function handleMount(editor: any, monaco: Monaco) {
     setEditor(editor);
@@ -14,13 +19,17 @@ const Editor: FC<EditorProps> = ({ onMount, children, ...otherProps }) => {
   return (
     <EditorContext.Provider value={editor}>
       <MonacoEditor {...otherProps} onMount={handleMount}></MonacoEditor>
-      {children}
+      {editor && children}
     </EditorContext.Provider>
   );
 };
 
 export const useEditor = () => {
-  return useContext(EditorContext);
+  const editor = useContext(EditorContext);
+  if (!editor) {
+    throw new Error("useEditor may only be used within an Editor");
+  }
+  return editor;
 };
 
 export default Editor;
diff --git a/components/LineDecoration.tsx b/components/LineDecoration.tsx
new file mode 100644
index 0000000..ae906ef
--- /dev/null
+++ b/components/LineDecoration.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useRef, FC } from "react";
+import { useMonaco } from "@monaco-editor/react";
+import { useEditor } from "./Editor";
+
+interface LineDecorationProps {
+  line: number;
+  lineClass?: string;
+  glyphMarginClass?: string;
+}
+
+const LineDecoration: FC<LineDecorationProps> = ({ line, lineClass }) => {
+  const monaco = useMonaco();
+  const editor = useEditor();
+  const prevDecorationsRef = useRef([]);
+
+  useEffect(() => {
+    if (editor && monaco) {
+      prevDecorationsRef.current = editor?.deltaDecorations(
+        prevDecorationsRef.current || [],
+        [
+          {
+            range: new monaco.Range(line, 1, line, 1),
+            options: {
+              isWholeLine: true,
+              className: lineClass,
+              glyphMarginClassName: "editor-glyph",
+            },
+          },
+        ]
+      );
+    }
+  }, [editor, monaco, line, lineClass]);
+
+  return null;
+};
+
+export default LineDecoration;
diff --git a/components/LineSelector.tsx b/components/LineSelector.tsx
new file mode 100644
index 0000000..f673c5a
--- /dev/null
+++ b/components/LineSelector.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useRef, FC, useMemo } from "react";
+import { useMonaco } from "@monaco-editor/react";
+import { useEditor } from "./Editor";
+import LineHighlights from "./LineHighlights";
+import LineDecoration from "./LineDecoration";
+import useLineCount from "../hooks/useLineCount";
+
+function range(size: number, startAt = 0) {
+  return Array.from(new Array(size), (x, i) => i + startAt);
+}
+
+interface LineSelectorProps {
+  lines: number[];
+  onChange?: (lines: number[]) => void;
+}
+
+const LineSelector: FC<LineSelectorProps> = ({ lines }) => {
+  //   const monaco = useMonaco();
+  const editor = useEditor();
+  const numLines = useLineCount();
+
+  const lineOptions = useMemo(() => range(numLines, 1), [numLines]);
+
+  useEffect(() => {
+    if (editor) {
+      const disposable = editor.onMouseDown((e) => {
+        console.log(e.target);
+      });
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }, [editor]);
+
+  return (
+    <>
+      {lineOptions.map((line) => (
+        <LineDecoration
+          key={line}
+          line={line}
+          lineClass={
+            lines?.includes(line) ? "editor-highlight-line" : undefined
+          }
+        />
+      ))}
+    </>
+  );
+};
+
+export default LineSelector;
diff --git a/components/PreviewQuiz.tsx b/components/PreviewQuiz.tsx
index 893434b..14bb66e 100644
--- a/components/PreviewQuiz.tsx
+++ b/components/PreviewQuiz.tsx
@@ -12,52 +12,11 @@ import RunCodeEditor from "./RunCodeEditor";
 import { supabase } from "../utils/supabaseClient";
 import { nanoid } from "nanoid";
 import { NumberArrayInput } from "./ComplexInput";
+import Step from "./Step";
+import useExplanation from "../hooks/useExplanation";
 
 const hashids = new Hashids();
 
-const useExplanation = (defaultSteps: ExplanationStep[]) => {
-  const [selected, setSelected] = useState<string | null>(null);
-  const [steps, setSteps] = useState<ExplanationStep[]>(defaultSteps);
-
-  const addStep = () => {
-    setSteps((prev) => [...prev, { id: nanoid(), message: "", lines: [] }]);
-  };
-
-  const removeStep = (id) => {
-    setSteps((prev) => prev.filter((step) => step.id !== id));
-  };
-
-  const selectedStep = steps.find((step) => step.id === selected);
-
-  const selectStep = (id: string) => {
-    setSelected(id);
-  };
-
-  const udpateStep = (id, patch: Partial<ExplanationStep>) => {
-    setSteps((prev) =>
-      prev.map((step) => {
-        if (step.id !== id) {
-          return step;
-        } else {
-          return {
-            ...step,
-            ...patch,
-          };
-        }
-      })
-    );
-  };
-
-  return {
-    steps,
-    selectedStep,
-    selectStep,
-    addStep,
-    removeStep,
-    udpateStep,
-  };
-};
-
 declare global {
   interface Window {
     ts: any;
@@ -87,6 +46,9 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
     const insertQuiz: SaveQuiz = {
       ...quiz,
       solution: codeRef.current,
+      explanation: {
+        steps: explanation.steps,
+      },
       created_at: now,
       updated_at: now,
       created_by: session.user.id,
@@ -156,7 +118,11 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
             output={output}
             height="20rem"
             highlightLines={explanation.selectedStep?.lines}
-          />
+          >
+            {/* {explanation.selectedStep && (
+              <Step step={explanation.selectedStep} />
+            )} */}
+          </RunCodeEditor>
 
           <div className="px-4 pt-8 sm:px-0">
             <button
diff --git a/components/RunCodeEditor.tsx b/components/RunCodeEditor.tsx
index a503ac8..09f5ef0 100644
--- a/components/RunCodeEditor.tsx
+++ b/components/RunCodeEditor.tsx
@@ -1,10 +1,11 @@
 import { Monaco } from "@monaco-editor/react";
 import Editor from "./Editor";
-import React, { MutableRefObject } from "react";
+import React, { MutableRefObject, ReactNode } from "react";
 import { CustomKeyBinding, addKeyBinding } from "../utils/keyBindings";
 import LineHighlights from "./LineHighlights";
+import LineSelector from "./LineSelector";
 
-type PropTypes = {
+export type PropTypes = {
   codeRef: MutableRefObject<string>;
   runCode: () => void;
   hasCodeRun: Boolean;
@@ -12,11 +13,19 @@ type PropTypes = {
   height: string;
   readOnly?: boolean;
   highlightLines?: number[];
+  children?: ReactNode;
 };
 
 export default function RunCodeEditor(props: PropTypes) {
-  const { codeRef, runCode, hasCodeRun, output, height, highlightLines } =
-    props;
+  const {
+    codeRef,
+    runCode,
+    hasCodeRun,
+    output,
+    height,
+    highlightLines,
+    children,
+  } = props;
   const editorRef = React.useRef(null);
   const [monaco, setMonaco] = React.useState<Monaco>(null);
 
@@ -59,7 +68,8 @@ export default function RunCodeEditor(props: PropTypes) {
         }}
         onMount={handleEditorDidMount}
       >
-        <LineHighlights lines={highlightLines} />
+        <LineSelector lines={highlightLines} />
+        {children}
       </Editor>
     </div>
   );
diff --git a/components/Step.tsx b/components/Step.tsx
new file mode 100644
index 0000000..33222a2
--- /dev/null
+++ b/components/Step.tsx
@@ -0,0 +1,36 @@
+import { Monaco } from "@monaco-editor/react";
+import Editor from "./Editor";
+import React, { MutableRefObject, ReactNode, FC } from "react";
+import { CustomKeyBinding, addKeyBinding } from "../utils/keyBindings";
+import LineHighlights from "./LineHighlights";
+import { ExplanationStep } from "../types";
+import ContentWidget from "./ContentWidget";
+
+interface StepProps {
+  step: ExplanationStep;
+  onNext?: () => void;
+}
+
+const Step: FC<StepProps> = ({ step, onNext }) => {
+  return (
+    <>
+      <ContentWidget widgetId={step.id} line={step.lines[0]}>
+        <div className="w-56 bg-white bg-opacity-5 p-4 relative -left-80 gradient-border">
+          {step.message}
+          <div className="flex justify-end">
+            <button
+              onClick={() => {
+                onNext?.();
+              }}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </ContentWidget>
+      <LineHighlights lines={step.lines} />
+    </>
+  );
+};
+
+export default Step;
diff --git a/hooks/useExplanation.ts b/hooks/useExplanation.ts
new file mode 100644
index 0000000..75b6657
--- /dev/null
+++ b/hooks/useExplanation.ts
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { ExplanationStep } from "../types";
+import { nanoid } from "nanoid";
+
+const useExplanation = (
+  defaultSteps: ExplanationStep[],
+  defaultSelected: string | null = null
+) => {
+  const [selected, setSelected] = useState<string | null>(defaultSelected);
+  const [steps, setSteps] = useState<ExplanationStep[]>(defaultSteps);
+
+  const addStep = () => {
+    setSteps((prev) => [...prev, { id: nanoid(), message: "", lines: [] }]);
+  };
+
+  const removeStep = (id: string) => {
+    setSteps((prev) => prev.filter((step) => step.id !== id));
+  };
+
+  const selectedStep = steps.find((step) => step.id === selected);
+
+  const selectStep = (id: string) => {
+    setSelected(id);
+  };
+
+  const selectNext = () => {
+    const index = steps.findIndex((s) => s.id === selected);
+    const nextIndex = (index + 1) % steps.length;
+    setSelected(steps[nextIndex].id);
+  };
+
+  const udpateStep = (id, patch: Partial<ExplanationStep>) => {
+    setSteps((prev) =>
+      prev.map((step) => {
+        if (step.id !== id) {
+          return step;
+        } else {
+          return {
+            ...step,
+            ...patch,
+          };
+        }
+      })
+    );
+  };
+
+  return {
+    steps,
+    selectedStep,
+    selectStep,
+    selectNext,
+    addStep,
+    removeStep,
+    udpateStep,
+  };
+};
+
+export default useExplanation;
diff --git a/hooks/useLineCount.ts b/hooks/useLineCount.ts
new file mode 100644
index 0000000..06a8032
--- /dev/null
+++ b/hooks/useLineCount.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { useEditor } from "../components/Editor";
+
+/**
+ * Subscribe to and return line count of nearest Editor ancestor
+ */
+const useLineCount = (): number => {
+  const editor = useEditor();
+  const [count, setCount] = useState<number>(editor.getModel().getLineCount());
+
+  useEffect(() => {
+    const disposable = editor.onDidChangeModelContent(() => {
+      setCount(editor.getModel().getLineCount());
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, [editor]);
+
+  return count;
+};
+
+export default useLineCount;
diff --git a/pages/q/[id].tsx b/pages/q/[id].tsx
index 4c2cd32..18c4d77 100644
--- a/pages/q/[id].tsx
+++ b/pages/q/[id].tsx
@@ -13,6 +13,9 @@ import OutputEditor from "../../components/OutputEditor";
 import Footer from "../../components/Footer";
 import ViewCounter from "../../components/ViewCounter";
 import useForceUpdate from "../../hooks/useForceUpdate";
+import ContentWidget from "../../components/ContentWidget";
+import Step from "../../components/Step";
+import useExplanation from "../../hooks/useExplanation";
 
 export async function getServerSideProps({ params }) {
   const id: string = params.id;
@@ -21,7 +24,7 @@ export async function getServerSideProps({ params }) {
   const { data, error } = await supabase
     .from("quizzes")
     .select(
-      "description, start_code, target_output, language, created_by, id, solution"
+      "description, start_code, target_output, language, created_by, id, solution, explanation"
     )
     .eq("id", supabaseId)
     .single();
@@ -68,6 +71,10 @@ export default function ShowQuiz({ quiz, profile }: PropTypes) {
     solutionCodeRef,
     quiz.target_output
   );
+  const explanation = useExplanation(
+    quiz.explanation?.steps || ([] as any),
+    quiz.explanation?.steps[0]?.id
+  );
 
   const activeInterpreter = showSolution
     ? solutionInterpreter
@@ -146,7 +153,14 @@ export default function ShowQuiz({ quiz, profile }: PropTypes) {
               output={solutionInterpreter.output}
               height="20rem"
               readOnly
-            />
+            >
+              {explanation.selectedStep && (
+                <Step
+                  step={explanation.selectedStep}
+                  onNext={() => explanation.selectNext()}
+                />
+              )}
+            </RunCodeEditor>
           )}
           {!showSolution && (
             <RunCodeEditor
diff --git a/schema.sql b/schema.sql
index 6a1464a..a39730d 100644
--- a/schema.sql
+++ b/schema.sql
@@ -283,3 +283,5 @@ CREATE TRIGGER handle_updated_at BEFORE UPDATE ON public.quizzes FOR EACH ROW EX
 
 
 alter table "public"."quizzes" add column "solution" character varying;
+
+alter table "public"."quizzes" add column "explanation" jsonb;
\ No newline at end of file
diff --git a/styles.css b/styles.css
index a268f09..71cad17 100644
--- a/styles.css
+++ b/styles.css
@@ -41,3 +41,39 @@ body {
 .editor-highlight-line {
   background-color: #333;
 }
+
+.gradient-border {
+  position: relative;
+  z-index: 0;
+  border-radius: 12px;
+}
+
+.gradient-border:before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 2px;
+  border-radius: 12px;
+  background: linear-gradient(
+    263.56deg,
+    #f0c06f -0.6%,
+    #da4142 49.43%,
+    #8447a4 100%
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+  overflow: hidden;
+}
+
+.add-icon {
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z"/></svg>');
+}
+
+.remove-icon {
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><rect height="4" width="20" x="2" y="10" /></g></svg>');
+}
diff --git a/types.ts b/types.ts
index 350b741..c15804c 100644
--- a/types.ts
+++ b/types.ts
@@ -5,10 +5,15 @@ export type Quiz = {
   start_code: string;
   target_output: string;
   solution: string;
+  explanation?: Explanation;
   language: string;
   views?: string;
 };
 
+export type Explanation = {
+  steps: ExplanationStep[];
+};
+
 export type Profile = {
   username: string;
   avatar_url: string;
@@ -26,5 +31,3 @@ export type ExplanationStep = {
   message: string;
   lines: number[];
 };
-
-export type Explanation = ExplanationStep[];

From c27e02db9261e0a65e27013ffc04ef937b3f669b Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Tue, 16 Nov 2021 07:41:35 -0500
Subject: [PATCH 07/15] line selector

---
 components/LineDecoration.tsx |  8 ++++++--
 components/LineSelector.tsx   | 37 +++++++++++++++++++++++------------
 components/PreviewQuiz.tsx    | 13 +++++++++++-
 components/RunCodeEditor.tsx  | 13 ++----------
 styles.css                    | 20 +++++++++++++++++--
 5 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/components/LineDecoration.tsx b/components/LineDecoration.tsx
index ae906ef..1290f0f 100644
--- a/components/LineDecoration.tsx
+++ b/components/LineDecoration.tsx
@@ -8,7 +8,11 @@ interface LineDecorationProps {
   glyphMarginClass?: string;
 }
 
-const LineDecoration: FC<LineDecorationProps> = ({ line, lineClass }) => {
+const LineDecoration: FC<LineDecorationProps> = ({
+  line,
+  lineClass,
+  glyphMarginClass,
+}) => {
   const monaco = useMonaco();
   const editor = useEditor();
   const prevDecorationsRef = useRef([]);
@@ -23,7 +27,7 @@ const LineDecoration: FC<LineDecorationProps> = ({ line, lineClass }) => {
             options: {
               isWholeLine: true,
               className: lineClass,
-              glyphMarginClassName: "editor-glyph",
+              glyphMarginClassName: glyphMarginClass,
             },
           },
         ]
diff --git a/components/LineSelector.tsx b/components/LineSelector.tsx
index f673c5a..1d936aa 100644
--- a/components/LineSelector.tsx
+++ b/components/LineSelector.tsx
@@ -14,35 +14,46 @@ interface LineSelectorProps {
   onChange?: (lines: number[]) => void;
 }
 
-const LineSelector: FC<LineSelectorProps> = ({ lines }) => {
-  //   const monaco = useMonaco();
+const LineSelector: FC<LineSelectorProps> = ({ lines = [], onChange }) => {
+  const monaco = useMonaco();
   const editor = useEditor();
   const numLines = useLineCount();
 
   const lineOptions = useMemo(() => range(numLines, 1), [numLines]);
+  const lineSet = useMemo(() => new Set(lines), [JSON.stringify(lines)]);
 
   useEffect(() => {
     if (editor) {
       const disposable = editor.onMouseDown((e) => {
-        console.log(e.target);
+        if (
+          e.target.type === monaco.editor.MouseTargetType.GUTTER_GLYPH_MARGIN
+        ) {
+          if (lineSet.has(e.target.position.lineNumber)) {
+            onChange(lines.filter((l) => l !== e.target.position.lineNumber));
+          } else {
+            onChange([...lines, e.target.position.lineNumber]);
+          }
+        }
       });
       return () => {
         disposable.dispose();
       };
     }
-  }, [editor]);
+  }, [editor, lineSet]);
 
   return (
     <>
-      {lineOptions.map((line) => (
-        <LineDecoration
-          key={line}
-          line={line}
-          lineClass={
-            lines?.includes(line) ? "editor-highlight-line" : undefined
-          }
-        />
-      ))}
+      {lineOptions.map((line) => {
+        const isLineSelected = lineSet.has(line);
+        return (
+          <LineDecoration
+            key={line} // need a way to identify lines
+            line={line}
+            lineClass={isLineSelected ? "editor-highlight-line" : undefined}
+            glyphMarginClass={isLineSelected ? "remove-icon" : "add-icon"}
+          />
+        );
+      })}
     </>
   );
 };
diff --git a/components/PreviewQuiz.tsx b/components/PreviewQuiz.tsx
index 14bb66e..3a6ae0a 100644
--- a/components/PreviewQuiz.tsx
+++ b/components/PreviewQuiz.tsx
@@ -14,6 +14,7 @@ import { nanoid } from "nanoid";
 import { NumberArrayInput } from "./ComplexInput";
 import Step from "./Step";
 import useExplanation from "../hooks/useExplanation";
+import LineSelector from "./LineSelector";
 
 const hashids = new Hashids();
 
@@ -117,8 +118,18 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
             hasCodeRun={hasCodeRun}
             output={output}
             height="20rem"
-            highlightLines={explanation.selectedStep?.lines}
           >
+            {explanation.selectedStep && (
+              <LineSelector
+                lines={explanation.selectedStep?.lines}
+                onChange={(lines) => {
+                  explanation.udpateStep(explanation.selectedStep.id, {
+                    lines,
+                  });
+                }}
+              />
+            )}
+
             {/* {explanation.selectedStep && (
               <Step step={explanation.selectedStep} />
             )} */}
diff --git a/components/RunCodeEditor.tsx b/components/RunCodeEditor.tsx
index 09f5ef0..3dc83fc 100644
--- a/components/RunCodeEditor.tsx
+++ b/components/RunCodeEditor.tsx
@@ -12,20 +12,11 @@ export type PropTypes = {
   output: Array<string>;
   height: string;
   readOnly?: boolean;
-  highlightLines?: number[];
   children?: ReactNode;
 };
 
 export default function RunCodeEditor(props: PropTypes) {
-  const {
-    codeRef,
-    runCode,
-    hasCodeRun,
-    output,
-    height,
-    highlightLines,
-    children,
-  } = props;
+  const { codeRef, runCode, hasCodeRun, output, height, children } = props;
   const editorRef = React.useRef(null);
   const [monaco, setMonaco] = React.useState<Monaco>(null);
 
@@ -65,10 +56,10 @@ export default function RunCodeEditor(props: PropTypes) {
           padding: { top: 15, bottom: 4 },
           renderLineHighlight: "none",
           readOnly: props.readOnly,
+          glyphMargin: true,
         }}
         onMount={handleEditorDidMount}
       >
-        <LineSelector lines={highlightLines} />
         {children}
       </Editor>
     </div>
diff --git a/styles.css b/styles.css
index 71cad17..5a0127c 100644
--- a/styles.css
+++ b/styles.css
@@ -71,9 +71,25 @@ body {
 }
 
 .add-icon {
-  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z"/></svg>');
+  background-size: 40%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z"/></svg>');
+  cursor: pointer;
+}
+
+.add-icon:hover {
+  background-color: #000;
 }
 
 .remove-icon {
-  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><rect height="4" width="20" x="2" y="10" /></g></svg>');
+  background-size: 40%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="white"><rect height="4" width="20" x="2" y="10" /></g></svg>');
+  cursor: pointer;
+}
+
+.remove-icon:hover {
+  background-color: #000;
 }

From 59c6e2e8dc451e00325700fb123ae23cb42637be Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Tue, 16 Nov 2021 22:30:22 -0500
Subject: [PATCH 08/15] refactor some stuff

---
 components/ContentWidget.tsx   |  12 +-
 components/CreateQuizForm.tsx  | 290 ++++++++++++++++++++++-----------
 components/Editor.tsx          |   2 +-
 components/ExplanationForm.tsx |  88 ++++++++++
 components/LineDecoration.tsx  |   9 +-
 components/PreviewQuiz.tsx     | 165 ++-----------------
 components/Step.tsx            |  65 ++++++--
 hooks/useExplanation.ts        |  14 +-
 pages/q/[id].tsx               |   2 +
 9 files changed, 382 insertions(+), 265 deletions(-)
 create mode 100644 components/ExplanationForm.tsx

diff --git a/components/ContentWidget.tsx b/components/ContentWidget.tsx
index 828e4dc..561a59d 100644
--- a/components/ContentWidget.tsx
+++ b/components/ContentWidget.tsx
@@ -35,7 +35,17 @@ const ContentWidget: FC<ContentWidgetProps> = ({
           return this.domNode;
         },
         afterRender: function () {
-          ReactDOM.render(children, this.domNode);
+          ReactDOM.render(
+            <div
+              onMouseOver={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              {children}
+            </div>,
+            this.domNode
+          );
         },
         getPosition: function () {
           return {
diff --git a/components/CreateQuizForm.tsx b/components/CreateQuizForm.tsx
index bbf7f3b..d5cc8b4 100644
--- a/components/CreateQuizForm.tsx
+++ b/components/CreateQuizForm.tsx
@@ -1,10 +1,15 @@
 import { Session } from "@supabase/supabase-js";
-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";
+import Hashids from "hashids";
 import classNames from "clsx";
-import { Profile, SaveQuiz } from "../types";
+import { Profile, SaveQuiz, Explanation } from "../types";
 import Editor from "@monaco-editor/react";
-
+import { supabase } from "../utils/supabaseClient";
 import PreviewQuiz from "./PreviewQuiz";
+import ExplanationForm from "./ExplanationForm";
+import useTypescript from "../hooks/useTypescript";
+
+const hashids = new Hashids();
 
 type FormInputProps = {
   name: string;
@@ -14,12 +19,12 @@ type FormInputProps = {
 };
 
 const FormInput = (props: FormInputProps) => (
-  <div className='space-y-3 sm:col-span-6'>
-    <label htmlFor={props.name} className='text-base font-normal text-white'>
+  <div className="space-y-3 sm:col-span-6">
+    <label htmlFor={props.name} className="text-base font-normal text-white">
       {props.label}
     </label>
-    <p className='text-sm text-white text-opacity-50'>{props.sublabel}</p>
-    <div className=''>{props.children}</div>
+    <p className="text-sm text-white text-opacity-50">{props.sublabel}</p>
+    <div className="">{props.children}</div>
   </div>
 );
 
@@ -28,29 +33,141 @@ type CreateQuizFormProps = {
   profile: Profile;
 };
 
+enum FormStep {
+  Task = 0,
+  Solution = 1,
+  Explanation = 2,
+}
+
 export default function CreateQuizForm({
   session,
   profile,
 }: CreateQuizFormProps) {
   const [description, setDescription] = useState("");
-  const [preview, setPreview] = useState(false);
+  const [formStep, setFormStep] = useState<FormStep>(FormStep.Task);
   const [solution, setSolution] = useState("");
   const [startCode, setStartCode] = useState("");
   const [output, setOutput] = useState("");
+  const [explanation, setExplanation] = useState<Explanation>();
+  const { tsClient, tsLoading } = useTypescript();
   const [loading, setLoading] = useState(false);
+  const [createdUrl, setCreatedUrl] = useState(null);
 
-  return (
-    <>
-      <div className='flex justify-end'>
-        {preview ? (
-          <p className='text-white'>
+  async function saveQuiz() {
+    setLoading(true);
+
+    const now = new Date();
+    const insertQuiz: SaveQuiz = {
+      language: "typescript",
+      description,
+      solution,
+      start_code: startCode,
+      target_output: output,
+      explanation,
+      created_at: now,
+      updated_at: now,
+      created_by: session.user.id,
+    };
+
+    // Insert the quiz without a friendly ID
+    // Note that friendly ID isn't required, it's just helpful for debugging
+    const { data: insertData, error: insertError } = await supabase
+      .from("quizzes")
+      .insert(insertQuiz);
+    setLoading(false);
+    if (insertError) throw insertError;
+
+    // Generate the friendly (hashed) ID for the created quiz
+    const insertedId = insertData[0].id;
+    const hashedId = hashids.encode(insertedId);
+
+    const url = `${process.env.NEXT_PUBLIC_HOME_URL}/q/${hashedId}`;
+    setCreatedUrl(url);
+
+    // Update the quiz to include the friendly ID
+    await supabase
+      .from("quizzes")
+      .update({ friendly_id: hashedId })
+      .eq("id", insertedId);
+  }
+
+  const steps = {
+    [FormStep.Task]: (
+      <form>
+        <div
+          className={classNames(
+            "grid grid-cols-1 mt-6 gap-y-12 sm:grid-cols-6"
+          )}
+        >
+          <FormInput
+            key="description"
+            name="description"
+            label="Enter a description"
+            sublabel="Introduce your quiz and let users know what they should make the code do."
+          >
+            <textarea
+              id="description"
+              name="description"
+              rows={5}
+              className="block w-full text-white bg-gray-600 bg-opacity-25 border-0 resize-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              required={true}
+            />
+          </FormInput>
+
+          <FormInput
+            key="startCode"
+            name="startCode"
+            label="Start code"
+            sublabel="Enter the starter code that the user should update."
+          >
+            <div className="relative group">
+              <div className="absolute w-full h-full bg-4 group-hover:ring-4 group-hover:ring-indigo-500 group-hover:ring-opacity-50 rounded-xl" />
+              <Editor
+                height="15rem"
+                defaultLanguage="typescript"
+                defaultValue=""
+                onChange={(code: string) => setStartCode(code)}
+                className="block bg-[#1E1E1E] rounded-xl p-2 sm:text-sm"
+                theme="vs-dark"
+                options={{
+                  fontSize: 12,
+                  minimap: { enabled: false },
+                  overviewRulerLanes: 0,
+                  renderLineHighlight: "none",
+                }}
+              />
+            </div>
+          </FormInput>
+
+          <FormInput
+            key="output"
+            name="output"
+            label="Target output"
+            sublabel="What should the user make the code output?"
+          >
+            <input
+              id="output"
+              name="output"
+              type="text"
+              className="block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl"
+              value={output}
+              onChange={(e) => setOutput(e.target.value)}
+              required={true}
+            />
+          </FormInput>
+        </div>
+      </form>
+    ),
+    [FormStep.Solution]: (
+      <div>
+        <div className="flex justify-end">
+          <p className="text-white">
             This is what your quiz will look like when you share it. Complete it
             and we'll include your solution!
           </p>
-        ) : null}
-      </div>
-
-      {preview ? (
+        </div>
         <PreviewQuiz
           quiz={{
             language: "typescript",
@@ -61,92 +178,71 @@ export default function CreateQuizForm({
           }}
           session={session}
           profile={profile}
+          onSolution={(solution) => {
+            setSolution(solution);
+          }}
         />
-      ) : null}
-      <form>
-        <div>
-          <div>
-            <div
-              className={classNames(
-                preview ? "hidden" : "",
-                "grid grid-cols-1 mt-6 gap-y-12 sm:grid-cols-6"
-              )}
-            >
-              <FormInput
-                key='description'
-                name='description'
-                label='Enter a description'
-                sublabel='Introduce your quiz and let users know what they should make the code do.'
+      </div>
+    ),
+    [FormStep.Explanation]: (
+      <div>
+        <div className="flex">
+          <p className="text-white">
+            If you'd like, you can create a guided explanation of the solution
+            code.
+          </p>
+        </div>
+        <ExplanationForm solution={solution} onChange={setExplanation} />
+      </div>
+    ),
+  };
+
+  return (
+    <>
+      {steps[formStep]}
+      <div className="pt-5 mt-6">
+        <div className="flex justify-between">
+          <div className="space-x-4">
+            {formStep > FormStep.Task && (
+              <button
+                type="button"
+                className="w-32 py-4 text-sm font-medium text-center text-white transition bg-black border border-gray-800 rounded-md margin-auto hover:scale-105 disabled:hover:scale-100 disabled:opacity-50"
+                onClick={() => setFormStep((prev) => prev - 1)}
               >
-                <textarea
-                  id='description'
-                  name='description'
-                  rows={5}
-                  className='block w-full text-white bg-gray-600 bg-opacity-25 border-0 resize-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl'
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  required={true}
-                />
-              </FormInput>
-
-              <FormInput
-                key='startCode'
-                name='startCode'
-                label='Start code'
-                sublabel='Enter the starter code that the user should update.'
+                {"Go Back"}
+              </button>
+            )}
+            {formStep < FormStep.Explanation && (
+              <button
+                type="button"
+                className="w-32 py-4 text-sm font-medium text-center text-white transition bg-black border border-gray-800 rounded-md margin-auto hover:scale-105 disabled:hover:scale-100 disabled:opacity-50"
+                onClick={() => setFormStep((prev) => prev + 1)}
+                disabled={formStep === FormStep.Solution && !solution}
               >
-                <div className='relative group'>
-                  <div className='absolute w-full h-full bg-4 group-hover:ring-4 group-hover:ring-indigo-500 group-hover:ring-opacity-50 rounded-xl' />
-                  <Editor
-                    height='15rem'
-                    defaultLanguage='typescript'
-                    defaultValue=''
-                    onChange={(code: string) => setStartCode(code)}
-                    className='block bg-[#1E1E1E] rounded-xl p-2 sm:text-sm'
-                    theme='vs-dark'
-                    options={{
-                      fontSize: 12,
-                      minimap: { enabled: false },
-                      overviewRulerLanes: 0,
-                      renderLineHighlight: "none",
-                    }}
-                  />
-                </div>
-              </FormInput>
-
-              <FormInput
-                key='output'
-                name='output'
-                label='Target output'
-                sublabel='What should the user make the code output?'
+                {"Next Step"}
+              </button>
+            )}
+          </div>
+          {formStep === FormStep.Explanation && (
+            <div className="flex items-center justify-end space-x-4">
+              <button
+                type="submit"
+                className="px-20 py-4 font-medium text-white transition gradient-cta rounded-xl focus:ring-2 focus:ring-white hover:scale-105 disabled:opacity-50"
+                onClick={saveQuiz}
               >
-                <input
-                  id='output'
-                  name='output'
-                  type='text'
-                  className='block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl'
-                  value={output}
-                  onChange={(e) => setOutput(e.target.value)}
-                  required={true}
-                />
-              </FormInput>
+                Save
+              </button>
             </div>
-          </div>
-        </div>
-      </form>
-
-      <div className='pt-5 mt-6'>
-        <div className='flex items-center justify-start space-x-4'>
-          <button
-            type='button'
-            className='w-32 py-4 text-sm font-medium text-center text-white transition bg-black border border-gray-800 rounded-md margin-auto hover:scale-105 disabled:hover:scale-100 disabled:opacity-50'
-            onClick={() => setPreview(!preview)}
-          >
-            {/* <span className='text-gray-100 transition duration-200 group-hover:text-gray-100'> */}
-            {preview ? "Back to Setup" : "Next Step"}
-            {/* </span> */}
-          </button>
+          )}
         </div>
+        {createdUrl && (
+          <div className="text-lg text-white my-8">
+            Quiz created successfully!{" "}
+            <a className="font-medium underline" href={createdUrl}>
+              {createdUrl}
+            </a>
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/components/Editor.tsx b/components/Editor.tsx
index 3510bd5..7d7dea4 100644
--- a/components/Editor.tsx
+++ b/components/Editor.tsx
@@ -13,7 +13,7 @@ const Editor: FC<EditorProps> = ({ onMount, children, ...otherProps }) => {
 
   function handleMount(editor: any, monaco: Monaco) {
     setEditor(editor);
-    onMount(editor, monaco);
+    onMount?.(editor, monaco);
   }
 
   return (
diff --git a/components/ExplanationForm.tsx b/components/ExplanationForm.tsx
new file mode 100644
index 0000000..0a1c4cd
--- /dev/null
+++ b/components/ExplanationForm.tsx
@@ -0,0 +1,88 @@
+import React, { FormEvent, useEffect, useRef, useState } from "react";
+import Hashids from "hashids";
+import { Session } from "@supabase/supabase-js";
+import Confetti from "react-dom-confetti";
+import useRunCode from "../hooks/useRunCode";
+import { Explanation, ExplanationStep, SaveQuiz } from "../types";
+import useTypescript from "../hooks/useTypescript";
+import { Profile, Quiz } from "../types";
+import { confettiConfig } from "../utils/confettiConfig";
+import OutputEditor from "./OutputEditor";
+import RunCodeEditor from "./RunCodeEditor";
+import { supabase } from "../utils/supabaseClient";
+import { nanoid } from "nanoid";
+import { NumberArrayInput } from "./ComplexInput";
+import Step from "./Step";
+import useExplanation from "../hooks/useExplanation";
+import LineSelector from "./LineSelector";
+import Editor from "./Editor";
+
+type PropTypes = {
+  solution: string;
+  onChange?: (explanation: Explanation) => void;
+};
+
+export default function ExplanationForm({ onChange, solution }: PropTypes) {
+  const explanation = useExplanation([]);
+
+  useEffect(() => {
+    onChange?.({
+      steps: explanation.steps,
+    });
+  }, [explanation.steps]);
+
+  return (
+    <>
+      <div className="max-w-4xl pt-20 mx-auto sm:px-6 lg:px-8">
+        <div className="max-w-3xl mx-auto">
+          <Editor
+            height={300}
+            defaultLanguage="typescript"
+            value={solution}
+            className="block text-white rounded-lg dark:border-purple-300 focus:ring-gray-500 sm:text-sm"
+            theme="vs-dark"
+            options={{
+              fontSize: 14,
+              minimap: { enabled: false },
+              overviewRulerLanes: 0,
+              padding: { top: 15, bottom: 4 },
+              renderLineHighlight: "none",
+              readOnly: true,
+              glyphMargin: true,
+            }}
+          >
+            {explanation.selectedStep && (
+              <>
+                <LineSelector
+                  lines={explanation.selectedStep?.lines}
+                  onChange={(lines) => {
+                    explanation.udpateStep(explanation.selectedStep.id, {
+                      lines,
+                    });
+                  }}
+                />
+                <Step
+                  step={explanation.selectedStep}
+                  stepNumber={explanation.selectedStepIndex}
+                  onPrev={() => explanation.selectPrev()}
+                  onNext={() => explanation.selectNext()}
+                  includeHighlights={false}
+                />
+              </>
+            )}
+          </Editor>
+          <div className="flex justify-between items-center h-8 mt-8 mb-4">
+            {explanation.steps.length === 0 && (
+              <button
+                onClick={() => explanation.addStep()}
+                className="relative flex items-center px-4  text-sm font-medium text-white transition rounded-md font-ibm gradient-cta hover:scale-105 disabled:hover:scale-100 disabled:opacity-50 h-8"
+              >
+                Begin Explanation
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/LineDecoration.tsx b/components/LineDecoration.tsx
index 1290f0f..0e0c591 100644
--- a/components/LineDecoration.tsx
+++ b/components/LineDecoration.tsx
@@ -19,8 +19,9 @@ const LineDecoration: FC<LineDecorationProps> = ({
 
   useEffect(() => {
     if (editor && monaco) {
-      prevDecorationsRef.current = editor?.deltaDecorations(
-        prevDecorationsRef.current || [],
+      // add decorations
+      const delta = editor?.deltaDecorations(
+        [],
         [
           {
             range: new monaco.Range(line, 1, line, 1),
@@ -32,6 +33,10 @@ const LineDecoration: FC<LineDecorationProps> = ({
           },
         ]
       );
+      return () => {
+        // dispose of decorations
+        editor?.deltaDecorations(delta, []);
+      };
     }
   }, [editor, monaco, line, lineClass]);
 
diff --git a/components/PreviewQuiz.tsx b/components/PreviewQuiz.tsx
index 3a6ae0a..3376949 100644
--- a/components/PreviewQuiz.tsx
+++ b/components/PreviewQuiz.tsx
@@ -1,81 +1,33 @@
-import React, { FormEvent, useRef, useState } from "react";
+import React, { FormEvent, useEffect, useRef, useState } from "react";
 import Hashids from "hashids";
 import { Session } from "@supabase/supabase-js";
 import Confetti from "react-dom-confetti";
 import useRunCode from "../hooks/useRunCode";
-import { ExplanationStep, SaveQuiz } from "../types";
 import useTypescript from "../hooks/useTypescript";
 import { Profile, Quiz } from "../types";
 import { confettiConfig } from "../utils/confettiConfig";
 import OutputEditor from "./OutputEditor";
 import RunCodeEditor from "./RunCodeEditor";
-import { supabase } from "../utils/supabaseClient";
-import { nanoid } from "nanoid";
-import { NumberArrayInput } from "./ComplexInput";
-import Step from "./Step";
-import useExplanation from "../hooks/useExplanation";
-import LineSelector from "./LineSelector";
-
-const hashids = new Hashids();
-
-declare global {
-  interface Window {
-    ts: any;
-  }
-}
 
 type PropTypes = {
   quiz: Quiz;
   profile: Profile;
   session: Session;
+  onSolution?: (solution: string) => void;
 };
 
-export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
+export default function ShowQuiz({ quiz, profile, onSolution }: PropTypes) {
   const { tsClient, tsLoading } = useTypescript();
   const codeRef = useRef(quiz.start_code);
-  const [loading, setLoading] = useState(false);
-  const [createdUrl, setCreatedUrl] = useState(null);
-  const explanation = useExplanation([]);
 
   const { runCode, codeRunning, output, errors, hasCodeRun, success } =
     useRunCode(tsClient, codeRef, quiz.target_output);
 
-  async function saveQuiz() {
-    setLoading(true);
-
-    const now = new Date();
-    const insertQuiz: SaveQuiz = {
-      ...quiz,
-      solution: codeRef.current,
-      explanation: {
-        steps: explanation.steps,
-      },
-      created_at: now,
-      updated_at: now,
-      created_by: session.user.id,
-    };
-
-    // Insert the quiz without a friendly ID
-    // Note that friendly ID isn't required, it's just helpful for debugging
-    const { data: insertData, error: insertError } = await supabase
-      .from("quizzes")
-      .insert(insertQuiz);
-    setLoading(false);
-    if (insertError) throw insertError;
-
-    // Generate the friendly (hashed) ID for the created quiz
-    const insertedId = insertData[0].id;
-    const hashedId = hashids.encode(insertedId);
-
-    const url = `${process.env.NEXT_PUBLIC_HOME_URL}/q/${hashedId}`;
-    setCreatedUrl(url);
-
-    // Update the quiz to include the friendly ID
-    await supabase
-      .from("quizzes")
-      .update({ friendly_id: hashedId })
-      .eq("id", insertedId);
-  }
+  useEffect(() => {
+    if (success) {
+      onSolution?.(codeRef.current);
+    }
+  }, [success]);
 
   return (
     <>
@@ -118,22 +70,7 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
             hasCodeRun={hasCodeRun}
             output={output}
             height="20rem"
-          >
-            {explanation.selectedStep && (
-              <LineSelector
-                lines={explanation.selectedStep?.lines}
-                onChange={(lines) => {
-                  explanation.udpateStep(explanation.selectedStep.id, {
-                    lines,
-                  });
-                }}
-              />
-            )}
-
-            {/* {explanation.selectedStep && (
-              <Step step={explanation.selectedStep} />
-            )} */}
-          </RunCodeEditor>
+          />
 
           <div className="px-4 pt-8 sm:px-0">
             <button
@@ -169,85 +106,9 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
             </label>
             <OutputEditor output={output} height="10rem" />
           </div>
-          <div>
-            <div className="flex justify-between items-center h-8 mt-8 mb-4">
-              <label className="block pt-2 pb-2 text-sm font-medium text-white">
-                Explanation of Solution
-              </label>
-              <button
-                onClick={() => explanation.addStep()}
-                className="relative flex items-center px-4  text-sm font-medium text-white transition rounded-md font-ibm gradient-cta hover:scale-105 disabled:hover:scale-100 disabled:opacity-50 h-8"
-              >
-                Add Step
-              </button>
-            </div>
-            <div>
-              {explanation.steps.length === 0 && (
-                <p className="text-white text-sm opacity-60 my-4">
-                  No steps yet, but explanation is optional.
-                </p>
-              )}
-              {explanation.steps.map((step, i) => (
-                <div
-                  key={step.id}
-                  tabIndex={0}
-                  onMouseDown={() => explanation.selectStep(step.id)}
-                  className={
-                    explanation.selectedStep?.id === step.id
-                      ? "bg-white bg-opacity-10 p-6 rounded-xl"
-                      : "p-6 rounded-xl"
-                  }
-                >
-                  <label
-                    htmlFor={step.id}
-                    className="block pb-2 text-sm font-medium text-white"
-                  >
-                    <p>Step {i + 1}</p>
-                  </label>
-                  <div className="flex">
-                    <input
-                      type="text"
-                      className="flex-1 block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl"
-                      value={step.message}
-                      placeholder="Explanation"
-                      onChange={(e) =>
-                        explanation.udpateStep(step.id, {
-                          message: e.target.value,
-                        })
-                      }
-                    />
-                    <div className="w-4" />
-                    <NumberArrayInput
-                      type="text"
-                      className="w-40 block w-full py-4 text-white bg-gray-600 bg-opacity-25 border-0 focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 sm:text-sm rounded-xl"
-                      value={step.lines}
-                      onChange={(lines) => {
-                        explanation.udpateStep(step.id, {
-                          lines,
-                        });
-                      }}
-                      placeholder="Line Numbers"
-                    />
-                    <div className="w-4" />
-                    <button
-                      className="relative flex items-center px-4  text-sm font-medium text-white rounded-xl font-ibm h-100 bg-gray-600 bg-opacity-25 hover:bg-opacity-40"
-                      onMouseDown={(e) => {
-                        e.stopPropagation();
-                      }}
-                      onClick={(e) => {
-                        explanation.removeStep(step.id);
-                      }}
-                    >
-                      Remove
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
         </div>
       </div>
-      <div className="justify-end pt-5 mt-6 right-64">
+      {/* <div className="justify-end pt-5 mt-6 right-64">
         <div className="flex items-center justify-end space-x-4">
           <button
             type="submit"
@@ -258,8 +119,8 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
             Save
           </button>
         </div>
-      </div>
-      {createdUrl ? (
+      </div> */}
+      {/* {createdUrl ? (
         <span className="text-lg text-white">
           Quiz created successfully!{" "}
           <a className="font-medium underline" href={createdUrl}>
@@ -268,7 +129,7 @@ export default function ShowQuiz({ quiz, profile, session }: PropTypes) {
         </span>
       ) : (
         <span />
-      )}
+      )} */}
     </>
   );
 }
diff --git a/components/Step.tsx b/components/Step.tsx
index 33222a2..2496b4e 100644
--- a/components/Step.tsx
+++ b/components/Step.tsx
@@ -5,30 +5,73 @@ import { CustomKeyBinding, addKeyBinding } from "../utils/keyBindings";
 import LineHighlights from "./LineHighlights";
 import { ExplanationStep } from "../types";
 import ContentWidget from "./ContentWidget";
+import LineDecoration from "./LineDecoration";
 
 interface StepProps {
   step: ExplanationStep;
+  stepNumber: number;
+  onPrev?: () => void;
   onNext?: () => void;
+  onNew?: () => void;
+  includeHighlights?: boolean;
 }
 
-const Step: FC<StepProps> = ({ step, onNext }) => {
+const Step: FC<StepProps> = ({
+  step,
+  stepNumber,
+  onPrev,
+  onNext,
+  onNew,
+  includeHighlights = true,
+}) => {
   return (
     <>
       <ContentWidget widgetId={step.id} line={step.lines[0]}>
-        <div className="w-56 bg-white bg-opacity-5 p-4 relative -left-80 gradient-border">
+        <div className="w-56 p-1 bg-white bg-opacity-5 relative -left-80 gradient-border">
           {step.message}
-          <div className="flex justify-end">
-            <button
-              onClick={() => {
-                onNext?.();
-              }}
-            >
-              Next
-            </button>
+          <textarea
+            className="box-border w-full bg-transparent border-none text-sm"
+            placeholder="Describe the solution..."
+          />
+          <div className="flex justify-between p-1 text-xs items-center">
+            <span>{stepNumber}</span>
+            <div className="space-x-2">
+              <button
+                className="px-2 py-1 text-xs text-white transition bg-white bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
+                onClick={() => {
+                  onPrev?.();
+                }}
+              >
+                Prev
+              </button>
+              <button
+                className="px-2 py-1 text-xs text-white transition bg-white bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
+                onClick={() => {
+                  onNext?.();
+                }}
+              >
+                Next
+              </button>
+              <button
+                className="px-2 py-1 text-xs text-white transition gradient-cta bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
+                onClick={() => {
+                  onNew?.();
+                }}
+              >
+                Add Step
+              </button>
+            </div>
           </div>
         </div>
       </ContentWidget>
-      <LineHighlights lines={step.lines} />
+      {includeHighlights &&
+        step.lines.map((line) => (
+          <LineDecoration
+            key={line} // need a way to identify lines
+            line={line}
+            lineClass="editor-highlight-line"
+          />
+        ))}
     </>
   );
 };
diff --git a/hooks/useExplanation.ts b/hooks/useExplanation.ts
index 75b6657..b0eabed 100644
--- a/hooks/useExplanation.ts
+++ b/hooks/useExplanation.ts
@@ -10,7 +10,9 @@ const useExplanation = (
   const [steps, setSteps] = useState<ExplanationStep[]>(defaultSteps);
 
   const addStep = () => {
-    setSteps((prev) => [...prev, { id: nanoid(), message: "", lines: [] }]);
+    const id = nanoid();
+    setSteps((prev) => [...prev, { id, message: "", lines: [] }]);
+    setSelected(id);
   };
 
   const removeStep = (id: string) => {
@@ -23,12 +25,20 @@ const useExplanation = (
     setSelected(id);
   };
 
+  const selectedStepIndex = steps.findIndex((s) => s.id === selected);
+
   const selectNext = () => {
     const index = steps.findIndex((s) => s.id === selected);
     const nextIndex = (index + 1) % steps.length;
     setSelected(steps[nextIndex].id);
   };
 
+  const selectPrev = () => {
+    const index = steps.findIndex((s) => s.id === selected);
+    const nextIndex = Math.max(index - 1, 0);
+    setSelected(steps[nextIndex].id);
+  };
+
   const udpateStep = (id, patch: Partial<ExplanationStep>) => {
     setSteps((prev) =>
       prev.map((step) => {
@@ -47,7 +57,9 @@ const useExplanation = (
   return {
     steps,
     selectedStep,
+    selectedStepIndex,
     selectStep,
+    selectPrev,
     selectNext,
     addStep,
     removeStep,
diff --git a/pages/q/[id].tsx b/pages/q/[id].tsx
index 18c4d77..29280e4 100644
--- a/pages/q/[id].tsx
+++ b/pages/q/[id].tsx
@@ -156,7 +156,9 @@ export default function ShowQuiz({ quiz, profile }: PropTypes) {
             >
               {explanation.selectedStep && (
                 <Step
+                  stepNumber={explanation.selectedStepIndex}
                   step={explanation.selectedStep}
+                  onPrev={() => explanation.selectPrev()}
                   onNext={() => explanation.selectNext()}
                 />
               )}

From 9c8c66ef1cfd7f7b42fa2cec36f844f0f3dba1dc Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Wed, 17 Nov 2021 16:24:10 -0500
Subject: [PATCH 09/15] working out some kinks in editor

---
 components/ContentWidget.tsx   | 59 ++++++++++++++++-------
 components/ExplanationForm.tsx | 14 +++++-
 components/LineDecoration.tsx  |  5 +-
 components/LineSelector.tsx    | 18 +++++--
 components/Step.tsx            | 38 ++++++++++-----
 hooks/useExplanation.ts        |  8 +++-
 package.json                   |  1 +
 pages/q/[id].tsx               |  2 +-
 styles.css                     |  5 ++
 yarn.lock                      | 85 ++++++++++++++++++++++++++++++++++
 10 files changed, 198 insertions(+), 37 deletions(-)

diff --git a/components/ContentWidget.tsx b/components/ContentWidget.tsx
index 561a59d..5efebf1 100644
--- a/components/ContentWidget.tsx
+++ b/components/ContentWidget.tsx
@@ -1,7 +1,15 @@
-import { useLayoutEffect, useRef, FC, ReactNode } from "react";
+import {
+  useLayoutEffect,
+  useRef,
+  FC,
+  ReactNode,
+  useEffect,
+  Children,
+} from "react";
 import { useMonaco } from "@monaco-editor/react";
 import { useEditor } from "./Editor";
 import ReactDOM from "react-dom";
+import useForceUpdate from "../hooks/useForceUpdate";
 
 interface ContentWidgetProps {
   children: any;
@@ -16,6 +24,8 @@ const ContentWidget: FC<ContentWidgetProps> = ({
 }) => {
   const monaco = useMonaco();
   const editor = useEditor();
+  const ref = useRef(null);
+  const forceUdpate = useForceUpdate();
 
   useLayoutEffect(() => {
     if (editor) {
@@ -27,24 +37,27 @@ const ContentWidget: FC<ContentWidgetProps> = ({
           return widgetId;
         },
         getDomNode: function () {
-          if (!this.domNode) {
-            this.domNode = document.createElement("div");
-            this.domNode.style.position = "relative";
-            this.domNode.style.width = 0;
+          if (!ref.current) {
+            ref.current = document.createElement("div");
+            ref.current.style.position = "relative";
+            ref.current.style.width = 0;
+            ref.current.classList.add("content-widget-portal");
           }
-          return this.domNode;
+          return ref.current;
         },
         afterRender: function () {
           ReactDOM.render(
-            <div
-              onMouseOver={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-            >
-              {children}
-            </div>,
-            this.domNode
+            <Test>
+              <div
+                onMouseOver={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              >
+                {children}
+              </div>
+            </Test>,
+            ref.current
           );
         },
         getPosition: function () {
@@ -53,7 +66,7 @@ const ContentWidget: FC<ContentWidgetProps> = ({
               lineNumber: line,
               column: 0,
             },
-            preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE],
+            preference: [monaco.editor.ContentWidgetPositionPreference.EXACT],
           };
         },
       };
@@ -62,9 +75,21 @@ const ContentWidget: FC<ContentWidgetProps> = ({
         editor.removeContentWidget(contentWidget);
       };
     }
-  }, [editor, children]);
+  }, [editor, children, forceUdpate]);
+
+  if (!ref.current) return null;
 
   return null;
 };
 
 export default ContentWidget;
+
+const Test = ({ children }) => {
+  useEffect(() => {
+    console.info("mounting");
+    return () => {
+      console.info("unmounting");
+    };
+  }, []);
+  return children;
+};
diff --git a/components/ExplanationForm.tsx b/components/ExplanationForm.tsx
index 0a1c4cd..5f643fe 100644
--- a/components/ExplanationForm.tsx
+++ b/components/ExplanationForm.tsx
@@ -57,15 +57,25 @@ export default function ExplanationForm({ onChange, solution }: PropTypes) {
                   lines={explanation.selectedStep?.lines}
                   onChange={(lines) => {
                     explanation.udpateStep(explanation.selectedStep.id, {
-                      lines,
+                      lines: lines.sort(),
                     });
                   }}
                 />
                 <Step
                   step={explanation.selectedStep}
-                  stepNumber={explanation.selectedStepIndex}
+                  steps={explanation.steps}
                   onPrev={() => explanation.selectPrev()}
                   onNext={() => explanation.selectNext()}
+                  onNew={() => {
+                    explanation.addStep({
+                      index: explanation.selectedStepIndex + 1,
+                    });
+                  }}
+                  onMessageChange={(message) => {
+                    explanation.udpateStep(explanation.selectedStep.id, {
+                      message,
+                    });
+                  }}
                   includeHighlights={false}
                 />
               </>
diff --git a/components/LineDecoration.tsx b/components/LineDecoration.tsx
index 0e0c591..a24d27c 100644
--- a/components/LineDecoration.tsx
+++ b/components/LineDecoration.tsx
@@ -15,7 +15,6 @@ const LineDecoration: FC<LineDecorationProps> = ({
 }) => {
   const monaco = useMonaco();
   const editor = useEditor();
-  const prevDecorationsRef = useRef([]);
 
   useEffect(() => {
     if (editor && monaco) {
@@ -40,6 +39,10 @@ const LineDecoration: FC<LineDecorationProps> = ({
     }
   }, [editor, monaco, line, lineClass]);
 
+  useEffect(() => {
+    editor?.render();
+  });
+
   return null;
 };
 
diff --git a/components/LineSelector.tsx b/components/LineSelector.tsx
index 1d936aa..41fb07d 100644
--- a/components/LineSelector.tsx
+++ b/components/LineSelector.tsx
@@ -5,6 +5,12 @@ import LineHighlights from "./LineHighlights";
 import LineDecoration from "./LineDecoration";
 import useLineCount from "../hooks/useLineCount";
 
+const useLatest = <T extends any>(value: T): { readonly current: T } => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};
+
 function range(size: number, startAt = 0) {
   return Array.from(new Array(size), (x, i) => i + startAt);
 }
@@ -18,6 +24,9 @@ const LineSelector: FC<LineSelectorProps> = ({ lines = [], onChange }) => {
   const monaco = useMonaco();
   const editor = useEditor();
   const numLines = useLineCount();
+  const latest = {
+    onChange: useLatest(onChange),
+  };
 
   const lineOptions = useMemo(() => range(numLines, 1), [numLines]);
   const lineSet = useMemo(() => new Set(lines), [JSON.stringify(lines)]);
@@ -28,10 +37,13 @@ const LineSelector: FC<LineSelectorProps> = ({ lines = [], onChange }) => {
         if (
           e.target.type === monaco.editor.MouseTargetType.GUTTER_GLYPH_MARGIN
         ) {
+          editor.focus();
           if (lineSet.has(e.target.position.lineNumber)) {
-            onChange(lines.filter((l) => l !== e.target.position.lineNumber));
+            latest.onChange.current?.(
+              lines.filter((l) => l !== e.target.position.lineNumber)
+            );
           } else {
-            onChange([...lines, e.target.position.lineNumber]);
+            latest.onChange.current?.([...lines, e.target.position.lineNumber]);
           }
         }
       });
@@ -39,7 +51,7 @@ const LineSelector: FC<LineSelectorProps> = ({ lines = [], onChange }) => {
         disposable.dispose();
       };
     }
-  }, [editor, lineSet]);
+  }, [editor, JSON.stringify(lines)]);
 
   return (
     <>
diff --git a/components/Step.tsx b/components/Step.tsx
index 2496b4e..0937441 100644
--- a/components/Step.tsx
+++ b/components/Step.tsx
@@ -1,60 +1,76 @@
 import { Monaco } from "@monaco-editor/react";
 import Editor from "./Editor";
-import React, { MutableRefObject, ReactNode, FC } from "react";
+import React, { MutableRefObject, useRef, FC } from "react";
 import { CustomKeyBinding, addKeyBinding } from "../utils/keyBindings";
 import LineHighlights from "./LineHighlights";
 import { ExplanationStep } from "../types";
 import ContentWidget from "./ContentWidget";
 import LineDecoration from "./LineDecoration";
+import { useEventListener } from "@chakra-ui/hooks";
 
 interface StepProps {
   step: ExplanationStep;
-  stepNumber: number;
+  steps: ExplanationStep[];
   onPrev?: () => void;
   onNext?: () => void;
   onNew?: () => void;
+  onMessageChange?: (message: string) => void;
   includeHighlights?: boolean;
 }
 
 const Step: FC<StepProps> = ({
   step,
-  stepNumber,
+  steps,
   onPrev,
   onNext,
   onNew,
+  onMessageChange,
   includeHighlights = true,
 }) => {
+  const index = steps.findIndex((s) => step.id === s.id);
+  const ref = useRef(null);
+
   return (
     <>
       <ContentWidget widgetId={step.id} line={step.lines[0]}>
-        <div className="w-56 p-1 bg-white bg-opacity-5 relative -left-80 gradient-border">
-          {step.message}
+        <div className="w-72 p-2 bg-white bg-opacity-5 relative gradient-border evaluation-step">
+          {/* {step.message} */}
           <textarea
-            className="box-border w-full bg-transparent border-none text-sm"
+            key={step.id}
+            ref={ref}
+            defaultValue={step.message}
+            onBlur={(e) => {
+              onMessageChange?.(e.currentTarget.value);
+            }}
+            className="p-1 box-border w-full bg-transparent border-none text-sm"
             placeholder="Describe the solution..."
           />
-          <div className="flex justify-between p-1 text-xs items-center">
-            <span>{stepNumber}</span>
+          <div className="flex justify-between p-0 text-xs items-center">
+            <span>
+              {index + 1} of {steps.length}
+            </span>
             <div className="space-x-2">
               <button
                 className="px-2 py-1 text-xs text-white transition bg-white bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
-                onClick={() => {
+                onMouseUp={() => {
                   onPrev?.();
                 }}
+                disabled={index === 0}
               >
                 Prev
               </button>
               <button
                 className="px-2 py-1 text-xs text-white transition bg-white bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
-                onClick={() => {
+                onMouseUp={() => {
                   onNext?.();
                 }}
+                disabled={index === steps.length - 1}
               >
                 Next
               </button>
               <button
                 className="px-2 py-1 text-xs text-white transition gradient-cta bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
-                onClick={() => {
+                onMouseUp={() => {
                   onNew?.();
                 }}
               >
diff --git a/hooks/useExplanation.ts b/hooks/useExplanation.ts
index b0eabed..a1d5388 100644
--- a/hooks/useExplanation.ts
+++ b/hooks/useExplanation.ts
@@ -9,9 +9,13 @@ const useExplanation = (
   const [selected, setSelected] = useState<string | null>(defaultSelected);
   const [steps, setSteps] = useState<ExplanationStep[]>(defaultSteps);
 
-  const addStep = () => {
+  const addStep = ({ index = steps.length } = {}) => {
     const id = nanoid();
-    setSteps((prev) => [...prev, { id, message: "", lines: [] }]);
+    setSteps((prev) => {
+      const copy = [...prev];
+      copy.splice(index, 0, { id, message: "", lines: [] });
+      return copy;
+    });
     setSelected(id);
   };
 
diff --git a/package.json b/package.json
index 1e21cb4..ecc5326 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "type-check": "tsc"
   },
   "dependencies": {
+    "@chakra-ui/hooks": "^1.7.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
diff --git a/pages/q/[id].tsx b/pages/q/[id].tsx
index 29280e4..68da7a4 100644
--- a/pages/q/[id].tsx
+++ b/pages/q/[id].tsx
@@ -156,8 +156,8 @@ export default function ShowQuiz({ quiz, profile }: PropTypes) {
             >
               {explanation.selectedStep && (
                 <Step
-                  stepNumber={explanation.selectedStepIndex}
                   step={explanation.selectedStep}
+                  steps={explanation.steps}
                   onPrev={() => explanation.selectPrev()}
                   onNext={() => explanation.selectNext()}
                 />
diff --git a/styles.css b/styles.css
index 5a0127c..a378b67 100644
--- a/styles.css
+++ b/styles.css
@@ -93,3 +93,8 @@ body {
 .remove-icon:hover {
   background-color: #000;
 }
+
+.evaluation-step {
+  left: -400px;
+  top: 0;
+}
diff --git a/yarn.lock b/yarn.lock
index d72ffb4..d899092 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -57,6 +57,33 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@chakra-ui/hooks@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.7.1.tgz#0242b678f40ef00e4834a8a856c8881dcda0072d"
+  integrity sha512-hgN19X6GUKQYAHczmFY+GAT8vl9h+X+nGWrIAnmvZ6BgUXxDajnTNhZeWhj0ZkR+7A7dCE6Y/3X44GafUgChMw==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.1"
+    "@chakra-ui/utils" "1.9.1"
+    compute-scroll-into-view "1.0.14"
+    copy-to-clipboard "3.3.1"
+
+"@chakra-ui/react-utils@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-1.2.1.tgz#e06c8987c63ceab3da3ddd53503bf45a893179a5"
+  integrity sha512-bV8FRaXiOgGxOg03iTNin/B02I+tHH9PQtqUTl3U7cJaoI+5AUYhrqXvl1Ya2/R7zxSFrb/gBVDTgbZiVkJ+Dg==
+  dependencies:
+    "@chakra-ui/utils" "^1.9.1"
+
+"@chakra-ui/utils@1.9.1", "@chakra-ui/utils@^1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.9.1.tgz#e34bf74f9f6048da1ec2a5728db4cc80d0158e0e"
+  integrity sha512-Tue8JfpzOqeHd8vSqAnX1l/Y3Gg456+BXFP/TH6mCIeqMAMbrvv25vDskds0wlXRjMYdmpqHxCEzkalFrscGHA==
+  dependencies:
+    "@types/lodash.mergewith" "4.6.6"
+    css-box-model "1.2.1"
+    framesync "5.3.0"
+    lodash.mergewith "4.6.2"
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
   version "0.2.36"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
@@ -477,6 +504,18 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/lodash.mergewith@4.6.6":
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10"
+  integrity sha512-RY/8IaVENjG19rxTZu9Nukqh0W2UrYgmBj5sdns4hWRZaV8PqR7wIKHFKzvOTjo4zVRV7sVI+yFhAJql12Kfqg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.177"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.177.tgz#f70c0d19c30fab101cad46b52be60363c43c4578"
+  integrity sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==
+
 "@types/node@*":
   version "16.11.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.1.tgz#2e50a649a50fc403433a14f829eface1a3443e97"
@@ -1199,6 +1238,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compute-scroll-into-view@1.0.14:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.14.tgz#80e3ebb25d6aa89f42e533956cb4b16a04cfe759"
+  integrity sha512-mKDjINe3tc6hGelUMNDzuhorIUZ7kS7BwyY0r2wQd2HOH2tRuJykiC06iSEX8y1TuhNzvz4GcJnK16mM2J1NMQ==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -1221,6 +1265,13 @@ convert-source-map@1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+copy-to-clipboard@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -1297,6 +1348,13 @@ crypto-browserify@3.12.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+css-box-model@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -1735,6 +1793,13 @@ fraction.js@^4.1.1:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.1.tgz#ac4e520473dae67012d618aab91eda09bcb400ff"
   integrity sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==
 
+framesync@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
+  integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
+  dependencies:
+    tslib "^2.1.0"
+
 fs-extra@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
@@ -2588,6 +2653,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.mergewith@4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -4307,6 +4377,11 @@ timers-browserify@2.0.12:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-invariant@^1.0.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
+  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
+
 tiny-relative-date@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
@@ -4331,6 +4406,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
@@ -4356,6 +4436,11 @@ treeverse@^1.0.4:
   resolved "https://registry.yarnpkg.com/treeverse/-/treeverse-1.0.4.tgz#a6b0ebf98a1bca6846ddc7ecbc900df08cb9cd5f"
   integrity sha512-whw60l7r+8ZU8Tu/Uc2yxtc4ZTZbR/PF3u1IPNKGQ6p8EICLb3Z2lAgoqw9bqYd8IkgnsaOcLzYHFckjqNsf0g==
 
+tslib@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tty-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.1.tgz#3f05251ee17904dfd0677546670db9651682b811"

From 448d5681fe6c52a75243d0ad8d349a23119de1d2 Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Wed, 17 Nov 2021 20:08:46 -0500
Subject: [PATCH 10/15] tweaks

---
 components/CreateQuizForm.tsx  |   5 +-
 components/ExplanationForm.tsx |   1 +
 components/RunCodeEditor.tsx   |   1 -
 components/Step.tsx            | 115 +++++++++++++++++++++------------
 pages/q/[id].tsx               |   1 +
 styles.css                     |  17 ++++-
 6 files changed, 91 insertions(+), 49 deletions(-)

diff --git a/components/CreateQuizForm.tsx b/components/CreateQuizForm.tsx
index d5cc8b4..5304872 100644
--- a/components/CreateQuizForm.tsx
+++ b/components/CreateQuizForm.tsx
@@ -162,10 +162,9 @@ export default function CreateQuizForm({
     ),
     [FormStep.Solution]: (
       <div>
-        <div className="flex justify-end">
+        <div className="flex">
           <p className="text-white">
-            This is what your quiz will look like when you share it. Complete it
-            and we'll include your solution!
+            Complete your quiz and we'll include the solution!
           </p>
         </div>
         <PreviewQuiz
diff --git a/components/ExplanationForm.tsx b/components/ExplanationForm.tsx
index 5f643fe..f3bcee8 100644
--- a/components/ExplanationForm.tsx
+++ b/components/ExplanationForm.tsx
@@ -64,6 +64,7 @@ export default function ExplanationForm({ onChange, solution }: PropTypes) {
                 <Step
                   step={explanation.selectedStep}
                   steps={explanation.steps}
+                  mode={Step.Mode.Edit}
                   onPrev={() => explanation.selectPrev()}
                   onNext={() => explanation.selectNext()}
                   onNew={() => {
diff --git a/components/RunCodeEditor.tsx b/components/RunCodeEditor.tsx
index 3dc83fc..98f0f02 100644
--- a/components/RunCodeEditor.tsx
+++ b/components/RunCodeEditor.tsx
@@ -56,7 +56,6 @@ export default function RunCodeEditor(props: PropTypes) {
           padding: { top: 15, bottom: 4 },
           renderLineHighlight: "none",
           readOnly: props.readOnly,
-          glyphMargin: true,
         }}
         onMount={handleEditorDidMount}
       >
diff --git a/components/Step.tsx b/components/Step.tsx
index 0937441..edcfcf6 100644
--- a/components/Step.tsx
+++ b/components/Step.tsx
@@ -7,10 +7,21 @@ import { ExplanationStep } from "../types";
 import ContentWidget from "./ContentWidget";
 import LineDecoration from "./LineDecoration";
 import { useEventListener } from "@chakra-ui/hooks";
+import classNames from "classnames";
+
+export enum Mode {
+  Edit = "Edit",
+  View = "View",
+}
+
+interface StepNamespace {
+  Mode: typeof Mode;
+}
 
 interface StepProps {
   step: ExplanationStep;
   steps: ExplanationStep[];
+  mode: Mode;
   onPrev?: () => void;
   onNext?: () => void;
   onNew?: () => void;
@@ -18,7 +29,8 @@ interface StepProps {
   includeHighlights?: boolean;
 }
 
-const Step: FC<StepProps> = ({
+const Step: FC<StepProps> & StepNamespace = ({
+  mode = Mode.View,
   step,
   steps,
   onPrev,
@@ -33,49 +45,64 @@ const Step: FC<StepProps> = ({
   return (
     <>
       <ContentWidget widgetId={step.id} line={step.lines[0]}>
-        <div className="w-72 p-2 bg-white bg-opacity-5 relative gradient-border evaluation-step">
-          {/* {step.message} */}
-          <textarea
-            key={step.id}
-            ref={ref}
-            defaultValue={step.message}
-            onBlur={(e) => {
-              onMessageChange?.(e.currentTarget.value);
-            }}
-            className="p-1 box-border w-full bg-transparent border-none text-sm"
-            placeholder="Describe the solution..."
-          />
-          <div className="flex justify-between p-0 text-xs items-center">
-            <span>
-              {index + 1} of {steps.length}
-            </span>
-            <div className="space-x-2">
-              <button
-                className="px-2 py-1 text-xs text-white transition bg-white bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
-                onMouseUp={() => {
-                  onPrev?.();
-                }}
-                disabled={index === 0}
-              >
-                Prev
-              </button>
-              <button
-                className="px-2 py-1 text-xs text-white transition bg-white bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
-                onMouseUp={() => {
-                  onNext?.();
+        <div
+          className={classNames(
+            "w-72 relative",
+            mode === Mode.View ? "evaluation-step-view" : "evaluation-step-edit"
+          )}
+        >
+          <div className="absolute top-1 -right-2 arrow-right"></div>
+          <div
+            className="p-2 relative gradient-border"
+            style={{ backgroundColor: "#161110" }}
+          >
+            {mode === Mode.View && <p className="my-2">{step.message}</p>}
+            {mode === Mode.Edit && (
+              <textarea
+                key={step.id}
+                ref={ref}
+                defaultValue={step.message}
+                onBlur={(e) => {
+                  onMessageChange?.(e.currentTarget.value);
                 }}
-                disabled={index === steps.length - 1}
-              >
-                Next
-              </button>
-              <button
-                className="px-2 py-1 text-xs text-white transition gradient-cta bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
-                onMouseUp={() => {
-                  onNew?.();
-                }}
-              >
-                Add Step
-              </button>
+                className="p-1 box-border w-full bg-transparent border-none text-sm"
+                placeholder="Choose some lines of code and explain them..."
+              />
+            )}
+            <div className="flex justify-between p-0 text-xs items-center">
+              <span>
+                {index + 1} of {steps.length}
+              </span>
+              <div className="space-x-2">
+                <button
+                  className="px-2 py-1 text-xs text-white transition bg-white bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
+                  onMouseUp={() => {
+                    onPrev?.();
+                  }}
+                  disabled={index === 0}
+                >
+                  Prev
+                </button>
+                <button
+                  className="px-2 py-1 text-xs text-white transition bg-white bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
+                  onMouseUp={() => {
+                    onNext?.();
+                  }}
+                  disabled={index === steps.length - 1}
+                >
+                  Next
+                </button>
+                {mode === Mode.Edit && (
+                  <button
+                    className="px-2 py-1 text-xs text-white transition gradient-cta bg-opacity-10 rounded-md focus:ring-2 focus:ring-white hover:bg-opacity-20 disabled:opacity-50"
+                    onMouseUp={() => {
+                      onNew?.();
+                    }}
+                  >
+                    Add Step
+                  </button>
+                )}
+              </div>
             </div>
           </div>
         </div>
@@ -92,4 +119,6 @@ const Step: FC<StepProps> = ({
   );
 };
 
+Step.Mode = Mode;
+
 export default Step;
diff --git a/pages/q/[id].tsx b/pages/q/[id].tsx
index 68da7a4..d742b63 100644
--- a/pages/q/[id].tsx
+++ b/pages/q/[id].tsx
@@ -158,6 +158,7 @@ export default function ShowQuiz({ quiz, profile }: PropTypes) {
                 <Step
                   step={explanation.selectedStep}
                   steps={explanation.steps}
+                  mode={Step.Mode.View}
                   onPrev={() => explanation.selectPrev()}
                   onNext={() => explanation.selectNext()}
                 />
diff --git a/styles.css b/styles.css
index a378b67..5b62224 100644
--- a/styles.css
+++ b/styles.css
@@ -94,7 +94,20 @@ body {
   background-color: #000;
 }
 
-.evaluation-step {
+.evaluation-step-view {
+  left: -380px;
+  top: -8px;
+}
+
+.evaluation-step-edit {
   left: -400px;
-  top: 0;
+  top: -8px;
+}
+
+.arrow-right {
+  width: 0;
+  height: 0;
+  border-top: 16px solid transparent;
+  border-bottom: 16px solid transparent;
+  border-left: 16px solid #efbb6c;
 }

From 6b4cffdc0b42f1a95d9e4f5ebb5368e662236d76 Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Thu, 18 Nov 2021 10:15:44 -0500
Subject: [PATCH 11/15] refactoring

---
 components/ContentWidget.tsx   | 39 +++++++++++++---------------------
 components/ExplanationForm.tsx | 12 +++++------
 components/LineHighlights.tsx  | 31 ---------------------------
 components/LineSelector.tsx    |  8 +------
 components/RunCodeEditor.tsx   |  1 -
 components/Step.tsx            |  1 -
 hooks/useExplanation.ts        | 39 +++++++++++++++++++---------------
 hooks/useForceUpdate.ts        |  4 ++++
 hooks/useLatest.tsx            | 13 ++++++++++++
 pages/q/[id].tsx               |  4 ++--
 10 files changed, 63 insertions(+), 89 deletions(-)
 delete mode 100644 components/LineHighlights.tsx
 create mode 100644 hooks/useLatest.tsx

diff --git a/components/ContentWidget.tsx b/components/ContentWidget.tsx
index 5efebf1..afb0961 100644
--- a/components/ContentWidget.tsx
+++ b/components/ContentWidget.tsx
@@ -17,6 +17,12 @@ interface ContentWidgetProps {
   widgetId: string;
 }
 
+/**
+ * This component pins its children to a specific line in the editor.
+ * It's good for adding annotations to the editor.
+ * @param param0
+ * @returns
+ */
 const ContentWidget: FC<ContentWidgetProps> = ({
   widgetId,
   line,
@@ -25,7 +31,6 @@ const ContentWidget: FC<ContentWidgetProps> = ({
   const monaco = useMonaco();
   const editor = useEditor();
   const ref = useRef(null);
-  const forceUdpate = useForceUpdate();
 
   useLayoutEffect(() => {
     if (editor) {
@@ -47,16 +52,14 @@ const ContentWidget: FC<ContentWidgetProps> = ({
         },
         afterRender: function () {
           ReactDOM.render(
-            <Test>
-              <div
-                onMouseOver={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-              >
-                {children}
-              </div>
-            </Test>,
+            <div
+              onMouseOver={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              {children}
+            </div>,
             ref.current
           );
         },
@@ -75,21 +78,9 @@ const ContentWidget: FC<ContentWidgetProps> = ({
         editor.removeContentWidget(contentWidget);
       };
     }
-  }, [editor, children, forceUdpate]);
-
-  if (!ref.current) return null;
+  }, [editor, children]);
 
   return null;
 };
 
 export default ContentWidget;
-
-const Test = ({ children }) => {
-  useEffect(() => {
-    console.info("mounting");
-    return () => {
-      console.info("unmounting");
-    };
-  }, []);
-  return children;
-};
diff --git a/components/ExplanationForm.tsx b/components/ExplanationForm.tsx
index f3bcee8..2dd058b 100644
--- a/components/ExplanationForm.tsx
+++ b/components/ExplanationForm.tsx
@@ -51,29 +51,29 @@ export default function ExplanationForm({ onChange, solution }: PropTypes) {
               glyphMargin: true,
             }}
           >
-            {explanation.selectedStep && (
+            {explanation.selected.step && (
               <>
                 <LineSelector
-                  lines={explanation.selectedStep?.lines}
+                  lines={explanation.selected.step?.lines}
                   onChange={(lines) => {
-                    explanation.udpateStep(explanation.selectedStep.id, {
+                    explanation.udpateStep(explanation.selected.step.id, {
                       lines: lines.sort(),
                     });
                   }}
                 />
                 <Step
-                  step={explanation.selectedStep}
+                  step={explanation.selected.step}
                   steps={explanation.steps}
                   mode={Step.Mode.Edit}
                   onPrev={() => explanation.selectPrev()}
                   onNext={() => explanation.selectNext()}
                   onNew={() => {
                     explanation.addStep({
-                      index: explanation.selectedStepIndex + 1,
+                      index: explanation.selected.index + 1,
                     });
                   }}
                   onMessageChange={(message) => {
-                    explanation.udpateStep(explanation.selectedStep.id, {
+                    explanation.udpateStep(explanation.selected.step.id, {
                       message,
                     });
                   }}
diff --git a/components/LineHighlights.tsx b/components/LineHighlights.tsx
deleted file mode 100644
index 17c2a9e..0000000
--- a/components/LineHighlights.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useEffect, useRef, FC } from "react";
-import { useMonaco } from "@monaco-editor/react";
-import { useEditor } from "./Editor";
-
-interface LineHighlightsProps {
-  lines?: number[];
-}
-
-const LineHighlights: FC<LineHighlightsProps> = ({ lines = [] }) => {
-  const monaco = useMonaco();
-  const editor = useEditor();
-  const prevDecorationsRef = useRef([]);
-
-  useEffect(() => {
-    prevDecorationsRef.current = editor?.deltaDecorations(
-      prevDecorationsRef.current || [],
-      lines.map((line) => ({
-        range: new monaco.Range(line, 1, line, 1),
-        options: {
-          isWholeLine: true,
-          className: "editor-highlight-line",
-          glyphMarginClassName: "editor-glyph",
-        },
-      }))
-    );
-  }, [editor, JSON.stringify(lines)]);
-
-  return null;
-};
-
-export default LineHighlights;
diff --git a/components/LineSelector.tsx b/components/LineSelector.tsx
index 41fb07d..1dcca8d 100644
--- a/components/LineSelector.tsx
+++ b/components/LineSelector.tsx
@@ -1,15 +1,9 @@
 import { useEffect, useRef, FC, useMemo } from "react";
 import { useMonaco } from "@monaco-editor/react";
 import { useEditor } from "./Editor";
-import LineHighlights from "./LineHighlights";
 import LineDecoration from "./LineDecoration";
 import useLineCount from "../hooks/useLineCount";
-
-const useLatest = <T extends any>(value: T): { readonly current: T } => {
-  const ref = useRef(value);
-  ref.current = value;
-  return ref;
-};
+import useLatest from "../hooks/useLatest";
 
 function range(size: number, startAt = 0) {
   return Array.from(new Array(size), (x, i) => i + startAt);
diff --git a/components/RunCodeEditor.tsx b/components/RunCodeEditor.tsx
index 98f0f02..3825401 100644
--- a/components/RunCodeEditor.tsx
+++ b/components/RunCodeEditor.tsx
@@ -2,7 +2,6 @@ import { Monaco } from "@monaco-editor/react";
 import Editor from "./Editor";
 import React, { MutableRefObject, ReactNode } from "react";
 import { CustomKeyBinding, addKeyBinding } from "../utils/keyBindings";
-import LineHighlights from "./LineHighlights";
 import LineSelector from "./LineSelector";
 
 export type PropTypes = {
diff --git a/components/Step.tsx b/components/Step.tsx
index edcfcf6..0ca6471 100644
--- a/components/Step.tsx
+++ b/components/Step.tsx
@@ -2,7 +2,6 @@ import { Monaco } from "@monaco-editor/react";
 import Editor from "./Editor";
 import React, { MutableRefObject, useRef, FC } from "react";
 import { CustomKeyBinding, addKeyBinding } from "../utils/keyBindings";
-import LineHighlights from "./LineHighlights";
 import { ExplanationStep } from "../types";
 import ContentWidget from "./ContentWidget";
 import LineDecoration from "./LineDecoration";
diff --git a/hooks/useExplanation.ts b/hooks/useExplanation.ts
index a1d5388..8ac87d8 100644
--- a/hooks/useExplanation.ts
+++ b/hooks/useExplanation.ts
@@ -2,11 +2,16 @@ import { useState } from "react";
 import { ExplanationStep } from "../types";
 import { nanoid } from "nanoid";
 
+/**
+ * Handles all of the logic related to explanation state
+ */
 const useExplanation = (
   defaultSteps: ExplanationStep[],
-  defaultSelected: string | null = null
+  defaultSelectedId: string | null = null
 ) => {
-  const [selected, setSelected] = useState<string | null>(defaultSelected);
+  const [selectedId, setSelectedId] = useState<string | null>(
+    defaultSelectedId
+  );
   const [steps, setSteps] = useState<ExplanationStep[]>(defaultSteps);
 
   const addStep = ({ index = steps.length } = {}) => {
@@ -16,31 +21,32 @@ const useExplanation = (
       copy.splice(index, 0, { id, message: "", lines: [] });
       return copy;
     });
-    setSelected(id);
+    setSelectedId(id);
   };
 
-  const removeStep = (id: string) => {
+  const removeStepById = (id: string) => {
     setSteps((prev) => prev.filter((step) => step.id !== id));
   };
 
-  const selectedStep = steps.find((step) => step.id === selected);
-
-  const selectStep = (id: string) => {
-    setSelected(id);
+  const selected = {
+    step: steps.find((step) => step.id === selectedId),
+    index: steps.findIndex((s) => s.id === selectedId),
   };
 
-  const selectedStepIndex = steps.findIndex((s) => s.id === selected);
+  const selectStepById = (id: string) => {
+    setSelectedId(id);
+  };
 
   const selectNext = () => {
-    const index = steps.findIndex((s) => s.id === selected);
+    const index = steps.findIndex((s) => s.id === selectedId);
     const nextIndex = (index + 1) % steps.length;
-    setSelected(steps[nextIndex].id);
+    setSelectedId(steps[nextIndex].id);
   };
 
   const selectPrev = () => {
-    const index = steps.findIndex((s) => s.id === selected);
+    const index = steps.findIndex((s) => s.id === selectedId);
     const nextIndex = Math.max(index - 1, 0);
-    setSelected(steps[nextIndex].id);
+    setSelectedId(steps[nextIndex].id);
   };
 
   const udpateStep = (id, patch: Partial<ExplanationStep>) => {
@@ -60,13 +66,12 @@ const useExplanation = (
 
   return {
     steps,
-    selectedStep,
-    selectedStepIndex,
-    selectStep,
+    selected,
+    selectStepById,
     selectPrev,
     selectNext,
     addStep,
-    removeStep,
+    removeStepById,
     udpateStep,
   };
 };
diff --git a/hooks/useForceUpdate.ts b/hooks/useForceUpdate.ts
index d14f4eb..a2f506e 100644
--- a/hooks/useForceUpdate.ts
+++ b/hooks/useForceUpdate.ts
@@ -2,6 +2,10 @@ import { useCallback, useState } from "react";
 
 type Updater = () => void;
 
+/**
+ * Kind of an escape hatch, but useful when you update values that are not stored in react state
+ * and you want to forcibly rerender a component to recognize the updated value.
+ */
 const useForceUpdate = (): Updater => {
   const [_, setCount] = useState(0);
 
diff --git a/hooks/useLatest.tsx b/hooks/useLatest.tsx
new file mode 100644
index 0000000..aa1f54e
--- /dev/null
+++ b/hooks/useLatest.tsx
@@ -0,0 +1,13 @@
+import { useRef } from "react";
+
+/**
+ * Returns a ref that always points to the latest value it has been passed
+ * during the most recent render of the hook's host component.
+ */
+const useLatest = <T extends any>(value: T): { readonly current: T } => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};
+
+export default useLatest;
diff --git a/pages/q/[id].tsx b/pages/q/[id].tsx
index d742b63..b0a0c52 100644
--- a/pages/q/[id].tsx
+++ b/pages/q/[id].tsx
@@ -154,9 +154,9 @@ export default function ShowQuiz({ quiz, profile }: PropTypes) {
               height="20rem"
               readOnly
             >
-              {explanation.selectedStep && (
+              {explanation.selected.step && (
                 <Step
-                  step={explanation.selectedStep}
+                  step={explanation.selected.step}
                   steps={explanation.steps}
                   mode={Step.Mode.View}
                   onPrev={() => explanation.selectPrev()}

From fe37cb97466baba84965825be6c1d5f5cec532a6 Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Thu, 18 Nov 2021 11:49:12 -0500
Subject: [PATCH 12/15] tweaks

---
 components/Step.tsx | 2 +-
 styles.css          | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/Step.tsx b/components/Step.tsx
index 0ca6471..a16ff4d 100644
--- a/components/Step.tsx
+++ b/components/Step.tsx
@@ -55,7 +55,7 @@ const Step: FC<StepProps> & StepNamespace = ({
             className="p-2 relative gradient-border"
             style={{ backgroundColor: "#161110" }}
           >
-            {mode === Mode.View && <p className="my-2">{step.message}</p>}
+            {mode === Mode.View && <p className="my-2 mx-1">{step.message}</p>}
             {mode === Mode.Edit && (
               <textarea
                 key={step.id}
diff --git a/styles.css b/styles.css
index 5b62224..99e8921 100644
--- a/styles.css
+++ b/styles.css
@@ -40,6 +40,7 @@ body {
 
 .editor-highlight-line {
   background-color: #333;
+  z-index: -1;
 }
 
 .gradient-border {
@@ -100,7 +101,7 @@ body {
 }
 
 .evaluation-step-edit {
-  left: -400px;
+  left: -404px;
   top: -8px;
 }
 

From c24fccf37ff380dbdda6e2f7c496788d2f88b339 Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Thu, 18 Nov 2021 12:31:20 -0500
Subject: [PATCH 13/15] preserve state across steps

---
 components/CreateQuizForm.tsx | 18 +++++++++++++++---
 components/PreviewQuiz.tsx    | 22 ----------------------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/components/CreateQuizForm.tsx b/components/CreateQuizForm.tsx
index 5304872..5832a97 100644
--- a/components/CreateQuizForm.tsx
+++ b/components/CreateQuizForm.tsx
@@ -1,7 +1,7 @@
 import { Session } from "@supabase/supabase-js";
 import React, { FormEvent, useEffect, useState } from "react";
 import Hashids from "hashids";
-import classNames from "clsx";
+import classNames from "classnames";
 import { Profile, SaveQuiz, Explanation } from "../types";
 import Editor from "@monaco-editor/react";
 import { supabase } from "../utils/supabaseClient";
@@ -103,7 +103,7 @@ export default function CreateQuizForm({
             key="description"
             name="description"
             label="Enter a description"
-            sublabel="Introduce your quiz and let users know what they should make the code do."
+            sublabel="Introduce your quiz and let users know what they should make the code output to the console."
           >
             <textarea
               id="description"
@@ -168,6 +168,7 @@ export default function CreateQuizForm({
           </p>
         </div>
         <PreviewQuiz
+          key={startCode}
           quiz={{
             language: "typescript",
             description,
@@ -198,7 +199,18 @@ export default function CreateQuizForm({
 
   return (
     <>
-      {steps[formStep]}
+      <div className={classNames(formStep !== FormStep.Task && "hidden")}>
+        {steps[FormStep.Task]}
+      </div>
+      <div className={classNames(formStep !== FormStep.Solution && "hidden")}>
+        {steps[FormStep.Solution]}
+      </div>
+      <div
+        className={classNames(formStep !== FormStep.Explanation && "hidden")}
+      >
+        {steps[FormStep.Explanation]}
+      </div>
+      {/* {steps[formStep]} */}
       <div className="pt-5 mt-6">
         <div className="flex justify-between">
           <div className="space-x-4">
diff --git a/components/PreviewQuiz.tsx b/components/PreviewQuiz.tsx
index 3376949..4956c9e 100644
--- a/components/PreviewQuiz.tsx
+++ b/components/PreviewQuiz.tsx
@@ -108,28 +108,6 @@ export default function ShowQuiz({ quiz, profile, onSolution }: PropTypes) {
           </div>
         </div>
       </div>
-      {/* <div className="justify-end pt-5 mt-6 right-64">
-        <div className="flex items-center justify-end space-x-4">
-          <button
-            type="submit"
-            className="px-20 py-4 font-medium text-white transition gradient-cta rounded-xl focus:ring-2 focus:ring-white hover:scale-105 disabled:opacity-50"
-            disabled={!success}
-            onClick={saveQuiz}
-          >
-            Save
-          </button>
-        </div>
-      </div> */}
-      {/* {createdUrl ? (
-        <span className="text-lg text-white">
-          Quiz created successfully!{" "}
-          <a className="font-medium underline" href={createdUrl}>
-            {createdUrl}
-          </a>
-        </span>
-      ) : (
-        <span />
-      )} */}
     </>
   );
 }

From d5da01a5eaaccc210c38b3707e720d2e5744d4b9 Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Thu, 18 Nov 2021 12:56:19 -0500
Subject: [PATCH 14/15] tweaks

---
 components/ExplanationForm.tsx | 23 +++++++----------------
 schema.sql                     |  2 +-
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/components/ExplanationForm.tsx b/components/ExplanationForm.tsx
index 2dd058b..25cd037 100644
--- a/components/ExplanationForm.tsx
+++ b/components/ExplanationForm.tsx
@@ -1,28 +1,19 @@
-import React, { FormEvent, useEffect, useRef, useState } from "react";
-import Hashids from "hashids";
-import { Session } from "@supabase/supabase-js";
-import Confetti from "react-dom-confetti";
-import useRunCode from "../hooks/useRunCode";
-import { Explanation, ExplanationStep, SaveQuiz } from "../types";
-import useTypescript from "../hooks/useTypescript";
-import { Profile, Quiz } from "../types";
-import { confettiConfig } from "../utils/confettiConfig";
-import OutputEditor from "./OutputEditor";
-import RunCodeEditor from "./RunCodeEditor";
-import { supabase } from "../utils/supabaseClient";
-import { nanoid } from "nanoid";
-import { NumberArrayInput } from "./ComplexInput";
+import React, { useEffect } from "react";
+import { Explanation } from "../types";
 import Step from "./Step";
 import useExplanation from "../hooks/useExplanation";
 import LineSelector from "./LineSelector";
 import Editor from "./Editor";
 
-type PropTypes = {
+type ExplanationFormProps = {
   solution: string;
   onChange?: (explanation: Explanation) => void;
 };
 
-export default function ExplanationForm({ onChange, solution }: PropTypes) {
+export default function ExplanationForm({
+  onChange,
+  solution,
+}: ExplanationFormProps) {
   const explanation = useExplanation([]);
 
   useEffect(() => {
diff --git a/schema.sql b/schema.sql
index a39730d..1906658 100644
--- a/schema.sql
+++ b/schema.sql
@@ -284,4 +284,4 @@ CREATE TRIGGER handle_updated_at BEFORE UPDATE ON public.quizzes FOR EACH ROW EX
 
 alter table "public"."quizzes" add column "solution" character varying;
 
-alter table "public"."quizzes" add column "explanation" jsonb;
\ No newline at end of file
+alter table "public"."quizzes" add column "explanation" jsonb;

From efaec2923d3d014af2aa739f32b82555c3744b36 Mon Sep 17 00:00:00 2001
From: Austin Malerba <austin.malerba@gmail.com>
Date: Thu, 18 Nov 2021 13:35:55 -0500
Subject: [PATCH 15/15] fix build error

---
 components/OutputEditor.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/OutputEditor.tsx b/components/OutputEditor.tsx
index 6fdb60c..3e32fcf 100644
--- a/components/OutputEditor.tsx
+++ b/components/OutputEditor.tsx
@@ -12,13 +12,13 @@ export default function OutputEditor(props: PropTypes) {
   return (
     <Editor
       height={height}
-      defaultLanguage='typescript'
+      defaultLanguage="typescript"
       value={output.join("\n")}
-      className='block w-1/2 text-white rounded-lg shadow-sm opacity-75 sm:text-sm'
-      theme='vs-dark'
+      className="block w-1/2 text-white rounded-lg shadow-sm opacity-75 sm:text-sm"
+      theme="vs-dark"
       options={{
         fontSize: 12,
-        padding: { top: 15, bottom: 4, left: 4, right: 4 },
+        padding: { top: 15, bottom: 4 },
         minimap: { enabled: false },
         readOnly: true,
         lineNumbers: "off",