diff --git a/package.json b/package.json
index cf6e1bc772..fc2b66a549 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
         "build": "react-scripts build",
         "test": "react-scripts test",
         "test:cov": "react-scripts test --coverage --watchAll",
+        "test:json": "react-scripts test --json --watchAll=false --outputFile jest-output.json --coverage",
         "eject": "react-scripts eject",
         "lint": "eslint ./src --ext .tsx --ext .ts --max-warnings 0",
         "eslint-output": "eslint-output ./src --ext .tsx --ext .ts --max-warnings 0",
diff --git a/public/tasks/task-arrays.md b/public/tasks/task-arrays.md
new file mode 100644
index 0000000000..c2fbf80f8d
--- /dev/null
+++ b/public/tasks/task-arrays.md
@@ -0,0 +1,5 @@
+# Task - Arrays
+
+Version: 0.0.1
+
+Implement functions that work with arrays immutably.
diff --git a/public/tasks/task-components.md b/public/tasks/task-components.md
new file mode 100644
index 0000000000..a6ff48694d
--- /dev/null
+++ b/public/tasks/task-components.md
@@ -0,0 +1,5 @@
+# Task - Components
+
+Version: 0.0.1
+
+Fix some components that are using state incorrectly.
diff --git a/public/tasks/task-functions.md b/public/tasks/task-functions.md
new file mode 100644
index 0000000000..36e7926bb7
--- /dev/null
+++ b/public/tasks/task-functions.md
@@ -0,0 +1,5 @@
+# Task - Functions
+
+Version: 0.0.1
+
+Implement a bunch of functions that work on primitives.
diff --git a/public/tasks/task-html-css.md b/public/tasks/task-html-css.md
new file mode 100644
index 0000000000..ebc0efcba5
--- /dev/null
+++ b/public/tasks/task-html-css.md
@@ -0,0 +1,5 @@
+# Task - HTML/CSS
+
+Version: 0.0.1
+
+Add in some HTML and CSS, including a fancy looking button.
diff --git a/public/tasks/task-nested.md b/public/tasks/task-nested.md
new file mode 100644
index 0000000000..6d29f9369f
--- /dev/null
+++ b/public/tasks/task-nested.md
@@ -0,0 +1,5 @@
+# Task - Nested
+
+Version: 0.0.1
+
+Implement functions that work with nested arrays and objects immutably.
diff --git a/public/tasks/task-objects.md b/public/tasks/task-objects.md
new file mode 100644
index 0000000000..480889da0d
--- /dev/null
+++ b/public/tasks/task-objects.md
@@ -0,0 +1,5 @@
+# Task - Objects
+
+Version: 0.0.1
+
+Implement functions that work with objects immutably.
diff --git a/public/tasks/task-state.md b/public/tasks/task-state.md
new file mode 100644
index 0000000000..ef8197ffcb
--- /dev/null
+++ b/public/tasks/task-state.md
@@ -0,0 +1,5 @@
+# Task - State
+
+Version: 0.0.1
+
+Create some new components that have React State.
diff --git a/src/App.css b/src/App.css
index ad32fac073..560f31184c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,7 +15,7 @@
 
 .App-header {
     width: 100%;
-    background-color: #282c34;
+    background-color: #1f2937; /* CHANGED */
     min-height: 40vh;
     display: flex;
     flex-direction: column;
diff --git a/src/App.tsx b/src/App.tsx
index b77558eaac..bec7cb63e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,111 @@
 import React from "react";
 import "./App.css";
+import { Button, Container, Row, Col } from "react-bootstrap";
+
+import { ChangeType } from "./components/ChangeType";
+import { RevealAnswer } from "./components/RevealAnswer";
+import { StartAttempt } from "./components/StartAttempt";
+import { TwoDice } from "./components/TwoDice";
+import { CycleHoliday } from "./components/CycleHoliday";
+import { Counter } from "./components/Counter";
+
+import { ChooseTeam } from "./bad-components/ChooseTeam";
+import { ColoredBox } from "./bad-components/ColoredBox";
+import { ShoveBox } from "./bad-components/ShoveBox";
+import { CheckAnswer } from "./form-components/CheckAnswer";
+import { GiveAttempts } from "./form-components/GiveAttempts";
+import { EditMode } from "./form-components/EditMode";
+import { ChangeColor } from "./form-components/ChangeColor";
+import { MultipleChoiceQuestion } from "./form-components/MultipleChoiceQuestion";
 
 function App(): React.JSX.Element {
     return (
         <div className="App">
             <header className="App-header">
-                UD CISC275 with React Hooks and TypeScript
+                <h1>
+                    Wesley Simpson - UD CISC275 with React Hooks and TypeScript
+                </h1>
+                <img src="/logo192.png" alt="React logo" width="120" />
+
+                <ul>
+                    <li>Added a header</li>
+                    <li>Added an image with alt text</li>
+                    <li>Added a list with three items</li>
+                </ul>
+
+                <Button
+                    onClick={() => {
+                        console.log("Hello World!");
+                    }}
+                >
+                    Log Hello World
+                </Button>
+
+                <Container style={{ marginTop: "16px" }}>
+                    <Row>
+                        <Col>
+                            <div
+                                style={{
+                                    width: "150px",
+                                    height: "100px",
+                                    backgroundColor: "red",
+                                }}
+                            />
+                        </Col>
+                        <Col>
+                            <div
+                                style={{
+                                    width: "150px",
+                                    height: "100px",
+                                    backgroundColor: "red",
+                                }}
+                            />
+                        </Col>
+                    </Row>
+                </Container>
             </header>
-            <p>
-                Edit <code>src/App.tsx</code> and save. This page will
-                automatically reload.
-            </p>
+            <hr></hr>
+            <CheckAnswer expectedAnswer="42"></CheckAnswer>
+            <hr></hr>
+            <GiveAttempts></GiveAttempts>
+            <hr></hr>
+            <EditMode></EditMode>
+            <hr></hr>
+            <ChangeColor></ChangeColor>
+            <hr></hr>
+            <MultipleChoiceQuestion
+                options={["a", "b", "c"]}
+                expectedAnswer="b"
+            ></MultipleChoiceQuestion>
+
+            <hr />
+            <hr />
+
+            <ChooseTeam></ChooseTeam>
+            <hr />
+
+            <ColoredBox></ColoredBox>
+            <hr />
+
+            <ShoveBox></ShoveBox>
+            <hr />
+
+            <Counter></Counter>
+            <hr />
+
+            <RevealAnswer></RevealAnswer>
+            <hr />
+
+            <StartAttempt></StartAttempt>
+            <hr />
+
+            <TwoDice></TwoDice>
+            <hr />
+
+            <ChangeType></ChangeType>
+            <hr />
+
+            <CycleHoliday></CycleHoliday>
         </div>
     );
 }
diff --git a/src/HtmlCss.test.tsx b/src/HtmlCss.test.tsx
new file mode 100644
index 0000000000..320cb97524
--- /dev/null
+++ b/src/HtmlCss.test.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+import userEvent from "@testing-library/user-event";
+
+describe("Some HTML Elements are added.", () => {
+    test("(2 pts) There is a header", () => {
+        render(<App />);
+        const header = screen.getByRole("heading");
+        expect(header).toBeInTheDocument();
+    });
+
+    test("(2 pts) There is an image with alt text", () => {
+        render(<App />);
+        const image = screen.getByRole("img");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("alt");
+    });
+
+    test("(2 pts) There is a list with at least three elements", () => {
+        render(<App />);
+        const list = screen.getByRole("list");
+        expect(list).toBeInTheDocument();
+        expect(list.children.length).toBeGreaterThanOrEqual(3);
+    });
+});
+
+describe("(2 pts) Some basic CSS is added.", () => {
+    test("The background color of the header area is different", () => {
+        render(<App />);
+        const banner = screen.getByRole("banner");
+        expect(banner).not.toHaveStyle({
+            "background-color": "rgb(40, 44, 52)",
+        });
+    });
+});
+
+describe("(2 pts) Some Bootstrap Elements are added", () => {
+    test("There is one bootstrap button with the text 'Log Hello World'", () => {
+        render(<App />);
+        const button = screen.getByRole("button", { name: /Log Hello World/i });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass("btn");
+        expect(button).toHaveClass("btn-primary");
+    });
+
+    test("(2 pts) Not clicking the bootstrap button does not logs 'Hello World!'", () => {
+        const consoleSpy = jest.spyOn(console, "log");
+        render(<App />);
+        expect(consoleSpy).not.toHaveBeenCalledWith("Hello World!");
+    });
+
+    test("(2 pts) Clicking the bootstrap button logs 'Hello World!'", () => {
+        const consoleSpy = jest.spyOn(console, "log");
+        render(<App />);
+        const button = screen.getByRole("button", { name: /Log Hello World/i });
+        userEvent.click(button);
+        expect(consoleSpy).toHaveBeenCalledWith("Hello World!");
+    });
+});
+
+describe("Some additional CSS was added", () => {
+    test("(2 pts) checks if any element has a background color of red", () => {
+        const { container } = render(<App />);
+        // Get all elements in the rendered container
+        const elements = container.querySelectorAll("*");
+
+        // Check if any element has a background color of red
+        let foundRedBackground = false;
+
+        elements.forEach((element) => {
+            const style = getComputedStyle(element);
+            if (
+                style.backgroundColor === "red" ||
+                style.backgroundColor === "rgb(255, 0, 0)"
+            ) {
+                foundRedBackground = true;
+            }
+        });
+
+        expect(foundRedBackground).toBe(true);
+    });
+});
diff --git a/src/arrays.test.ts b/src/arrays.test.ts
new file mode 100644
index 0000000000..c2847517bd
--- /dev/null
+++ b/src/arrays.test.ts
@@ -0,0 +1,273 @@
+import {
+    allRGB,
+    bookEndList,
+    countShortWords,
+    injectPositive,
+    makeMath,
+    removeDollars,
+    shoutIfExclaiming,
+    stringsToIntegers,
+    tripleNumbers,
+} from "./arrays";
+
+describe("Testing the array functions", () => {
+    //////////////////////////////////
+    // bookEndList and tripleNumbers
+
+    const NUMBERS_1 = [1, 2, 3];
+    const NUMBERS_2 = [100, 300, 200];
+    const NUMBERS_3 = [5];
+    const NUMBERS_4: number[] = [];
+    const NUMBERS_5 = [100, 199, 1, -5, 7, 3];
+    const NUMBERS_6 = [-100, -200, 100, 200];
+    const NUMBERS_7 = [199, 1, 550, 50, 200];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(NUMBERS_1).toEqual([1, 2, 3]);
+        expect(NUMBERS_2).toEqual([100, 300, 200]);
+        expect(NUMBERS_3).toEqual([5]);
+        expect(NUMBERS_4).toEqual([]);
+        expect(NUMBERS_5).toEqual([100, 199, 1, -5, 7, 3]);
+        expect(NUMBERS_6).toEqual([-100, -200, 100, 200]);
+        expect(NUMBERS_7).toEqual([199, 1, 550, 50, 200]);
+    });
+
+    test("(3 pts) Testing the bookEndList function", () => {
+        expect(bookEndList(NUMBERS_1)).toEqual([1, 3]);
+        expect(bookEndList(NUMBERS_2)).toEqual([100, 200]);
+        expect(bookEndList(NUMBERS_3)).toEqual([5, 5]);
+        expect(bookEndList(NUMBERS_4)).toEqual([]);
+        expect(bookEndList(NUMBERS_5)).toEqual([100, 3]);
+        expect(bookEndList(NUMBERS_6)).toEqual([-100, 200]);
+    });
+
+    test("(3 pts) Testing the tripleNumbers function", () => {
+        expect(tripleNumbers(NUMBERS_1)).toEqual([3, 6, 9]);
+        expect(tripleNumbers(NUMBERS_2)).toEqual([300, 900, 600]);
+        expect(tripleNumbers(NUMBERS_3)).toEqual([15]);
+        expect(tripleNumbers(NUMBERS_4)).toEqual([]);
+        expect(tripleNumbers(NUMBERS_5)).toEqual([300, 597, 3, -15, 21, 9]);
+        expect(tripleNumbers(NUMBERS_6)).toEqual([-300, -600, 300, 600]);
+    });
+
+    //////////////////////////////////
+    // stringsToIntegers
+
+    const VALUES_1 = ["1", "2", "3"];
+    const VALUES_2 = ["100", "200", "300"];
+    const VALUES_3 = ["5"];
+    const VALUES_4: string[] = [];
+    const VALUES_5 = ["100", "?", "27", "$44"];
+    const VALUES_6 = ["-1", "0", "1", "*1"];
+    const VALUES_7 = ["apple", "banana", "cactus"];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(VALUES_1).toEqual(["1", "2", "3"]);
+        expect(VALUES_2).toEqual(["100", "200", "300"]);
+        expect(VALUES_3).toEqual(["5"]);
+        expect(VALUES_4).toEqual([]);
+        expect(VALUES_5).toEqual(["100", "?", "27", "$44"]);
+        expect(VALUES_6).toEqual(["-1", "0", "1", "*1"]);
+        expect(VALUES_7).toEqual(["apple", "banana", "cactus"]);
+    });
+
+    test("(3 pts) Testing the stringsToIntegers function", () => {
+        expect(stringsToIntegers(VALUES_1)).toEqual([1, 2, 3]);
+        expect(stringsToIntegers(VALUES_2)).toEqual([100, 200, 300]);
+        expect(stringsToIntegers(VALUES_3)).toEqual([5]);
+        expect(stringsToIntegers(VALUES_4)).toEqual([]);
+        expect(stringsToIntegers(VALUES_5)).toEqual([100, 0, 27, 0]);
+        expect(stringsToIntegers(VALUES_6)).toEqual([-1, 0, 1, 0]);
+        expect(stringsToIntegers(VALUES_7)).toEqual([0, 0, 0]);
+    });
+
+    //////////////////////////////////
+    // removeDollars
+
+    const AMOUNTS_1 = ["$1", "$2", "$3"];
+    const AMOUNTS_2 = ["$100", "$200", "$300", "$400"];
+    const AMOUNTS_3 = ["$5"];
+    const AMOUNTS_4 = ["$"];
+    const AMOUNTS_5 = ["100", "200", "$300", "$400"];
+    const AMOUNTS_6: string[] = [];
+    const AMOUNTS_7 = ["100", "???", "7", "$233", "", "$"];
+    const AMOUNTS_8 = ["$one", "two", "$three"];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(AMOUNTS_1).toEqual(["$1", "$2", "$3"]);
+        expect(AMOUNTS_2).toEqual(["$100", "$200", "$300", "$400"]);
+        expect(AMOUNTS_3).toEqual(["$5"]);
+        expect(AMOUNTS_4).toEqual(["$"]);
+        expect(AMOUNTS_5).toEqual(["100", "200", "$300", "$400"]);
+        expect(AMOUNTS_6).toEqual([]);
+        expect(AMOUNTS_7).toEqual(["100", "???", "7", "$233", "", "$"]);
+        expect(AMOUNTS_8).toEqual(["$one", "two", "$three"]);
+    });
+
+    test("(3 pts) Testing the removeDollars function", () => {
+        expect(removeDollars(AMOUNTS_1)).toEqual([1, 2, 3]);
+        expect(removeDollars(AMOUNTS_2)).toEqual([100, 200, 300, 400]);
+        expect(removeDollars(AMOUNTS_3)).toEqual([5]);
+        expect(removeDollars(AMOUNTS_4)).toEqual([0]);
+        expect(removeDollars(AMOUNTS_5)).toEqual([100, 200, 300, 400]);
+        expect(removeDollars(AMOUNTS_6)).toEqual([]);
+        expect(removeDollars(AMOUNTS_7)).toEqual([100, 0, 7, 233, 0, 0]);
+        expect(removeDollars(AMOUNTS_8)).toEqual([0, 0, 0]);
+    });
+
+    //////////////////////////////////
+    // shoutIfExclaiming
+
+    const MESSAGE_1 = ["Hello", "you", "are", "great!"];
+    const MESSAGE_2 = ["oho!", "Oho!", "oHo!", "oHO!", "OHO!"];
+    const MESSAGE_3 = ["Wait?", "What?", "Lo", "How?", "High!"];
+    const MESSAGE_4 = ["??????"];
+    const MESSAGE_5: string[] = ["This one is very long!"];
+    const MESSAGE_6 = ["No", "Caps", "here.", "Right?"];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(MESSAGE_1).toEqual(["Hello", "you", "are", "great!"]);
+        expect(MESSAGE_2).toEqual(["oho!", "Oho!", "oHo!", "oHO!", "OHO!"]);
+        expect(MESSAGE_3).toEqual(["Wait?", "What?", "Lo", "How?", "High!"]);
+        expect(MESSAGE_4).toEqual(["??????"]);
+        expect(MESSAGE_5).toEqual(["This one is very long!"]);
+        expect(MESSAGE_6).toEqual(["No", "Caps", "here.", "Right?"]);
+    });
+
+    test("(3 pts) Testing the shoutIfExclaiming function", () => {
+        expect(shoutIfExclaiming(MESSAGE_1)).toEqual([
+            "Hello",
+            "you",
+            "are",
+            "GREAT!",
+        ]);
+        expect(shoutIfExclaiming(MESSAGE_2)).toEqual([
+            "OHO!",
+            "OHO!",
+            "OHO!",
+            "OHO!",
+            "OHO!",
+        ]);
+        expect(shoutIfExclaiming(MESSAGE_3)).toEqual(["Lo", "HIGH!"]);
+        expect(shoutIfExclaiming(MESSAGE_4)).toEqual([]);
+        expect(shoutIfExclaiming(MESSAGE_5)).toEqual([
+            "THIS ONE IS VERY LONG!",
+        ]);
+        expect(shoutIfExclaiming(MESSAGE_6)).toEqual(["No", "Caps", "here."]);
+    });
+
+    //////////////////////////////////
+    // countShortWords
+
+    const WORDS_1 = ["the", "cat", "in", "the", "hat"];
+    const WORDS_2 = ["one", "two", "three", "four", "five", "six", "seven"];
+    const WORDS_3 = ["alpha", "beta", "gamma"];
+    const WORDS_4 = ["Longest", "Words", "Possible"];
+    const WORDS_5: string[] = [];
+    const WORDS_6 = ["", "", "", ""];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(WORDS_1).toEqual(["the", "cat", "in", "the", "hat"]);
+        expect(WORDS_2).toEqual([
+            "one",
+            "two",
+            "three",
+            "four",
+            "five",
+            "six",
+            "seven",
+        ]);
+        expect(WORDS_3).toEqual(["alpha", "beta", "gamma"]);
+        expect(WORDS_4).toEqual(["Longest", "Words", "Possible"]);
+        expect(WORDS_5).toEqual([]);
+        expect(WORDS_6).toEqual(["", "", "", ""]);
+    });
+
+    test("(3 pts) Testing the countShortWords function", () => {
+        expect(countShortWords(WORDS_1)).toEqual(5);
+        expect(countShortWords(WORDS_2)).toEqual(3);
+        expect(countShortWords(WORDS_3)).toEqual(0);
+        expect(countShortWords(WORDS_4)).toEqual(0);
+        expect(countShortWords(WORDS_5)).toEqual(0);
+        expect(countShortWords(WORDS_6)).toEqual(4);
+    });
+
+    //////////////////////////////////
+    // allRGB
+
+    const COLORS_1 = ["red", "green", "blue"];
+    const COLORS_2 = ["red", "red", "red"];
+    const COLORS_3 = ["red", "red", "blue", "blue", "green", "red"];
+    const COLORS_4 = ["purple", "orange", "violet"];
+    const COLORS_5 = ["red", "blue", "yellow"];
+    const COLORS_6 = ["green"];
+    const COLORS_7 = ["red"];
+    const COLORS_8 = ["kabluey"];
+    const COLORS_9: string[] = [];
+
+    // Ensure that none of the arrays were changed mutably
+    // If you fail these, you aren't using map/filter/reduce/etc. properly!
+    afterEach(() => {
+        expect(COLORS_1).toEqual(["red", "green", "blue"]);
+        expect(COLORS_2).toEqual(["red", "red", "red"]);
+        expect(COLORS_3).toEqual([
+            "red",
+            "red",
+            "blue",
+            "blue",
+            "green",
+            "red",
+        ]);
+        expect(COLORS_4).toEqual(["purple", "orange", "violet"]);
+        expect(COLORS_5).toEqual(["red", "blue", "yellow"]);
+        expect(COLORS_6).toEqual(["green"]);
+        expect(COLORS_7).toEqual(["red"]);
+        expect(COLORS_8).toEqual(["kabluey"]);
+        expect(COLORS_9).toEqual([]);
+    });
+
+    test("(3 pts) Testing the allRGB function", () => {
+        expect(allRGB(COLORS_1)).toEqual(true);
+        expect(allRGB(COLORS_2)).toEqual(true);
+        expect(allRGB(COLORS_3)).toEqual(true);
+        expect(allRGB(COLORS_4)).toEqual(false);
+        expect(allRGB(COLORS_5)).toEqual(false);
+        expect(allRGB(COLORS_6)).toEqual(true);
+        expect(allRGB(COLORS_7)).toEqual(true);
+        expect(allRGB(COLORS_8)).toEqual(false);
+        expect(allRGB(COLORS_9)).toEqual(true);
+    });
+
+    //////////////////////////////////
+    // makeMath
+
+    test("(3 pts) Testing the makeMath function", () => {
+        expect(makeMath(NUMBERS_1)).toEqual("6=1+2+3");
+        expect(makeMath(NUMBERS_2)).toEqual("600=100+300+200");
+        expect(makeMath(NUMBERS_3)).toEqual("5=5");
+        expect(makeMath(NUMBERS_4)).toEqual("0=0");
+        expect(makeMath(NUMBERS_7)).toEqual("1000=199+1+550+50+200");
+    });
+
+    //////////////////////////////////
+    // injectPositive
+    test("(3 pts) Testing the injectPositive function", () => {
+        expect(injectPositive(NUMBERS_1)).toEqual([1, 2, 3, 6]);
+        expect(injectPositive(NUMBERS_2)).toEqual([100, 300, 200, 600]);
+        expect(injectPositive(NUMBERS_3)).toEqual([5, 5]);
+        expect(injectPositive(NUMBERS_4)).toEqual([0]);
+        expect(injectPositive(NUMBERS_5)).toEqual([100, 199, 1, -5, 300, 7, 3]);
+        expect(injectPositive(NUMBERS_6)).toEqual([-100, 0, -200, 100, 200]);
+        expect(injectPositive(NUMBERS_7)).toEqual([199, 1, 550, 50, 200, 1000]);
+    });
+});
diff --git a/src/arrays.ts b/src/arrays.ts
new file mode 100644
index 0000000000..e3b0b8c9a9
--- /dev/null
+++ b/src/arrays.ts
@@ -0,0 +1,131 @@
+/**
+ * Consume an array of numbers, and return a new array containing
+ * JUST the first and last number. If there are no elements, return
+ * an empty array. If there is one element, the resulting list should
+ * the number twice.
+ */
+export function bookEndList(numbers: number[]): number[] {
+    if (numbers.length === 0) return [];
+    if (numbers.length === 1) return [numbers[0], numbers[0]];
+    return [numbers[0], numbers[numbers.length - 1]];
+}
+
+/**
+ * Consume an array of numbers, and return a new array where each
+ * number has been tripled (multiplied by 3).
+ */
+export function tripleNumbers(numbers: number[]): number[] {
+    return numbers.map((n: number): number => n * 3);
+}
+
+/**
+ * Consume an array of strings and convert them to integers. If
+ * the number cannot be parsed as an integer, convert it to 0 instead.
+ */
+export function stringsToIntegers(numbers: string[]): number[] {
+    return numbers.map((text: string): number => {
+        const parsed = Number.parseInt(text, 10);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    });
+}
+
+/**
+ * Consume an array of strings and return them as numbers. Note that
+ * the strings MAY have "$" symbols at the beginning, in which case
+ * those should be removed. If the result cannot be parsed as an integer,
+ * convert it to 0 instead.
+ */
+// Remember, you can write functions as lambdas too! They work exactly the same.
+export const removeDollars = (amounts: string[]): number[] => {
+    return amounts.map((amount: string): number => {
+        const cleaned = amount.startsWith("$") ? amount.slice(1) : amount;
+        const parsed = Number.parseInt(cleaned, 10);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    });
+};
+
+/**
+ * Consume an array of messages and return a new list of the messages. However, any
+ * string that ends in "!" should be made uppercase. Also, remove any strings that end
+ * in question marks ("?").
+ */
+export const shoutIfExclaiming = (messages: string[]): string[] => {
+    return messages
+        .filter((msg: string): boolean => !msg.endsWith("?"))
+        .map((msg: string): string =>
+            msg.endsWith("!") ? msg.toUpperCase() : msg,
+        );
+};
+
+/**
+ * Consumes an array of words and returns the number of words that are LESS THAN
+ * 4 letters long.
+ */
+export function countShortWords(words: string[]): number {
+    return words.filter((w: string): boolean => w.length < 4).length;
+}
+
+/**
+ * Consumes an array of colors (e.g., 'red', 'purple') and returns true if ALL
+ * the colors are either 'red', 'blue', or 'green'. If an empty list is given,
+ * then return true.
+ */
+export function allRGB(colors: string[]): boolean {
+    return colors.every(
+        (c: string): boolean => c === "red" || c === "green" || c === "blue",
+    );
+}
+
+/**
+ * Consumes an array of numbers, and produces a string representation of the
+ * numbers being added together along with their actual sum.
+ *
+ * For instance, the array [1, 2, 3] would become "6=1+2+3".
+ * And the array [] would become "0=0".
+ */
+export function makeMath(addends: number[]): string {
+    const sum = addends.reduce(
+        (total: number, n: number): number => total + n,
+        0,
+    );
+
+    if (addends.length === 0) {
+        return "0=0";
+    }
+
+    return `${sum}=${addends.join("+")}`;
+}
+
+/**
+ * Consumes an array of numbers and produces a new array of the same numbers,
+ * with one difference. After the FIRST negative number, insert the sum of all
+ * previous numbers in the list. If there are no negative numbers, then append
+ * the sum to the list.
+ *
+ * For instance, the array [1, 9, -5, 7] would become [1, 9, -5, 10, 7]
+ * And the array [1, 9, 7] would become [1, 9, 7, 17]
+ */
+export function injectPositive(values: number[]): number[] {
+    const firstNegativeIndex = values.findIndex((v: number): boolean => v < 0);
+
+    const sumAll = values.reduce(
+        (total: number, v: number): number => total + v,
+        0,
+    );
+
+    if (firstNegativeIndex === -1) {
+        // no negatives: append sum of all
+        return [...values, sumAll];
+    }
+
+    const sumBeforeNegative = values
+        .slice(0, firstNegativeIndex)
+        .reduce((total: number, v: number): number => total + v, 0);
+
+    // Insert AFTER the first negative number
+    return [
+        ...values.slice(0, firstNegativeIndex + 1),
+        sumBeforeNegative,
+        ...values.slice(firstNegativeIndex + 1),
+    ];
+}
diff --git a/src/bad-components/ChooseTeam.test.tsx b/src/bad-components/ChooseTeam.test.tsx
new file mode 100644
index 0000000000..66eee4be70
--- /dev/null
+++ b/src/bad-components/ChooseTeam.test.tsx
@@ -0,0 +1,81 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ChooseTeam } from "./ChooseTeam";
+
+describe("ChooseTeam Component tests", () => {
+    beforeEach(() => {
+        render(<ChooseTeam />);
+    });
+    test("(2 pts) The initial team is empty", () => {
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(0);
+    });
+    test("(2 pts) There are 7 buttons.", () => {
+        const adders = screen.queryAllByRole("button");
+        expect(adders).toHaveLength(7);
+    });
+    test("(2 pts) Clicking first team member works", async () => {
+        const first = screen.queryAllByRole("button")[0];
+        await act(async () => {
+            first.click();
+        });
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(first.textContent);
+    });
+    test("(2 pts) Clicking the third team member works", async () => {
+        const third = screen.queryAllByRole("button")[2];
+        await act(async () => {
+            third.click();
+        });
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(third.textContent);
+    });
+    test("(2 pts) Clicking three team members works", async () => {
+        const [, second, third, , fifth] = screen.queryAllByRole("button");
+        await act(async () => {
+            third.click();
+        });
+        await act(async () => {
+            second.click();
+        });
+        await act(async () => {
+            fifth.click();
+        });
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(3);
+        expect(currentTeam[0].textContent).toEqual(third.textContent);
+        expect(currentTeam[1].textContent).toEqual(second.textContent);
+        expect(currentTeam[2].textContent).toEqual(fifth.textContent);
+    });
+    test("(2 pts) Clearing the team works", async () => {
+        const [, second, third, fourth, fifth, , clear] =
+            screen.queryAllByRole("button");
+        await act(async () => {
+            third.click();
+        });
+        await act(async () => {
+            second.click();
+        });
+        await act(async () => {
+            fifth.click();
+        });
+        let currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(3);
+        expect(currentTeam[0].textContent).toEqual(third.textContent);
+        expect(currentTeam[1].textContent).toEqual(second.textContent);
+        expect(currentTeam[2].textContent).toEqual(fifth.textContent);
+        await act(async () => {
+            clear.click();
+        });
+        currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(0);
+        await act(async () => {
+            fourth.click();
+        });
+        currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(fourth.textContent);
+    });
+});
diff --git a/src/bad-components/ChooseTeam.tsx b/src/bad-components/ChooseTeam.tsx
new file mode 100644
index 0000000000..8a484f9666
--- /dev/null
+++ b/src/bad-components/ChooseTeam.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { Button, Row, Col } from "react-bootstrap";
+
+const PEOPLE = [
+    "Alan Turing",
+    "Grace Hopper",
+    "Ada Lovelace",
+    "Charles Babbage",
+    "Barbara Liskov",
+    "Margaret Hamilton",
+];
+
+export function ChooseTeam(): React.JSX.Element {
+    const [allOptions] = useState<string[]>(PEOPLE);
+    const [team, setTeam] = useState<string[]>([]);
+
+    function chooseMember(newMember: string): void {
+        if (!team.includes(newMember)) {
+            setTeam([...team, newMember]);
+        }
+    }
+
+    function clearTeam(): void {
+        setTeam([]);
+    }
+
+    return (
+        <div>
+            <div>Choose Team</div>
+            <Row>
+                <Col>
+                    {allOptions.map((option: string) => (
+                        <div key={option} style={{ marginBottom: "4px" }}>
+                            Add{" "}
+                            <Button
+                                onClick={() => {
+                                    chooseMember(option);
+                                }}
+                                size="sm"
+                            >
+                                {option}
+                            </Button>
+                        </div>
+                    ))}
+                </Col>
+                <Col>
+                    <strong>Team:</strong>
+                    {team.length > 0 && (
+                        <ul>
+                            {team.map((member: string) => (
+                                <li key={member}>{member}</li>
+                            ))}
+                        </ul>
+                    )}
+                    <Button onClick={clearTeam}>Clear Team</Button>
+                </Col>
+            </Row>
+        </div>
+    );
+}
diff --git a/src/bad-components/ColoredBox.test.tsx b/src/bad-components/ColoredBox.test.tsx
new file mode 100644
index 0000000000..5762afefb6
--- /dev/null
+++ b/src/bad-components/ColoredBox.test.tsx
@@ -0,0 +1,37 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ColoredBox } from "./ColoredBox";
+
+describe("ColoredBox Component tests", () => {
+    beforeEach(() => {
+        render(<ColoredBox />);
+    });
+    test("(2 pts) The ColoredBox is initially red.", () => {
+        const box = screen.getByTestId("colored-box");
+        expect(box).toHaveStyle({ backgroundColor: "red" });
+    });
+    test("(2 pts) There is a button", () => {
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    test("(2 pts) Clicking the button advances the color.", async () => {
+        const nextColor = screen.getByRole("button");
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "blue",
+        });
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "green",
+        });
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "red",
+        });
+    });
+});
diff --git a/src/bad-components/ColoredBox.tsx b/src/bad-components/ColoredBox.tsx
new file mode 100644
index 0000000000..ae1d49a2f7
--- /dev/null
+++ b/src/bad-components/ColoredBox.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+export const COLORS = ["red", "blue", "green"];
+const DEFAULT_COLOR_INDEX = 0;
+
+function ChangeColor({
+    colorIndex,
+    setColorIndex,
+}: {
+    colorIndex: number;
+    setColorIndex: (newIndex: number) => void;
+}): React.JSX.Element {
+    return (
+        <Button
+            onClick={() => {
+                setColorIndex((colorIndex + 1) % COLORS.length);
+            }}
+        >
+            Next Color
+        </Button>
+    );
+}
+
+function ColorPreview({
+    colorIndex,
+}: {
+    colorIndex: number;
+}): React.JSX.Element {
+    return (
+        <div
+            data-testid="colored-box"
+            style={{
+                width: "50px",
+                height: "50px",
+                backgroundColor: COLORS[colorIndex],
+                display: "inline-block",
+                verticalAlign: "bottom",
+                marginLeft: "5px",
+            }}
+        ></div>
+    );
+}
+
+export function ColoredBox(): React.JSX.Element {
+    const [colorIndex, setColorIndex] = useState<number>(DEFAULT_COLOR_INDEX);
+
+    return (
+        <div>
+            <div>Colored Box</div>
+            <span>The current color is: {COLORS[colorIndex]}</span>
+            <div>
+                <ChangeColor
+                    colorIndex={colorIndex}
+                    setColorIndex={setColorIndex}
+                ></ChangeColor>
+
+                <ColorPreview colorIndex={colorIndex}></ColorPreview>
+            </div>
+        </div>
+    );
+}
diff --git a/src/bad-components/DoubleHalf.test.tsx b/src/bad-components/DoubleHalf.test.tsx
new file mode 100644
index 0000000000..9b2a031acf
--- /dev/null
+++ b/src/bad-components/DoubleHalf.test.tsx
@@ -0,0 +1,72 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { DoubleHalf } from "./DoubleHalf";
+
+describe("DoubleHalf Component tests", () => {
+    beforeEach(() => {
+        render(<DoubleHalf />);
+    });
+    test("(2 pts) The DoubleHalf value is initially 10", () => {
+        expect(screen.getByText("10")).toBeInTheDocument();
+        expect(screen.queryByText("20")).not.toBeInTheDocument();
+        expect(screen.queryByText("5")).not.toBeInTheDocument();
+    });
+    test("(2 pts) There are Double and Halve buttons", () => {
+        expect(
+            screen.getByRole("button", { name: /Double/i }),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByRole("button", { name: /Halve/i }),
+        ).toBeInTheDocument();
+    });
+    test("(2 pts) You can double the number.", async () => {
+        const double = screen.getByRole("button", { name: /Double/i });
+        await act(async () => {
+            double.click();
+        });
+        expect(screen.getByText("20")).toBeInTheDocument();
+        expect(screen.queryByText("10")).not.toBeInTheDocument();
+    });
+    test("(2 pts) You can halve the number.", async () => {
+        const halve = screen.getByRole("button", { name: /Halve/i });
+        await act(async () => {
+            halve.click();
+        });
+        expect(screen.getByText("5")).toBeInTheDocument();
+        expect(screen.queryByText("10")).not.toBeInTheDocument();
+    });
+    test("(2 pts) You can double AND halve the number.", async () => {
+        const double = screen.getByRole("button", { name: /Double/i });
+        const halve = screen.getByRole("button", { name: /Halve/i });
+        await act(async () => {
+            double.click();
+        });
+        expect(screen.getByText("20")).toBeInTheDocument();
+        expect(screen.queryByText("10")).not.toBeInTheDocument();
+        await act(async () => {
+            double.click();
+        });
+        expect(screen.getByText("40")).toBeInTheDocument();
+        expect(screen.queryByText("20")).not.toBeInTheDocument();
+        await act(async () => {
+            halve.click();
+        });
+        expect(screen.getByText("20")).toBeInTheDocument();
+        expect(screen.queryByText("10")).not.toBeInTheDocument();
+        await act(async () => {
+            halve.click();
+        });
+        expect(screen.getByText("10")).toBeInTheDocument();
+        expect(screen.queryByText("20")).not.toBeInTheDocument();
+        await act(async () => {
+            halve.click();
+        });
+        expect(screen.getByText("5")).toBeInTheDocument();
+        expect(screen.queryByText("10")).not.toBeInTheDocument();
+        await act(async () => {
+            halve.click();
+        });
+        expect(screen.getByText("2.5")).toBeInTheDocument();
+        expect(screen.queryByText("5")).not.toBeInTheDocument();
+    });
+});
diff --git a/src/bad-components/DoubleHalf.tsx b/src/bad-components/DoubleHalf.tsx
new file mode 100644
index 0000000000..5fd61bd4f4
--- /dev/null
+++ b/src/bad-components/DoubleHalf.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+function Doubler({
+    value,
+    setValue,
+}: {
+    value: number;
+    setValue: (newValue: number) => void;
+}): React.JSX.Element {
+    return (
+        <Button
+            onClick={() => {
+                setValue(2 * value);
+            }}
+        >
+            Double
+        </Button>
+    );
+}
+
+function Halver({
+    value,
+    setValue,
+}: {
+    value: number;
+    setValue: (newValue: number) => void;
+}): React.JSX.Element {
+    return (
+        <Button
+            onClick={() => {
+                setValue(0.5 * value);
+            }}
+        >
+            Halve
+        </Button>
+    );
+}
+
+export function DoubleHalf(): React.JSX.Element {
+    const [value, setValue] = useState<number>(10);
+
+    return (
+        <div>
+            <h3>Double Half</h3>
+            <div>
+                The current value is: <span>{value}</span>
+            </div>
+            <Doubler value={value} setValue={setValue}></Doubler>
+            <Halver value={value} setValue={setValue}></Halver>
+        </div>
+    );
+}
diff --git a/src/bad-components/ShoveBox.test.tsx b/src/bad-components/ShoveBox.test.tsx
new file mode 100644
index 0000000000..e89abf2751
--- /dev/null
+++ b/src/bad-components/ShoveBox.test.tsx
@@ -0,0 +1,37 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ShoveBox } from "./ShoveBox";
+
+describe("ShoveBox Component tests", () => {
+    beforeEach(() => {
+        render(<ShoveBox />);
+    });
+    test("(2 pts) The MoveableBox is initially nearby.", () => {
+        const box = screen.getByTestId("moveable-box");
+        expect(box).toHaveStyle({ marginLeft: "10px" });
+    });
+    test("(2 pts) There is a button", () => {
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    test("(2 pts) Clicking the button moves the box.", async () => {
+        const shoveBox = screen.getByRole("button");
+        await act(async () => {
+            shoveBox.click();
+        });
+        expect(screen.getByTestId("moveable-box")).toHaveStyle({
+            marginLeft: "14px",
+        });
+        await act(async () => {
+            shoveBox.click();
+        });
+        expect(screen.getByTestId("moveable-box")).toHaveStyle({
+            marginLeft: "18px",
+        });
+        await act(async () => {
+            shoveBox.click();
+        });
+        expect(screen.getByTestId("moveable-box")).toHaveStyle({
+            marginLeft: "22px",
+        });
+    });
+});
diff --git a/src/bad-components/ShoveBox.tsx b/src/bad-components/ShoveBox.tsx
new file mode 100644
index 0000000000..a9601a5725
--- /dev/null
+++ b/src/bad-components/ShoveBox.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+function ShoveBoxButton({
+    position,
+    setPosition,
+}: {
+    position: number;
+    setPosition: (newPosition: number) => void;
+}): React.JSX.Element {
+    return (
+        <Button
+            onClick={() => {
+                setPosition(position + 4);
+            }}
+        >
+            Shove the Box
+        </Button>
+    );
+}
+
+function MoveableBox({ position }: { position: number }): React.JSX.Element {
+    return (
+        <div
+            data-testid="moveable-box"
+            style={{
+                width: "50px",
+                height: "50px",
+                backgroundColor: "lightblue",
+                border: "1px solid blue",
+                display: "inline-block",
+                verticalAlign: "bottom",
+                marginLeft: position + "px",
+            }}
+        ></div>
+    );
+}
+
+export function ShoveBox(): React.JSX.Element {
+    const [position, setPosition] = useState<number>(10);
+
+    return (
+        <div>
+            <div>Shove Box</div>
+            <span>The box is at: {position}</span>
+            <div>
+                <ShoveBoxButton
+                    position={position}
+                    setPosition={setPosition}
+                ></ShoveBoxButton>
+                <MoveableBox position={position}></MoveableBox>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/ChangeType.test.tsx b/src/components/ChangeType.test.tsx
new file mode 100644
index 0000000000..f0ee545cc3
--- /dev/null
+++ b/src/components/ChangeType.test.tsx
@@ -0,0 +1,59 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ChangeType } from "./ChangeType";
+
+describe("ChangeType Component tests", () => {
+    beforeEach(() => {
+        render(<ChangeType />);
+    });
+    test("(1 pts) The initial type is Short Answer", () => {
+        // We use `getByText` because the text MUST be there
+        const typeText = screen.getByText(/Short Answer/i);
+        expect(typeText).toBeInTheDocument();
+    });
+    test("(1 pts) The initial type is not Multiple Choice", () => {
+        // We use `queryByText` because the text might not be there
+        const typeText = screen.queryByText(/Multiple Choice/i);
+        expect(typeText).toBeNull();
+    });
+
+    test("(1 pts) There is a button labeled Change Type", () => {
+        const changeTypeButton = screen.getByRole("button", {
+            name: /Change Type/i
+        });
+        expect(changeTypeButton).toBeInTheDocument();
+    });
+
+    test("(1 pts) Clicking the button changes the type.", async () => {
+        const changeTypeButton = screen.getByRole("button", {
+            name: /Change Type/i
+        });
+        await act(async () => {
+            changeTypeButton.click();
+        });
+        // Should be Multiple Choice
+        const typeTextMC = screen.getByText(/Multiple Choice/i);
+        expect(typeTextMC).toBeInTheDocument();
+        // Should NOT be Short Answer
+        const typeTextSA = screen.queryByText(/Short Answer/i);
+        expect(typeTextSA).toBeNull();
+    });
+
+    test("(1 pts) Clicking the button twice keeps the type the same.", async () => {
+        const changeTypeButton = screen.getByRole("button", {
+            name: /Change Type/i
+        });
+        await act(async () => {
+            changeTypeButton.click();
+        });
+        await act(async () => {
+            changeTypeButton.click();
+        });
+        // Should be Short Answer
+        const typeTextSA = screen.getByText(/Short Answer/i);
+        expect(typeTextSA).toBeInTheDocument();
+        // Should NOT be Multiple Choice
+        const typeTextMC = screen.queryByText(/Multiple Choice/i);
+        expect(typeTextMC).toBeNull();
+    });
+});
diff --git a/src/components/ChangeType.tsx b/src/components/ChangeType.tsx
new file mode 100644
index 0000000000..dbeb65db75
--- /dev/null
+++ b/src/components/ChangeType.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import { QuestionType } from "../interfaces/question";
+
+export function ChangeType(): React.JSX.Element {
+    const [type, setType] = useState<QuestionType>("short_answer_question");
+
+    function toggleType(): void {
+        setType((currentType) =>
+            currentType === "short_answer_question" ?
+                "multiple_choice_question"
+            :   "short_answer_question",
+        );
+    }
+
+    return (
+        <div>
+            <div>Change Type</div>
+
+            <div>
+                {type === "short_answer_question" ?
+                    "Short Answer"
+                :   "Multiple Choice"}
+            </div>
+
+            <Button onClick={toggleType}>Change Type</Button>
+        </div>
+    );
+}
diff --git a/src/components/Counter.test.tsx b/src/components/Counter.test.tsx
new file mode 100644
index 0000000000..d08773f5c6
--- /dev/null
+++ b/src/components/Counter.test.tsx
@@ -0,0 +1,45 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { Counter } from "./Counter";
+
+describe("Counter Component tests", () => {
+    beforeEach(() => {
+        render(<Counter />);
+    });
+    test("(1 pts) The initial value is 0", () => {
+        // We use `getByText` because the text MUST be there
+        const valueText = screen.getByText(/0/i);
+        expect(valueText).toBeInTheDocument();
+    });
+    test("(1 pts) The initial value is not 1", () => {
+        // We use `queryByText` because the text might not be there
+        const valueText = screen.queryByText(/1/i);
+        expect(valueText).toBeNull();
+    });
+
+    test("(1 pts) There is a button named Add One", () => {
+        const addOneButton = screen.getByRole("button", { name: /Add One/i });
+        expect(addOneButton).toBeInTheDocument();
+    });
+
+    test("(1 pts) Clicking the button once adds one", async () => {
+        const addOneButton = screen.getByRole("button", { name: /Add One/i });
+        await act(async () => {
+            addOneButton.click();
+        });
+        const valueText = screen.getByText(/1/i);
+        expect(valueText).toBeInTheDocument();
+    });
+
+    test("(1 pts) Clicking the button twice adds two", async () => {
+        const addOneButton = screen.getByRole("button", { name: /Add One/i });
+        await act(async () => {
+            addOneButton.click();
+        });
+        await act(async () => {
+            addOneButton.click();
+        });
+        const valueText = screen.getByText(/2/i);
+        expect(valueText).toBeInTheDocument();
+    });
+});
diff --git a/src/components/Counter.tsx b/src/components/Counter.tsx
new file mode 100644
index 0000000000..2b7eb7919b
--- /dev/null
+++ b/src/components/Counter.tsx
@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+export function Counter(): React.JSX.Element {
+    const [value, setValue] = useState<number>(0);
+
+    return (
+        <span>
+            <Button
+                onClick={() => {
+                    setValue(value + 1);
+                }}
+            >
+                Add One
+            </Button>{" "}
+            to {value}.
+        </span>
+    );
+}
diff --git a/src/components/CycleHoliday.test.tsx b/src/components/CycleHoliday.test.tsx
new file mode 100644
index 0000000000..ae364a0b5b
--- /dev/null
+++ b/src/components/CycleHoliday.test.tsx
@@ -0,0 +1,59 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { CycleHoliday } from "./CycleHoliday";
+
+describe("CycleHoliday Component tests", () => {
+    beforeEach(() => {
+        render(<CycleHoliday />);
+    });
+
+    test("(1 pts) An initial holiday is displayed", () => {
+        const initialHoliday = screen.getByText(/Holiday: (.*)/i);
+        expect(initialHoliday).toBeInTheDocument();
+    });
+
+    test("(1 pts) There are two buttons", () => {
+        const alphabetButton = screen.getByRole("button", {
+            name: /Alphabet/i
+        });
+        const yearButton = screen.getByRole("button", {
+            name: /Year/i
+        });
+        expect(alphabetButton).toBeInTheDocument();
+        expect(yearButton).toBeInTheDocument();
+    });
+
+    test("(1 pts) Can cycle through 5 distinct holidays alphabetically", async () => {
+        const alphabetButton = screen.getByRole("button", {
+            name: /Alphabet/i
+        });
+        const initialHoliday = screen.getByText(/Holiday ?[:)-](.*)/i);
+        const states: string[] = [];
+        for (let i = 0; i < 6; i++) {
+            states.push(initialHoliday.textContent || "");
+            await act(async () => {
+                alphabetButton.click();
+            });
+        }
+        const uniqueStates = states.filter((x, y) => states.indexOf(x) == y);
+        expect(uniqueStates).toHaveLength(5);
+        expect(states[0]).toEqual(states[5]);
+    });
+
+    test("(1 pts) Can cycle through 5 distinct holidays by year", async () => {
+        const yearButton = screen.getByRole("button", {
+            name: /Year/i
+        });
+        const initialHoliday = screen.getByText(/Holiday ?[:)-](.*)/i);
+        const states: string[] = [];
+        for (let i = 0; i < 6; i++) {
+            states.push(initialHoliday.textContent || "");
+            await act(async () => {
+                yearButton.click();
+            });
+        }
+        const uniqueStates = states.filter((x, y) => states.indexOf(x) == y);
+        expect(uniqueStates).toHaveLength(5);
+        expect(states[0]).toEqual(states[5]);
+    });
+});
diff --git a/src/components/CycleHoliday.tsx b/src/components/CycleHoliday.tsx
new file mode 100644
index 0000000000..484fa145c9
--- /dev/null
+++ b/src/components/CycleHoliday.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+type Holiday = "🎃" | "🎄" | "🎆" | "🦃" | "🐰";
+
+// Alphabet order transitions
+const NEXT_ALPHA: Record<Holiday, Holiday> = {
+    "🎃": "🎄",
+    "🎄": "🎆",
+    "🎆": "🦃",
+    "🦃": "🐰",
+    "🐰": "🎃",
+};
+
+// Year order transitions (different order!)
+const NEXT_YEAR: Record<Holiday, Holiday> = {
+    "🎃": "🦃",
+    "🦃": "🎄",
+    "🎄": "🎆",
+    "🎆": "🐰",
+    "🐰": "🎃",
+};
+
+export function CycleHoliday(): React.JSX.Element {
+    const [holiday, setHoliday] = useState<Holiday>("🎃");
+
+    function advanceAlphabet(): void {
+        setHoliday((prev) => NEXT_ALPHA[prev]);
+    }
+
+    function advanceYear(): void {
+        setHoliday((prev) => NEXT_YEAR[prev]);
+    }
+
+    return (
+        <div>
+            <div>Cycle Holiday</div>
+
+            <div>Holiday: {holiday}</div>
+
+            <Button onClick={advanceAlphabet}>Alphabet</Button>
+            <Button onClick={advanceYear}>Year</Button>
+        </div>
+    );
+}
diff --git a/src/components/RevealAnswer.test.tsx b/src/components/RevealAnswer.test.tsx
new file mode 100644
index 0000000000..6b2076ad1a
--- /dev/null
+++ b/src/components/RevealAnswer.test.tsx
@@ -0,0 +1,42 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { RevealAnswer } from "./RevealAnswer";
+
+describe("RevealAnswer Component tests", () => {
+    beforeEach(() => {
+        render(<RevealAnswer />);
+    });
+    test("(1 pts) The answer '42' is not visible initially", () => {
+        const answerText = screen.queryByText(/42/);
+        expect(answerText).toBeNull();
+    });
+    test("(1 pts) There is a Reveal Answer button", () => {
+        const revealButton = screen.getByRole("button", {
+            name: /Reveal Answer/i
+        });
+        expect(revealButton).toBeInTheDocument();
+    });
+    test("(1 pts) Clicking Reveal Answer button reveals the '42'", async () => {
+        const revealButton = screen.getByRole("button", {
+            name: /Reveal Answer/i
+        });
+        await act(async () => {
+            revealButton.click();
+        });
+        const answerText = screen.getByText(/42/);
+        expect(answerText).toBeInTheDocument();
+    });
+    test("(1 pts) Clicking Reveal Answer button twice hides the '42'", async () => {
+        const revealButton = screen.getByRole("button", {
+            name: /Reveal Answer/i
+        });
+        await act(async () => {
+            revealButton.click();
+        });
+        await act(async () => {
+            revealButton.click();
+        });
+        const answerText = screen.queryByText(/42/);
+        expect(answerText).toBeNull();
+    });
+});
diff --git a/src/components/RevealAnswer.tsx b/src/components/RevealAnswer.tsx
new file mode 100644
index 0000000000..b26cf9494f
--- /dev/null
+++ b/src/components/RevealAnswer.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+export function RevealAnswer(): React.JSX.Element {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div>
+            <Button
+                onClick={() => {
+                    setVisible(!visible);
+                }}
+            >
+                Reveal Answer
+            </Button>
+            {visible ?
+                <div>42</div>
+            :   null}
+        </div>
+    );
+}
diff --git a/src/components/StartAttempt.test.tsx b/src/components/StartAttempt.test.tsx
new file mode 100644
index 0000000000..fd326936e6
--- /dev/null
+++ b/src/components/StartAttempt.test.tsx
@@ -0,0 +1,225 @@
+import React, { act } from "react";
+import { render, screen, cleanup } from "@testing-library/react";
+import { StartAttempt } from "./StartAttempt";
+
+/***
+ * Helper function to extract a number from an HTMLElement's textContent.
+ *
+ * If you aren't familiar with Regular Expressions:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
+ */
+export function extractDigits(element: HTMLElement): number | null {
+    const attemptNumberText = element.textContent || "";
+    // We use a "regular expression" to find digits and extract them as text
+    const attemptNumberDigitsMatched = attemptNumberText.match(/\d+/);
+    // Provides a Matched Regular Expression or null
+    if (attemptNumberDigitsMatched === null) {
+        // Should never be possible, since then there was no number to have found.
+        // But TypeScript is cautious and demands we provide SOMETHING.
+        return null;
+    } else {
+        // Not null, get the first matched value and convert to number
+        return parseInt(attemptNumberDigitsMatched[0]);
+    }
+}
+
+describe("StartAttempt Component tests", () => {
+    beforeEach(() => {
+        render(<StartAttempt />);
+    });
+    afterEach(() => {
+        cleanup();
+    });
+    test("(1 pts) The Number of attempts is displayed initially, without other numbers", () => {
+        const attemptNumber = screen.getByText(/(\d+)/);
+        expect(attemptNumber).toBeInTheDocument();
+    });
+    test("(1 pts) The Number of attempts is more than 0", () => {
+        const attemptNumber = extractDigits(screen.getByText(/(\d+)/));
+        expect(attemptNumber).toBeGreaterThan(0);
+    });
+    test("(1 pts) The Number of attempts is less than 10", () => {
+        const attemptNumber = extractDigits(screen.getByText(/(\d+)/));
+        expect(attemptNumber).toBeLessThan(10);
+    });
+    test("(1 pts) There is an initially enabled Start Quiz button", () => {
+        const startButton = screen.getByRole("button", { name: /Start Quiz/i });
+        expect(startButton).toBeInTheDocument();
+        expect(startButton).toBeEnabled();
+    });
+    test("(1 pts) There is an initially disabled Stop Quiz button", () => {
+        const stopButton = screen.getByRole("button", { name: /Stop Quiz/i });
+        expect(stopButton).toBeInTheDocument();
+        expect(stopButton).toBeDisabled();
+    });
+    test("(1 pts) There is an initially enabled Mulligan button", () => {
+        const mulliganButton = screen.getByRole("button", {
+            name: /Mulligan/i
+        });
+        expect(mulliganButton).toBeInTheDocument();
+        expect(mulliganButton).toBeEnabled();
+    });
+    test("(1 pts) Clicking Mulligan increases attempts", async () => {
+        const attemptNumber: number =
+            extractDigits(screen.getByText(/(\d+)/)) || 0;
+        const mulliganButton = screen.getByRole("button", {
+            name: /Mulligan/i
+        });
+        await act(async () => {
+            mulliganButton.click();
+        });
+        const attemptNumberLater = extractDigits(screen.getByText(/(\d+)/));
+        expect(attemptNumber + 1).toEqual(attemptNumberLater);
+    });
+    test("(1 pts) Clicking Mulligan twice increases attempts by two", async () => {
+        const attemptNumber: number =
+            extractDigits(screen.getByText(/(\d+)/)) || 0;
+        const mulliganButton = screen.getByRole("button", {
+            name: /Mulligan/i
+        });
+        await act(async () => {
+            mulliganButton.click();
+        });
+        await act(async () => {
+            mulliganButton.click();
+        });
+        const attemptNumberLater = extractDigits(screen.getByText(/(\d+)/));
+        expect(attemptNumber + 2).toEqual(attemptNumberLater);
+    });
+    test("(1 pts) Clicking Start Quiz decreases attempts", async () => {
+        const attemptNumber: number =
+            extractDigits(screen.getByText(/(\d+)/)) || 0;
+        const startButton = screen.getByRole("button", {
+            name: /Start Quiz/i
+        });
+        await act(async () => {
+            startButton.click();
+        });
+        const attemptNumberLater =
+            extractDigits(screen.getByText(/(\d+)/)) || 0;
+        expect(attemptNumber - 1).toEqual(attemptNumberLater);
+    });
+    test("(1 pts) Clicking Start Quiz changes enabled buttons", async () => {
+        // Given the buttons...
+        const startButton = screen.getByRole("button", {
+            name: /Start Quiz/i
+        });
+        const stopButton = screen.getByRole("button", { name: /Stop Quiz/i });
+        const mulliganButton = screen.getByRole("button", {
+            name: /Mulligan/i
+        });
+        // When the start button is clicked
+        await act(async () => {
+            startButton.click();
+        });
+        // Then the start is disabled, stop is enabled, and mulligan is disabled
+        expect(startButton).toBeDisabled();
+        expect(stopButton).toBeEnabled();
+        expect(mulliganButton).toBeDisabled();
+    });
+    test("(1 pts) Clicking Start and Stop Quiz changes enabled buttons", async () => {
+        // Given the buttons and initial attempt number...
+        const startButton = screen.getByRole("button", {
+            name: /Start Quiz/i
+        });
+        const stopButton = screen.getByRole("button", { name: /Stop Quiz/i });
+        const mulliganButton = screen.getByRole("button", {
+            name: /Mulligan/i
+        });
+        // When we click the start button and then the stop button
+        await act(async () => {
+            startButton.click();
+        });
+        await act(async () => {
+            stopButton.click();
+        });
+        // Then the start is enabled, stop is disabled, and mulligan is enabled
+        expect(startButton).toBeEnabled();
+        expect(stopButton).toBeDisabled();
+        expect(mulliganButton).toBeEnabled();
+    });
+    test("(1 pts) Clicking Start, Stop, Mulligan sets attempts to original", async () => {
+        // Given the buttons and initial attempt number...
+        const startButton = screen.getByRole("button", {
+            name: /Start Quiz/i
+        });
+        const stopButton = screen.getByRole("button", { name: /Stop Quiz/i });
+        const mulliganButton = screen.getByRole("button", {
+            name: /Mulligan/i
+        });
+        const attemptNumber: number =
+            extractDigits(screen.getByText(/(\d+)/)) || 0;
+        // When we click the start button and then the stop button
+        await act(async () => {
+            startButton.click();
+        });
+        await act(async () => {
+            stopButton.click();
+        });
+        // Then the attempt is decreased
+        const attemptNumberLater: number =
+            extractDigits(screen.getByText(/(\d+)/)) || 0;
+        expect(attemptNumber - 1).toEqual(attemptNumberLater);
+        // And when we click the mulligan button
+        await act(async () => {
+            mulliganButton.click();
+        });
+        // Then the attempt is increased back to starting value
+        const attemptNumberLatest: number =
+            extractDigits(screen.getByText(/(\d+)/)) || 0;
+        expect(attemptNumber).toEqual(attemptNumberLatest);
+    });
+    test("(1 pts) Cannot click start quiz when out of attempts", async () => {
+        // Given the buttons and initial attempt number...
+        const startButton = screen.getByRole("button", {
+            name: /Start Quiz/i
+        });
+        const stopButton = screen.getByRole("button", { name: /Stop Quiz/i });
+        const mulliganButton = screen.getByRole("button", {
+            name: /Mulligan/i
+        });
+        let attemptNumber = extractDigits(screen.getByText(/(\d+)/)) || 0;
+        const initialAttempt = attemptNumber;
+        // Arbitrary number of times to try clicking; assume we do not have more than that number of attempts.
+        let maxAttempts = 10;
+        // While there are still attempts apparently available...
+        while (attemptNumber > 0) {
+            // Then the buttons
+            expect(startButton).toBeEnabled();
+            expect(stopButton).toBeDisabled();
+            expect(mulliganButton).toBeEnabled();
+            // And when we Start and then immediately stop the quiz...
+            await act(async () => {
+                startButton.click();
+            });
+            await act(async () => {
+                stopButton.click();
+            });
+            // Then the number is going down, and doesn't go past 0 somehow
+            attemptNumber = extractDigits(screen.getByText(/(\d+)/)) || 0;
+            expect(attemptNumber).toBeGreaterThanOrEqual(0);
+            expect(attemptNumber).not.toEqual(initialAttempt);
+            // And then the maximum number of attempts does not exceed 10
+            maxAttempts -= 1;
+            expect(maxAttempts).toBeGreaterThanOrEqual(0);
+        }
+        // Then the attempt is at zero
+        expect(attemptNumber).toEqual(0);
+        // And then the stop button is disabled, the start button is disabled, and mulligan is enabled
+        expect(startButton).toBeDisabled();
+        expect(stopButton).toBeDisabled();
+        expect(mulliganButton).toBeEnabled();
+        // And when we click the mulligan button
+        await act(async () => {
+            mulliganButton.click();
+        });
+        // Then the attempt is increased back to 1
+        const attemptNumberLatest: number =
+            extractDigits(screen.getByText(/(\d+)/)) || 0;
+        expect(attemptNumberLatest).toEqual(1);
+        // And the start button is reenabled
+        expect(startButton).toBeEnabled();
+        expect(stopButton).toBeDisabled();
+        expect(mulliganButton).toBeEnabled();
+    });
+});
diff --git a/src/components/StartAttempt.tsx b/src/components/StartAttempt.tsx
new file mode 100644
index 0000000000..87cfcf9bca
--- /dev/null
+++ b/src/components/StartAttempt.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+function randomAttempts(): number {
+    return 1 + Math.floor(Math.random() * 9);
+}
+
+export function StartAttempt(): React.JSX.Element {
+    const [attempts, setAttempts] = useState<number>(() => randomAttempts());
+    const [quizRunning, setQuizRunning] = useState<boolean>(false);
+
+    function startQuiz(): void {
+        if (quizRunning || attempts <= 0) return;
+        setAttempts(attempts - 1);
+        setQuizRunning(true);
+    }
+
+    function stopQuiz(): void {
+        setQuizRunning(false);
+    }
+
+    function mulligan(): void {
+        setAttempts(attempts + 1);
+    }
+
+    return (
+        <div>
+            <div>Attempts: {attempts}</div>
+
+            <Button onClick={startQuiz} disabled={quizRunning || attempts <= 0}>
+                Start Quiz
+            </Button>
+
+            <Button onClick={stopQuiz} disabled={!quizRunning}>
+                Stop Quiz
+            </Button>
+
+            <Button onClick={mulligan} disabled={quizRunning}>
+                Mulligan
+            </Button>
+        </div>
+    );
+}
diff --git a/src/components/TwoDice.test.tsx b/src/components/TwoDice.test.tsx
new file mode 100644
index 0000000000..e5f9966deb
--- /dev/null
+++ b/src/components/TwoDice.test.tsx
@@ -0,0 +1,174 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { TwoDice } from "./TwoDice";
+import { extractDigits } from "./StartAttempt.test";
+
+describe("TwoDice Component tests", () => {
+    let mathRandomFunction: jest.SpyInstance;
+    beforeEach(() => {
+        mathRandomFunction = jest
+            .spyOn(global.Math, "random")
+            .mockReturnValue(0.5) // 4
+            .mockReturnValueOnce(0.0) // 1
+            .mockReturnValueOnce(0.99) // 6
+            .mockReturnValueOnce(0.75) // 5
+            .mockReturnValueOnce(0.75) // 5
+            .mockReturnValueOnce(0.1) // 1
+            .mockReturnValueOnce(0.1); // 1
+    });
+    afterEach(() => {
+        jest.spyOn(global.Math, "random").mockRestore();
+    });
+    beforeEach(() => {
+        render(<TwoDice />);
+    });
+    test("(1 pts) There is a `left-die` and `right-die` testid", () => {
+        const leftDie = screen.getByTestId("left-die");
+        const rightDie = screen.getByTestId("right-die");
+        expect(leftDie).toBeInTheDocument();
+        expect(rightDie).toBeInTheDocument();
+    });
+    test("(1 pts) The `left-die` and `right-die` are two different numbers", () => {
+        const leftDie = screen.getByTestId("left-die");
+        const rightDie = screen.getByTestId("right-die");
+        const leftNumber = extractDigits(leftDie);
+        const rightNumber = extractDigits(rightDie);
+        // Then they are two numbers
+        expect(leftNumber).not.toBeNull();
+        expect(rightNumber).not.toBeNull();
+        // Then they are two different numbers
+        expect(leftNumber).not.toEqual(rightNumber);
+    });
+    test("(1 pts) There are two buttons present", () => {
+        const leftButton = screen.getByRole("button", { name: /Roll Left/i });
+        const rightButton = screen.getByRole("button", { name: /Roll Right/i });
+        expect(leftButton).toBeInTheDocument();
+        expect(rightButton).toBeInTheDocument();
+    });
+    test("(1 pts) Clicking left button changes first number", async () => {
+        const leftButton = screen.getByRole("button", { name: /Roll Left/i });
+        await act(async () => {
+            leftButton.click();
+        });
+        await act(async () => {
+            leftButton.click();
+        });
+        await act(async () => {
+            leftButton.click();
+        });
+        // Then the random function should be called 3 times
+        expect(mathRandomFunction).toBeCalledTimes(3);
+        // And the number to be 5
+        const leftNumber = extractDigits(screen.getByTestId("left-die"));
+        expect(leftNumber).toEqual(5);
+    });
+    // Clicking right button changes second number
+    test("(1 pts) Clicking right button changes second number", async () => {
+        const rightButton = screen.getByRole("button", { name: /Roll Right/i });
+        await act(async () => {
+            rightButton.click();
+        });
+        await act(async () => {
+            rightButton.click();
+        });
+        await act(async () => {
+            rightButton.click();
+        });
+        // Then the random function should be called 3 times
+        expect(mathRandomFunction).toBeCalledTimes(3);
+        // And the number to be 5
+        const rightNumber = extractDigits(screen.getByTestId("right-die"));
+        expect(rightNumber).toEqual(5);
+    });
+    // Rolling two different numbers does not win or lose the game
+    test("(1 pts) Rolling two different numbers does not win or lose the game", async () => {
+        // Given
+        const leftButton = screen.getByRole("button", { name: /Roll Left/i });
+        const rightButton = screen.getByRole("button", { name: /Roll Right/i });
+        const leftDie = screen.getByTestId("left-die");
+        const rightDie = screen.getByTestId("right-die");
+        // When the left and right buttons are rolled once each
+        await act(async () => {
+            leftButton.click();
+        });
+        await act(async () => {
+            rightButton.click();
+        });
+        // Then the numbers are not equal
+        const leftNumber = extractDigits(leftDie);
+        const rightNumber = extractDigits(rightDie);
+        expect(leftNumber).toEqual(1);
+        expect(rightNumber).toEqual(6);
+        // And then the game is not won
+        const winText = screen.queryByText(/Win/i);
+        expect(winText).toBeNull();
+        // And then nor is the game lost
+        const loseText = screen.queryByText(/Lose/i);
+        expect(loseText).toBeNull();
+    });
+    test("(1 pts) Getting snake eyes loses the game", async () => {
+        // Given
+        const leftButton = screen.getByRole("button", { name: /Roll Left/i });
+        const rightButton = screen.getByRole("button", { name: /Roll Right/i });
+        const leftDie = screen.getByTestId("left-die");
+        const rightDie = screen.getByTestId("right-die");
+        // When the left and right buttons are rolled once each
+        await act(async () => {
+            leftButton.click();
+        });
+        await act(async () => {
+            rightButton.click();
+        });
+        await act(async () => {
+            rightButton.click();
+        });
+        await act(async () => {
+            rightButton.click();
+        });
+        await act(async () => {
+            rightButton.click();
+        });
+        // Then the numbers are not equal
+        const leftNumber = extractDigits(leftDie);
+        const rightNumber = extractDigits(rightDie);
+        expect(leftNumber).toEqual(1);
+        expect(rightNumber).toEqual(1);
+        // And then the game is not won
+        const winText = screen.queryByText(/Win/i);
+        expect(winText).toBeNull();
+        // And then the game is lost
+        const loseText = screen.getByText(/Lose/i);
+        expect(loseText).toBeInTheDocument();
+    });
+    test("(1 pts) Getting matching numbers wins the game", async () => {
+        // Given
+        const leftButton = screen.getByRole("button", { name: /Roll Left/i });
+        const rightButton = screen.getByRole("button", { name: /Roll Right/i });
+        const leftDie = screen.getByTestId("left-die");
+        const rightDie = screen.getByTestId("right-die");
+        // When the left and right buttons are rolled once each
+        await act(async () => {
+            leftButton.click();
+        });
+        await act(async () => {
+            leftButton.click();
+        });
+        await act(async () => {
+            leftButton.click();
+        });
+        await act(async () => {
+            rightButton.click();
+        });
+        // Then the numbers are not equal
+        const leftNumber = extractDigits(leftDie);
+        const rightNumber = extractDigits(rightDie);
+        expect(leftNumber).toEqual(5);
+        expect(rightNumber).toEqual(5);
+        // And then the game is not lost
+        const loseText = screen.queryByText(/Lose/i);
+        expect(loseText).toBeNull();
+        // And then the game is won
+        const winText = screen.getByText(/Win/i);
+        expect(winText).toBeInTheDocument();
+    });
+});
diff --git a/src/components/TwoDice.tsx b/src/components/TwoDice.tsx
new file mode 100644
index 0000000000..1972d009cd
--- /dev/null
+++ b/src/components/TwoDice.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+export function d6(): number {
+    return 1 + Math.floor(Math.random() * 6);
+}
+
+type DiceState = { left: number; right: number };
+
+export function TwoDice(): React.JSX.Element {
+    const [{ left, right }, setDice] = useState<DiceState>({
+        left: 1,
+        right: 2,
+    });
+
+    const isMatch = left === right;
+    const isSnakeEyes = isMatch && left === 1;
+
+    function rollLeft(): void {
+        setDice((d) => ({ ...d, left: d6() }));
+    }
+
+    function rollRight(): void {
+        setDice((d) => ({ ...d, right: d6() }));
+    }
+
+    return (
+        <div>
+            <div>Two Dice</div>
+            <div>
+                <span data-testid="left-die">{left}</span>{" "}
+                <span data-testid="right-die">{right}</span>
+            </div>
+            <div>
+                <Button onClick={rollLeft}>Roll Left</Button>{" "}
+                <Button onClick={rollRight}>Roll Right</Button>
+            </div>
+            {isMatch && <div>{isSnakeEyes ? "You Lose" : "You Win"}</div>}
+        </div>
+    );
+}
diff --git a/src/data/questions.json b/src/data/questions.json
new file mode 100644
index 0000000000..0411f30afe
--- /dev/null
+++ b/src/data/questions.json
@@ -0,0 +1,220 @@
+{
+    "BLANK_QUESTIONS": [
+        {
+            "id": 1,
+            "name": "Question 1",
+            "body": "",
+            "type": "multiple_choice_question",
+            "options": [],
+            "expected": "",
+            "points": 1,
+            "published": false
+        },
+        {
+            "id": 47,
+            "name": "My New Question",
+            "body": "",
+            "type": "multiple_choice_question",
+            "options": [],
+            "expected": "",
+            "points": 1,
+            "published": false
+        },
+        {
+            "id": 2,
+            "name": "Question 2",
+            "body": "",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "",
+            "points": 1,
+            "published": false
+        }
+    ],
+    "SIMPLE_QUESTIONS": [
+        {
+            "id": 1,
+            "name": "Addition",
+            "body": "What is 2+2?",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "4",
+            "points": 1,
+            "published": true
+        },
+        {
+            "id": 2,
+            "name": "Letters",
+            "body": "What is the last letter of the English alphabet?",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "Z",
+            "points": 1,
+            "published": false
+        },
+        {
+            "id": 5,
+            "name": "Colors",
+            "body": "Which of these is a color?",
+            "type": "multiple_choice_question",
+            "options": ["red", "apple", "firetruck"],
+            "expected": "red",
+            "points": 1,
+            "published": true
+        },
+        {
+            "id": 9,
+            "name": "Shapes",
+            "body": "What shape can you make with one line?",
+            "type": "multiple_choice_question",
+            "options": ["square", "triangle", "circle"],
+            "expected": "circle",
+            "points": 2,
+            "published": false
+        }
+    ],
+    "TRIVIA_QUESTIONS": [
+        {
+            "id": 1,
+            "name": "Mascot",
+            "body": "What is the name of the UD Mascot?",
+            "type": "multiple_choice_question",
+            "options": ["Bluey", "YoUDee", "Charles the Wonder Dog"],
+            "expected": "YoUDee",
+            "points": 7,
+            "published": false
+        },
+        {
+            "id": 2,
+            "name": "Motto",
+            "body": "What is the University of Delaware's motto?",
+            "type": "multiple_choice_question",
+            "options": [
+                "Knowledge is the light of the mind",
+                "Just U Do it",
+                "Nothing, what's the motto with you?"
+            ],
+            "expected": "Knowledge is the light of the mind",
+            "points": 3,
+            "published": false
+        },
+        {
+            "id": 3,
+            "name": "Goats",
+            "body": "How many goats are there usually on the Green?",
+            "type": "multiple_choice_question",
+            "options": [
+                "Zero, why would there be goats on the green?",
+                "18420",
+                "Two"
+            ],
+            "expected": "Two",
+            "points": 10,
+            "published": false
+        }
+    ],
+    "EMPTY_QUESTIONS": [
+        {
+            "id": 1,
+            "name": "Empty 1",
+            "body": "This question is not empty, right?",
+            "type": "multiple_choice_question",
+            "options": ["correct", "it is", "not"],
+            "expected": "correct",
+            "points": 5,
+            "published": true
+        },
+        {
+            "id": 2,
+            "name": "Empty 2",
+            "body": "",
+            "type": "multiple_choice_question",
+            "options": ["this", "one", "is", "not", "empty", "either"],
+            "expected": "one",
+            "points": 5,
+            "published": true
+        },
+        {
+            "id": 3,
+            "name": "Empty 3",
+            "body": "This questions is not empty either!",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "",
+            "points": 5,
+            "published": true
+        },
+        {
+            "id": 4,
+            "name": "Empty 4",
+            "body": "",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "Even this one is not empty",
+            "points": 5,
+            "published": true
+        },
+        {
+            "id": 5,
+            "name": "Empty 5 (Actual)",
+            "body": "",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "",
+            "points": 5,
+            "published": false
+        }
+    ],
+    "SIMPLE_QUESTIONS_2": [
+        {
+            "id": 478,
+            "name": "Students",
+            "body": "How many students are taking CISC275 this semester?",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "90",
+            "points": 53,
+            "published": true
+        },
+        {
+            "id": 1937,
+            "name": "Importance",
+            "body": "On a scale of 1 to 10, how important is this quiz for them?",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "10",
+            "points": 47,
+            "published": true
+        },
+        {
+            "id": 479,
+            "name": "Sentience",
+            "body": "Is it technically possible for this quiz to become sentient?",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "Yes",
+            "points": 40,
+            "published": true
+        },
+        {
+            "id": 777,
+            "name": "Danger",
+            "body": "If this quiz became sentient, would it pose a danger to others?",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "Yes",
+            "points": 60,
+            "published": true
+        },
+        {
+            "id": 1937,
+            "name": "Listening",
+            "body": "Is this quiz listening to us right now?",
+            "type": "short_answer_question",
+            "options": [],
+            "expected": "Yes",
+            "points": 100,
+            "published": true
+        }
+    ]
+}
diff --git a/src/form-components/ChangeColor.test.tsx b/src/form-components/ChangeColor.test.tsx
new file mode 100644
index 0000000000..4055ee0508
--- /dev/null
+++ b/src/form-components/ChangeColor.test.tsx
@@ -0,0 +1,43 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ChangeColor } from "./ChangeColor";
+
+describe("ChangeColor Component tests", () => {
+    beforeEach(() => render(<ChangeColor />));
+    test("(2 pts) There are at least 8 radio buttons and the colored box", () => {
+        const radios = screen.getAllByRole("radio");
+        expect(radios.length).toBeGreaterThanOrEqual(8);
+        expect(screen.getByTestId("colored-box")).toBeInTheDocument();
+    });
+    test("(2 pts) Switching the color switches the displayed color.", async () => {
+        const radios: HTMLInputElement[] = screen.getAllByRole("radio");
+        // Switch to first
+        await act(async () => {
+            radios[0].click();
+        });
+        let coloredBox = screen.getByTestId("colored-box");
+        expect(coloredBox).toHaveTextContent(radios[0].value);
+        expect(coloredBox).toHaveStyle({ backgroundColor: radios[0].value });
+        // Switch to third
+        await act(async () => {
+            radios[2].click();
+        });
+        coloredBox = screen.getByTestId("colored-box");
+        expect(coloredBox).toHaveTextContent(radios[2].value);
+        expect(coloredBox).toHaveStyle({ backgroundColor: radios[2].value });
+        // Switch to 8th
+        await act(async () => {
+            radios[7].click();
+        });
+        coloredBox = screen.getByTestId("colored-box");
+        expect(coloredBox).toHaveTextContent(radios[7].value);
+        expect(coloredBox).toHaveStyle({ backgroundColor: radios[7].value });
+        // Switch back to first
+        await act(async () => {
+            radios[0].click();
+        });
+        coloredBox = screen.getByTestId("colored-box");
+        expect(coloredBox).toHaveTextContent(radios[0].value);
+        expect(coloredBox).toHaveStyle({ backgroundColor: radios[0].value });
+    });
+});
diff --git a/src/form-components/ChangeColor.tsx b/src/form-components/ChangeColor.tsx
new file mode 100644
index 0000000000..ba2dcfe9f9
--- /dev/null
+++ b/src/form-components/ChangeColor.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import Form from "react-bootstrap/Form";
+
+const COLORS = [
+    "red",
+    "blue",
+    "green",
+    "yellow",
+    "orange",
+    "purple",
+    "pink",
+    "brown",
+];
+
+export function ChangeColor(): React.JSX.Element {
+    const [selectedColor, setSelectedColor] = useState<string>(COLORS[0]);
+
+    function updateColor(event: React.ChangeEvent<HTMLInputElement>): void {
+        setSelectedColor(event.target.value);
+    }
+
+    return (
+        <div>
+            <Form.Label>Change Color</Form.Label>
+            <div>
+                {COLORS.map((color: string) => (
+                    <Form.Check
+                        inline
+                        key={color}
+                        type="radio"
+                        name="change-color"
+                        id={`change-color-${color}`}
+                        label={color}
+                        value={color}
+                        checked={selectedColor === color}
+                        onChange={updateColor}
+                    />
+                ))}
+            </div>
+            <div
+                data-testid="colored-box"
+                style={{
+                    backgroundColor: selectedColor,
+                    display: "inline-block",
+                    padding: "8px",
+                    marginTop: "8px",
+                }}
+            >
+                {selectedColor}
+            </div>
+        </div>
+    );
+}
diff --git a/src/form-components/CheckAnswer.test.tsx b/src/form-components/CheckAnswer.test.tsx
new file mode 100644
index 0000000000..df11c436b6
--- /dev/null
+++ b/src/form-components/CheckAnswer.test.tsx
@@ -0,0 +1,53 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { CheckAnswer } from "./CheckAnswer";
+import userEvent from "@testing-library/user-event";
+
+describe("CheckAnswer Component tests", () => {
+    test("(2 pts) There is an input box", () => {
+        render(<CheckAnswer expectedAnswer="42" />);
+        const inputBox = screen.getByRole("textbox");
+        expect(inputBox).toBeInTheDocument();
+    });
+    test("(2 pts) The answer is originally incorrect.", () => {
+        render(<CheckAnswer expectedAnswer="42" />);
+        expect(screen.getByText(/❌/i)).toBeInTheDocument();
+        expect(screen.queryByText(/✔️/i)).not.toBeInTheDocument();
+    });
+    test("(2 pts) Entering the right answer makes it correct.", async () => {
+        render(<CheckAnswer expectedAnswer="42" />);
+        const inputBox = screen.getByRole("textbox");
+        await act(async () => {
+            userEvent.type(inputBox, "42");
+        });
+        expect(screen.getByText(/✔️/i)).toBeInTheDocument();
+        expect(screen.queryByText(/❌/i)).not.toBeInTheDocument();
+    });
+    test("(2 pts) Entering the wrong answer makes it incorrect.", async () => {
+        render(<CheckAnswer expectedAnswer="42" />);
+        const inputBox = screen.getByRole("textbox");
+        await act(async () => {
+            userEvent.type(inputBox, "43");
+        });
+        expect(screen.getByText(/❌/i)).toBeInTheDocument();
+        expect(screen.queryByText(/✔️/i)).not.toBeInTheDocument();
+    });
+    test("(2 pts) Entering a different right answer makes it correct.", async () => {
+        render(<CheckAnswer expectedAnswer="Hello" />);
+        const inputBox = screen.getByRole("textbox");
+        await act(async () => {
+            userEvent.type(inputBox, "Hello");
+        });
+        expect(screen.getByText(/✔️/i)).toBeInTheDocument();
+        expect(screen.queryByText(/❌/i)).not.toBeInTheDocument();
+    });
+    test("(2 pts) Entering a different wrong answer still makes it incorrect.", async () => {
+        render(<CheckAnswer expectedAnswer="Hello" />);
+        const inputBox = screen.getByRole("textbox");
+        await act(async () => {
+            userEvent.type(inputBox, "42");
+        });
+        expect(screen.getByText(/❌/i)).toBeInTheDocument();
+        expect(screen.queryByText(/✔️/i)).not.toBeInTheDocument();
+    });
+});
diff --git a/src/form-components/CheckAnswer.tsx b/src/form-components/CheckAnswer.tsx
new file mode 100644
index 0000000000..a8a3698624
--- /dev/null
+++ b/src/form-components/CheckAnswer.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import Form from "react-bootstrap/Form";
+
+export function CheckAnswer({
+    expectedAnswer,
+}: {
+    expectedAnswer: string;
+}): React.JSX.Element {
+    const [givenAnswer, setGivenAnswer] = useState<string>("");
+
+    function updateAnswer(event: React.ChangeEvent<HTMLInputElement>): void {
+        setGivenAnswer(event.target.value);
+    }
+
+    return (
+        <div>
+            <Form.Group controlId="check-answer-input">
+                <Form.Label>Check Answer</Form.Label>
+                <Form.Control
+                    type="text"
+                    value={givenAnswer}
+                    onChange={updateAnswer}
+                />
+            </Form.Group>
+            <div>{givenAnswer === expectedAnswer ? "✔️" : "❌"}</div>
+        </div>
+    );
+}
diff --git a/src/form-components/EditMode.test.tsx b/src/form-components/EditMode.test.tsx
new file mode 100644
index 0000000000..a9ffcf6cf9
--- /dev/null
+++ b/src/form-components/EditMode.test.tsx
@@ -0,0 +1,68 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { EditMode } from "./EditMode";
+import userEvent from "@testing-library/user-event";
+
+describe("EditMode Component tests", () => {
+    beforeEach(() => render(<EditMode />));
+    test("(2 pts) There is one checkbox and no textboxes", () => {
+        const switchButton = screen.getByRole("checkbox");
+        expect(switchButton).toBeInTheDocument();
+        expect(switchButton.parentElement).toHaveClass("form-switch");
+        expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+    });
+    test("(2 pts) Initial text should be 'Your Name is a student'.", () => {
+        expect(screen.getByText(/Your Name is a student/i)).toBeInTheDocument();
+    });
+    test("(2 pts) Can switch into Edit Mode", async () => {
+        const switchButton = screen.getByRole("checkbox");
+        await act(async () => {
+            switchButton.click();
+        });
+        expect(screen.getByRole("textbox")).toBeInTheDocument();
+        expect(screen.getAllByRole("checkbox")).toHaveLength(2);
+    });
+    test("(2 pts) Editing the name and student status changes the text", async () => {
+        const switchButton = screen.getByRole("checkbox");
+        await act(async () => {
+            switchButton.click();
+        });
+        const nameBox = screen.getByRole("textbox");
+        await act(async () => {
+            userEvent.type(nameBox, "Ada Lovelace");
+        });
+        const studentBox = screen.getByRole("checkbox", { name: /student/i });
+        await act(async () => {
+            studentBox.click();
+        });
+        await act(async () => {
+            switchButton.click();
+        });
+        expect(
+            screen.getByText(/Ada Lovelace is not a student/i),
+        ).toBeInTheDocument();
+    });
+    test("(2 pts) Different name, click student box twice changes the text", async () => {
+        const switchButton = screen.getByRole("checkbox");
+        await act(async () => {
+            switchButton.click();
+        });
+        const nameBox = screen.getByRole("textbox");
+        await act(async () => {
+            userEvent.type(nameBox, "Alan Turing");
+        });
+        const studentBox = screen.getByRole("checkbox", { name: /student/i });
+        await act(async () => {
+            studentBox.click();
+        });
+        await act(async () => {
+            studentBox.click();
+        });
+        await act(async () => {
+            switchButton.click();
+        });
+        expect(
+            screen.getByText(/Alan Turing is a student/i),
+        ).toBeInTheDocument();
+    });
+});
diff --git a/src/form-components/EditMode.tsx b/src/form-components/EditMode.tsx
new file mode 100644
index 0000000000..0f9e541765
--- /dev/null
+++ b/src/form-components/EditMode.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import Form from "react-bootstrap/Form";
+
+export function EditMode(): React.JSX.Element {
+    const [editMode, setEditMode] = useState<boolean>(false);
+    const [name, setName] = useState<string>("Your Name");
+    const [isStudent, setIsStudent] = useState<boolean>(true);
+
+    function updateEditMode(event: React.ChangeEvent<HTMLInputElement>): void {
+        setEditMode(event.target.checked);
+    }
+
+    function updateName(event: React.ChangeEvent<HTMLInputElement>): void {
+        setName(event.target.value);
+    }
+
+    function updateStudentStatus(
+        event: React.ChangeEvent<HTMLInputElement>,
+    ): void {
+        setIsStudent(event.target.checked);
+    }
+
+    return (
+        <div>
+            <Form.Check
+                type="switch"
+                id="edit-mode-switch"
+                label="Edit Mode"
+                checked={editMode}
+                onChange={updateEditMode}
+            />
+            {editMode ?
+                <div>
+                    <Form.Group controlId="edit-mode-name">
+                        <Form.Label>Name</Form.Label>
+                        <Form.Control
+                            type="text"
+                            value={name}
+                            onChange={updateName}
+                        />
+                    </Form.Group>
+                    <Form.Check
+                        type="checkbox"
+                        id="edit-mode-student"
+                        label="Student"
+                        checked={isStudent}
+                        onChange={updateStudentStatus}
+                    />
+                </div>
+            :   <div>
+                    {name} is {isStudent ? "a student" : "not a student"}
+                </div>
+            }
+        </div>
+    );
+}
diff --git a/src/form-components/GiveAttempts.test.tsx b/src/form-components/GiveAttempts.test.tsx
new file mode 100644
index 0000000000..588d959708
--- /dev/null
+++ b/src/form-components/GiveAttempts.test.tsx
@@ -0,0 +1,64 @@
+import React, { act } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { GiveAttempts } from "./GiveAttempts";
+import userEvent from "@testing-library/user-event";
+
+describe("GiveAttempts Component tests", () => {
+    beforeEach(() => {
+        render(<GiveAttempts />);
+    });
+
+    test("(2 pts) There is a number entry box and two buttons", () => {
+        expect(screen.getByRole("spinbutton")).toBeInTheDocument();
+        expect(screen.getAllByRole("button")).toHaveLength(2);
+    });
+
+    test("(2 pts) There is are initially 3 attempts", () => {
+        expect(screen.getByText(/3/i)).toBeInTheDocument();
+    });
+
+    test("(2 pts) You can use attempts", async () => {
+        const use = screen.getByRole("button", { name: /use/i });
+        await act(async () => {
+            use.click();
+        });
+        expect(screen.getByText(/2/i)).toBeInTheDocument();
+        await act(async () => {
+            use.click();
+        });
+        await act(async () => {
+            use.click();
+        });
+        expect(screen.getByText(/0/i)).toBeInTheDocument();
+        expect(use).toBeDisabled();
+    });
+    test("(2 pts) You can gain arbitrary attempts", async () => {
+        const gain = screen.getByRole("button", { name: /gain/i });
+        const amountToGive = screen.getByRole("spinbutton");
+        await act(async () => {
+            userEvent.type(amountToGive, "10");
+        });
+        await act(async () => {
+            gain.click();
+        });
+        expect(screen.getByText(/13/i)).toBeInTheDocument();
+        await act(async () => {
+            userEvent.type(amountToGive, "100");
+        });
+        await act(async () => {
+            gain.click();
+        });
+        expect(screen.getByText(/113/i)).toBeInTheDocument();
+    });
+    test("(2 pts) Cannot gain blank amounts", async () => {
+        const gain = screen.getByRole("button", { name: /gain/i });
+        const amountToGive = screen.getByRole("spinbutton");
+        await act(async () => {
+            fireEvent.change(amountToGive, { target: { value: "" } });
+        });
+        await act(async () => {
+            gain.click();
+        });
+        expect(screen.getByText(/3/i)).toBeInTheDocument();
+    });
+});
diff --git a/src/form-components/GiveAttempts.tsx b/src/form-components/GiveAttempts.tsx
new file mode 100644
index 0000000000..883a72a732
--- /dev/null
+++ b/src/form-components/GiveAttempts.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { Button, Form } from "react-bootstrap";
+
+export function GiveAttempts(): React.JSX.Element {
+    const [attemptsLeft, setAttemptsLeft] = useState<number>(3);
+    const [requestedAttempts, setRequestedAttempts] = useState<string>("0");
+
+    function useAttempt(): void {
+        setAttemptsLeft(attemptsLeft - 1);
+    }
+
+    function gainAttempts(): void {
+        const parsed = parseInt(requestedAttempts);
+        if (!isNaN(parsed)) {
+            setAttemptsLeft(attemptsLeft + parsed);
+        }
+    }
+
+    function updateRequestedAttempts(
+        event: React.ChangeEvent<HTMLInputElement>,
+    ): void {
+        setRequestedAttempts(event.target.value);
+    }
+
+    return (
+        <div>
+            <Form.Group controlId="give-attempts-input">
+                <Form.Label>Give Attempts</Form.Label>
+                <Form.Control
+                    type="number"
+                    value={requestedAttempts}
+                    onChange={updateRequestedAttempts}
+                />
+            </Form.Group>
+            <div>Attempts: {attemptsLeft}</div>
+            <Button onClick={useAttempt} disabled={attemptsLeft <= 0}>
+                use
+            </Button>{" "}
+            <Button onClick={gainAttempts}>gain</Button>
+        </div>
+    );
+}
diff --git a/src/form-components/MultipleChoiceQuestion.test.tsx b/src/form-components/MultipleChoiceQuestion.test.tsx
new file mode 100644
index 0000000000..69ba4da806
--- /dev/null
+++ b/src/form-components/MultipleChoiceQuestion.test.tsx
@@ -0,0 +1,89 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { MultipleChoiceQuestion } from "./MultipleChoiceQuestion";
+import userEvent from "@testing-library/user-event";
+
+describe("MultipleChoiceQuestion Component tests", () => {
+    test("(2 pts) There is a select box", () => {
+        render(
+            <MultipleChoiceQuestion
+                expectedAnswer="2"
+                options={["1", "2", "3"]}
+            />,
+        );
+        expect(screen.getByRole("combobox")).toBeInTheDocument();
+    });
+    test("(2 pts) The answer is initially incorrect", () => {
+        render(
+            <MultipleChoiceQuestion
+                expectedAnswer="2"
+                options={["1", "2", "3"]}
+            />,
+        );
+        expect(screen.getByText(/❌/i)).toBeInTheDocument();
+        expect(screen.queryByText(/✔️/i)).not.toBeInTheDocument();
+    });
+    test("(2 pts) Can choose the correct answer", async () => {
+        render(
+            <MultipleChoiceQuestion
+                expectedAnswer="2"
+                options={["1", "2", "3"]}
+            />,
+        );
+        const select = screen.getByRole("combobox");
+        await act(async () => {
+            userEvent.selectOptions(select, "2");
+        });
+        expect(screen.getByText(/✔️/i)).toBeInTheDocument();
+        expect(screen.queryByText(/❌/i)).not.toBeInTheDocument();
+    });
+    test("(2 pts) Can choose the correct answer and then incorrect", async () => {
+        render(
+            <MultipleChoiceQuestion
+                expectedAnswer="2"
+                options={["1", "2", "3"]}
+            />,
+        );
+        const select = screen.getByRole("combobox");
+        await act(async () => {
+            userEvent.selectOptions(select, "2");
+        });
+        expect(screen.getByText(/✔️/i)).toBeInTheDocument();
+        expect(screen.queryByText(/❌/i)).not.toBeInTheDocument();
+        await act(async () => {
+            userEvent.selectOptions(select, "3");
+        });
+        expect(screen.getByText(/❌/i)).toBeInTheDocument();
+        expect(screen.queryByText(/✔️/i)).not.toBeInTheDocument();
+    });
+    test("(2 pts) Can start off initially correct", async () => {
+        render(
+            <MultipleChoiceQuestion
+                expectedAnswer="Alpha"
+                options={["Alpha", "Beta", "Gamma"]}
+            />,
+        );
+        const select = screen.getByRole("combobox");
+        await act(async () => {
+            userEvent.selectOptions(select, "Alpha");
+        });
+        expect(screen.getByText(/✔️/i)).toBeInTheDocument();
+        expect(screen.queryByText(/❌/i)).not.toBeInTheDocument();
+    });
+    test("(2 pts) One more test of choosing the right answer", async () => {
+        render(
+            <MultipleChoiceQuestion
+                expectedAnswer="World"
+                options={["Hello", "World"]}
+            />,
+        );
+        expect(screen.getByText(/❌/i)).toBeInTheDocument();
+        expect(screen.queryByText(/✔️/i)).not.toBeInTheDocument();
+        const select = screen.getByRole("combobox");
+        await act(async () => {
+            userEvent.selectOptions(select, "World");
+        });
+        expect(screen.getByText(/✔️/i)).toBeInTheDocument();
+        expect(screen.queryByText(/❌/i)).not.toBeInTheDocument();
+    });
+});
diff --git a/src/form-components/MultipleChoiceQuestion.tsx b/src/form-components/MultipleChoiceQuestion.tsx
new file mode 100644
index 0000000000..34b70da8e9
--- /dev/null
+++ b/src/form-components/MultipleChoiceQuestion.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import Form from "react-bootstrap/Form";
+
+export function MultipleChoiceQuestion({
+    options,
+    expectedAnswer,
+}: {
+    options: string[];
+    expectedAnswer: string;
+}): React.JSX.Element {
+    const [selectedChoice, setSelectedChoice] = useState<string>(options[0]);
+
+    function updateChoice(event: React.ChangeEvent<HTMLSelectElement>): void {
+        setSelectedChoice(event.target.value);
+    }
+
+    return (
+        <div>
+            <Form.Group controlId="multiple-choice-question">
+                <Form.Label>Multiple Choice Question</Form.Label>
+                <Form.Select value={selectedChoice} onChange={updateChoice}>
+                    {options.map((option: string) => (
+                        <option key={option} value={option}>
+                            {option}
+                        </option>
+                    ))}
+                </Form.Select>
+            </Form.Group>
+            <div>{selectedChoice === expectedAnswer ? "✔️" : "❌"}</div>
+        </div>
+    );
+}
diff --git a/src/functions.test.ts b/src/functions.test.ts
new file mode 100644
index 0000000000..3d921f5d64
--- /dev/null
+++ b/src/functions.test.ts
@@ -0,0 +1,59 @@
+import {
+    add3,
+    fahrenheitToCelius,
+    shout,
+    isQuestion,
+    convertYesNo,
+} from "./functions";
+
+describe("Testing the basic functions", () => {
+    test("(3 pts) Testing the fahrenheitToCelius function", () => {
+        expect(fahrenheitToCelius(32)).toBe(0);
+        expect(fahrenheitToCelius(-40)).toBe(-40);
+        expect(fahrenheitToCelius(-22)).toBe(-30);
+        expect(fahrenheitToCelius(14)).toBe(-10);
+        expect(fahrenheitToCelius(68)).toBe(20);
+        expect(fahrenheitToCelius(86)).toBe(30);
+        expect(fahrenheitToCelius(212)).toBe(100);
+    });
+
+    test("(3 pts) Testing the add3 function", () => {
+        expect(add3(1, 2, 3)).toBe(6);
+        expect(add3(9, 7, 4)).toBe(20);
+        expect(add3(6, -3, 9)).toBe(15);
+        expect(add3(10, 1, -9)).toBe(11);
+        expect(add3(-9, -100, -4)).toBe(0);
+        expect(add3(-1, -1, 1)).toBe(1);
+    });
+
+    test("(3 pts) Testing the shout function", () => {
+        expect(shout("Hello")).toBe("HELLO!");
+        expect(shout("What?")).toBe("WHAT?!");
+        expect(shout("oHo")).toBe("OHO!");
+        expect(shout("AHHHH!!!")).toBe("AHHHH!!!!");
+        expect(shout("")).toBe("!");
+        expect(shout("Please go outside")).toBe("PLEASE GO OUTSIDE!");
+    });
+
+    test("(3 pts) Testing the isQuestion function", () => {
+        expect(isQuestion("Is this a question?")).toBe(true);
+        expect(isQuestion("Who are you?")).toBe(true);
+        expect(isQuestion("WHAT ARE YOU !?")).toBe(true);
+        expect(isQuestion("WHAT IS THIS?!")).toBe(false);
+        expect(isQuestion("OH GOD!")).toBe(false);
+        expect(isQuestion("Oh nevermind, it's fine.")).toBe(false);
+        expect(isQuestion("")).toBe(false);
+    });
+
+    test("(3 pts) Testing the convertYesNo function", () => {
+        expect(convertYesNo("yes")).toBe(true);
+        expect(convertYesNo("YES")).toBe(true);
+        expect(convertYesNo("NO")).toBe(false);
+        expect(convertYesNo("no")).toBe(false);
+        expect(convertYesNo("Apple")).toBe(null);
+        expect(convertYesNo("Bananas")).toBe(null);
+        expect(convertYesNo("Nope")).toBe(null);
+        expect(convertYesNo("Yesterday")).toBe(null);
+        expect(convertYesNo("Maybe")).toBe(null);
+    });
+});
diff --git a/src/functions.ts b/src/functions.ts
new file mode 100644
index 0000000000..b88ddd22a6
--- /dev/null
+++ b/src/functions.ts
@@ -0,0 +1,52 @@
+/**
+ * Consumes a single temperature in Fahrenheit (a number) and converts to Celsius
+ * using this formula:
+ *      C = (F - 32) * 5/9
+ */
+export function fahrenheitToCelius(temperature: number): number {
+    return (temperature - 32) * (5 / 9);
+}
+
+/**
+ * Consumes three numbers and produces their sum. BUT you should only add a number
+ * if the number is greater than zero.
+ */
+export function add3(first: number, second: number, third: number): number {
+    let sum = 0;
+
+    if (first > 0) sum += first;
+    if (second > 0) sum += second;
+    if (third > 0) sum += third;
+
+    return sum;
+}
+
+/**
+ * Consumes a string and produces the same string in UPPERCASE and with an exclamation
+ * mark added to the end.
+ */
+export function shout(message: string): string {
+    return message.toUpperCase() + "!";
+}
+
+/**
+ * Consumes a string (a message) and returns a boolean if the string ends in a question
+ * mark. Do not use an `if` statement in solving this question.
+ */
+export function isQuestion(message: string): boolean {
+    return message.endsWith("?");
+}
+
+/**
+ * Consumes a word (a string) and returns either `true`, `false`, or `null`. If the string
+ * is "yes" (upper or lower case), then return `true`. If the string is "no" (again, either
+ * upper or lower case), then return `false`. Otherwise, return `null`.
+ */
+export function convertYesNo(word: string): boolean | null {
+    const lower = word.toLowerCase();
+
+    if (lower === "yes") return true;
+    if (lower === "no") return false;
+
+    return null;
+}
diff --git a/src/interfaces/answer.ts b/src/interfaces/answer.ts
new file mode 100644
index 0000000000..743ee8dff9
--- /dev/null
+++ b/src/interfaces/answer.ts
@@ -0,0 +1,13 @@
+/***
+ * A representation of a students' answer in a quizzing game
+ */
+export interface Answer {
+    /** The ID of the question being answered. */
+    questionId: number;
+    /** The text that the student entered for their answer. */
+    text: string;
+    /** Whether or not the student has submitted this answer. */
+    submitted: boolean;
+    /** Whether or not the students' answer matched the expected. */
+    correct: boolean;
+}
diff --git a/src/interfaces/question.ts b/src/interfaces/question.ts
new file mode 100644
index 0000000000..5def48f2f7
--- /dev/null
+++ b/src/interfaces/question.ts
@@ -0,0 +1,22 @@
+/** QuestionType influences how a question is asked and what kinds of answers are possible */
+export type QuestionType = "multiple_choice_question" | "short_answer_question";
+
+/** A representation of a Question in a quizzing application */
+export interface Question {
+    /** A unique identifier for the question */
+    id: number;
+    /** The human-friendly title of the question */
+    name: string;
+    /** The instructions and content of the Question */
+    body: string;
+    /** The kind of Question; influences how the user answers and what options are displayed */
+    type: QuestionType;
+    /** The possible answers for a Question (for Multiple Choice questions) */
+    options: string[];
+    /** The actually correct answer expected */
+    expected: string;
+    /** How many points this question is worth, roughly indicating its importance and difficulty */
+    points: number;
+    /** Whether or not this question is ready to display to students */
+    published: boolean;
+}
diff --git a/src/nested.test.ts b/src/nested.test.ts
new file mode 100644
index 0000000000..23ce72fbb5
--- /dev/null
+++ b/src/nested.test.ts
@@ -0,0 +1,1246 @@
+import { Question } from "./interfaces/question";
+import {
+    getPublishedQuestions,
+    getNonEmptyQuestions,
+    findQuestion,
+    removeQuestion,
+    getNames,
+    sumPoints,
+    sumPublishedPoints,
+    toCSV,
+    makeAnswers,
+    publishAll,
+    sameType,
+    addNewQuestion,
+    renameQuestionById,
+    changeQuestionTypeById,
+    editOption,
+    duplicateQuestionInArray,
+} from "./nested";
+import testQuestionData from "./data/questions.json";
+import backupQuestionData from "./data/questions.json";
+
+const {
+    BLANK_QUESTIONS,
+    SIMPLE_QUESTIONS,
+    TRIVIA_QUESTIONS,
+    EMPTY_QUESTIONS,
+    SIMPLE_QUESTIONS_2,
+}: Record<string, Question[]> =
+    // Typecast the test data that we imported to be a record matching
+    //  strings to the question list
+    testQuestionData as Record<string, Question[]>;
+
+// We have backup versions of the data to make sure all changes are immutable
+const {
+    BLANK_QUESTIONS: BACKUP_BLANK_QUESTIONS,
+    SIMPLE_QUESTIONS: BACKUP_SIMPLE_QUESTIONS,
+    TRIVIA_QUESTIONS: BACKUP_TRIVIA_QUESTIONS,
+    EMPTY_QUESTIONS: BACKUP_EMPTY_QUESTIONS,
+    SIMPLE_QUESTIONS_2: BACKUP_SIMPLE_QUESTIONS_2,
+}: Record<string, Question[]> = backupQuestionData as Record<
+    string,
+    Question[]
+>;
+
+const NEW_BLANK_QUESTION = {
+    id: 142,
+    name: "A new question",
+    body: "",
+    type: "short_answer_question",
+    options: [],
+    expected: "",
+    points: 1,
+    published: false,
+};
+
+const NEW_TRIVIA_QUESTION = {
+    id: 449,
+    name: "Colors",
+    body: "",
+    type: "multiple_choice_question",
+    options: [],
+    expected: "",
+    /*body: "The official colors of UD are Blue and ...?",
+    type: "multiple_choice_question",
+    options: ["Black, like my soul", "Blue again, we're tricky.", "#FFD200"],
+    expected: "#FFD200",*/
+    points: 1,
+    published: false,
+};
+
+////////////////////////////////////////////
+// Actual tests
+
+describe("Testing the Question[] functions", () => {
+    //////////////////////////////////
+    // getPublishedQuestions
+
+    test("Testing the getPublishedQuestions function", () => {
+        expect(getPublishedQuestions(BLANK_QUESTIONS)).toEqual([]);
+        expect(getPublishedQuestions(SIMPLE_QUESTIONS)).toEqual([
+            {
+                id: 1,
+                name: "Addition",
+                body: "What is 2+2?",
+                type: "short_answer_question",
+                options: [],
+                expected: "4",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 5,
+                name: "Colors",
+                body: "Which of these is a color?",
+                type: "multiple_choice_question",
+                options: ["red", "apple", "firetruck"],
+                expected: "red",
+                points: 1,
+                published: true,
+            },
+        ]);
+        expect(getPublishedQuestions(TRIVIA_QUESTIONS)).toEqual([]);
+        expect(getPublishedQuestions(SIMPLE_QUESTIONS_2)).toEqual(
+            BACKUP_SIMPLE_QUESTIONS_2,
+        );
+        expect(getPublishedQuestions(EMPTY_QUESTIONS)).toEqual([
+            {
+                id: 1,
+                name: "Empty 1",
+                body: "This question is not empty, right?",
+                type: "multiple_choice_question",
+                options: ["correct", "it is", "not"],
+                expected: "correct",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Empty 2",
+                body: "",
+                type: "multiple_choice_question",
+                options: ["this", "one", "is", "not", "empty", "either"],
+                expected: "one",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 3,
+                name: "Empty 3",
+                body: "This questions is not empty either!",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 4,
+                name: "Empty 4",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "Even this one is not empty",
+                points: 5,
+                published: true,
+            },
+        ]);
+    });
+
+    test("Testing the getNonEmptyQuestions functions", () => {
+        expect(getNonEmptyQuestions(BLANK_QUESTIONS)).toEqual([]);
+        expect(getNonEmptyQuestions(SIMPLE_QUESTIONS)).toEqual(
+            BACKUP_SIMPLE_QUESTIONS,
+        );
+        expect(getNonEmptyQuestions(TRIVIA_QUESTIONS)).toEqual(
+            BACKUP_TRIVIA_QUESTIONS,
+        );
+        expect(getNonEmptyQuestions(SIMPLE_QUESTIONS_2)).toEqual(
+            BACKUP_SIMPLE_QUESTIONS_2,
+        );
+        expect(getNonEmptyQuestions(EMPTY_QUESTIONS)).toEqual([
+            {
+                id: 1,
+                name: "Empty 1",
+                body: "This question is not empty, right?",
+                type: "multiple_choice_question",
+                options: ["correct", "it is", "not"],
+                expected: "correct",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Empty 2",
+                body: "",
+                type: "multiple_choice_question",
+                options: ["this", "one", "is", "not", "empty", "either"],
+                expected: "one",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 3,
+                name: "Empty 3",
+                body: "This questions is not empty either!",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 4,
+                name: "Empty 4",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "Even this one is not empty",
+                points: 5,
+                published: true,
+            },
+        ]);
+    });
+
+    test("Testing the findQuestion function", () => {
+        expect(findQuestion(BLANK_QUESTIONS, 1)).toEqual(BLANK_QUESTIONS[0]);
+        expect(findQuestion(BLANK_QUESTIONS, 47)).toEqual(BLANK_QUESTIONS[1]);
+        expect(findQuestion(BLANK_QUESTIONS, 2)).toEqual(BLANK_QUESTIONS[2]);
+        expect(findQuestion(BLANK_QUESTIONS, 3)).toEqual(null);
+        expect(findQuestion(SIMPLE_QUESTIONS, 1)).toEqual(SIMPLE_QUESTIONS[0]);
+        expect(findQuestion(SIMPLE_QUESTIONS, 2)).toEqual(SIMPLE_QUESTIONS[1]);
+        expect(findQuestion(SIMPLE_QUESTIONS, 5)).toEqual(SIMPLE_QUESTIONS[2]);
+        expect(findQuestion(SIMPLE_QUESTIONS, 9)).toEqual(SIMPLE_QUESTIONS[3]);
+        expect(findQuestion(SIMPLE_QUESTIONS, 6)).toEqual(null);
+        expect(findQuestion(SIMPLE_QUESTIONS_2, 478)).toEqual(
+            SIMPLE_QUESTIONS_2[0],
+        );
+        expect(findQuestion([], 0)).toEqual(null);
+    });
+
+    test("Testing the removeQuestion", () => {
+        expect(removeQuestion(BLANK_QUESTIONS, 1)).toEqual([
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(removeQuestion(BLANK_QUESTIONS, 47)).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(removeQuestion(BLANK_QUESTIONS, 2)).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(removeQuestion(SIMPLE_QUESTIONS, 9)).toEqual([
+            {
+                id: 1,
+                name: "Addition",
+                body: "What is 2+2?",
+                type: "short_answer_question",
+                options: [],
+                expected: "4",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Letters",
+                body: "What is the last letter of the English alphabet?",
+                type: "short_answer_question",
+                options: [],
+                expected: "Z",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 5,
+                name: "Colors",
+                body: "Which of these is a color?",
+                type: "multiple_choice_question",
+                options: ["red", "apple", "firetruck"],
+                expected: "red",
+                points: 1,
+                published: true,
+            },
+        ]);
+        expect(removeQuestion(SIMPLE_QUESTIONS, 5)).toEqual([
+            {
+                id: 1,
+                name: "Addition",
+                body: "What is 2+2?",
+                type: "short_answer_question",
+                options: [],
+                expected: "4",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Letters",
+                body: "What is the last letter of the English alphabet?",
+                type: "short_answer_question",
+                options: [],
+                expected: "Z",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 9,
+                name: "Shapes",
+                body: "What shape can you make with one line?",
+                type: "multiple_choice_question",
+                options: ["square", "triangle", "circle"],
+                expected: "circle",
+                points: 2,
+                published: false,
+            },
+        ]);
+    });
+
+    test("Testing the getNames function", () => {
+        expect(getNames(BLANK_QUESTIONS)).toEqual([
+            "Question 1",
+            "My New Question",
+            "Question 2",
+        ]);
+        expect(getNames(SIMPLE_QUESTIONS)).toEqual([
+            "Addition",
+            "Letters",
+            "Colors",
+            "Shapes",
+        ]);
+        expect(getNames(TRIVIA_QUESTIONS)).toEqual([
+            "Mascot",
+            "Motto",
+            "Goats",
+        ]);
+        expect(getNames(SIMPLE_QUESTIONS_2)).toEqual([
+            "Students",
+            "Importance",
+            "Sentience",
+            "Danger",
+            "Listening",
+        ]);
+        expect(getNames(EMPTY_QUESTIONS)).toEqual([
+            "Empty 1",
+            "Empty 2",
+            "Empty 3",
+            "Empty 4",
+            "Empty 5 (Actual)",
+        ]);
+    });
+
+    test("Testing the sumPoints function", () => {
+        expect(sumPoints(BLANK_QUESTIONS)).toEqual(3);
+        expect(sumPoints(SIMPLE_QUESTIONS)).toEqual(5);
+        expect(sumPoints(TRIVIA_QUESTIONS)).toEqual(20);
+        expect(sumPoints(EMPTY_QUESTIONS)).toEqual(25);
+        expect(sumPoints(SIMPLE_QUESTIONS_2)).toEqual(300);
+    });
+
+    test("Testing the sumPublishedPoints function", () => {
+        expect(sumPublishedPoints(BLANK_QUESTIONS)).toEqual(0);
+        expect(sumPublishedPoints(SIMPLE_QUESTIONS)).toEqual(2);
+        expect(sumPublishedPoints(TRIVIA_QUESTIONS)).toEqual(0);
+        expect(sumPublishedPoints(EMPTY_QUESTIONS)).toEqual(20);
+        expect(sumPublishedPoints(SIMPLE_QUESTIONS_2)).toEqual(300);
+    });
+
+    test("Testing the toCSV function", () => {
+        expect(toCSV(BLANK_QUESTIONS)).toEqual(`id,name,options,points,published
+1,Question 1,0,1,false
+47,My New Question,0,1,false
+2,Question 2,0,1,false`);
+        expect(toCSV(SIMPLE_QUESTIONS))
+            .toEqual(`id,name,options,points,published
+1,Addition,0,1,true
+2,Letters,0,1,false
+5,Colors,3,1,true
+9,Shapes,3,2,false`);
+        expect(toCSV(TRIVIA_QUESTIONS))
+            .toEqual(`id,name,options,points,published
+1,Mascot,3,7,false
+2,Motto,3,3,false
+3,Goats,3,10,false`);
+        expect(toCSV(EMPTY_QUESTIONS)).toEqual(`id,name,options,points,published
+1,Empty 1,3,5,true
+2,Empty 2,6,5,true
+3,Empty 3,0,5,true
+4,Empty 4,0,5,true
+5,Empty 5 (Actual),0,5,false`);
+        expect(toCSV(SIMPLE_QUESTIONS_2))
+            .toEqual(`id,name,options,points,published
+478,Students,0,53,true
+1937,Importance,0,47,true
+479,Sentience,0,40,true
+777,Danger,0,60,true
+1937,Listening,0,100,true`);
+    });
+
+    test("Testing the makeAnswers function", () => {
+        expect(makeAnswers(BLANK_QUESTIONS)).toEqual([
+            { questionId: 1, correct: false, text: "", submitted: false },
+            { questionId: 47, correct: false, text: "", submitted: false },
+            { questionId: 2, correct: false, text: "", submitted: false },
+        ]);
+        expect(makeAnswers(SIMPLE_QUESTIONS)).toEqual([
+            { questionId: 1, correct: false, text: "", submitted: false },
+            { questionId: 2, correct: false, text: "", submitted: false },
+            { questionId: 5, correct: false, text: "", submitted: false },
+            { questionId: 9, correct: false, text: "", submitted: false },
+        ]);
+        expect(makeAnswers(TRIVIA_QUESTIONS)).toEqual([
+            { questionId: 1, correct: false, text: "", submitted: false },
+            { questionId: 2, correct: false, text: "", submitted: false },
+            { questionId: 3, correct: false, text: "", submitted: false },
+        ]);
+        expect(makeAnswers(SIMPLE_QUESTIONS_2)).toEqual([
+            { questionId: 478, correct: false, text: "", submitted: false },
+            { questionId: 1937, correct: false, text: "", submitted: false },
+            { questionId: 479, correct: false, text: "", submitted: false },
+            { questionId: 777, correct: false, text: "", submitted: false },
+            { questionId: 1937, correct: false, text: "", submitted: false },
+        ]);
+        expect(makeAnswers(EMPTY_QUESTIONS)).toEqual([
+            { questionId: 1, correct: false, text: "", submitted: false },
+            { questionId: 2, correct: false, text: "", submitted: false },
+            { questionId: 3, correct: false, text: "", submitted: false },
+            { questionId: 4, correct: false, text: "", submitted: false },
+            { questionId: 5, correct: false, text: "", submitted: false },
+        ]);
+    });
+
+    test("Testing the publishAll function", () => {
+        expect(publishAll(BLANK_QUESTIONS)).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: true,
+            },
+        ]);
+        expect(publishAll(SIMPLE_QUESTIONS)).toEqual([
+            {
+                id: 1,
+                name: "Addition",
+                body: "What is 2+2?",
+                type: "short_answer_question",
+                options: [],
+                expected: "4",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Letters",
+                body: "What is the last letter of the English alphabet?",
+                type: "short_answer_question",
+                options: [],
+                expected: "Z",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 5,
+                name: "Colors",
+                body: "Which of these is a color?",
+                type: "multiple_choice_question",
+                options: ["red", "apple", "firetruck"],
+                expected: "red",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 9,
+                name: "Shapes",
+                body: "What shape can you make with one line?",
+                type: "multiple_choice_question",
+                options: ["square", "triangle", "circle"],
+                expected: "circle",
+                points: 2,
+                published: true,
+            },
+        ]);
+        expect(publishAll(TRIVIA_QUESTIONS)).toEqual([
+            {
+                id: 1,
+                name: "Mascot",
+                body: "What is the name of the UD Mascot?",
+                type: "multiple_choice_question",
+                options: ["Bluey", "YoUDee", "Charles the Wonder Dog"],
+                expected: "YoUDee",
+                points: 7,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Motto",
+                body: "What is the University of Delaware's motto?",
+                type: "multiple_choice_question",
+                options: [
+                    "Knowledge is the light of the mind",
+                    "Just U Do it",
+                    "Nothing, what's the motto with you?",
+                ],
+                expected: "Knowledge is the light of the mind",
+                points: 3,
+                published: true,
+            },
+            {
+                id: 3,
+                name: "Goats",
+                body: "How many goats are there usually on the Green?",
+                type: "multiple_choice_question",
+                options: [
+                    "Zero, why would there be goats on the green?",
+                    "18420",
+                    "Two",
+                ],
+                expected: "Two",
+                points: 10,
+                published: true,
+            },
+        ]);
+        expect(publishAll(EMPTY_QUESTIONS)).toEqual([
+            {
+                id: 1,
+                name: "Empty 1",
+                body: "This question is not empty, right?",
+                type: "multiple_choice_question",
+                options: ["correct", "it is", "not"],
+                expected: "correct",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Empty 2",
+                body: "",
+                type: "multiple_choice_question",
+                options: ["this", "one", "is", "not", "empty", "either"],
+                expected: "one",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 3,
+                name: "Empty 3",
+                body: "This questions is not empty either!",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 4,
+                name: "Empty 4",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "Even this one is not empty",
+                points: 5,
+                published: true,
+            },
+            {
+                id: 5,
+                name: "Empty 5 (Actual)",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 5,
+                published: true,
+            },
+        ]);
+        expect(publishAll(SIMPLE_QUESTIONS_2)).toEqual(SIMPLE_QUESTIONS_2);
+    });
+
+    test("Testing the sameType function", () => {
+        expect(sameType([])).toEqual(true);
+        expect(sameType(BLANK_QUESTIONS)).toEqual(false);
+        expect(sameType(SIMPLE_QUESTIONS)).toEqual(false);
+        expect(sameType(TRIVIA_QUESTIONS)).toEqual(true);
+        expect(sameType(EMPTY_QUESTIONS)).toEqual(false);
+        expect(sameType(SIMPLE_QUESTIONS_2)).toEqual(true);
+    });
+
+    test("Testing the addNewQuestion function", () => {
+        expect(
+            addNewQuestion([], 142, "A new question", "short_answer_question"),
+        ).toEqual([NEW_BLANK_QUESTION]);
+        expect(
+            addNewQuestion(
+                BLANK_QUESTIONS,
+                142,
+                "A new question",
+                "short_answer_question",
+            ),
+        ).toEqual([...BLANK_QUESTIONS, NEW_BLANK_QUESTION]);
+        expect(
+            addNewQuestion(
+                TRIVIA_QUESTIONS,
+                449,
+                "Colors",
+                "multiple_choice_question",
+            ),
+        ).toEqual([...TRIVIA_QUESTIONS, NEW_TRIVIA_QUESTION]);
+    });
+
+    test("Testing the renameQuestionById function", () => {
+        expect(renameQuestionById(BLANK_QUESTIONS, 1, "New Name")).toEqual([
+            {
+                id: 1,
+                name: "New Name",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(renameQuestionById(BLANK_QUESTIONS, 47, "Another Name")).toEqual(
+            [
+                {
+                    id: 1,
+                    name: "Question 1",
+                    body: "",
+                    type: "multiple_choice_question",
+                    options: [],
+                    expected: "",
+                    points: 1,
+                    published: false,
+                },
+                {
+                    id: 47,
+                    name: "Another Name",
+                    body: "",
+                    type: "multiple_choice_question",
+                    options: [],
+                    expected: "",
+                    points: 1,
+                    published: false,
+                },
+                {
+                    id: 2,
+                    name: "Question 2",
+                    body: "",
+                    type: "short_answer_question",
+                    options: [],
+                    expected: "",
+                    points: 1,
+                    published: false,
+                },
+            ],
+        );
+        expect(renameQuestionById(SIMPLE_QUESTIONS, 5, "Colours")).toEqual([
+            {
+                id: 1,
+                name: "Addition",
+                body: "What is 2+2?",
+                type: "short_answer_question",
+                options: [],
+                expected: "4",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Letters",
+                body: "What is the last letter of the English alphabet?",
+                type: "short_answer_question",
+                options: [],
+                expected: "Z",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 5,
+                name: "Colours",
+                body: "Which of these is a color?",
+                type: "multiple_choice_question",
+                options: ["red", "apple", "firetruck"],
+                expected: "red",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 9,
+                name: "Shapes",
+                body: "What shape can you make with one line?",
+                type: "multiple_choice_question",
+                options: ["square", "triangle", "circle"],
+                expected: "circle",
+                points: 2,
+                published: false,
+            },
+        ]);
+    });
+
+    test("Test the changeQuestionTypeById function", () => {
+        expect(
+            changeQuestionTypeById(
+                BLANK_QUESTIONS,
+                1,
+                "multiple_choice_question",
+            ),
+        ).toEqual(BLANK_QUESTIONS);
+        expect(
+            changeQuestionTypeById(BLANK_QUESTIONS, 1, "short_answer_question"),
+        ).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(
+            changeQuestionTypeById(
+                BLANK_QUESTIONS,
+                47,
+                "short_answer_question",
+            ),
+        ).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(
+            changeQuestionTypeById(
+                TRIVIA_QUESTIONS,
+                3,
+                "short_answer_question",
+            ),
+        ).toEqual([
+            {
+                id: 1,
+                name: "Mascot",
+                body: "What is the name of the UD Mascot?",
+                type: "multiple_choice_question",
+                options: ["Bluey", "YoUDee", "Charles the Wonder Dog"],
+                expected: "YoUDee",
+                points: 7,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Motto",
+                body: "What is the University of Delaware's motto?",
+                type: "multiple_choice_question",
+                options: [
+                    "Knowledge is the light of the mind",
+                    "Just U Do it",
+                    "Nothing, what's the motto with you?",
+                ],
+                expected: "Knowledge is the light of the mind",
+                points: 3,
+                published: false,
+            },
+            {
+                id: 3,
+                name: "Goats",
+                body: "How many goats are there usually on the Green?",
+                type: "short_answer_question",
+                options: [],
+                expected: "Two",
+                points: 10,
+                published: false,
+            },
+        ]);
+    });
+
+    test("Testing the addEditQuestionOption function", () => {
+        expect(editOption(BLANK_QUESTIONS, 1, -1, "NEW OPTION")).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: ["NEW OPTION"],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(editOption(BLANK_QUESTIONS, 47, -1, "Another option")).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: ["Another option"],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(editOption(SIMPLE_QUESTIONS, 5, -1, "newspaper")).toEqual([
+            {
+                id: 1,
+                name: "Addition",
+                body: "What is 2+2?",
+                type: "short_answer_question",
+                options: [],
+                expected: "4",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Letters",
+                body: "What is the last letter of the English alphabet?",
+                type: "short_answer_question",
+                options: [],
+                expected: "Z",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 5,
+                name: "Colors",
+                body: "Which of these is a color?",
+                type: "multiple_choice_question",
+                options: ["red", "apple", "firetruck", "newspaper"],
+                expected: "red",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 9,
+                name: "Shapes",
+                body: "What shape can you make with one line?",
+                type: "multiple_choice_question",
+                options: ["square", "triangle", "circle"],
+                expected: "circle",
+                points: 2,
+                published: false,
+            },
+        ]);
+        expect(editOption(SIMPLE_QUESTIONS, 5, 0, "newspaper")).toEqual([
+            {
+                id: 1,
+                name: "Addition",
+                body: "What is 2+2?",
+                type: "short_answer_question",
+                options: [],
+                expected: "4",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Letters",
+                body: "What is the last letter of the English alphabet?",
+                type: "short_answer_question",
+                options: [],
+                expected: "Z",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 5,
+                name: "Colors",
+                body: "Which of these is a color?",
+                type: "multiple_choice_question",
+                options: ["newspaper", "apple", "firetruck"],
+                expected: "red",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 9,
+                name: "Shapes",
+                body: "What shape can you make with one line?",
+                type: "multiple_choice_question",
+                options: ["square", "triangle", "circle"],
+                expected: "circle",
+                points: 2,
+                published: false,
+            },
+        ]);
+
+        expect(editOption(SIMPLE_QUESTIONS, 5, 2, "newspaper")).toEqual([
+            {
+                id: 1,
+                name: "Addition",
+                body: "What is 2+2?",
+                type: "short_answer_question",
+                options: [],
+                expected: "4",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 2,
+                name: "Letters",
+                body: "What is the last letter of the English alphabet?",
+                type: "short_answer_question",
+                options: [],
+                expected: "Z",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 5,
+                name: "Colors",
+                body: "Which of these is a color?",
+                type: "multiple_choice_question",
+                options: ["red", "apple", "newspaper"],
+                expected: "red",
+                points: 1,
+                published: true,
+            },
+            {
+                id: 9,
+                name: "Shapes",
+                body: "What shape can you make with one line?",
+                type: "multiple_choice_question",
+                options: ["square", "triangle", "circle"],
+                expected: "circle",
+                points: 2,
+                published: false,
+            },
+        ]);
+    });
+
+    test("Testing the duplicateQuestionInArray function", () => {
+        expect(duplicateQuestionInArray(BLANK_QUESTIONS, 1, 27)).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 27,
+                name: "Copy of Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(duplicateQuestionInArray(BLANK_QUESTIONS, 47, 19)).toEqual([
+            {
+                id: 1,
+                name: "Question 1",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 47,
+                name: "My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 19,
+                name: "Copy of My New Question",
+                body: "",
+                type: "multiple_choice_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Question 2",
+                body: "",
+                type: "short_answer_question",
+                options: [],
+                expected: "",
+                points: 1,
+                published: false,
+            },
+        ]);
+        expect(duplicateQuestionInArray(TRIVIA_QUESTIONS, 3, 111)).toEqual([
+            {
+                id: 1,
+                name: "Mascot",
+                body: "What is the name of the UD Mascot?",
+                type: "multiple_choice_question",
+                options: ["Bluey", "YoUDee", "Charles the Wonder Dog"],
+                expected: "YoUDee",
+                points: 7,
+                published: false,
+            },
+            {
+                id: 2,
+                name: "Motto",
+                body: "What is the University of Delaware's motto?",
+                type: "multiple_choice_question",
+                options: [
+                    "Knowledge is the light of the mind",
+                    "Just U Do it",
+                    "Nothing, what's the motto with you?",
+                ],
+                expected: "Knowledge is the light of the mind",
+                points: 3,
+                published: false,
+            },
+            {
+                id: 3,
+                name: "Goats",
+                body: "How many goats are there usually on the Green?",
+                type: "multiple_choice_question",
+                options: [
+                    "Zero, why would there be goats on the green?",
+                    "18420",
+                    "Two",
+                ],
+                expected: "Two",
+                points: 10,
+                published: false,
+            },
+            {
+                id: 111,
+                name: "Copy of Goats",
+                body: "How many goats are there usually on the Green?",
+                type: "multiple_choice_question",
+                options: [
+                    "Zero, why would there be goats on the green?",
+                    "18420",
+                    "Two",
+                ],
+                expected: "Two",
+                points: 10,
+                published: false,
+            },
+        ]);
+    });
+
+    afterEach(() => {
+        expect(BLANK_QUESTIONS).toEqual(BACKUP_BLANK_QUESTIONS);
+        expect(SIMPLE_QUESTIONS).toEqual(BACKUP_SIMPLE_QUESTIONS);
+        expect(TRIVIA_QUESTIONS).toEqual(BACKUP_TRIVIA_QUESTIONS);
+        expect(SIMPLE_QUESTIONS_2).toEqual(BACKUP_SIMPLE_QUESTIONS_2);
+        expect(EMPTY_QUESTIONS).toEqual(BACKUP_EMPTY_QUESTIONS);
+    });
+});
diff --git a/src/nested.ts b/src/nested.ts
new file mode 100644
index 0000000000..2feb1fa0a2
--- /dev/null
+++ b/src/nested.ts
@@ -0,0 +1,215 @@
+import { Answer } from "./interfaces/answer";
+import { Question, QuestionType } from "./interfaces/question";
+import { makeBlankQuestion, duplicateQuestion } from "./objects";
+
+/**
+ * Consumes an array of questions and returns a new array with only the questions
+ * that are `published`.
+ */
+export function getPublishedQuestions(questions: Question[]): Question[] {
+    return questions.filter((q: Question) => q.published);
+}
+
+/**
+ * Consumes an array of questions and returns a new array of only the questions that are
+ * considered "non-empty". An empty question has an empty string for its `body` and
+ * `expected`, and an empty array for its `options`.
+ */
+export function getNonEmptyQuestions(questions: Question[]): Question[] {
+    return questions.filter(
+        (q: Question) =>
+            !(q.body === "" && q.expected === "" && q.options.length === 0),
+    );
+}
+
+/***
+ * Consumes an array of questions and returns the question with the given `id`. If the
+ * question is not found, return `null` instead.
+ */
+export function findQuestion(
+    questions: Question[],
+    id: number,
+): Question | null {
+    return questions.find((q: Question) => q.id === id) ?? null;
+}
+
+/**
+ * Consumes an array of questions and returns a new array that does not contain the question
+ * with the given `id`.
+ */
+export function removeQuestion(questions: Question[], id: number): Question[] {
+    return questions.filter((q: Question) => q.id !== id);
+}
+
+/***
+ * Consumes an array of questions and produces a new array containing just the names of the
+ * questions, as an array.
+ */
+export function getNames(questions: Question[]): string[] {
+    return questions.map((q: Question) => q.name);
+}
+
+/***
+ * Consumes an array of questions and returns the sum total of all their points added together.
+ */
+export function sumPoints(questions: Question[]): number {
+    return questions.reduce((sum: number, q: Question) => sum + q.points, 0);
+}
+
+/***
+ * Consumes an array of questions and returns the sum total of the PUBLISHED questions.
+ */
+export function sumPublishedPoints(questions: Question[]): number {
+    return questions.reduce(
+        (sum: number, q: Question) => sum + (q.published ? q.points : 0),
+        0,
+    );
+}
+
+/***
+ * Consumes an array of questions, and produces a Comma-Separated Value (CSV) string representation.
+ */
+export function toCSV(questions: Question[]): string {
+    const header = "id,name,options,points,published";
+    const lines = questions.map(
+        (q: Question) =>
+            `${q.id},${q.name},${q.options.length},${q.points},${q.published}`,
+    );
+    return [header, ...lines].join("\n");
+}
+
+/**
+ * Consumes an array of Questions and produces a corresponding array of
+ * Answers.
+ */
+export function makeAnswers(questions: Question[]): Answer[] {
+    return questions.map(
+        (q: Question): Answer => ({
+            questionId: q.id,
+            text: "",
+            submitted: false,
+            correct: false,
+        }),
+    );
+}
+
+/***
+ * Consumes an array of Questions and produces a new array of questions, where
+ * each question is now published, regardless of its previous published status.
+ */
+export function publishAll(questions: Question[]): Question[] {
+    return questions.map(
+        (q: Question): Question => ({ ...q, published: true }),
+    );
+}
+
+/***
+ * Consumes an array of Questions and produces whether or not all the questions
+ * are the same type.
+ */
+export function sameType(questions: Question[]): boolean {
+    if (questions.length <= 1) {
+        return true;
+    }
+    const firstType = questions[0].type;
+    return questions.every((q: Question) => q.type === firstType);
+}
+
+/***
+ * Consumes an array of Questions and produces a new array of the same Questions,
+ * except that a blank question has been added onto the end.
+ */
+export function addNewQuestion(
+    questions: Question[],
+    id: number,
+    name: string,
+    type: QuestionType,
+): Question[] {
+    return [...questions, makeBlankQuestion(id, name, type)];
+}
+
+/***
+ * Consumes an array of Questions and produces a new array of Questions, where all
+ * the Questions are the same EXCEPT for the one with the given `targetId`.
+ */
+export function renameQuestionById(
+    questions: Question[],
+    targetId: number,
+    newName: string,
+): Question[] {
+    return questions.map(
+        (q: Question): Question =>
+            q.id === targetId ? { ...q, name: newName } : q,
+    );
+}
+
+/***
+ * Change a question's type; if not multiple choice, clear options.
+ */
+export function changeQuestionTypeById(
+    questions: Question[],
+    targetId: number,
+    newQuestionType: QuestionType,
+): Question[] {
+    return questions.map((q: Question): Question => {
+        if (q.id !== targetId) {
+            return q;
+        }
+        const next: Question = { ...q, type: newQuestionType };
+        if (newQuestionType !== "multiple_choice_question") {
+            return { ...next, options: [] };
+        }
+        // keep existing options if it stays multiple choice
+        return next;
+    });
+}
+
+/**
+ * Edit/add an option for a specific question by id.
+ */
+export function editOption(
+    questions: Question[],
+    targetId: number,
+    targetOptionIndex: number,
+    newOption: string,
+): Question[] {
+    return questions.map((q: Question): Question => {
+        if (q.id !== targetId) {
+            return q;
+        }
+        const oldOptions = q.options;
+
+        // Add to end
+        if (targetOptionIndex === -1) {
+            return { ...q, options: [...oldOptions, newOption] };
+        }
+
+        // Replace at index (if index is in range)
+        const newOptions = oldOptions.map((opt: string, i: number) =>
+            i === targetOptionIndex ? newOption : opt,
+        );
+        return { ...q, options: newOptions };
+    });
+}
+
+/***
+ * Duplicate question with targetId and insert duplicate directly after it.
+ */
+export function duplicateQuestionInArray(
+    questions: Question[],
+    targetId: number,
+    newId: number,
+): Question[] {
+    const index = questions.findIndex((q: Question) => q.id === targetId);
+    if (index === -1) {
+        return [...questions];
+    }
+    const original = questions[index];
+    const copy = duplicateQuestion(newId, original);
+
+    return [
+        ...questions.slice(0, index + 1),
+        copy,
+        ...questions.slice(index + 1),
+    ];
+}
diff --git a/src/objects.test.ts b/src/objects.test.ts
new file mode 100644
index 0000000000..3258412e56
--- /dev/null
+++ b/src/objects.test.ts
@@ -0,0 +1,299 @@
+import { Question } from "./interfaces/question";
+import {
+    makeBlankQuestion,
+    isCorrect,
+    isValid,
+    toShortForm,
+    toMarkdown,
+    duplicateQuestion,
+    renameQuestion,
+    publishQuestion,
+    addOption,
+    mergeQuestion,
+} from "./objects";
+import testQuestionData from "./data/questions.json";
+import backupQuestionData from "./data/questions.json";
+
+////////////////////////////////////////////
+// Setting up the test data
+
+const { BLANK_QUESTIONS, SIMPLE_QUESTIONS }: Record<string, Question[]> =
+    // Typecast the test data that we imported to be a record matching
+    //  strings to the question list
+    testQuestionData as Record<string, Question[]>;
+
+// We have backup versions of the data to make sure all changes are immutable
+const {
+    BLANK_QUESTIONS: BACKUP_BLANK_QUESTIONS,
+    SIMPLE_QUESTIONS: BACKUP_SIMPLE_QUESTIONS,
+}: Record<string, Question[]> = backupQuestionData as Record<
+    string,
+    Question[]
+>;
+
+// Unpack the list of simple questions into convenient constants
+const [ADDITION_QUESTION, LETTER_QUESTION, COLOR_QUESTION, SHAPE_QUESTION] =
+    SIMPLE_QUESTIONS;
+const [
+    BACKUP_ADDITION_QUESTION,
+    BACKUP_LETTER_QUESTION,
+    BACKUP_COLOR_QUESTION,
+    BACKUP_SHAPE_QUESTION,
+] = BACKUP_SIMPLE_QUESTIONS;
+
+////////////////////////////////////////////
+// Actual tests
+
+describe("Testing the object functions", () => {
+    //////////////////////////////////
+    // makeBlankQuestion
+
+    test("Testing the makeBlankQuestion function", () => {
+        expect(
+            makeBlankQuestion(1, "Question 1", "multiple_choice_question"),
+        ).toEqual(BLANK_QUESTIONS[0]);
+        expect(
+            makeBlankQuestion(
+                47,
+                "My New Question",
+                "multiple_choice_question",
+            ),
+        ).toEqual(BLANK_QUESTIONS[1]);
+        expect(
+            makeBlankQuestion(2, "Question 2", "short_answer_question"),
+        ).toEqual(BLANK_QUESTIONS[2]);
+    });
+
+    ///////////////////////////////////
+    // isCorrect
+    test("Testing the isCorrect function", () => {
+        expect(isCorrect(ADDITION_QUESTION, "4")).toEqual(true);
+        expect(isCorrect(ADDITION_QUESTION, "2")).toEqual(false);
+        expect(isCorrect(ADDITION_QUESTION, " 4\n")).toEqual(true);
+        expect(isCorrect(LETTER_QUESTION, "Z")).toEqual(true);
+        expect(isCorrect(LETTER_QUESTION, "z")).toEqual(true);
+        expect(isCorrect(LETTER_QUESTION, "4")).toEqual(false);
+        expect(isCorrect(LETTER_QUESTION, "0")).toEqual(false);
+        expect(isCorrect(LETTER_QUESTION, "zed")).toEqual(false);
+        expect(isCorrect(COLOR_QUESTION, "red")).toEqual(true);
+        expect(isCorrect(COLOR_QUESTION, "apple")).toEqual(false);
+        expect(isCorrect(COLOR_QUESTION, "firetruck")).toEqual(false);
+        expect(isCorrect(SHAPE_QUESTION, "square")).toEqual(false);
+        expect(isCorrect(SHAPE_QUESTION, "triangle")).toEqual(false);
+        expect(isCorrect(SHAPE_QUESTION, "circle")).toEqual(true);
+    });
+
+    ///////////////////////////////////
+    // isValid
+    test("Testing the isValid function", () => {
+        expect(isValid(ADDITION_QUESTION, "4")).toEqual(true);
+        expect(isValid(ADDITION_QUESTION, "2")).toEqual(true);
+        expect(isValid(ADDITION_QUESTION, " 4\n")).toEqual(true);
+        expect(isValid(LETTER_QUESTION, "Z")).toEqual(true);
+        expect(isValid(LETTER_QUESTION, "z")).toEqual(true);
+        expect(isValid(LETTER_QUESTION, "4")).toEqual(true);
+        expect(isValid(LETTER_QUESTION, "0")).toEqual(true);
+        expect(isValid(LETTER_QUESTION, "zed")).toEqual(true);
+        expect(isValid(COLOR_QUESTION, "red")).toEqual(true);
+        expect(isValid(COLOR_QUESTION, "apple")).toEqual(true);
+        expect(isValid(COLOR_QUESTION, "firetruck")).toEqual(true);
+        expect(isValid(COLOR_QUESTION, "RED")).toEqual(false);
+        expect(isValid(COLOR_QUESTION, "orange")).toEqual(false);
+        expect(isValid(SHAPE_QUESTION, "square")).toEqual(true);
+        expect(isValid(SHAPE_QUESTION, "triangle")).toEqual(true);
+        expect(isValid(SHAPE_QUESTION, "circle")).toEqual(true);
+        expect(isValid(SHAPE_QUESTION, "circle ")).toEqual(false);
+        expect(isValid(SHAPE_QUESTION, "rhombus")).toEqual(false);
+    });
+
+    ///////////////////////////////////
+    // toShortForm
+    test("Testing the toShortForm function", () => {
+        expect(toShortForm(ADDITION_QUESTION)).toEqual("1: Addition");
+        expect(toShortForm(LETTER_QUESTION)).toEqual("2: Letters");
+        expect(toShortForm(COLOR_QUESTION)).toEqual("5: Colors");
+        expect(toShortForm(SHAPE_QUESTION)).toEqual("9: Shapes");
+        expect(toShortForm(BLANK_QUESTIONS[1])).toEqual("47: My New Que");
+    });
+
+    ///////////////////////////////////
+    // toMarkdown
+    test("Testing the toMarkdown function", () => {
+        expect(toMarkdown(ADDITION_QUESTION)).toEqual(`# Addition
+What is 2+2?`);
+        expect(toMarkdown(LETTER_QUESTION)).toEqual(`# Letters
+What is the last letter of the English alphabet?`);
+        expect(toMarkdown(COLOR_QUESTION)).toEqual(`# Colors
+Which of these is a color?
+- red
+- apple
+- firetruck`);
+        expect(toMarkdown(SHAPE_QUESTION)).toEqual(`# Shapes
+What shape can you make with one line?
+- square
+- triangle
+- circle`);
+    });
+
+    afterEach(() => {
+        expect(ADDITION_QUESTION).toEqual(BACKUP_ADDITION_QUESTION);
+        expect(LETTER_QUESTION).toEqual(BACKUP_LETTER_QUESTION);
+        expect(SHAPE_QUESTION).toEqual(BACKUP_SHAPE_QUESTION);
+        expect(COLOR_QUESTION).toEqual(BACKUP_COLOR_QUESTION);
+        expect(BLANK_QUESTIONS).toEqual(BACKUP_BLANK_QUESTIONS);
+    });
+
+    ///////////////////////////////////
+    // renameQuestion
+    test("Testing the renameQuestion function", () => {
+        expect(
+            renameQuestion(ADDITION_QUESTION, "My Addition Question"),
+        ).toEqual({
+            id: 1,
+            name: "My Addition Question",
+            body: "What is 2+2?",
+            type: "short_answer_question",
+            options: [],
+            expected: "4",
+            points: 1,
+            published: true,
+        });
+        expect(
+            renameQuestion(SHAPE_QUESTION, "I COMPLETELY CHANGED THIS NAME"),
+        ).toEqual({
+            id: 9,
+            name: "I COMPLETELY CHANGED THIS NAME",
+            body: "What shape can you make with one line?",
+            type: "multiple_choice_question",
+            options: ["square", "triangle", "circle"],
+            expected: "circle",
+            points: 2,
+            published: false,
+        });
+    });
+
+    ///////////////////////////////////
+    // publishQuestion
+    test("Testing the publishQuestion function", () => {
+        expect(publishQuestion(ADDITION_QUESTION)).toEqual({
+            id: 1,
+            name: "Addition",
+            body: "What is 2+2?",
+            type: "short_answer_question",
+            options: [],
+            expected: "4",
+            points: 1,
+            published: false,
+        });
+        expect(publishQuestion(LETTER_QUESTION)).toEqual({
+            id: 2,
+            name: "Letters",
+            body: "What is the last letter of the English alphabet?",
+            type: "short_answer_question",
+            options: [],
+            expected: "Z",
+            points: 1,
+            published: true,
+        });
+        expect(publishQuestion(publishQuestion(ADDITION_QUESTION))).toEqual({
+            id: 1,
+            name: "Addition",
+            body: "What is 2+2?",
+            type: "short_answer_question",
+            options: [],
+            expected: "4",
+            points: 1,
+            published: true,
+        });
+    });
+
+    ///////////////////////////////////
+    // duplicateQuestion
+    test("Testing the duplicateQuestion function", () => {
+        expect(duplicateQuestion(9, ADDITION_QUESTION)).toEqual({
+            id: 9,
+            name: "Copy of Addition",
+            body: "What is 2+2?",
+            type: "short_answer_question",
+            options: [],
+            expected: "4",
+            points: 1,
+            published: false,
+        });
+        expect(duplicateQuestion(55, LETTER_QUESTION)).toEqual({
+            id: 55,
+            name: "Copy of Letters",
+            body: "What is the last letter of the English alphabet?",
+            type: "short_answer_question",
+            options: [],
+            expected: "Z",
+            points: 1,
+            published: false,
+        });
+    });
+
+    ///////////////////////////////////
+    // addOption
+    test("Testing the addOption function", () => {
+        expect(addOption(SHAPE_QUESTION, "heptagon")).toEqual({
+            id: 9,
+            name: "Shapes",
+            body: "What shape can you make with one line?",
+            type: "multiple_choice_question",
+            options: ["square", "triangle", "circle", "heptagon"],
+            expected: "circle",
+            points: 2,
+            published: false,
+        });
+        expect(addOption(COLOR_QUESTION, "squiggles")).toEqual({
+            id: 5,
+            name: "Colors",
+            body: "Which of these is a color?",
+            type: "multiple_choice_question",
+            options: ["red", "apple", "firetruck", "squiggles"],
+            expected: "red",
+            points: 1,
+            published: true,
+        });
+    });
+
+    ///////////////////////////////////
+    // mergeQuestion
+    test("Testing the mergeQuestion function", () => {
+        expect(
+            mergeQuestion(
+                192,
+                "More Points Addition",
+                ADDITION_QUESTION,
+                SHAPE_QUESTION,
+            ),
+        ).toEqual({
+            id: 192,
+            name: "More Points Addition",
+            body: "What is 2+2?",
+            type: "short_answer_question",
+            options: [],
+            expected: "4",
+            points: 2,
+            published: false,
+        });
+
+        expect(
+            mergeQuestion(
+                99,
+                "Less Points Shape",
+                SHAPE_QUESTION,
+                ADDITION_QUESTION,
+            ),
+        ).toEqual({
+            id: 99,
+            name: "Less Points Shape",
+            body: "What shape can you make with one line?",
+            type: "multiple_choice_question",
+            options: ["square", "triangle", "circle"],
+            expected: "circle",
+            points: 1,
+            published: false,
+        });
+    });
+});
diff --git a/src/objects.ts b/src/objects.ts
new file mode 100644
index 0000000000..821679f48d
--- /dev/null
+++ b/src/objects.ts
@@ -0,0 +1,135 @@
+import { Question, QuestionType } from "./interfaces/question";
+
+/**
+ * Create a new blank question with the given `id`, `name`, and `type. The `body` and
+ * `expected` should be empty strings, the `options` should be an empty list, the `points`
+ * should default to 1, and `published` should default to false.
+ */
+export function makeBlankQuestion(
+    id: number,
+    name: string,
+    type: QuestionType,
+): Question {
+    return {
+        id,
+        name,
+        type,
+        body: "",
+        expected: "",
+        options: [],
+        points: 1,
+        published: false,
+    };
+}
+
+/**
+ * Consumes a question and a potential `answer`, and returns whether or not
+ * the `answer` is correct. You should check that the `answer` is equal to
+ * the `expected`, ignoring capitalization and trimming any whitespace.
+ *
+ * HINT: Look up the `trim` and `toLowerCase` functions.
+ */
+export function isCorrect(question: Question, answer: string): boolean {
+    return (
+        answer.trim().toLowerCase() === question.expected.trim().toLowerCase()
+    );
+}
+
+/**
+ * Consumes a question and a potential `answer`, and returns whether or not
+ * the `answer` is valid (but not necessarily correct). For a `short_answer_question`,
+ * any answer is valid. But for a `multiple_choice_question`, the `answer` must
+ * be exactly one of the options.
+ */
+export function isValid(question: Question, answer: string): boolean {
+    if (question.type === "short_answer_question") {
+        return true;
+    }
+    // multiple choice: must match one option exactly
+    return question.options.includes(answer);
+}
+
+/**
+ * Consumes a question and produces a string representation combining the
+ * `id` and first 10 characters of the `name`. The two strings should be
+ * separated by ": ". So for example, the question with id 9 and the
+ * name "My First Question" would become "9: My First Q".
+ */
+export function toShortForm(question: Question): string {
+    return `${question.id}: ${question.name.slice(0, 10)}`;
+}
+
+/**
+ * Consumes a question and returns a formatted string representation as follows:
+ *  - The first line should be a hash sign, a space, and then the `name`
+ *  - The second line should be the `body`
+ *  - If the question is a `multiple_choice_question`, then the following lines
+ *      need to show each option on its line, preceded by a dash and space.
+ */
+export function toMarkdown(question: Question): string {
+    const lines: string[] = [`# ${question.name}`, question.body];
+
+    if (question.type === "multiple_choice_question") {
+        lines.push(...question.options.map((opt: string) => `- ${opt}`));
+    }
+
+    return lines.join("\n");
+}
+
+/**
+ * Return a new version of the given question, except the name should now be
+ * `newName`.
+ */
+export function renameQuestion(question: Question, newName: string): Question {
+    return { ...question, name: newName };
+}
+
+/**
+ * Return a new version of the given question, except the `published` field
+ * should be inverted.
+ */
+export function publishQuestion(question: Question): Question {
+    return { ...question, published: !question.published };
+}
+
+/**
+ * Create a new question based on the old question...
+ */
+export function duplicateQuestion(id: number, oldQuestion: Question): Question {
+    return {
+        ...oldQuestion,
+        id,
+        name: `Copy of ${oldQuestion.name}`,
+        options: [...oldQuestion.options],
+        published: false,
+    };
+}
+
+/**
+ * Return a new version of the given question, with the `newOption` added to
+ * the list of existing `options`.
+ */
+export function addOption(question: Question, newOption: string): Question {
+    return { ...question, options: [...question.options, newOption] };
+}
+
+/**
+ * Consumes an id, name, and two questions, and produces a new question.
+ */
+export function mergeQuestion(
+    id: number,
+    name: string,
+    contentQuestion: Question,
+    { points }: { points: number },
+): Question {
+    return {
+        id,
+        name,
+        body: contentQuestion.body,
+        type: contentQuestion.type,
+        options: [...contentQuestion.options],
+        expected: contentQuestion.expected,
+        points,
+        published: false,
+    };
+}