diff --git a/1-slides.html b/1-slides.html
index 156e360..cabd775 100644
--- a/1-slides.html
+++ b/1-slides.html
@@ -10,10 +10,6 @@
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css" integrity="sha512-ITH3NSfntO7uI5n+BnxGNXpzDUoOsmAXuG37UDONLxNYIdc0EBBOOQ1xyc+t9ag9ETSuBXFApx+Rod0uURfDYw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/night.min.css" integrity="sha512-bfCyfT+5Js2CKjpiF7yCtTcNlNTtcdAIHV8DfGLCQuTfTEHTU9uEvhQ/Ty4zv3IRtkFQu8DKeM2MHGka+K/cxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 		
-
-		<!-- Interactive code samples via Klipse -->
-		<!-- <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css"> -->
-
 		<!-- Theme used for syntax highlighted code -->
 		<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/night-owl.min.css" integrity="sha512-i5X6Fdn/ZqvGSqPrdMa3FgcpXM/Nr6YccSKFYT93zljl/HZDEpvBbE5Pxp91eiWGccZLrL/LDQJd7fjTRYsVaA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/a11y-dark.min.css" integrity="sha512-Vj6gPCk8EZlqnoveEyuGyYaWZ1+jyjMPg8g4shwyyNlRQl6d3L9At02ZHQr5K6s5duZl/+YKMnM3/8pDhoUphg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -187,9 +183,9 @@
 
 					--
 
+					- **The browser's JS `console`**
 					- Local text file in editor, e.g. TextEdit, [VS Code](https://code.visualstudio.com/)
 					- Online playground e.g. [CodePen](https://codepen.io), [CodeSandbox](https://codesandbox.io)
-					- **The browser's JS `console`**
 
 
 
@@ -240,25 +236,33 @@
 
 					--
 
-					### `document`
+					```js
+					document
+					```
 
 					<p class="fragment">the entire HTML document</p>
 
 					--
 
-					### `document.title`
+					```js
+					document.title
+					```
 
 					<p class="fragment">the page (document) title</p>
 
 					--
 
-					### `document.body`
+					```js
+					document.body
+					```
 
 					<p class="fragment">the <code>body</code> element</p>
 
 					--
 
-					### `document.body.children`
+					```js
+					document.body.children
+					```
 
 					<p class="fragment">all the elements within the <code>body</code></p>
 
@@ -266,39 +270,45 @@
 
 					--
 
-					#### `document.getElementById("board")`
+					```js
+					document.getElementById("board")
+					```
 
-					<h4 class="fragment" data-fragment-index="2"> <code>document.querySelector("#board")</code></h4>
+					<div class="fragment" data-fragment-index="2"><pre class="js hljs"><code>document.querySelector("#board")</code></pre></div>
 
 					<p class="fragment" data-fragment-index="1">the (first) element with <code>id="board"</code></p>
 
 					--
 
-					#### `document.getElementsByTagName("h1")`
+					```js
+					document.getElementsByTagName("h1")
+					```
 
-					<h4 class="fragment" data-fragment-index="2"> <code>document.querySelectorAll("h1")</code></h4>
+					<div class="fragment" data-fragment-index="2"><pre class="js hljs"> <code>document.querySelectorAll("h1")</code></pre></div>
 
 					<p class="fragment" data-fragment-index="1">all the <code>h1</code> elements</p>
 
 					--
 
-					#### `document.getElementsByClassName("player")`
+					```js
+					document.getElementsByClassName("player")
+					```
 
-					<h4 class="fragment" data-fragment-index="2"> <code>document.querySelectorAll(<span class="fragment">".player"</span>)</code></h4>
+					<div class="fragment" data-fragment-index="2"><pre class="js hljs"><code>document.querySelectorAll(".player")</code></pre></div>
 
 					<p class="fragment" data-fragment-index="1">all the elements with <code>class="player"</code> </p>
 					
 					--
 
-					<h4 class="r-fit-text"><code>document.getElementsByClassName("player").length</code></h4>
+					<pre class="r-fit-text js hljs"><code>document.getElementsByClassName("player").length</code></pre>
 
-					<h4 class="r-fit-text" > <code>document.querySelectorAll(".player").length</code></h4>
+					<pre class="r-fit-text js hljs"> <code>document.querySelectorAll(".player").length</code></pre>
 
 					<p class="fragment" >the number of elements with <code>class="player"</code> </p>
 					
 					--
 
-					<code class="r-fit-text">document.getElementById("p1-name").textContent</code>
+					<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").textContent</code></pre>
 
 					<p class="fragment">the text inside the element with <code>id="p1-name"</code></p>
 
@@ -335,21 +345,23 @@ <h4 class="r-fit-text" > <code>document.querySelectorAll(".player").length</code
 
 					--
 
-					#### `document.title = "My Page"`
+					```js
+					document.title = "My Page"
+					```
 
 					<p class="fragment">change the page title</p>
 					<p class="fragment" style="font-style:italic;">note the double-quotes</p>
 
 					--
 					
-					<code class="r-fit-text">document.getElementById("p1-name").textContent = "Sofia"</code>
+					<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").textContent = "Sofia"</code></pre>
 
 					<p class="fragment">replace the text of the <code>#p1-name</code> element</p>
 
 
 					--
 
-					<code class="r-fit-text">document.getElementById("p1-name").append(" & friends")</code>
+					<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").append(" & friends")</code></pre>
 
 					<p class="fragment">add to the end of the element's current text</p>
 
@@ -429,8 +441,14 @@ <h4 class="r-fit-text" > <code>document.querySelectorAll(".player").length</code
 					--
 
 					Try it!
-					- `typeof "42"`
-					- `typeof 42`
+
+					```js
+					typeof "42"
+					```
+
+					```js
+					typeof 42
+					```
 
 					--
 
@@ -520,7 +538,7 @@ <h4 class="r-fit-text" > <code>document.querySelectorAll(".player").length</code
 					- `false`
 					- `"true"`
 					- `document.title`
-					- `document.getElementById("board").children.length`
+					- `"some string".length`
 					- `null`
 					
 					(guess first, then use `typeof` to check!)
@@ -807,7 +825,7 @@ <h4 class="fragment">characters</h4>
 
 					Variables let us **remember** values 
 
-					```
+					```js
 					let remember = "Sept. 21";
 					```
 
@@ -820,7 +838,7 @@ <h4 class="fragment">characters</h4>
 
 					<img src="https://memeguy.com/photos/images/mrw-i-open-my-credit-card-statement-109160.gif" alt="Gif from 'The Office' of Michael Scott yelling 'I declare... bankruptcy!'" />
 
-					```
+					```js
 					let bankruptcy;
 					```
 
@@ -830,7 +848,7 @@ <h4 class="fragment">characters</h4>
 
 					### Assigning a variable
 
-					```
+					```js
 					let myDeclaredVariable;
 					myDeclaredVariable = "so value, much wow";
 					```
@@ -839,7 +857,7 @@ <h4 class="fragment">characters</h4>
 
 					### Declaring & assigning at once
 
-					```
+					```js
 					let myAssignedVariable = "such efficient, amaze";
 					```
 
@@ -851,7 +869,7 @@ <h4 class="fragment">characters</h4>
 					
 					aka a variable that can't be changed
 
-					```
+					```js
 					const myUnchangeableVariable = "Never gonna give you up";
 					```
 					
@@ -914,7 +932,7 @@ <h4 class="fragment">characters</h4>
 
 					What happens when this code runs? 
 
-					```
+					```js
 					let answerToLife = ((4 + 1) * 2 * 4) + 2;
 					```
 
@@ -994,7 +1012,7 @@ <h4 class="fragment">characters</h4>
 
 					Arrays let us keep multiple values together in a single collection
 
-					```
+					```js
 					let synonyms = ["plethora", "array", "cornucopia"];
 					```
 
@@ -1060,11 +1078,15 @@ <h4 class="fragment">characters</h4>
 
 					What do you think each of these does? (Try it!)
 					
-					`["c", "a", "d", "b"].sort()`
+					```js
+					["c", "a", "d", "b"].sort()
+					```
 					
-					<code class="r-fit-text">["lions", "tigers", "bears oh my!"].join(" & ")</code>
+					<pre class="r-fit-text js hljs"><code>["lions", "tigers", "bears oh my!"].join(" & ")</code></pre>
 					
-					`[1, 2, 3].concat([4, 5, 6])`
+					```js
+					[1, 2, 3].concat([4, 5, 6])
+					```
 					
 					--
 
@@ -1090,11 +1112,13 @@ <h4 class="fragment">characters</h4>
 					```js
 					let abcArray = ["a", "b", "c"];
 					abcArray[1] = "d";
+					abcArray;
 					```
 
 					```js
 					let abcString = "abc";
 					abcString[1] = "d";
+					abcString;
 					```
 
 					--
@@ -1112,11 +1136,13 @@ <h4 class="fragment">characters</h4>
 					```js
 					let numbers1 = [1, 2, 3];
 					let result1 = numbers1.push(4);
+					numbers1;
 					```
 
 					```js
 					let numbers2 = [1, 2, 3];
 					let result2 = numbers2.concat([4]);
+					numbers2;
 					```
 
 					--
@@ -1143,7 +1169,7 @@ <h4 class="fragment">characters</h4>
 					```js
 					const constVariable = "original value";
 					constVariable = "new Value";
-
+					```
 
 					--
 
@@ -1200,17 +1226,27 @@ <h4 class="fragment">characters</h4>
 
 					### Getting property values
 
-					`js.name`
+					```js
+					js.name
+					```
+
+
+					```js
+					js.isAwesome
+					```
 
-					`js.isAwesome`
 
 					--
 
 					### Using property values
 
-					`js.name.startsWith("Java")`
+					```js
+					js.name.startsWith("Java")
+					```
 
-					`let age = 2022 - js.birthYear;`
+					```js
+					let age = 2022 - js.birthYear;
+					```
 
 					--
 
@@ -1225,7 +1261,7 @@ <h4 class="fragment">characters</h4>
 					indecisive.snack = "chips";
 					```
 
-					---
+					--
 
 					### Exercise
 
@@ -1244,7 +1280,7 @@ <h4 class="fragment">characters</h4>
 					};
 					```
 
-					---
+					--
 
 					### Nested objects
 
@@ -1359,6 +1395,7 @@ <h4 class="fragment">characters</h4>
 					console.log(hello.length);
 					const yello = hello.toUpperCase();
 					```
+
 					[✨MDN✨ JS > Standard built-in objects > String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
 
 					--
@@ -1420,14 +1457,7 @@ <h4 class="fragment">characters</h4>
 				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, CopyCode ]
 			});
 		
-			
-			
-			// // Set selector for Klipse interactive snippets
-			// window.klipse_settings = {
-			// 	selector_eval_js: '.eval-js', // css selector for the html elements you want to klipsify
-			// };
 		</script>
-		<!-- <script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script> -->
 
 	</body>
 </html>
diff --git a/1-tictactoe.html b/1-tictactoe.html
index 3c8fcb0..498f165 100644
--- a/1-tictactoe.html
+++ b/1-tictactoe.html
@@ -14,8 +14,8 @@
             margin: 1em auto;
         }
         #board {
-            max-width: 40%;
-            margin: 0px auto;
+            max-width: 50%;
+            margin: 1em auto;
             display:grid; 
             grid-template-columns: 1fr 1fr 1fr; 
             grid-template-rows: 1fr 1fr 1fr;
@@ -23,7 +23,8 @@
             background-color: teal;
         }
         .square {
-            padding-top: 100%;
+            min-height: 1.3em;
+            text-align: center;
             background-color: white;
             font-size: 5rem;
             font-family: monospace;
diff --git a/2-jsquiz.html b/2-jsquiz-fancy.html
similarity index 64%
rename from 2-jsquiz.html
rename to 2-jsquiz-fancy.html
index c81c328..3a05346 100644
--- a/2-jsquiz.html
+++ b/2-jsquiz-fancy.html
@@ -75,26 +75,24 @@ <h1>Quiz.js</h1>
     <div id="explanation" class="hidden">
 
     </div>
-    <button class="hidden" id="next-question" name="next-question" >Next Question</button>
+    <button id="next-question" name="next-question" >Next Question</button>
 
     </main>
 
   </body>
 
-  <script type="text/javascript" src="jsfacts.js"></script>
-
   <script type="text/javascript">
 
     const facts = [
         {
             "statement": "JavaScript was invented in 1995",
             "answer": "true",
-            "explanation": "Brendan Eich created JS at Netscape in 1995."
+            "explanation": "Brendan Eich created JS at Netscape in 1995. The initial version of the language was written in just 10 days."
         },
         {
-            "statement": "JavaScript is a variant of the Java programming language",
+            "statement": "Strings in JS are editable values",
             "answer": "false",
-            "explanation": "As a programming language, JS is unrelated to Java. Its name however was an attempt to capitalize on the popularity of Java in the mid-90's."
+            "explanation": "In JavaScript strings are immutable values, meaning they cannot be edited; however, they can replaced with new, different strings."
         },
         {
             "statement": "1 + 1 === 2",
@@ -107,19 +105,28 @@ <h1>Quiz.js</h1>
             "explanation": "The plus operator concatenates (joins together) strings, so '1' + '1' === '11'."
         },
         {
-            "statement": "JavaScript only runs inside of web browsers.",
+            "statement": "typeof ['J', 'S'] === 'array'",
             "answer": "false",
-            "explanation": "JavaScript can run in many environments, including web browsers, web servers, and smart devices."
+            "explanation": "Arrays have the type 'object'. In JS, everything is either a primitive data type (e.g. 'string', 'number') or an object. Arrays are a kind of object with some special properties.  "
         }
     ];
 
+    function hide(element) {
+        element.classList.add("hidden");
+    }
 
-    function shuffleArray(array) {
-        // randomly shuffles elements in an array in-place
-        return array.sort((a,b) => Math.random() - 0.5);
+    function show(element) {
+        element.classList.remove("hidden");
+    }
+
+    function disable(button) {
+        button.setAttribute("disabled", "");
+    } 
+
+    function enable(button) {
+        button.removeAttribute("disabled");
     }
 
-    shuffleArray(facts);
 
     let correct = 0;
     let completed = 0;
@@ -127,47 +134,48 @@ <h1>Quiz.js</h1>
     let fact;
 
 
-    const options = document.getElementById("options").children;
     const explanation =  document.getElementById("explanation");
     const nextButton = document.getElementById("next-question");
+    const optionButtons = document.getElementById("options").children;
 
     function getNextFact() {
-        fact = facts.shift(); // get the next fact in our array (shortening the array)
+        fact = facts.shift(); // get the first fact in our array (shortening the array)
+
+        // set the question text to the current fact's statement
+        document.getElementById("statement").textContent = fact.statement;
 
-        // set the question text & clear any previous explanation
-        document.getElementById("statement").innerText = fact.statement;
-        document.getElementById("explanation").classList.add("hidden");
+        // hide any previous explanation
+        hide(explanation);
 
-        for (let option of document.getElementById("options").children) {
+        for (let option of optionButtons) {
             // clear any previous classes
             option.classList.remove("correct");
             option.classList.remove("incorrect");
             // make sure buttons are enabled
-            option.removeAttribute("disabled");
+            enable(option);
         }
 
-        // disable & hide next-question button
-        nextButton.setAttribute("disabled", "");
-        nextButton.classList.add("hidden");
+        // disable next-question button
+        disable(nextButton);
         
     }
 
     nextButton.addEventListener("click", getNextFact);
 
-    for (let option of options) {
+    for (let option of optionButtons) {
         option.addEventListener("click", e => {
             // When this option is clicked...
-            // disable all other option buttons
-            for (let button of options) {
-                button.setAttribute("disabled", ""); 
+
+            // disable all the option buttons
+            for (let button of optionButtons) {
+                disable(button); 
             }
 
             // enable the 'next question' button, if we still have facts left
-            nextButton.classList.remove("hidden");
             if (facts.length > 0) {
-                nextButton.removeAttribute("disabled");
+                enable(nextButton);
             } else {
-                nextButton.innerText = "No more questions!"
+                nextButton.textContent = "No more questions!"
             }
 
             const guess = e.target.value;
@@ -180,12 +188,14 @@ <h1>Quiz.js</h1>
                 e.target.classList.add("incorrect");
             }
 
-            explanation.innerText = fact.explanation;
-            explanation.classList.remove("hidden");
+            // display the explanation
+            explanation.textContent = fact.explanation;
+            show(explanation);
             
+            // update the score
             completed += 1;
-            document.getElementById("correct").innerText = correct;
-            document.getElementById("completed").innerText = completed;
+            document.getElementById("correct").textContent = correct;
+            document.getElementById("completed").textContent = completed;
 
         })
     }
diff --git a/2-jsquiz-finished.html b/2-jsquiz-finished.html
new file mode 100644
index 0000000..803fdf4
--- /dev/null
+++ b/2-jsquiz-finished.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    const statement = document.getElementById("statement");
+    // optionButtons should be all the elements within the "options" div
+    const optionButtons = document.getElementById("options").children;
+    // explanation should be the "explanation" div
+    const explanation =  document.getElementById("explanation");
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    const fact = {
+        "statement": "'1' + '1' === '2'",
+        "answer": "false",
+        "explanation": "The plus operator concatenates (joins together) strings, so '1' + '1' === '11'."
+    };
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+    statement.textContent = fact.statement;
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    function disable(button) {
+        button.setAttribute("disabled", "");
+    } 
+    // enable(button) should remove the attribute "disabled" from the button element
+    function enable(button) {
+        button.removeAttribute("disabled");
+    }
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    function isCorrect(guess) {
+        return guess === fact.answer;
+    }
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+    for (let option of optionButtons) {
+        option.addEventListener("click", event => {
+            // TODO 6B: Within the event listener function, display the fact's explanation by setting the text of the explanation element
+            explanation.textContent = fact.explanation;
+            
+            // TODO 7: Within the event listener function, 
+            // Use a for loop to disable all the option buttons
+            for (let button of optionButtons) {
+                disable(button); 
+            }
+            
+            // TODO 8: Within the event listener function,
+            // Get the guessed value from the clicked button
+            const guess = event.target.value;
+
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+            if (isCorrect(guess)) {
+                // correct answer!
+                event.target.classList.add("correct");
+            } else {
+                // wrong answer!
+                event.target.classList.add("incorrect");
+            }
+            
+        })
+    }
+    
+
+  </script>
+</html>
diff --git a/2-jsquiz-starter.html b/2-jsquiz-starter.html
new file mode 100644
index 0000000..ce5c87c
--- /dev/null
+++ b/2-jsquiz-starter.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    // optionButtons should be all the elements within the "options" div
+    // explanation should be the "explanation" div
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    // enable(button) should remove the attribute "disabled" from the button element
+
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    
+
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+            // TODO 6B: Within the event handler function, display the fact's explanation by setting the text of the explanation element
+
+
+            // TODO 7: Within the event handler function, 
+            // Use a for loop to disable all the option buttons
+
+
+            // TODO 8: Within the event handler function,
+            // Get the guessed value from the clicked button
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+
+    
+
+  </script>
+</html>
diff --git a/2-slides.html b/2-slides.html
index d0b63d7..a3702b7 100644
--- a/2-slides.html
+++ b/2-slides.html
@@ -23,210 +23,1494 @@
 	<body>
 		<div class="reveal">
 			<div class="slides">
-				
-				<section data-markdown data-separator-vertical="\n--\n">
+				<section data-markdown>
 					<textarea data-template>
-					# DAY 2
-
+						## JavaScript First Steps
+						### A [FrontendMasters](https://frontendmasters.com) course by [AnjanaVakil](https://twitter.com/AnjanaVakil)
+						[anjana.dev/javascript-first-steps](https://anjana.dev/javascript-first-steps)
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## Pop Quiz!
-
-					Let's put our knowledge so far to the test!
+					# DAY 2
 
 					</textarea>
 				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
+				<section data-markdown>
 					<textarea data-template>
-					## Writing JS outside of the console
-					
-					Working with a code editor
+					### Today's goals
 
-					code comments
+					- Work with Arrays & Objects
+					- Write JS in an HTML file
+					- Use functions to perform actions
+					- Handle events to react to user behavior
+					- Use conditionals to decide what to do when
+					- Use loops to repeat actions multiple times
+					- Make our own quiz game! 
 
 					</textarea>
 				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
+				<section data-markdown>
 					<textarea data-template>
-					## Functions
+					### Ready?
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## Scope
+					# Let's go!
 
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## Events & Handlers
+					## Arrays
 
-					Let's make our web page *interactive*!
+					<img src="https://media1.giphy.com/media/KMCapxEUpxTMxhnarh/giphy.gif?cid=ecf05e47gqpnohggvkpijhvkurlz3dkeuxvr28gmxvff0es1&rid=giphy.gif&ct=g" alt="Gif from 'Star Trek Discovery' of Michelle Yeoh saying 'You deserve... many things'" />
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## Conditionals
 
 					--
 
-					Boolean operators
+					Arrays let us keep multiple values together in a single collection
 
-					Truth tables
+					```js
+					let synonyms = ["plethora", "array", "cornucopia"];
+					```
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## Loops
+					<img src="https://media1.giphy.com/media/QfGYYVrbay6kssMrYn/giphy.gif?cid=790b7611dba71cb23b707b58277a0e27b04c0f48f848072c&rid=giphy.gif&ct=g" alt="Gif of Quinta Brunson gesturing and saying 'Plethora, Array, Cornucopia'" />
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## Loops over arrays
+					--
 
-					`.map()` & `.filter()`
+					Like strings, arrays have a `length`
+					
+					```js
+					synonyms.length
+					```
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					# DAY 3
 
+					And each value has an index
+
+					```js
+					synonyms[1]
+					synonyms.indexOf("cornucopia")
+					```
 
 					--
 
-					Today's project: Adapt yesterday's project for a new app 
+					Also like strings, we can check if an array contains a certain value
 
-					<img src="https://media4.giphy.com/media/3o6wrdHsBoJKGaHjQk/giphy.gif?cid=790b76115baa58b80e31c3667efa5279bf10929f247d7752&rid=giphy.gif&ct=g" alt="Gif from Clueless of Cher saying excitedly 'Let's do a makeover!' with Dionne smiling excitedly in the background" />
+					```js
+					synonyms.includes("plethora")
+					synonyms.includes("variety")
+					```
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## Fetching data
+					--
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					### Synchronous vs. Asynchronous
+					Unlike strings, we can modify arrays
 
-					[a] [syn] [chronous]
+					```js
+					synonyms[1] = "variety";
+					let lastItem = synonyms.pop();
+					synonyms.push("multitude");
+					```
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## Promises
+					What does each of these lines do? Try it out!
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## `async` & `await`
+					After this code runs, what is `synonyms`? `lastItem`?
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## Destructuring
+					--
+
+					Arrays can be empty, or hold a single item
+
+					```js
+					let emptyArray = [];
+					let oneItemArray = ["lonely"];
+					```
+
+					Arrays can hold any type of items, or mix and match! 
+
+					```js
+					let mixedArray = ["pop", 6, "squish", false, document];
+					```
+
+					--
+
+					Arrays can do lots of useful tricks!
+
+					What do you think each of these does? (Try it!)
+					
+					```js
+					["c", "a", "d", "b"].sort()
+					```
+					
+					<pre class="r-fit-text js hljs"><code>["lions", "tigers", "bears oh my!"].join(" & ")</code></pre>
+					
+					```js
+					[1, 2, 3].concat([4, 5, 6])
+					```
+					
+					--
+
+					
+					Remember ✨MDN✨ is your friend!
+
+					[JavaScript > Standard built-in objects > Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## Spread (`...`)
 
-					</textarea>
-				</section>
-				<section data-markdown data-separator-vertical="\n--\n">
-					<textarea data-template>
-					## `ERROR` !!
 
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## Debugging
+					## Mutating data
+
+					<img src="https://static0.cbrimages.com/wordpress/wp-content/uploads/2017/01/X-Men-Animated-Series.jpg" alt="Image of characters from the animated series 'X-Men' featuring Gambit, Jean Grey, Storm, Wolverine, Cyclops, and Rogue" /> 
+
+					--
+
+					Do these do the same thing? 
+
+					```js
+					let abcArray = ["a", "b", "c"];
+					abcArray[1] = "d";
+					abcArray;
+					```
+
+					```js
+					let abcString = "abc";
+					abcString[1] = "d";
+					abcString;
+					```
+
+					--
+
+					### mutable vs. immutable
+
+					"Mutable" data can be edited (e.g. Arrays)
+
+					"Immutable" data always stays the same (e.g. strings & other primitives)
+
+					--
+
+					Do these do the same thing? 
+
+					```js
+					let numbers1 = [1, 2, 3];
+					let result1 = numbers1.push(4);
+					numbers1;
+					```
+
+					```js
+					let numbers2 = [1, 2, 3];
+					let result2 = numbers2.concat([4]);
+					numbers2;
+					```
+
+					--
+
+					Some actions "mutate" an array (e.g. `oldArray.push(newValue)`)
+
+					...aka change the array *in-place*
+
+					Other actions do *not* mutate the original array, but instead create a new copy (e.g. `oldArray.concat(otherArray)`)
+
+					(you can always use MDN to check which is which!)
+
+					--
+
+					Variables themselves can also be (im)mutable 
+
+					What happens in each case? (Try it!)
+
+					```js
+					let letVariable = "original value";
+					letVariable = "new value";
+					```
+
+					```js
+					const constVariable = "original value";
+					constVariable = "new Value";
+					```
+
+					--
+
+					### immutable *variable* with mutable *value*
+
+					What happens when we use `const` with a mutable value like an array?
+
+					```js [1-2|4-5]
+					const operands = [4, 6];
+					const sum = operands[0] + operands[1];
+
+					operands[0] = 5;
+					const newSum = operands[0] + operands[1];
+					```
+
+					--
+
+					If you have the choice...
+
+					#### Using *immutable* data & variables is usually best
+
+					Why might that be? 
 
-					<img src="http://static.brit.co.s3.amazonaws.com/wp-content/uploads/2012/07/tumblr_m7cbztPztz1qdf43eo1_500.gif" alt="Gif from Clueless of Cher standing in front of a chalkboard saying 'I was like totally buggin'" />
 
 					</textarea>
 				</section>
+				
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## `try` & `catch`
+					## Objects
+
+					We saw an object earlier:
+
+					```js
+					const js = {
+						name: "JavaScript",
+						abbreviation: "JS",
+						isAwesome: true,
+						officialSpec: "ECMAScript",
+						birthYear: 1995,
+						creator: "Brendan Eich"
+					};
+					```
 
+					--
+
+					Objects collect multiple values together to describe more complex data
+
+					Similar to how we can *point at* different values using *variables* in our code,
+
+					objects let us *point at* related values using *properties* in the object.
+
+
+					--
+
+					### Getting property values
+
+					```js
+					js.name
+					```
+
+
+					```js
+					js.isAwesome
+					```
+
+
+					--
+
+					### Using property values
+
+					```js
+					js.name.startsWith("Java")
+					```
+
+					```js
+					let age = 2022 - js.birthYear;
+					```
+
+					--
+
+					### Setting property values
+
+					```js 
+					const indecisive = {
+						lunch: "sandwich"
+					};
+
+					indecisive.lunch = "tacos";
+					indecisive.snack = "chips";
+					```
+
+					--
+
+					### Exercise
+
+					Create an object representing you! 
+
+					Add properties for facts important to you, e.g.: 
+
+					```js
+					const anjana = {
+						name: "Anjana",
+						home: "San Francisco",
+						languages: ["English", "German", "French"],
+						pet: null,
+						vehicle: "Vespa",
+						hobbies: ["travel", "climbing", "gaming", "lindy hop"]
+					};
+					```
+
+					--
+
+					### Methods
+
+					Properties can point to functions too 
+
+					We call function-properties "methods" on objects
+
+					```js
+					const dog = {
+						name: "Ein",
+						breed: "Corgi",
+						speak: function () {
+							console.log("woof woof");
+						}
+					}
+
+					dog.speak();
+					```
+
+					
+					--
+
+					`this` in a method lets us reference other properties on the object
+
+					```js
+					anjana.speak = function () {
+						console.log("Hi my name is", this.name);
+					}
+
+					anjana.speak();
+					```
+
+					--
+
+					But be careful with `this`! 
+
+					<img src="https://c.tenor.com/7tgvcDTOfMQAAAAC/tenor.gif" alt="Gif from Friends of Rachel & Phoebe jumping out and yelling 'Danger!' to scare Ross" />
+
+					Its behavior is complicated & can be tricky
+
+					MDN: [JS > Operators > `this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)
+
+
+					--
+
+					### Nested objects
+
+					```js
+					const menu = {
+						lunch: {
+							appetizer: "salad",
+							main: "spaghetti",
+							dessert: "tiramisu"
+						},
+						dinner: {
+							appetizer: "samosa",
+							main: "saag paneer",
+							dessert: "gulab jamun"
+						}
+					};
+
+					const tiramisu = menu.lunch.dessert;
+					```
+
+					--
+
+					### Objects in Arrays & Objects
+
+					```js
+					const spices = [
+						{name: "Emma", nickname: "Baby"},
+						{name: "Geri", nickname: "Ginger"},
+						{name: "Mel B", nickname: "Scary"},
+						{name: "Mel C", nickname: "Sporty"},
+						{name: "Victoria", nickname: "Posh"}
+					];
+
+					const spiceGirls = {
+						albums: ["Spice", "Spiceworld", "Forever"],
+						motto: "Girl Power",
+						members: spices
+					};
+					```
+
+					--
+
+					### Exercise
+
+					From the `spiceGirls` object, how can we retrieve: 
+					- `"Girl Power"`
+					- The object representing Ginger Spice
+					- `"Spiceworld"`
+					- `"Victoria"`
+
+					--
+
+					### Built in objects
+
+					Have we worked with any complex objects already?
+
+					What properties & methods have we used already?
+
+
+					--
+
+					### `document`
+
+					```js
+					document.title = "Tic Tac Toe";
+					document.querySelector("h2").append(" and love");				
+					```
+
+					What other properties does `document` have? 
+
+					How can you find out? 
+
+					<a class="fragment" href="https://developer.mozilla.org/en-US/docs/Web/API/Document">✨MDN✨ Web APIs > Document</a>
+
+
+					--
+
+					### `console`
+
+					```js [1-2|4-5|7]
+					console.log("hello coder!");
+					console.log(document.querySelector("h1").textContent);
+
+					console.warn("something seems iffy");
+					console.error("oh no, it broke!");
+
+					console.clear();
+					```
+
+					<a class="fragment" href="https://developer.mozilla.org/en-US/docs/Web/API/Console">✨MDN✨ Web APIs > console</a>
+
+
+					--
+
+					### `Math`
+
+					```js
+					let randomNumber = Math.random();
+					const pi = Math.PI;
+					const five = Math.abs(-5);
+					```
+
+					<a class="fragment" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">✨MDN✨ JS > Standard built-in objects > Math</a>
+
+					--
+
+					### strings? 
+
+					Strings are *primitive values* (not objects) 
+
+					but JS automatically wraps them in `String` objects 
+
+					```js
+					const hello = "hello";
+					console.log(hello.length);
+					const yello = hello.toUpperCase();
+					```
+
+					[✨MDN✨ JS > Standard built-in objects > String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
+
+					--
+
+					### ...and many more!
+
+					Remember ✨MDN✨ is your friend!
+
+					[JavaScript > Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
+
+					
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## Modules
+					## Let's play Tic Tac Toe!
+
+					1. Set up the players
+						- Create a `players` array containing 2 objects, one representing each player
+						- Each object should store the player's `name` and `symbol` (X or O)
+						- Display each player's name in the appropriate element in the page
 
-					`import` && `export`
+					--
+
+					2. Play!
+						- Take turns placing symbols in the board
+						- On each turn: 
+							- Retrieve the square you want to play in
+							- Set the square's text to your player's symbol
+
+					
 
 					</textarea>
 				</section>
+				
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## `import` && `export`
+					## Pop Quiz!
+
+					Let's put our knowledge so far to the test!
+
+					[JS Quiz](./2-jsquiz-fancy.html)
 
 					</textarea>
 				</section>
+				
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					# RECAP
+					## Writing JS in HTML
 
-					</textarea>
-				</section>
-				<section data-markdown >
-					<textarea data-template>
-					## Next steps
+					--
 
-					- Dig deeper with more FrontendMasters courses
-					- Refine your mental model with [Just JavaScript]() by Dan Abramov and Maggie Appleton
-					- Explore & investigate on [MDN](developer.mozilla.org)
-					- Keep tinkering!
-					</textarea>
-				</section>
-				<section data-markdown >
-					<textarea data-template>
-					## Thank you!
+					*Where* do we write JS?
 
-					Thanks to Marc Grabanski & Daniel Higginbotham for their help in creating this course
+					- The browser's JS `console`
+					- **Local text file in editor, e.g. TextEdit, [VS Code](https://code.visualstudio.com/)**
+					- Online playground e.g. [CodePen](https://codepen.io), [CodeSandbox](https://codesandbox.io)
 
-					Slides powered by [reveal.js](https://revealjs.com)
+					--
 
+					### Let's do it!
 
-					</textarea>
-				</section>
-			</div>
-		</div>
+					- Go to [2-jsquiz-starter.html](./2-jsquiz-starter.html)
+					- Save the HTML file (Right click > "Save file as...")
+					- Open it in your text editor of choice
 
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js" integrity="sha512-131e3mIrDAyUD075SVzvIjS0g97uDg0+/qAobDHd++h+lgFi4z88DVOpidm06jpb+0PzK4kcm9w79r6EHV0SkA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/notes/notes.min.js" integrity="sha512-nLsCkPS/rdxRVOkxiKnld9KhQ24V/5kRChzSZ3MoFODykbWyBlQRsHLrbpN3J4LabYBnXIp1EnRIo3ifvyiQIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+					--
+
+					### Where in the HTML doc does our JS live? 
+
+					--
+
+					### `script` element 
+
+					MDN: [HTML > script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+
+					--
+
+					What is all this about?
+
+					```js 
+					// TODO some instructions here
+					```
+
+					--
+
+					### comments 
+
+					Start with `//` 
+
+					Help others (and yourself) understand your code
+
+					Help keep track of things you want to do
+
+					--
+
+					We'll gradually work through these TODOs to make our own quiz!
+
+					--
+
+					### Exercise
+
+					Follow the first 3 `TODO` comments to review skills we've covered so far: 
+					- declare `statement`, `optionButtons`, and `explanation` variables with their corresponding element(s)
+					- create a `facts` object representing one true/false fact you've learned about JS
+					- use the `statement` element to display your fact
+
+					</textarea>
+				</section>
+				<section data-markdown data-separator-vertical="\n--\n">
+					<textarea data-template>
+					## Functions
+
+					<img src="https://c.tenor.com/wlflMOYNSHAAAAAC/tenor.gif" alt="Gif of Kim Kardashian looking weary and saying 'I'm just so tired, I can't even, like, function'" />
+
+					--
+
+					values *are* things
+
+					variables *point to* things
+
+					functions *do* things
+
+					--
+
+					declaring (creating) a function:
+
+					```js
+					function half(x) {
+						return x / 2;
+					}
+					```
+
+					calling (using) a function:
+
+					```js
+					const one = half(2);
+					```
+
+					
+					--
+
+					### Parameters & Arguments
+
+					Some functions need more than one value to work
+
+					```js
+					function add(x, y) {
+						return x + y;
+					}
+
+					add(2,3);
+					```
+
+					--
+
+					Some functions don't even need any values
+
+					```js
+					function getRandomNumber() {
+						return Math.random();
+					}
+
+					getRandomNumber();
+					```
+
+					--
+
+					*parameters* are the inputs a function expects
+
+					```js
+					function add3(x, y, z) {
+						console.log("My parameters are named x, y, z");
+						console.log("I received the arguments", x, y, z);
+						return x + y + z;
+					}
+
+					const sum = add3(4,5,6);
+					```
+
+					*arguments* are the actual values the function is called with
+
+					--
+
+					Parameters should be named like variables, and behave like variables within the function body
+
+
+					```js
+					function doesThisWork("literally a value") {
+						return true;
+					}
+					```
+
+					```js
+					function howAboutThis(1weirdVariable!) {
+						return true;
+					}
+					```
+
+					--
+
+					What happens if we don't call a function with the intended argument(s)?
+
+					```js
+					add3(1,2)
+					```
+
+					```js
+					getRandomNumber("unexpected")
+					```
+
+					--
+
+					JS is pretty "loosey-goosey" about missing/extra arguments
+
+					<img src="https://media1.giphy.com/media/xT5LMrKFVsJgFUOYQE/giphy.gif?cid=ecf05e47s46qeptt34w3cy6vrnlz7nul0i1hxjios4dhmszr&rid=giphy.gif&ct=g" alt="Gif of Bart Simpson saying 'No arguments here'" />
+
+					What happens depends on your particular code
+
+					--
+
+					### Return values
+
+					A `return` statement specifies the function's output value
+
+					```js
+					function square(x) {
+						return x * x; 
+					}
+
+					const nine = square(3);
+					```
+
+
+					--
+
+					Some functions don't `return` anything
+
+
+					```js
+					function sayHello(name) {
+						console.log("Oh hi, " + name + "!");
+					}
+					```
+
+					```js
+					sayHello("Marc");
+					```
+
+					
+
+					<img src="https://c.tenor.com/oloEJn1kezQAAAAC/tenor.gif" alt="Gif from 'The Room' of Tommy Wiseau saying 'Oh hi Mark'" />
+
+					--
+
+					What value is returned when there's no `return`?
+
+					```js
+					const hm = sayHello("Marc");
+					```
+
+					<code class="fragment">undefined</code>
+
+					--
+
+					### Exercise
+
+					In the console, declare the following functions: 
+					- `multiply`: given 2 numbers, return their product
+					- `yell`: given a lowercase string, log it in all caps to the console
+					- `longerThan`: given 2 arrays, return whether the first is longer than the second
+
+					--
+
+					## Arrow functions
+
+					<img src="https://media0.giphy.com/media/12M3HgyA9ge4z6/giphy.gif?cid=ecf05e47bpbror0fcrdiai9hsxvkafhj5juk0fhtq55x1eqh&rid=giphy.gif&ct=g" alt="Gif of Katniss Everdeen drawing a bow" />
+
+					--
+
+					The `=>` "fat arrow" lets us create an unnamed function without much code
+
+					```js
+					(x, y) => x + y
+					```
+
+					aka an *arrow function*
+
+					--
+
+					Since arrow functions are expressions, we can assign them to a variable
+
+					```js
+					const add = (x, y) => x + y;
+					```
+
+					is equivalent to
+
+					```js
+					function add(x, y) {
+						return x + y;
+					}
+					```
+
+					--
+
+					Arrow functions are great when we just want to return a value
+
+					```js
+					function square(x) {
+						return x*x;
+					}
+					```
+
+					vs.
+
+					```js
+					const square = (x) => x*x; 
+					```
+
+					--
+
+					For one-parameter functions, parentheses are optional 
+
+					```js
+					x => x*x
+					```
+					```js
+					(x) => x*x
+					```
+					--
+
+					For multiple parameters, parentheses are required 
+
+					```js 
+					(firstName, lastName) => firstName + " " + lastName
+					```
+
+					--
+
+					If we need to do more than just return a value, 
+					
+					we can use curly braces for a "normal" function body
+
+					In that case, we still need a `return`
+
+					```js
+					const addAndLog = (x, y) => {
+						let sum = x + y; 
+						console.log('The sum is', sum);
+						return sum;
+					}
+					```
+
+					--
+
+					### Exercise
+
+					In the console, declare the following functions *using arrow functions*:
+					- `divide`: given 2 numbers, return the first divided by the second
+					- `whisper`: given an uppercase string, log it in all lowercase to the console
+					- `shorterThan`: given 2 arrays, return whether the first is shorter than the second
+
+
+					--
+
+					### Exercise
+
+					In the JSQuiz starter, follow TODOs 4 & 5 to 
+					- declare functions to disable or enable a button
+					- declare `isCorrect(guess)` function that compares a guess string to your fact's answer string
+
+					</textarea>
+				</section>
+				<section data-markdown data-separator-vertical="\n--\n">
+					<textarea data-template>
+					## Scope
+
+
+					<img src="https://media1.giphy.com/media/fXtGlVSI2ZB2E1JO0b/giphy.gif?cid=790b7611315f7df8f7217d5e72891ab188485e8bde837cec&rid=giphy.gif&ct=g" alt="Gif from Schitt's Creek of David saying 'There are so many variables still in play'" />
+
+					--
+
+					In JS it doesn't just matter *what* variables we declare
+
+					It also matters *where* we declare them
+
+					*Scope* determines where variables are "in play"
+
+					--
+
+
+
+					```js
+
+					function declareBankruptcy() {
+						let bankruptcy = true;
+					}
+
+					declareBankruptcy();
+					console.log(bankruptcy);
+
+					```
+					--
+
+					Scopes are *nested* within the program
+
+					The widest scope is the **global** scope
+
+					Each function gets its own new scope within the scope where it was declared
+
+					
+
+					--
+
+
+					```js
+
+					let planet = "Jupiter";
+					
+					function scopeOut() {
+						let planet = "Mars";
+						console.log("Inner planet:", planet);
+					}
+
+					scopeOut();
+					console.log("Outer planet:", planet);
+
+					```
+
+
+					
+					--
+
+					Within each scope, you can access variables declared in a *wider* scope (e.g. global scope)
+
+					But not those declared in a *narrower* scope (e.g. function scope)
+
+
+					--
+
+					```js
+
+					let globalVariable = "I live in global scope"; 
+
+					function narrowerScope() {
+						console.log(globalVariable);
+						let localVariable = "I live in the function scope";
+					}
+
+					narrowerScope();
+					console.log(localVariable);
+
+					```
+
+					
+
+					--
+
+					Variables declared with `let` can be modified from within a narrower scope
+
+					This can be useful, but also dangerous!
+
+					--
+
+					```js
+					let feeling = "free";
+
+					function trap() {
+						feeling = "boxedIn";
+					}
+
+					trap();
+					console.log(feeling);
+
+					```
+
+
+					
+
+					</textarea>
+				</section>
+				<section data-markdown data-separator-vertical="\n--\n">
+					<textarea data-template>
+					## Events & Handlers
+
+					Let's make our web page *interactive*!
+
+					--
+
+					Our page right now...
+
+					<img src="https://media1.giphy.com/media/ZDhPlli6gMh44/giphy.gif?cid=ecf05e478swcfzov8jtvntlzmxlve3eorzddk5dsawtt6zw0&rid=giphy.gif&ct=g" alt="Gif of MC Hammer dancing with text 'cant touch this'" />
+
+					--
+
+					The web browser fires *events* when certain things happen on the page
+
+					For example, when the user clicks somewhere on the page, a `click` event is fired
+
+					--
+
+					<img src="https://media4.giphy.com/media/W697Pbn9a0i9qhgE8v/giphy.gif?cid=ecf05e47ljpmw4010cdaaok2nvgf7k1tc8pxmowy3htm6zai&rid=giphy.gif&ct=g" alt="Gif of Janelle Monae saying 'You need to handle it'" />
+
+					--
+
+					We can detect events with JS using an *event listener*
+
+					The `.addEventListener()` method lets us listen for events on a DOM element
+
+					```js
+					document.addEventListener("click", () => {
+						console.log("clicked")
+					});
+					```
+
+					--
+
+					`.addEventListener()` takes 2 parameters: 
+					
+					- The name of the event to listen to (e.g. `"click"`)
+					- A *handler* function that JS calls when that event is fired on this element
+
+					--
+
+					<img src="https://media0.giphy.com/media/3ofT5PzM67qEoeihmo/giphy.gif?cid=790b7611c943e9ecab6d1f151c11c47a8cbb42b8952d8c3e&rid=giphy.gif&ct=g" alt="Gif from Twin Peaks of Kyle MacLachlan saying 'I can handle that'" />
+					
+					--
+
+					We can do basically whatever we want in the handler function
+
+					<iframe height="400" style="width: 100%;" scrolling="no" title="Exciting" src="https://codepen.io/vakila/embed/VwxmmeY?default-tab=result&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+						See the Pen <a href="https://codepen.io/vakila/pen/VwxmmeY">
+						Exciting</a> by Anjana Sofia Vakil (<a href="https://codepen.io/vakila">@vakila</a>)
+						on <a href="https://codepen.io">CodePen</a>.
+					  </iframe>
+
+
+					--
+
+
+					JS passes an `event` object to the handler function with information about the event 
+
+					If we accept this as a parameter, we can use it to get details
+
+
+					```js
+					document.addEventListener("click", (event) => {
+						console.log(event);
+					});
+					```
+
+					
+					--
+
+					`event.target` is the element the event fired on 
+
+					(in this case, which element was clicked)
+
+					```js
+					document.addEventListener("click", (event) => {
+						console.log(event.target);
+					});
+					```
+					--
+
+					["click"](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) isn't the only type of event we can handle
+
+					- ["dblclick"](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)
+					- ["mouseover"](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event)
+					- ["mouseout"](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event)
+
+					...and *lots* [more](https://developer.mozilla.org/en-US/docs/Web/Events)!
+
+					--
+
+					### Exercise 
+
+					In the console, on our quiz add event listeners to the buttons so that:
+					- When the "true" button is clicked, the button's text becomes "clicked true"
+					- When the "false" button is clicked, the "explanation" div text becomes "clicked false"
+
+					--
+
+					<img src="https://media2.giphy.com/media/mEnING9BFDAzgHo5L4/giphy.gif?cid=ecf05e47vq2sb8v2m5ukm0a7o1ephsjgrxu7a7u0ti3i0zur&rid=giphy.gif&ct=g" alt="Gif from Scandal of Kerry Washington saying 'It's handled'" />
+
+
+
+					</textarea>
+				</section>
+				
+				<section data-markdown data-separator-vertical="\n--\n">
+					<textarea data-template>
+					## Loops
+
+					<img src="https://media0.giphy.com/media/URkVaXX4cubqCxLYma/giphy.gif?cid=ecf05e47mckio5pnqpbq2q8lkvxtqfmcqe62tu7ago8mvunb&rid=giphy.gif&ct=g" alt="Gif from Schitt's Creek of Alexis saying 'I've done it before and I can do it again'" />
+
+					--
+
+					*Loops* let us run the same chunk of code multiple times 
+
+					```js
+					for (let rep = 0; rep < 10; rep += 1) {
+						console.log("now doing rep", rep);
+					}
+					console.log("do you even lift bro");
+					```
+
+					this is called *iteration*
+
+					--
+
+					`for` loops require us to:
+					- declare & initialize a loop counter
+					- give a condition for the loop to keep running
+					- describe how to change (usually increment) the counter each time
+					
+					```js
+					for (let count = 0; count <= 100; count += 10) {
+						console.log(count);
+					}
+					```
+
+					--
+
+					<img src="https://media1.giphy.com/media/C4wDXSJjt0ZKU/giphy.gif?cid=ecf05e47vg5plioh9ysxznuqqbqh0ub7kf7zqonf4jmxdgo6&rid=giphy.gif&ct=g" alt="Gif of Avril Lavigne singing 'Whyd you have to go and make things so complicated'" />
+
+					--
+
+					`for ... of` loops let us more easily iterate over items in a collection 
+
+					```js
+					const numbers = [1,2,3];
+
+					for (let i = 0; i < numbers.length; i++) {
+						console.log(numbers[i]);
+					}
+
+					for (let n of numbers) {
+						console.log(n);
+					}
+					```
+					--
+
+
+					We can use `for...of` to iterate over characters in a string
+
+					```js
+					for (let char of "ALOHA") {
+						console.log(char);
+					}
+					``` 
+
+					or items in an array 
+
+					```js
+					for (let item of ["pop", 6, "squish"]) {
+						console.log(typeof item);
+					}
+					```
+
+					because strings & arrays are "iterables"
+
+					--
+
+					### Exercise
+
+					In our quiz, follow TODOs 6 & 7 to
+					- Use a `for...of` loop to attach an event listener to each button
+					- Within the event handler, 
+					  - populate the `explanation` text in the given element
+					  - Use another `for...of` loop to disable all the buttons
+
+
+					--
+
+					### `map`  & `filter`
+
+					The `map`  & `filter` methods also let us process all the items in an array
+
+					<img width="600" src="https://static.observableusercontent.com/files/2f820ed5e9c8ce56f07504c382b6c126805d04edf297aaebf57f4c8c10a28556e185f26ca4a87f024182257cf6d2a8a2b31cf85d81d4fa871626715e0f16eab4" alt="Illustration of filter, map, reduce to make a sandwich" />
+
+					--
+
+					`map` calls a function on each item in an array to create a new array
+
+					```js
+					const spices = [
+						{name: "Emma", nickname: "Baby"},
+						{name: "Geri", nickname: "Ginger"},
+						{name: "Mel B", nickname: "Scary"},
+						{name: "Mel C", nickname: "Sporty"},
+						{name: "Victoria", nickname: "Posh"}
+					];
+
+					const nicknames = spices.map(s => s.nickname + " Spice");
+					```
+
+					Arrow functions are useful for this!
+
+					--
+
+					String templates are useful too! Make them with backticks and `${}`, e.g.
+
+					<pre>`string to insert ${variable} into`</pre>
+
+					```js
+					s => `${s.nickname} Spice`;
+					```
+
+					is equivalent to
+
+					```js
+					s => s.nickname + " Spice"
+					```
+<!-- 
+					```js 
+					const bills = [ "telephone", "automo", "credit card" ];
+
+					bills.map(bill => console.log(`Can you pay my ${bill} bills?`));
+					``` -->
+
+					--
+
+					`filter` calls a true/false function on each item
+
+					and creates a new array with only the items where the function returns true
+
+					```js
+					const mels = spices.filter(s => s.name.includes("Mel"));
+					```
+
+
+					--
+
+					### Exercise
+
+					From the `spices` array, use `map` and `filter` to: 
+					- create a new array `names` with only the name of each girl
+					- create a new array `endInY` with just the girls whose nickname ends in "y"
+				
+
+					--
+
+					### Spread (`...`)
+
+					Is another neat trick for iterating over arrays
+
+					<img src="https://media0.giphy.com/media/xT9KVsiqNp3MBkJnZC/giphy.gif?cid=ecf05e474esc5ba5hgxi03xuxpqzi3xksb1inywustews7xi&rid=giphy.gif&ct=g" alt="Gif from Mean Girls of Regina George spreading copies of the Burn Book around school" />
+
+					It lets us take all the items in an array and spread 'em around 
+
+					--
+
+					We can use it to put all the items from one array inside another array
+
+					```js
+					const oldBurns = ["square", "wack"];
+					const newBurns = ["basic", "dusty", "sus"];
+					const burnBook = [...oldBurns, ...newBurns];
+					```
+
+					equivalent to
+					```js
+					const burnBook = oldBurns.concat(newBurns);
+					```
+
+					--
+
+					We can also use it to pass all the items from an array as arguments to a function or method 
+
+					```js
+					const skills = ["HTML", "CSS", "JS"];
+					const newSkills = ["React", "TypeScript", "Node"]
+					skills.push(...newSkills);
+					console.log(...skills);
+					```
+
+					</textarea>
+				</section>
+				<section data-markdown data-separator-vertical="\n--\n">
+					<textarea data-template>
+					## Conditionals
+
+
+					<img src="https://media1.giphy.com/media/XsRTNACoT5BaU/giphy.gif?cid=790b7611cabc3a3590355172e163ce60e6ec5654f7be492b&rid=giphy.gif&ct=g" alt="Gif of the Spice Girls singing 'If you wannabe my lover you gotta get with my friends" />
+
+
+					--
+					
+					`if` statements let us execute code under a certain *condition*
+
+					```js
+					const you = {wannaBeMyLover: true};
+					if (you.wannaBeMyLover) {
+						you.gottaGetWithMyFriends = true;
+					}
+					```
+					code in the `if` block only runs if the `(condition)` is true 
+
+					--
+
+
+					we can use `else` to run other code if `(condition)` is false
+
+					```js
+					if (you.reallyBugMe) {
+						console.log("Goodbye");
+					} else {
+						console.log("Hello");
+					}
+					```
+
+					--
+
+					What will happen when this code runs? 
+
+					```js
+					if (5 > 4) {
+						console.log("greater than");
+					} else {
+						console.log("less than");
+					}
+					```
+
+					--
+
+					We can chain `else` and `if` blocks to account for multiple conditions 
+					
+					```js
+					function compare(x, y) {
+						if (x > y) {
+							console.log(x, "is greater than", y);
+						} else if (x < y) {
+							console.log(x, "is less than", y);
+						} else {
+							console.log(x, "is equal to", y);
+						}
+					}
+					```
+
+					--
+
+					The `(condition)` is usually an expression that evaluates to a boolean 
+
+					```js
+					if (forecast === "rain") {
+						console.log("bring an umbrella");
+					}
+					```
+					--
+
+					If it's given some other value, JS will convert it to a boolean
+
+					and decide based on its "truthiness"
+
+					```js
+					if ("nonempty strings are truthy") {
+						console.log("this line will run");
+					}
+					```
+					--
+
+					```js
+					if (0) {
+						console.log("zero is truthy");
+					} else {
+						console.log("zero is falsy");
+					}
+					```
+				
+					--
+
+					### Exercise
+
+					- Write a conditional that logs a message saying whether your first name or last name is longer
+					- Write a function `isEmpty(array)` that returns whether a given array is empty or not
+					- Is an empty array truthy or falsy? Write a conditional to find out
+
+					--
+
+					### Boolean (logical) operators
+
+					Sometimes we care about the opposite of a value
+
+					```js
+					let someoneIsAroundYou = false; 
+					if (!someoneIsAroundYou) {
+						console.log("baby I love you");
+					}
+					```
+
+					The `!` operator negates a boolean (gives its opposite)
+
+					--
+
+					Sometimes we care about the truthiness of more than one value
+
+					```js 
+					if (you.happy && you.knowIt) {
+						you.clapHands();
+					}
+					```
+
+					--
+
+					*Logical operators* let us make two boolean values become one
+
+					<img width=400 src="https://d4q8jbdc3dbnf.cloudfront.net/release/l/331c003f30bd4cdfda4aa3efc9b3ec53.jpg" alt="Cover image of Spice Girls single '2 become 1'" />
+
+					--
+
+					Logical "and" (`&&`) requires both values to be truthy
+
+
+					`A` | `B` | `A && B`
+					-- | -- | -- 
+					`true` | `true` | `true`
+					`true` | `false` | `false`
+					`false` | `true` | `false`
+					`false` | `false` | `false`
+
+					--
+
+					Logical "or" (`||`) requires only one value to be truthy
+
+
+					`A` | `B` | `A \|\| B`
+					-- | -- | -- 
+					`true` | `true` | `true`
+					`true` | `false` | `true`
+					`false` | `true` | `true`
+					`false` | `false` | `false`
+
+					--
+
+					## Conditional ternary operator
+
+					JS also has a "shortcut" operator for writing quick conditionals
+
+					it needs 3 values to work: 
+
+					```js
+					condition ? valueIfTrue : valueIfFalse;
+					```
+
+					--
+
+					```js
+					let mood = forecast === "sunny" ? "happy" : "sad";
+					```
+					
+					is equivalent to 
+
+					```js
+					let mood;
+					if (forecast === "sunny") {
+						mood = "happy";
+					} else {
+						mood = "sad";
+					}
+					```
+					--
+
+					### Exercise
+					
+					In our Quiz, follow TODO 8 to complete the event handler function:
+					- Get the guessed value, i.e. value of whichever button was clicked
+					- Compare the guessed value to the real answer using your `isCorrect` function
+					- Use a conditional to add the "correct" or "incorrect" class to the clicked button
+
+					`element.classList.add("classname")` lets you add a CSS class
+				  
+
+					</textarea>
+				</section>
+				<section data-markdown data-separator-vertical="\n--\n">
+					<textarea data-template>
+					## Great job!!
+
+					<img src="https://media4.giphy.com/media/d20PG6M6SAFqtmce9r/giphy.gif?cid=ecf05e47yl9p8h13npheakz6i358m6dnmcyg39yxcmiqbyru&rid=giphy.gif&ct=g" alt="Gif from Schitt's Creek of David saying 'Look at you go'" />
+					 
+					</textarea>
+				</section>
+				
+			</div>
+		</div>
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js" integrity="sha512-131e3mIrDAyUD075SVzvIjS0g97uDg0+/qAobDHd++h+lgFi4z88DVOpidm06jpb+0PzK4kcm9w79r6EHV0SkA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/notes/notes.min.js" integrity="sha512-nLsCkPS/rdxRVOkxiKnld9KhQ24V/5kRChzSZ3MoFODykbWyBlQRsHLrbpN3J4LabYBnXIp1EnRIo3ifvyiQIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js" integrity="sha512-QAU7Ux8iEB53koLKFCtddfFp0D1+uQWoX3ROnRDLeiE98XHOkMciaup0Spc014jQAuJaqz8VjUZdBqriheI4Lg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js" integrity="sha512-U3fPDUX5bMrn1wnYqjaK44MFA9E6MKS+zPAg9WPAGF5XhReBeDj3FGaA831CjueG+YJxYA3WaO/m33kMIoOs/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
+		<!-- CopyCode plugin for copy button on code samples -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/reveal.js-copycode@1.0.4/plugin/copycode/copycode.js"></script>
 		
 		<script>
 			// Slides powered by revealjs.com
-
+			
 			// More info about initialization & config:
 			// - https://revealjs.com/initialization/
 			// - https://revealjs.com/config/
 			Reveal.initialize({
 				hash: true,
-
+				
 				// Learn about plugins: https://revealjs.com/plugins/
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, CopyCode ]
 			});
+		
 		</script>
 	</body>
 </html>
diff --git a/3-doggofetch-finished.html b/3-doggofetch-finished.html
new file mode 100644
index 0000000..7a64c5e
--- /dev/null
+++ b/3-doggofetch-finished.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Doggo Fetch</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 70%;
+            margin: 1em auto;
+        }
+        main {
+            max-width: 70%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        img {
+            max-width: 100%;
+        }
+        #image-frame {
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem auto;
+        }
+        #explanation, #score {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            max-width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+        .hidden {
+            display: none;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Guess the Doggo</h1>
+    <p>What breed is the dog in this image?</p>
+
+    </header>
+
+    <main>
+    <div id="image-frame" >
+    </div>
+    <div id="options">
+    </div>
+
+    </main>
+
+  </body>
+
+
+  <script type="module">
+
+    const RANDOM_IMG_ENDPOINT = "https://dog.ceo/api/breeds/image/random";
+
+    const BREEDS = ["affenpinscher", "african", "airedale", "akita", "appenzeller", "shepherd australian", "basenji", "beagle", "bluetick", "borzoi", "bouvier", "boxer", "brabancon", "briard", "norwegian buhund", "boston bulldog", "english bulldog", "french bulldog", "staffordshire bullterrier", "australian cattledog", "chihuahua", "chow", "clumber", "cockapoo", "border collie", "coonhound", "cardigan corgi", "cotondetulear", "dachshund", "dalmatian", "great dane", "scottish deerhound", "dhole", "dingo", "doberman", "norwegian elkhound", "entlebucher", "eskimo", "lapphund finnish", "bichon frise", "germanshepherd", "italian greyhound", "groenendael", "havanese", "afghan hound", "basset hound", "blood hound", "english hound", "ibizan hound", "plott hound", "walker hound", "husky", "keeshond", "kelpie", "komondor", "kuvasz", "labradoodle", "labrador", "leonberg", "lhasa", "malamute", "malinois", "maltese", "bull mastiff", "english mastiff", "tibetan mastiff", "mexicanhairless", "mix", "bernese mountain", "swiss mountain", "newfoundland", "otterhound", "caucasian ovcharka", "papillon", "pekinese", "pembroke", "miniature pinscher", "pitbull", "german pointer", "germanlonghair pointer", "pomeranian", "medium poodle", "miniature poodle", "standard poodle", "toy poodle", "pug", "puggle", "pyrenees", "redbone", "chesapeake retriever", "curly retriever", "flatcoated retriever", "golden retriever", "rhodesian ridgeback", "rottweiler", "saluki", "samoyed", "schipperke", "giant schnauzer", "miniature schnauzer", "english setter", "gordon setter", "irish setter", "sharpei", "english sheepdog", "shetland sheepdog", "shiba", "shihtzu", "blenheim spaniel", "brittany spaniel", "cocker spaniel", "irish spaniel", "japanese spaniel", "sussex spaniel", "welsh spaniel", "english springer", "stbernard", "american terrier", "australian terrier", "bedlington terrier", "border terrier", "cairn terrier", "dandie terrier", "fox terrier", "irish terrier", "kerryblue terrier", "lakeland terrier", "norfolk terrier", "norwich terrier", "patterdale terrier", "russell terrier", "scottish terrier", "sealyham terrier", "silky terrier", "tibetan terrier", "toy terrier", "welsh terrier", "westhighland terrier", "wheaten terrier", "yorkshire terrier", "tervuren", "vizsla", "spanish waterdog", "weimaraner", "whippet", "irish wolfhound"];
+
+    
+    // Utility function to get a randomly selected item from an array
+    function getRandomElement(array) {
+        const i = Math.floor(Math.random() * array.length);
+        return array[i];
+    }
+
+    // Utility function to shuffle the order of items in an array in-place
+    function shuffleArray(array) {
+        return array.sort((a,b) => Math.random() - 0.5);
+    }
+
+
+
+    // TODO 1
+    // Given an array of possible answers, a correct answer value, and a number of choices to get,
+    // return a list of that many choices, including the correct answer and others from the array
+    function getMultipleChoices(n, correctAnswer, array) {
+        // Use a while loop and the getRandomElement() function
+        // Make sure there are no duplicates in the array
+        const choices = [correctAnswer];
+        while (choices.length < n) {
+            let candidate = getRandomElement(array);
+            if (choices.indexOf(candidate) < 0) { // check if this is already in the array
+                choices.push(candidate); // if not, add it
+            }
+        }
+        return shuffleArray(choices);
+    }
+
+    
+    // TODO 2
+    // Given a URL such as "https://images.dog.ceo/breeds/poodle-standard/n02113799_2280.jpg"
+    // return the breed name string as formatted in the breed list, e.g. "standard poodle"
+    function getBreedFromURL(url) {
+        // The string method .split(char) may come in handy
+        // Try to use destructuring as much as you can
+        const [,path] = url.split("/breeds/");
+        const [breedID] = path.split("/");
+        const [breed, subtype] = breedID.split("-");
+        return [subtype, breed].join(" ");
+    }
+
+
+
+    // TODO 3
+    // Given a URL, fetch the resource at that URL, 
+    // then parse the response as a JSON object,
+    // finally return the "message" property of its body
+    async function fetchMessage(url) {
+        const response = await fetch(url);  // Fetch the resource at the given URL
+        const {message} = await response.json(); // Parse the response as JSON & remember its 'message' value
+        return message; // Return the message
+    }
+
+
+    // Function to add the multiple-choice buttons to the page
+    function renderButtons(choicesArray, correctAnswer) {
+
+        // Event handler function to compare the clicked button's value to correctAnswer
+        // and add "correct"/"incorrect" classes to the buttons as appropriate
+        function buttonHandler(e) {
+            if (e.target.value === correctAnswer) {
+                e.target.classList.add("correct");
+            } else {
+                e.target.classList.add("incorrect");
+                document.querySelector(`button[value="${correctAnswer}"]`).classList.add("correct");
+            }
+        }
+
+        const options = document.getElementById("options"); // Container for the multiple-choice buttons
+
+        // TODO 4
+        // For each of the choices in choicesArray,
+        // Create a button element whose name, value, and textContent properties are the value of that choice,
+        // attach a "click" event listener with the buttonHandler function,
+        // and append the button as a child of the options element
+        choicesArray.map(choice => {
+            let button = document.createElement("button");
+            button.value = button.name = button.textContent = choice;
+            button.addEventListener("click", buttonHandler);
+            options.appendChild(button);
+        })
+    }
+
+
+    // Function to add the quiz content to the page
+    function renderQuiz(imgUrl, correctAnswer, choices) {
+        const image = document.createElement("img");
+        image.setAttribute("src", imgUrl);
+        const frame = document.getElementById("image-frame");
+
+        image.addEventListener("load", () => {
+            // Wait until the image has finished loading before trying to add elements to the page
+            frame.replaceChildren(image);
+            renderButtons(choices, correctAnswer);
+        })
+        
+    }
+
+    // Function to load the data needed to display the quiz
+    async function loadQuizData() {
+        document.getElementById("image-frame").textContent = "Fetching doggo...";
+        
+        const doggoImgUrl = await fetchMessage(RANDOM_IMG_ENDPOINT);
+        const correctBreed = getBreedFromURL(doggoImgUrl);
+        const breedChoices = getMultipleChoices(3, correctBreed, BREEDS);
+
+        return [doggoImgUrl, correctBreed, breedChoices];
+    }
+
+    // TODO 5
+    // Asynchronously call the loadQuizData() function,     
+    // Then call renderQuiz() with the returned imageUrl, correctAnswer, and choices 
+    const [imageUrl, correctAnswer, choices] = await loadQuizData();
+    renderQuiz(imageUrl, correctAnswer, choices);
+    
+
+
+  </script>
+</html>
diff --git a/3-doggofetch-starter.html b/3-doggofetch-starter.html
new file mode 100644
index 0000000..96b31b4
--- /dev/null
+++ b/3-doggofetch-starter.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Doggo Fetch</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 70%;
+            margin: 1em auto;
+        }
+        main {
+            max-width: 70%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        img {
+            max-width: 100%;
+        }
+        #image-frame {
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem auto;
+        }
+        #explanation, #score {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            max-width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+        .hidden {
+            display: none;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Guess the Doggo</h1>
+    <p>What breed is the dog in this image?</p>
+
+    </header>
+
+    <main>
+    <div id="image-frame" >
+    </div>
+    <div id="options">
+    </div>
+
+    </main>
+
+  </body>
+
+
+  <script type="module">
+
+    const RANDOM_IMG_ENDPOINT = "https://dog.ceo/api/breeds/image/random";
+
+    const BREEDS = ["affenpinscher", "african", "airedale", "akita", "appenzeller", "shepherd australian", "basenji", "beagle", "bluetick", "borzoi", "bouvier", "boxer", "brabancon", "briard", "norwegian buhund", "boston bulldog", "english bulldog", "french bulldog", "staffordshire bullterrier", "australian cattledog", "chihuahua", "chow", "clumber", "cockapoo", "border collie", "coonhound", "cardigan corgi", "cotondetulear", "dachshund", "dalmatian", "great dane", "scottish deerhound", "dhole", "dingo", "doberman", "norwegian elkhound", "entlebucher", "eskimo", "lapphund finnish", "bichon frise", "germanshepherd", "italian greyhound", "groenendael", "havanese", "afghan hound", "basset hound", "blood hound", "english hound", "ibizan hound", "plott hound", "walker hound", "husky", "keeshond", "kelpie", "komondor", "kuvasz", "labradoodle", "labrador", "leonberg", "lhasa", "malamute", "malinois", "maltese", "bull mastiff", "english mastiff", "tibetan mastiff", "mexicanhairless", "mix", "bernese mountain", "swiss mountain", "newfoundland", "otterhound", "caucasian ovcharka", "papillon", "pekinese", "pembroke", "miniature pinscher", "pitbull", "german pointer", "germanlonghair pointer", "pomeranian", "medium poodle", "miniature poodle", "standard poodle", "toy poodle", "pug", "puggle", "pyrenees", "redbone", "chesapeake retriever", "curly retriever", "flatcoated retriever", "golden retriever", "rhodesian ridgeback", "rottweiler", "saluki", "samoyed", "schipperke", "giant schnauzer", "miniature schnauzer", "english setter", "gordon setter", "irish setter", "sharpei", "english sheepdog", "shetland sheepdog", "shiba", "shihtzu", "blenheim spaniel", "brittany spaniel", "cocker spaniel", "irish spaniel", "japanese spaniel", "sussex spaniel", "welsh spaniel", "english springer", "stbernard", "american terrier", "australian terrier", "bedlington terrier", "border terrier", "cairn terrier", "dandie terrier", "fox terrier", "irish terrier", "kerryblue terrier", "lakeland terrier", "norfolk terrier", "norwich terrier", "patterdale terrier", "russell terrier", "scottish terrier", "sealyham terrier", "silky terrier", "tibetan terrier", "toy terrier", "welsh terrier", "westhighland terrier", "wheaten terrier", "yorkshire terrier", "tervuren", "vizsla", "spanish waterdog", "weimaraner", "whippet", "irish wolfhound"];
+
+    
+    // Utility function to get a randomly selected item from an array
+    function getRandomElement(array) {
+        const i = Math.floor(Math.random() * array.length);
+        return array[i];
+    }
+
+    // Utility function to shuffle the order of items in an array in-place
+    function shuffleArray(array) {
+        return array.sort((a,b) => Math.random() - 0.5);
+    }
+
+
+
+    // TODO 1
+    // Given an array of possible answers, a correct answer value, and a number of choices to get,
+    // return a list of that many choices, including the correct answer and others from the array
+    function getMultipleChoices(n, correctAnswer, array) {
+        // Use a while loop and the getRandomElement() function
+        // Make sure there are no duplicates in the array
+
+    }
+
+    
+    // TODO 2
+    // Given a URL such as "https://images.dog.ceo/breeds/poodle-standard/n02113799_2280.jpg"
+    // return the breed name string as formatted in the breed list, e.g. "standard poodle"
+    function getBreedFromURL(url) {
+        // The string method .split(char) may come in handy
+        // Try to use destructuring as much as you can
+        
+    }
+
+
+
+    // TODO 3
+    // Given a URL, fetch the resource at that URL, 
+    // then parse the response as a JSON object,
+    // finally return the "message" property of its body
+    async function fetchMessage(url) {
+        
+    }
+
+
+    // Function to add the multiple-choice buttons to the page
+    function renderButtons(choicesArray, correctAnswer) {
+
+        // Event handler function to compare the clicked button's value to correctAnswer
+        // and add "correct"/"incorrect" classes to the buttons as appropriate
+        function buttonHandler(e) {
+            if (e.target.value === correctAnswer) {
+                e.target.classList.add("correct");
+            } else {
+                e.target.classList.add("incorrect");
+                document.querySelector(`button[value="${correctAnswer}"]`).classList.add("correct");
+            }
+        }
+
+        const options = document.getElementById("options"); // Container for the multiple-choice buttons
+
+        // TODO 4
+        // For each of the choices in choicesArray,
+        // Create a button element whose name, value, and textContent properties are the value of that choice,
+        // attach a "click" event listener with the buttonHandler function,
+        // and append the button as a child of the options element
+        
+    }
+
+
+    // Function to add the quiz content to the page
+    function renderQuiz(imgUrl, correctAnswer, choices) {
+        const image = document.createElement("img");
+        image.setAttribute("src", imgUrl);
+        const frame = document.getElementById("image-frame");
+
+        image.addEventListener("load", () => {
+            // Wait until the image has finished loading before trying to add elements to the page
+            frame.replaceChildren(image);
+            renderButtons(choices, correctAnswer);
+        })
+        
+    }
+
+    // Function to load the data needed to display the quiz
+    async function loadQuizData() {
+        document.getElementById("image-frame").textContent = "Fetching doggo...";
+        
+        const doggoImgUrl = await fetchMessage(RANDOM_IMG_ENDPOINT);
+        const correctBreed = getBreedFromURL(doggoImgUrl);
+        const breedChoices = getMultipleChoices(3, correctBreed, BREEDS);
+
+        return [doggoImgUrl, correctBreed, breedChoices];
+    }
+
+    // TODO 5
+    // Asynchronously call the loadQuizData() function,     
+    // Then call renderQuiz() with the returned imageUrl, correctAnswer, and choices 
+    
+    
+
+
+  </script>
+</html>
diff --git a/3-doggofetch.html b/3-doggofetch.html
deleted file mode 100644
index 459b25e..0000000
--- a/3-doggofetch.html
+++ /dev/null
@@ -1,199 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <title>Doggo Fetch</title>
-    <style>
-        body {
-            margin: 1rem auto;
-            padding: 3rem;
-            font-family: sans-serif;
-        }
-        header {
-            width: 70%;
-            margin: 1em auto;
-        }
-        main {
-            max-width: 70%;
-            margin: 0px auto;
-            display:flex; 
-            flex-direction: column;
-        }
-        img {
-            max-width: 100%;
-        }
-        #image-frame {
-            font-size: x-large;
-            text-align: center;
-            margin: 1rem auto;
-        }
-        #explanation, #score {
-            padding: 1rem;
-            text-align: center;
-        }
-        #options {
-            max-width: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-        button {
-            padding: 0.5rem;
-            font-size: medium;
-            border-radius: 5px;
-        }
-        .correct {
-            background-color: lightgreen;
-        }
-        .incorrect {
-            background-color: lightpink;
-        }
-        .hidden {
-            display: none;
-        }
-    </style>
-  </head>
-  <body>
-    <header>
-    <h1>Guess the Doggo</h1>
-    <p>What breed is the dog in this image?</p>
-
-    </header>
-
-    <main>
-    <div id="image-frame" >
-        Fetching doggo...
-    </div>
-    <div id="options">
-    </div>
-
-    </main>
-
-  </body>
-
-  <!-- Loading the utilities script does not work locally due to CORS -->
-  <script type="module" src="./3-utilities.js" ></script>
-
-
-  <script type="module">
-
-    const breedsEndpoint = "https://dog.ceo/api/breeds/list/all";
-    const randomImgEndpoint = "https://dog.ceo/api/breeds/image/random";
-
-
-    async function fetchMessage(url) {
-        // Fetch the resource at the given URL, parse & return the "message" property of its body
-        // TODO error handling
-        const response = await fetch(url);
-        const json = await response.json();
-        const {message} = json;
-        return message;
-    }
-
-    function generateBreedList(breedsObject) {
-        // Transform the nested Object from the API into a more usable array of strings
-        // e.g. { "terrier": ["scottish", "westhighland"]} becomes ["scottish terrier", "westhighland terrier"]
-        const breedList = []
-        for (let breed in breedsObject) {
-            const subtypes = breedsObject[breed];
-            if (subtypes.length > 0) {
-                let breedTypes = subtypes.map(sub => `${sub} ${breed}`);
-                breedList.push(...breedTypes);
-            } else {
-                breedList.push(breed);
-            }
-        }
-        return breedList;
-    }
-
-
-    function getBreedFromURL(url) {
-        // Given a URL such as "https://images.dog.ceo/breeds/poodle-standard/n02113799_2280.jpg"
-        // return the breed name string as formatted in the breed list, e.g. "standard poodle"
-        const path = url.replace("https://images.dog.ceo/breeds/", "");
-        const breedID = path.split("/")[0];
-        const [breed, subtype] = breedID.split("-");
-        return `${subtype ? subtype + " " : ""}${breed}`;
-    }
-
-    
-    function getRandomElement(array) {
-        const i = Math.floor(Math.random() * array.length);
-        return array[i];
-    }
-
-    function shuffleArray(array) {
-        // randomly shuffles elements in an array in-place
-        return array.sort((a,b) => Math.random() - 0.5);
-    }
-
-    function getChoices(n, correctAnswer, array) {
-        // Generate a list of n choices including the correct answer and others from the array
-        const choices = [correctAnswer];
-        while (choices.length < n) {
-            let candidate = getRandomElement(array);
-            if (choices.indexOf(candidate) < 0) { // check if this is already in the array
-                choices.push(candidate); // if not, add it
-            }
-        }
-        return shuffleArray(choices);
-    }
-
-
-    function renderButtons(breedChoices, correctBreed) {
-        const options = document.getElementById("options");
-
-        function buttonHandler(e) {
-            if (e.target.value === correctBreed) {
-                e.target.classList.add("correct");
-            } else {
-                e.target.classList.add("incorrect");
-                document.querySelector(`button[value="${correctBreed}"]`).classList.add("correct");
-            }
-        }
-
-        breedChoices.map(breed => {
-            let button = document.createElement("button");
-            button.value = breed;
-            button.name = breed;
-            button.innerText = breed;
-            button.addEventListener("click", buttonHandler);
-            options.appendChild(button);
-        })
-    }
-
-    function renderQuiz(imgURL, correctBreed, breedChoices) {
-        const image = document.createElement("img");
-        image.setAttribute("src", randomImg);
-        const frame = document.getElementById("image-frame");
-
-        image.addEventListener("load", () => {
-            // Wait until the image has finished loading before trying to add elements to the page
-            frame.replaceChildren(image);
-            renderButtons(breedChoices, thisBreed);
-        })
-        
-    }
-
-    async function loadQuizData(breedsEndpoint, randomImgEndpoint, nChoices) {
-        const breeds = generateBreedList(await fetchMessage(breedsEndpoint));
-
-        const randomImg = await fetchMessage(randomImgEndpoint);
-        console.log(randomImg);
-
-        const thisBreed = getBreedFromURL(randomImg);
-        console.log(thisBreed, breeds.indexOf(thisBreed));
-
-        const breedChoices = getChoices(nChoices, thisBreed, breeds);
-        console.log(breedChoices);
-
-        return [randomImg, thisBreed, breedChoices];
-    }
-
-    
-    const [randomImg, thisBreed, breedChoices] = await loadQuizData(breedsEndpoint, randomImgEndpoint, 3);
-    renderQuiz(randomImg, thisBreed, breedChoices);
-    
-
-
-  </script>
-</html>
diff --git a/3-slides.html b/3-slides.html
index 82f3e8a..c1630a2 100644
--- a/3-slides.html
+++ b/3-slides.html
@@ -24,30 +24,198 @@
 		<div class="reveal">
 			<div class="slides">
 				
+				<section data-markdown>
+					<textarea data-template>
+						## JavaScript First Steps
+						### A [FrontendMasters](https://frontendmasters.com) course by [AnjanaVakil](https://twitter.com/AnjanaVakil)
+						[anjana.dev/javascript-first-steps](https://anjana.dev/javascript-first-steps)
+					</textarea>
+				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					# DAY 3
-
+					# PART 3
 
 					--
 
-					Today's project: Adapt yesterday's project for a new app 
+
+					---
+
+					Next project: Adapt our quiz for something cuter
 
 					<img src="https://media4.giphy.com/media/3o6wrdHsBoJKGaHjQk/giphy.gif?cid=790b76115baa58b80e31c3667efa5279bf10929f247d7752&rid=giphy.gif&ct=g" alt="Gif from Clueless of Cher saying excitedly 'Let's do a makeover!' with Dionne smiling excitedly in the background" />
 
+					--
+
+					[Doggo Fetch](./3-doggofetch-finished.html)
+
+					- Go to [anjana.dev/javascript-first-steps](https://anjana.dev/javascript-first-steps)
+					- In Day 3, go to the [starter](./3-doggofetch-starter.html) file
+					- Save & open in your text editor
+
+					--
+
+					<img src="https://media1.giphy.com/media/l0ErMA0xAS1Urd4e4/giphy.gif?cid=790b761117c3fdff6e37afdfc7134cf3f023217faf11ba6e&rid=giphy.gif&ct=g" alt="Gif from Clueless of Cher excitedly saying 'Project!'" />
+
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## Fetching data
+						## Loops ...continued
+
+						<img src="https://media3.giphy.com/media/dmwNbzYfECjGNRmEAM/giphy.gif?cid=790b761163dd284750f507d2339930b6b6f67478beff5de6&rid=giphy.gif&ct=g" alt="Gif of Cardi B saying 'I have to keep replaying it, replaying it, replaying it'" />	
+
+						--
+						
+						### `while` loops
+
+						let us run a chunk of code over & over if a `(condition)` is true
+	
+						```js
+						let fiveRandomNumbers = [];
+						while (fiveRandomNumbers.length < 5) {
+							fiveRandomNumbers.push(Math.random());
+						}
+						```
+	
+	
+						--
+						Don't use `while (true)` unless you want to see your computer burn!
+	
+						```js
+						while (true) {
+							console.log("I am wasting resources infinitely");
+						}
+						``` 
+	
+						<img src="https://media2.giphy.com/media/yr7n0u3qzO9nG/giphy.gif?cid=ecf05e47n1a4v027fr8jlxwjoyhkxbrje74z19nphtvf63n2&rid=giphy.gif&ct=g" alt="Gif of Elmo with firey background" />
+	
+
+						--
+
+						### Exercise 
+
+						In the Doggo Fetch starter, follow TODO 1 to fill in the `getMultipleChoices` function using a `while` loop 
 
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					### Synchronous vs. Asynchronous
 
-					[a] [syn] [chronous]
+					## (A)synchronous code
+
+					<img src="https://64.media.tumblr.com/tumblr_m5q73kYQBy1qhjikro1_500.gif" alt="Gif of Cyndi Lauper singing 'Time after time'" />
+					
+					Time & JS are ...frenemies
+
+					--
+
+					Usually, our JS code does things that are very quick
+
+					```js
+					console.log("This will print in a New York minute");
+					console.log("This will print one New York minute later");
+					```
+
+					So JS can usually run straight through our program "synchronously"
+
+					--
+
+					But when we need to do something that takes a long time
+
+					<img width=400 src="https://img.discogs.com/iY-SmCiof2l7QMiphjeU6Hn9Gj4=/fit-in/600x522/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-798521-1462656116-4395.jpeg.jpg" alt="Cover of Paula Cole's 'I dont wanna wait'" />
+
+					we still want the web browser to keep working
+					
+					--
+
+					JS can only do one task at a time ("single-threaded")
+
+					<img width="400" src="https://chiasuanchong.files.wordpress.com/2012/02/lady_gaga-telephone-coke-cans3.jpg" alt="Image of Lady Gaga from the video Telephone" />
+
+					JS says: *I cannot text you with a drink in my hand, eh*
+					<span style="font-size:small">Metaphor courtesy Daniel Higginbotham</span>
+					
+
+					--
+
+					So when we give JS a task that takes a while, it doesn't stop and wait
+
+					```js
+					console.log("This will print first");
+					setTimeout(() => console.log("This will print third"), 1000);
+					console.log("This will print second");
+					```
+
+					it adds the slow task to a "TODO list" and keeps on running our program
+
+					The task runs some time later, "asynchronously"
+
+					--
+
+					Some things that take time: 
+					- Waiting for user events
+					- Asking a user to pick a file
+					- Getting permission to access the camera/mic
+					- *Loading data from the interwebs*
+
+					--
+
+					Another thing that takes time:
+					- Learning about asynchronous JS
+
+
+					Add it to your TODO list!
+					- [MDN: Introducing Asynchronous JS](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing)
+					- [Philip Roberts: What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
+
+					</textarea>
+				</section>
+				
+				<section data-markdown data-separator-vertical="\n--\n">
+					<textarea data-template>
+					## Fetching data
+
+					<img src="https://media3.giphy.com/media/O1xeZ4AgSaNBS/giphy.gif?cid=ecf05e479mwf2ythgo0l5xraq88ps0gk4gx1zk4jsuef7kyt&rid=giphy.gif&ct=g" alt="Gif of dog playing fetch with a robotic ball throwing machine" />
+
+					--
+					URLs point to resources on the web
+
+					`https://images.dog.ceo/breeds/bluetick/n02088632_924.jpg`
+
+					<img src="https://images.dog.ceo/breeds/bluetick/n02088632_924.jpg" alt="Photo of a Bluetick dog" />
+
+					--
+
+					APIs provide URLs that point at data we care about 
+
+					`https://dog.ceo/api/breed/hound/list`
+
+					```json
+					  {
+						"message": [
+						  "afghan",
+						  "basset",
+						  "blood",
+						  "english",
+						  "ibizan",
+						  "plott",
+						  "walker"
+						],
+						"status": "success"
+					  }
+					```
+
+
+					--
+
+					`fetch()` lets us use JS to load data from APIs 
+
+					```js
+					fetch("https://dog.ceo/api/breed/hound/list")
+					```
+
+					But if we run it in the console, we see something weird...
+
 
 					</textarea>
 				</section>
@@ -55,11 +223,107 @@
 					<textarea data-template>
 					## Promises
 
+					--
+
+					It takes time to fetch data from the network
+					
+					```js
+					>> fetch("https://dog.ceo/api/breed/hound/list")
+					Promise { <state>: "pending" }
+					```
+					
+					So JS writes us an "IOU" for the data value it doesn't have yet
+
+					aka a `Promise` of a value
+
+					--
+
+					Promises can be in 3 possible states: 
+					- `pending`: still waiting for the value, hang tight
+					- `fulfilled` (aka "resolved"): finally got the value, all done
+					- `rejected`: sorry couldn't get the value, all done
+
+					It takes time for Promises to resolve, so they are "asynchronous"
+
+					--
+
+					JS adds the task to the TODO list and keeps running our program
+
+					<img src="https://media2.giphy.com/media/Tia13RncGbb05SUPve/giphy.gif?cid=ecf05e47icfvq0cyyvuexqew1vcockzorxi3ackmg5zdayie&rid=giphy.gif&ct=g" alt="Gif from Friends of Joey saying 'I wanna gooooo'" />
+
+					But our program needs the data, we want JS to stop and wait for the Promise to resolve
+
+				
+
 					</textarea>
 				</section>
+
+
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## `async` & `await`
+					## `await`
+
+					--
+
+					`await` lets us tell JS to stop and wait for an asynchronous operation to finish
+
+					<img src="https://media2.giphy.com/media/VIEy2m9UtWatviq1U6/giphy.gif?cid=ecf05e47b9mwi4ha9k3uli20dpkfod70c0ly17p4gtets8qa&rid=giphy.gif&ct=g" alt="Gif of Spice Girls singing 'Stop'" />
+
+					In the case of a Promise, it waits for it to resolve before continuing with our code
+
+					--
+
+					The Promise we get from `fetch()` resolves to a `Response` object 
+
+					```js
+					let response = await fetch("https://dog.ceo/api/breed/hound/list");
+					console.log(response);
+					```
+
+					--
+
+					It's `body` contains the data we care about
+
+					<img src="https://media3.giphy.com/media/ON5IJj2BmotiM/giphy.gif?cid=ecf05e47wmzome5hh8tc9k2vewizfznw6ne77jacd56c8tr5&rid=giphy.gif&ct=g" alt="Gif of the Spice Girls singing 'Slam your body down'" />
+
+					But we have to read the body somehow
+
+					--
+
+					Calling the `.json()` method on the response parses its body as a JSON object
+
+					```js
+					response.json()
+					```
+
+					But that gives us another Promise!
+
+					--
+
+					This is getting frustrating... 
+
+					<img src="https://media0.giphy.com/media/5G98t8QjqBLK8/giphy.gif?cid=ecf05e47oqia9tg2xoks8h28ycs2r79sxrri4nw7qvec3lvz&rid=giphy.gif&ct=g" alt="Gif from Mean Girls of Regina George saying 'Stop trying to make fetch happen'" />
+
+					But don't give up!
+
+					--
+
+					Let's try again, this time `await`ing the JSON Promise too
+
+					```js
+					let response = await fetch("https://dog.ceo/api/breed/hound/list");
+					let body = await response.json();
+					```
+
+					--
+
+					`success`!!! 
+
+					<img src="https://media3.giphy.com/media/3oKIPkMhoaMlhtarF6/giphy.gif?cid=ecf05e47oe7xk2v5w5dyybq39zzysptnonm2uz4qfqipp3nv&rid=giphy.gif&ct=g" alt="Gif from Mean Girls of Gretchen Wieners saying 'That is so fetch'" />
+					<!-- <img src="https://media3.giphy.com/media/Yq5ns8rzatwPe/giphy.gif?cid=ecf05e4793oqka45n46x6n56g0hmb2kve7ctlcueilz8skab&rid=giphy.gif&ct=g" alt="Gif of Spice Girls accepting an award and cheering" /> -->
+
+					...but now we have to use the data!
+
 
 					</textarea>
 				</section>
@@ -67,52 +331,388 @@
 					<textarea data-template>
 					## Destructuring
 
+					<img src="https://raw.githubusercontent.com/SaraVieira/open-source-stickers/master/stickers/deconstructing-unicorn/unicorn.png" alt="Destructuring an emoji unicorn " />
+					<span style="font-size:small;">Illustration by Sara Vieira</span>
+					--
+
+					Destructuring is a fancy way of declaring multiple variables at once
+
+					By "extracting" values from an object with their property names
+
+					```js
+					let {name, nickname} = spices[0];
+					```
+
+					--
+
+					If we only care about some of the properties, we can omit the others
+
+					```
+					let {nickname} = spices[2];
+					```
+
+					--
+
+					We can also destructure Arrays, assigning variables for their items
+
+					```js
+					const [baby, ginger, scary, sporty, posh] = spices;
+					```
+
+					--
+
+					We can ignore the values in the array we don't need
+
+					```js
+					const [emma, geri] = spices; 
+					```
+
+					We can use commas to "skip" values
+
+					```js
+					const [,,melB] = spices;
+					```
+
+					--
+
+					We can use `...` to collect remaining values
+
+					```js
+					const [babySpice, ...adultSpices] = spices;
+					```
+					
+					--
+
+					### Exercise
+
+					In your Doggo Fetch file, follow TODO 2 to complete the `getBreedFromURL` function with destructuring
+
+					The string method `.split()` will be useful - it returns an array of substrings by splitting a string at a certain character: 
+
+					```js
+					let [first, middle, last] = "Anjana Sofia Vakil".split(" ");
+					```
+
+
+					--
+
+					*Back to our fetched data...*
+
+					Let's destructure the data we fetched so that we can use it!
+
+					
+					```js
+					let { message } = body;
+					```
+
+					We only really care about the `message`
+
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## Spread (`...`)
+					## `async` functions
+
+					Let's wrap all our async fetching & parsing code up into a function!
+
+					<img src="https://media4.giphy.com/media/3ornkdvPFqHxkC5QE8/giphy.gif?cid=ecf05e47ie2j2c7n436m52eykppvxmoydo7vuhjr7fqqdfm1&rid=giphy.gif&ct=g" alt="Gif of Buster saying 'Wrap it up'" />
+
+					--
+
+					If we try to `await` something in a regular `function`...
+
+					```js
+					function fetchResponse(url) {
+						const response = await fetch(url);
+						return response;
+					}
+					```
+
+					JS doesn't allow it
+
+					--
+
+					We need to make it an `async function` 
+
+					```js
+					async function fetchResponse(url) {
+						const response = await fetch(url);
+						return response;
+					}
+					```
+
+					This tells JS to expect to `await` async operations inside the function
+
+					--
+
+					### Exercise
+
+					In your Doggo Fetch file, follow TODO 3 to fill in the `async function` body 
+
+					Use what we've learned about how to fetch, parse, and extract the data we need!
+					
+					
 
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## `ERROR` !!
+					## Putting our doggos to bed
+
+					Let's finish up the last TODOs, 4 & 5
+
+					They require you to practice skills you've learned so far
 
+					--
+
+					We're up & running with JS!!!
+
+					<img src="https://media3.giphy.com/media/GicdPSmxr5J1C/giphy.gif?cid=ecf05e473qqce70k7alrxq9k2ggus7k4wrwq4cs1ombjpx7h&rid=giphy.gif&ct=g" alt="Gif of dog riding a scooter" />
+
+					Amazing job! 
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## Debugging
+						## JS in the wild
+
+						<img src="https://media4.giphy.com/media/v9bipbbqgOmCSSpPgl/giphy.gif?cid=ecf05e47sa3nms325cej3243cl26ntt6wk6ntrn18zdjyqeb&rid=giphy.gif&ct=g" alt="Gif from The Matrix of Morpheus saying 'Welcome to the real world'" />
+
+						--
+
+						There is *lots* more we could say about JS
+
+						Let's talk about a few other concepts relevant to using JS in real life
 
-					<img src="http://static.brit.co.s3.amazonaws.com/wp-content/uploads/2012/07/tumblr_m7cbztPztz1qdf43eo1_500.gif" alt="Gif from Clueless of Cher standing in front of a chalkboard saying 'I was like totally buggin'" />
 
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## `try` & `catch`
+					## Modules
+
+					<img src="https://media0.giphy.com/media/l0JMrPWRQkTeg3jjO/giphy.gif?cid=ecf05e47pagiiw3sbae054ux0xw1q1i81rt4youv25pzuit2&rid=giphy.gif&ct=g" alt="Gif of Lego blocks building infinitely" />
+
+					--
+
+					### Top-level `await`
+
+					At the end of our doggo program we had to use `await` *outside* of a function
+
+					This isn't usually possible in JS... 
+
+					--
+
+					Take a closer look at our `script` tag: 
+
+					```html
+					<script type="module">
+						//...
+					</script>
+					```
+
+					JS *modules* work differently from JS *scripts* 
+					--
+
+					One difference is that we can't use `await` outside of a function in a script
+
+					```html
+					<script>
+						await fetch("https://dog.ceo/api/breed/hound/list");
+					</script>
+					```
+
+					-- 
+
+					### Module scope
+
+					Another difference is that modules create their own scope
+
+					Try loading the page and accessing the `BREEDS` variable we declare in the module
+
+					--
+
+					### `import` && `export`
+					
+					Modules exist to let us split big codebases across multiple files
+
+					`export` lets us expose variables from our module's scope to the outside world
+
+					```js
+					// myModule.js
+					const veryUsefulFunction = () => "I came from a module";
+
+					export { veryUsefulFunction };
+					```
+
+					--
+
+					`import` lets us use an exposed variable from another module
+
+					```js
+					// otherModule.js
+					import { veryUsefulFunction } from './myModule.js'
+
+					veryUsefulFunction();
+					```
+
+					--
+
+					There's lots more to learn about modules!
+
+					[MDN > JS Guide > JS Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
 
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## Modules
+					## Debugging
+
+					<img src="http://static.brit.co.s3.amazonaws.com/wp-content/uploads/2012/07/tumblr_m7cbztPztz1qdf43eo1_500.gif" alt="Gif from Clueless of Cher standing in front of a chalkboard saying 'I was like totally buggin'" />
+
+					--
+
+					A certainty of coding (especially in JS): 
+
+					<img src="https://media1.giphy.com/media/SRqXb3mwF1HCUY1IyE/giphy.gif?cid=ecf05e475h8uzbbhx011p9bkv243j6665g081k1au2ue2mc3&rid=giphy.gif&ct=g" alt="Gif of Rachael Kay Albers saying 'Spectacular failure is part of the game'" />
+
+					Stuff. Will. Go. Wrong! 
+
+					--
+
+					`console.log()` (or `.warn()` or `.error()`) is one way to understand what's happening when your program runs 
+
+					```js
+					function whyIsntThisWorking(input) {
+						console.log("Well at least we got this far");
+						console.log(input);
+						return thingThatDoesntWork(input);
+					}
+					```
+
+					--
+
+					You can also use the browser's debugger to *pause* JS and inspect what's happening
+
+					```js 
+					function whyIsntThisWorking(input) {
+						debugger;
+						return thingThatDoesntWork(input);
+					} 
+					```
+
+					The `debugger` statement creates a *breakpoint* where JS will pause and let you look around
+
+					--
+
+					Different browsers' debuggers work differently
 
-					`import` && `export`
+					- [Firefox](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#the_javascript_debugger)
+					- [Chrome](https://developer.chrome.com/docs/devtools/javascript/)
+					- [Safari](https://support.apple.com/guide/safari-developer/debugging-overview-devd24689f72/mac)
 
 					</textarea>
 				</section>
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
-					## `import` && `export`
+					## Error handling 
+
+					Once we've discovered where in our program an error is likely, we can do something about it!
+
+					<img width="400" src="https://media2.giphy.com/media/TgmmI7eMFNJiOlC3gI/giphy.gif?cid=ecf05e47385ccmzt92sm6lcxk1hjnwnzpr6rnmy708aey0dc&rid=giphy.gif&ct=g" alt="Gif from Schitt's Creek of Alexis saying 'I will handle it'" />
+
+					
+
+					--
+
+					Usually errors will cause JS to stop running our code
+
+					```js
+					thisThrowsAnError();
+					console.log("I'll never get here");
+					```
+
+					--
+
+					Sometimes we want that, other times we can just move on with our (program's) lives
+
+					<img src="https://media0.giphy.com/media/xT9KVeEPWqBlmDLgME/giphy.gif?cid=790b76116463fd70b16cb492bedd196cac5283bbffc344c1&rid=giphy.gif&ct=g" alt="Gif from Clueless of Amber saying 'Whatever'" />
+
+					--
+
+					
+					`try` lets us "watch out" for potential errors
+
+					its friend `catch` lets us manage errors when they occur
+
+					```js
+					try {
+						thisMightThrowAnError();
+					} catch (error) {
+						console.error("Oops, got an Error:", error); 
+						console.log("Whatever, let's press on anyway");
+					}
+					console.log("la dee da, still running the program");
+					```
+
+					--
+
+					Read all about it! 
+
+					[MDN: JS > Statements > try...catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch)
 
 					</textarea>
 				</section>
+				
 				<section data-markdown data-separator-vertical="\n--\n">
 					<textarea data-template>
 					# RECAP
 
+					--
+
+					Look at all your badass new JS magic powers! 
+
+					<img src="https://media1.giphy.com/media/KXGltmsUaqkVi/giphy.gif?cid=790b7611c63c92a1a12aff6c0b16dc918e318ab8dc4224d7&rid=giphy.gif&ct=g" alt="Gif from American Horror Story of Jessica Lange saying 'Who's the baddest witch in town'" />
+
+					--
+
+					### Values
+
+					### Arrays 
+					
+					### Objects
+
+					--
+
+					### Variables 
+
+					### Functions
+
+					### Scope
+					
+
+					--
+
+					### Events
+
+					### Conditionals
+
+					### Loops 
+
+					--
+
+					### Asynchronous code
+
+					### Fancy syntax
+
+					### Real-world skills
+
+					--
+
+					Amazing job!! 
+
+					<img src="https://media0.giphy.com/media/8xgqLTTgWqHWU/giphy.gif?cid=ecf05e47j4a84p60lj492d131mmsgf4y5inqgmpxa2ds7ld5&rid=giphy.gif&ct=g" alt="Gif of kid at retro computer giving thumbs up and looking satisfied" />
+
 					</textarea>
 				</section>
 				<section data-markdown >
@@ -120,8 +720,8 @@
 					## Next steps
 
 					- Dig deeper with more FrontendMasters courses
-					- Refine your mental model with [Just JavaScript]() by Dan Abramov and Maggie Appleton
-					- Explore & investigate on [MDN](developer.mozilla.org)
+					- Refine your mental model with [Just JavaScript](https://justjavascript.com/) by Dan Abramov and Maggie Appleton
+					- Explore & investigate on [MDN](developer.mozilla.org) & elsewhere
 					- Keep tinkering!
 					</textarea>
 				</section>
@@ -144,19 +744,23 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js" integrity="sha512-QAU7Ux8iEB53koLKFCtddfFp0D1+uQWoX3ROnRDLeiE98XHOkMciaup0Spc014jQAuJaqz8VjUZdBqriheI4Lg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js" integrity="sha512-U3fPDUX5bMrn1wnYqjaK44MFA9E6MKS+zPAg9WPAGF5XhReBeDj3FGaA831CjueG+YJxYA3WaO/m33kMIoOs/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
+		<!-- CopyCode plugin for copy button on code samples -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/reveal.js-copycode@1.0.4/plugin/copycode/copycode.js"></script>
 		
 		<script>
 			// Slides powered by revealjs.com
-
+			
 			// More info about initialization & config:
 			// - https://revealjs.com/initialization/
 			// - https://revealjs.com/config/
 			Reveal.initialize({
 				hash: true,
-
+				
 				// Learn about plugins: https://revealjs.com/plugins/
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, CopyCode ]
 			});
+		
 		</script>
 	</body>
 </html>
diff --git a/README.md b/README.md
index 037e3ac..96377b8 100644
--- a/README.md
+++ b/README.md
@@ -5,9 +5,9 @@ Contents:
 - Day 1: 
   - [Slides](./1-slides.html)
   - [Tic Tac Toe](./1-tictactoe.html)
-- Day 2: *No spoilers!*
-  - Slides
-  - JS Quiz
+- Day 2:
+  - [Slides](./2-slides.html)
+  - JS Quiz ([starter](./2-jsquiz-starter.html), [finished](./2-jsquiz-finished.html), [fancy](./2-jsquiz-fancy))
 - Day 3: *No spoilers!*
   - Slides
   - Doggo Fetch
@@ -53,27 +53,26 @@ Prerequisites:
   - 1000: JavaScript: What? Why? How?
   - 1015: Working with the DOM (HTML)
   - 1115: Data Types
-  - 1130: Working with Strings
   - 1200: Lunch
-  - 1300: Operators & Expressions
-  - 1330: Variables
-  - 1400: Working with Objects & Arrays
-  - 1530: Day 1 project review
+  - 1300: Working with Strings
+  - 1330: Operators & Expressions
+  - 1500: Variables 
   - 1600: End of Day 1
 - Day 2
-  - 0930: Day 2 Intro & project overview
-  - 1000: Working with a code editor
-  - 1030: Functions & Scope
-  - 1130: Event Handlers
+  - 0930: Working with Objects & Arrays
+  - 1100: Day 1 project review
+  - 1130: Day 2 project overview
+  - 1145: Working with a code editor
   - 1200: Lunch
-  - 1300: Conditionals
-  - 1330: Loops
-  - 1430: Map & Filter
-  - 1530: Day 2 project review
+  - 1300: Functions & Scope
+  - 1415: Event Handlers
+  - 1500: Conditionals
+  - 1530: Loops
   - 1600: End of Day 2
 - Day 3
   - 0930: Day 3 Intro & project overview
   - 1000: Fetch, Promises, Async/Await
+  - 1100: Map & Filter
   - 1130: Destructuring & spread syntax
   - 1200: Lunch
   - 1300: Debugging & error handling
diff --git a/jsquiz-wip/2-jsquiz-1.html b/jsquiz-wip/2-jsquiz-1.html
new file mode 100644
index 0000000..eb834b9
--- /dev/null
+++ b/jsquiz-wip/2-jsquiz-1.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    const statement = document.getElementById("statement");
+    // optionButtons should be all the elements within the "options" div
+    const optionButtons = document.getElementById("options").children;
+    // explanation should be the "explanation" div
+    const explanation =  document.getElementById("explanation");
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    // enable(button) should remove the attribute "disabled" from the button element
+
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    
+
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+            // TODO 6B: Within the event listener function, display the fact's explanation by setting the text of the explanation element
+
+
+            // TODO 7: Within the event listener function, 
+            // Use a for loop to disable all the option buttons
+
+
+            // TODO 8: Within the event listener function,
+            // Get the guessed value from the clicked button
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+
+    
+
+  </script>
+</html>
diff --git a/jsquiz-wip/2-jsquiz-2.html b/jsquiz-wip/2-jsquiz-2.html
new file mode 100644
index 0000000..539a328
--- /dev/null
+++ b/jsquiz-wip/2-jsquiz-2.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    const statement = document.getElementById("statement");
+    // optionButtons should be all the elements within the "options" div
+    const optionButtons = document.getElementById("options").children;
+    // explanation should be the "explanation" div
+    const explanation =  document.getElementById("explanation");
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    const fact = {
+        "statement": "'1' + '1' === '2'",
+        "answer": "false",
+        "explanation": "The plus operator concatenates (joins together) strings, so '1' + '1' === '11'."
+    };
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    // enable(button) should remove the attribute "disabled" from the button element
+
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    
+
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+            // TODO 6B: Within the event listener function, display the fact's explanation by setting the text of the explanation element
+
+
+            // TODO 7: Within the event listener function, 
+            // Use a for loop to disable all the option buttons
+
+
+            // TODO 8: Within the event listener function,
+            // Get the guessed value from the clicked button
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+
+    
+
+  </script>
+</html>
diff --git a/jsquiz-wip/2-jsquiz-3.html b/jsquiz-wip/2-jsquiz-3.html
new file mode 100644
index 0000000..480a493
--- /dev/null
+++ b/jsquiz-wip/2-jsquiz-3.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    const statement = document.getElementById("statement");
+    // optionButtons should be all the elements within the "options" div
+    const optionButtons = document.getElementById("options").children;
+    // explanation should be the "explanation" div
+    const explanation =  document.getElementById("explanation");
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    const fact = {
+        "statement": "'1' + '1' === '2'",
+        "answer": "false",
+        "explanation": "The plus operator concatenates (joins together) strings, so '1' + '1' === '11'."
+    };
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+    statement.textContent = fact.statement;
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    // enable(button) should remove the attribute "disabled" from the button element
+
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    
+
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+            // TODO 6B: Within the event listener function, display the fact's explanation by setting the text of the explanation element
+
+
+            // TODO 7: Within the event listener function, 
+            // Use a for loop to disable all the option buttons
+
+
+            // TODO 8: Within the event listener function,
+            // Get the guessed value from the clicked button
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+
+    
+
+  </script>
+</html>
diff --git a/jsquiz-wip/2-jsquiz-4.html b/jsquiz-wip/2-jsquiz-4.html
new file mode 100644
index 0000000..d0a7e61
--- /dev/null
+++ b/jsquiz-wip/2-jsquiz-4.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    const statement = document.getElementById("statement");
+    // optionButtons should be all the elements within the "options" div
+    const optionButtons = document.getElementById("options").children;
+    // explanation should be the "explanation" div
+    const explanation =  document.getElementById("explanation");
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    const fact = {
+        "statement": "'1' + '1' === '2'",
+        "answer": "false",
+        "explanation": "The plus operator concatenates (joins together) strings, so '1' + '1' === '11'."
+    };
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+    statement.textContent = fact.statement;
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    function disable(button) {
+        button.setAttribute("disabled", "");
+    } 
+    // enable(button) should remove the attribute "disabled" from the button element
+    function enable(button) {
+        button.removeAttribute("disabled");
+    }
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    
+
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+            // TODO 6B: Within the event listener function, display the fact's explanation by setting the text of the explanation element
+
+
+            // TODO 7: Within the event listener function, 
+            // Use a for loop to disable all the option buttons
+
+
+            // TODO 8: Within the event listener function,
+            // Get the guessed value from the clicked button
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+
+    
+
+  </script>
+</html>
diff --git a/jsquiz-wip/2-jsquiz-5.html b/jsquiz-wip/2-jsquiz-5.html
new file mode 100644
index 0000000..54f0537
--- /dev/null
+++ b/jsquiz-wip/2-jsquiz-5.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    const statement = document.getElementById("statement");
+    // optionButtons should be all the elements within the "options" div
+    const optionButtons = document.getElementById("options").children;
+    // explanation should be the "explanation" div
+    const explanation =  document.getElementById("explanation");
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    const fact = {
+        "statement": "'1' + '1' === '2'",
+        "answer": "false",
+        "explanation": "The plus operator concatenates (joins together) strings, so '1' + '1' === '11'."
+    };
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+    statement.textContent = fact.statement;
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    function disable(button) {
+        button.setAttribute("disabled", "");
+    } 
+    // enable(button) should remove the attribute "disabled" from the button element
+    function enable(button) {
+        button.removeAttribute("disabled");
+    }
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    function isCorrect(guess) {
+        return guess === fact.answer;
+    }
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+            // TODO 6B: Within the event listener function, display the fact's explanation by setting the text of the explanation element
+
+
+            // TODO 7: Within the event listener function, 
+            // Use a for loop to disable all the option buttons
+
+
+            // TODO 8: Within the event listener function,
+            // Get the guessed value from the clicked button
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+
+    
+
+  </script>
+</html>
diff --git a/jsquiz-wip/2-jsquiz-6.html b/jsquiz-wip/2-jsquiz-6.html
new file mode 100644
index 0000000..bba5a68
--- /dev/null
+++ b/jsquiz-wip/2-jsquiz-6.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    const statement = document.getElementById("statement");
+    // optionButtons should be all the elements within the "options" div
+    const optionButtons = document.getElementById("options").children;
+    // explanation should be the "explanation" div
+    const explanation =  document.getElementById("explanation");
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    const fact = {
+        "statement": "'1' + '1' === '2'",
+        "answer": "false",
+        "explanation": "The plus operator concatenates (joins together) strings, so '1' + '1' === '11'."
+    };
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+    statement.textContent = fact.statement;
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    function disable(button) {
+        button.setAttribute("disabled", "");
+    } 
+    // enable(button) should remove the attribute "disabled" from the button element
+    function enable(button) {
+        button.removeAttribute("disabled");
+    }
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    function isCorrect(guess) {
+        return guess === fact.answer;
+    }
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+    for (let option of optionButtons) {
+        option.addEventListener("click", event => {
+            // TODO 6B: Within the event listener function, display the fact's explanation by setting the text of the explanation element
+            explanation.textContent = fact.explanation;
+            
+            // TODO 7: Within the event listener function, 
+            // Use a for loop to disable all the option buttons
+            
+            
+            // TODO 8: Within the event listener function,
+            // Get the guessed value from the clicked button
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+            
+        })
+    }
+    
+
+  </script>
+</html>
diff --git a/jsquiz-wip/2-jsquiz-7.html b/jsquiz-wip/2-jsquiz-7.html
new file mode 100644
index 0000000..7ea4fd7
--- /dev/null
+++ b/jsquiz-wip/2-jsquiz-7.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Quiz.js</title>
+    <style>
+        body {
+            margin: 1rem auto;
+            padding: 3rem;
+            font-family: sans-serif;
+        }
+        header {
+            width: 50%;
+            margin: 1em auto;
+        }
+        main {
+            min-width: 25rem;
+            max-width: 50%;
+            margin: 0px auto;
+            display:flex; 
+            flex-direction: column;
+        }
+        #statement {
+            border: 1px solid black;
+            border-radius: 0.5rem;
+            box-shadow: 5px 5px 5px gray;
+            padding: 1rem;
+            font-size: x-large;
+            text-align: center;
+            margin: 1rem 0px;
+            min-height: 2em;
+        }
+        #explanation {
+            padding: 1rem;
+            text-align: center;
+        }
+        #options {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        button {
+            padding: 0.5rem;
+            font-size: medium;
+            border-radius: 5px;
+        }
+        .correct {
+            background-color: lightgreen;
+        }
+        .incorrect {
+            background-color: lightpink;
+        }
+    </style>
+  </head>
+  <body>
+    <header>
+    <h1>Quiz.js</h1>
+    <p>Do you know JS? Find out!</p>
+    </header>
+
+    <main>
+    <div id="statement">
+        
+    </div>
+
+    <div id="options">
+        <button name="true" value="true" >true</button>
+        <button name="false" value="false" >false</button>
+    </div>
+
+    <div id="explanation">
+
+    </div>
+
+    </main>
+
+  </body>
+
+  <script type="text/javascript">
+
+
+    // TODO 1: Declare & assign variables pointing to the corresponding element(s)
+    // statement should be the "statement" div
+    const statement = document.getElementById("statement");
+    // optionButtons should be all the elements within the "options" div
+    const optionButtons = document.getElementById("options").children;
+    // explanation should be the "explanation" div
+    const explanation =  document.getElementById("explanation");
+
+
+    // TODO 2: Declare & assign a variable called fact
+    // Its value should be an object with a statement, true/false answer, and explanation 
+    const fact = {
+        "statement": "'1' + '1' === '2'",
+        "answer": "false",
+        "explanation": "The plus operator concatenates (joins together) strings, so '1' + '1' === '11'."
+    };
+
+    
+    // TODO 3: Set the text of the statement element to the fact's statement
+    statement.textContent = fact.statement;
+        
+
+    // TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
+    // disable(button) should set the button element's attribute "disabled" to the value ""
+    function disable(button) {
+        button.setAttribute("disabled", "");
+    } 
+    // enable(button) should remove the attribute "disabled" from the button element
+    function enable(button) {
+        button.removeAttribute("disabled");
+    }
+
+
+    // TODO 5: Declare an isCorrect function that compares a guess to the right answer
+    // isCorrect(guess) should return true if the guess matches the fact's answer
+    function isCorrect(guess) {
+        return guess === fact.answer;
+    }
+
+    // TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
+    for (let option of optionButtons) {
+        option.addEventListener("click", event => {
+            // TODO 6B: Within the event listener function, display the fact's explanation by setting the text of the explanation element
+            explanation.textContent = fact.explanation;
+            
+            // TODO 7: Within the event listener function, 
+            // Use a for loop to disable all the option buttons
+            for (let button of optionButtons) {
+                disable(button); 
+            }
+            
+            // TODO 8: Within the event listener function,
+            // Get the guessed value from the clicked button
+            // Use a conditional to compare the guess to the fact's answer
+            // and add the "correct"/"incorrect" class as appropriate
+            
+        })
+    }
+    
+
+  </script>
+</html>