Merge pull request #52 from NSS-Workshops/week10

Week10

Author: gcziprusz

package-lock.json

@@ -15,6 +15,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
+    "canvas-confetti": "^1.9.3",
     "jest": "^29.7.0",
     "js-cookie": "^3.0.5",
     "marked": "^11.1.1",

package.json

@@ -2,197 +2,122 @@ import { TestResult } from "../../utils/test_utils";
 
 export const codeExcerciseOneChapter = {
   id: '9b8a8427',
-  title: 'Module 10 - Code Excercise 1',
+  title: 'DSA Challenge 1 - Arrays: iterate, add, remove',
   sectionId: 'combining-patterns',
   previousChapterId: null,
   content: `
-  Hi 👋,
-You'll be guiding your partner through the coding problem on the right side of your screen. 
+# Challenge 1: Arrays — iterate, add, remove
 
-⚠️ **Please do not share this URL / problem before class.**  
-Revealing the question early defeats the purpose of simulating a real-world interview, where candidates do not know the problem in advance. Let's give your partner the chance to experience the challenge authentically.
+**Navigate:** 1 | [2](a4b7c9d2) | [3](e8f1a5b3) | [4](c6d9e2f4) | [5](b3a8d7c1) | [6](f9e4b2a7) | [7](d1c5f8e3) | [8](a7b2e9f6) | [9](c4f7a1d8)
 
-🧠 **Before class:**  
-Take time to study the problem. During the session, you'll have 90 minutes in your breakout room to run a mock interview with your partner. Be sure to take turns acting as the interviewer and interviewee.
+## 👥 Pair Programming Instructions
 
-🗣️ **As the interviewer, your responsibilities are:**
-- Send this URL to your partner (copy and past the whole url and slack it directly to you partner)
-- Briefly introduce the problem
-- Never give away the answer
-- Take notes and provide feedback
-- Fill out this [feedback form](https://forms.gle/sXK3tJaGNEk52jm4A)
+**Work in pairs for this challenge!** One person should be the **Driver** (writing code) and the other the **Navigator** (reviewing and guiding). **Switch roles for each function** you implement.
 
-🗣️ **As the interviewee, your responsibilities are:**
-- Ask clarifying questions
-- Follow the steps in the [solving guide](https://forms.gle/sXK3tJaGNEk52jm4A):
-    Step 1: Clarify
-    Step 2: Plan
-    Step 3: Implement
-    Step 4: Test
-    Step 5: Optimize
+<iframe width="560" height="315" src="https://www.youtube.com/embed/jqGmL6Hf23k?si=qXmQcnQigfo1adTb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
-🪞 **After the first interview:**  
-Leave 10–15 minutes to reflect, share feedback, and then switch roles.
+**Why it matters:** Arrays are the workhorse. Mastering iteration and index-based edits builds intuition for time complexity.
 
-Best of luck, and enjoy the practice! 🚀
+**Objectives:**
+- Implement code to iterate over an array and perform an operation.
+- Implement code to add/remove by index.
+- Explain why insert/remove by index is **O(n)** and \`.push/.pop\` are **O(1)** while \`.shift/.unshift\` are **O(n)\`.
 
-## Problem: Group Anagrams
+**Time Estimate:** 20 minutes
 
-Given an array of strings, group the anagrams together. You can return the answer in any order.
+## Problems to Solve:
 
-An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.
+1. **sumOfSquares(nums)** - Return the sum of x² for each x in nums (no Array.prototype.map)
+   - Example: \`sumOfSquares([1, 2, 3])\` → \`14\` (1² + 2² + 3² = 1 + 4 + 9 = 14)
+   - Example: \`sumOfSquares([2, 4])\` → \`20\` (2² + 4² = 4 + 16 = 20)
 
-### Follow-up Questions:
-- What is the time complexity of your solution?
-- What is the space complexity?
-- What are alternative approaches to detect anagrams?`,
-  exercise: {
-    starterCode:`/*
-Problem: Group Anagrams
+2. **insertAt(arr, index, value)** - Return NEW array with value inserted at index
+   - Example: \`insertAt([10, 20, 30], 1, 99)\` → \`[10, 99, 20, 30]\`
+   - Example: \`insertAt([], 0, 'a')\` → \`['a']\`
 
-Given an array of strings, group the anagrams together. You can return the answer in any order.
+3. **removeAt(arr, index)** - Return NEW array without the element at index
+   - Example: \`removeAt([10, 20, 30], 1)\` → \`[10, 30]\`
+   - Example: \`removeAt([5], 0)\` → \`[]\`
 
-An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.
+## Big-O Analysis:
+- **insertAt/removeAt are O(n)**: They require shifting elements to maintain array structure
+- **push/pop are O(1)**: They operate at the end, no shifting needed  
+- **shift/unshift are O(n)**: They operate at the beginning, requiring all elements to shift`,
 
-Examples:
-Input: ["eat", "tea", "tan", "ate", "nat", "bat"]
-Output: [["bat"], ["nat", "tan"], ["ate", "eat", "tea"]]
+  exercise: {
+    starterCode: `/*
+Challenge 1: Arrays — iterate, add, remove
 
-Input: [""]
-Output: [[""]]
+Implement the following functions:
 
-Input: ["a"]
-Output: [["a"]]
+1. sumOfSquares(nums) - return the sum of x^2 for each x in nums (no Array.prototype.map)
+2. insertAt(arr, index, value) - returns NEW array with value inserted at index
+3. removeAt(arr, index) - returns NEW array without the element at index
 
-Follow-up Questions:
-- What is the time complexity of your solution?
-- What is the space complexity?
-- What are alternative approaches to detect anagrams?
+Time Complexity Questions:
+- Why are insertAt/removeAt O(n)?
+- Why are push/pop O(1) but shift/unshift O(n)?
 */
 
-function groupAnagrams(strs) {
-  // Approach: Use Map with sorted string as key
-  // Anagrams will have the same sorted characters
-  // Group strings by their sorted version
-  
+function sumOfSquares(nums) {
+  // return the sum of x^2 for each x in nums (no Array.prototype.map)
+  // Your code here
+}
+
+function insertAt(arr, index, value) {
+  // returns NEW array with value inserted at index
+  // Your code here
+}
+
+function removeAt(arr, index) {
+  // returns NEW array without the element at index
   // Your code here
 }`,
-    solution:`/*
-Problem: Group Anagrams
 
-Given an array of strings, group the anagrams together.
+    solution: `/*
+Challenge 1: Arrays — iterate, add, remove
 */
 
-function groupAnagrams(strs) {
-  // Use Map to group anagrams by their sorted characters
-  const anagramGroups = new Map();
-  
-  // Process each string
-  for (let str of strs) {
-    // Sort characters to create a key for anagrams
-    // Anagrams will have the same sorted key
-    const sortedKey = str.split('').sort().join('');
-    
-    // If this key exists, add to existing group
-    // Otherwise, create new group
-    if (anagramGroups.has(sortedKey)) {
-      anagramGroups.get(sortedKey).push(str);
-    } else {
-      anagramGroups.set(sortedKey, [str]);
-    }
+function sumOfSquares(nums) {
+  // return the sum of x^2 for each x in nums (no Array.prototype.map)
+  let sum = 0;
+  for (let i = 0; i < nums.length; i++) {
+    sum += nums[i] * nums[i];
   }
-  
-  // Return all groups as an array of arrays
-  return Array.from(anagramGroups.values());
-  
-  // Time Complexity: O(n * k log k) where n = number of strings, k = max string length
-  // - Sorting each string takes O(k log k)
-  // - We do this for n strings
-  // Space Complexity: O(n * k) for storing all strings in the map
-}`,
-    tests:[
-      {
-        name: "Basic anagram grouping",
-        test: (code) => {
-          try {
-            const groupAnagrams = new Function(`${code}; return groupAnagrams;`)();
-            
-            const result = groupAnagrams(["eat", "tea", "tan", "ate", "nat", "bat"]);
-            
-            // Sort each group and the overall result for consistent comparison
-            const sortedResult = result.map(group => group.sort()).sort();
-            const expected = [["bat"], ["ate", "eat", "tea"], ["nat", "tan"]].map(group => group.sort()).sort();
-            
-            const isCorrect = JSON.stringify(sortedResult) === JSON.stringify(expected);
-            
-            if (isCorrect) {
-              return new TestResult({ passed: true });
-            } else {
-              return new TestResult({
-                passed: false,
-                message: `Expected ${JSON.stringify(expected)}, got ${JSON.stringify(sortedResult)}`
-              });
-            }
-          } catch (error) {
-            return new TestResult({
-              passed: false,
-              message: `Error: ${error.message}`
-            });
-          }
-        },
-        message: "Function should group anagrams correctly."
-      },
-      {
-        name: "Handle edge cases",
-        test: (code) => {
-          try {
-            const groupAnagrams = new Function(`${code}; return groupAnagrams;`)();
-            
-            const test1 = groupAnagrams([""]);
-            const test2 = groupAnagrams(["a"]);
-            const test3 = groupAnagrams([]);
-            
-            const result1 = JSON.stringify(test1) === JSON.stringify([[""]]);
-            const result2 = JSON.stringify(test2) === JSON.stringify([["a"]]);
-            const result3 = JSON.stringify(test3) === JSON.stringify([]);
-            
-            if (result1 && result2 && result3) {
-              return new TestResult({ passed: true });
-            } else {
-              return new TestResult({
-                passed: false,
-                message: `Edge cases failed. Empty string: ${JSON.stringify(test1)}, Single char: ${JSON.stringify(test2)}, Empty array: ${JSON.stringify(test3)}`
-              });
-            }
-          } catch (error) {
-            return new TestResult({
-              passed: false,
-              message: `Error: ${error.message}`
-            });
-          }
-        },
-        message: "Function should handle edge cases correctly."
-      },
+  return sum;
+}
+
+function insertAt(arr, index, value) {
+  // returns NEW array with value inserted at index
+  return [...arr.slice(0, index), value, ...arr.slice(index)];
+}
+
+function removeAt(arr, index) {
+  // returns NEW array without the element at index
+  if (index < 0 || index >= arr.length) {
+    return [...arr]; // Return a new array that is a copy of the original
+  }
+  return [...arr.slice(0, index), ...arr.slice(index + 1)];
+}
+
+// Big-O Analysis:
+// - insertAt/removeAt are O(n): They require shifting elements to maintain array structure
+// - push/pop are O(1): They operate at the end, no shifting needed
+// - shift/unshift are O(n): They operate at the beginning, requiring all elements to shift`,
+
+    tests: [
       {
-        name: "Handle no anagrams",
+        name: "sumOfSquares calculates correctly",
         test: (code) => {
           try {
-            const groupAnagrams = new Function(`${code}; return groupAnagrams;`)();
-            
-            const result = groupAnagrams(["abc", "def", "ghi"]);
-            
-            // Each string should be in its own group
-            const sortedResult = result.map(group => group.sort()).sort();
-            const expected = [["abc"], ["def"], ["ghi"]].sort();
-            
-            const isCorrect = JSON.stringify(sortedResult) === JSON.stringify(expected);
-            
-            if (isCorrect) {
+            const sumOfSquares = new Function(`${code}; \n return sumOfSquares;`)();
+            const result = sumOfSquares([1, 2, 3]);
+            if (result === 14) {
               return new TestResult({ passed: true });
             } else {
               return new TestResult({
                 passed: false,
-                message: `Expected ${JSON.stringify(expected)}, got ${JSON.stringify(sortedResult)}`
+                message: `Expected 14, got ${result}`
               });
             }
           } catch (error) {
@@ -202,27 +127,25 @@ function groupAnagrams(strs) {
             });
           }
         },
-        message: "Function should handle strings with no anagrams."
+        message: "Function should calculate sum of squares correctly."
       },
       {
-        name: "Handle duplicate strings",
+        name: "insertAt works correctly",
         test: (code) => {
           try {
-            const groupAnagrams = new Function(`${code}; return groupAnagrams;`)();
+            const insertAt = new Function(`${code};  \n return insertAt;`)();
+            const result1 = insertAt([10, 20, 30], 1, 99);
+            const result2 = insertAt([], 0, 'a');
 
-            const result = groupAnagrams(["abc", "bca", "abc", "cab"]);
+            const test1 = JSON.stringify(result1) === JSON.stringify([10, 99, 20, 30]);
+            const test2 = JSON.stringify(result2) === JSON.stringify(['a']);
 
-            // All should be grouped together as they're anagrams
-            const hasOneGroup = result.length === 1;
-            const groupSize = result[0] ? result[0].length : 0;
-            const correctSize = groupSize === 4;
-            
-            if (hasOneGroup && correctSize) {
+            if (test1 && test2) {
               return new TestResult({ passed: true });
             } else {
               return new TestResult({
                 passed: false,
-                message: `Expected one group of 4 anagrams, got ${result.length} groups with sizes: ${result.map(g => g.length)}`
+                message: `Test 1: ${JSON.stringify(result1)}, Test 2: ${JSON.stringify(result2)}`
               });
             }
           } catch (error) {
@@ -232,26 +155,21 @@ function groupAnagrams(strs) {
             });
           }
         },
-        message: "Function should handle duplicate strings correctly."
+        message: "Function should insert elements at correct positions."
       },
       {
-        name: "Handle mixed case and special characters",
+        name: "removeAt works correctly",
         test: (code) => {
           try {
-            const groupAnagrams = new Function(`${code}; return groupAnagrams;`)();
-            
-            const result = groupAnagrams(["a", "aa", "aaa"]);
-            
-            // Each should be in separate groups (different lengths)
-            const hasThreeGroups = result.length === 3;
-            const allSingleGroups = result.every(group => group.length === 1);
+            const removeAt = new Function(`${code}; \n return removeAt;`)();
+            const result = removeAt([10, 20, 30], 1);
 
-            if (hasThreeGroups && allSingleGroups) {
+            if (JSON.stringify(result) === JSON.stringify([10, 30])) {
               return new TestResult({ passed: true });
             } else {
               return new TestResult({
                 passed: false,
-                message: `Expected 3 separate groups, got ${result.length} groups: ${JSON.stringify(result)}`
+                message: `Expected [10, 30], got ${JSON.stringify(result)}`
               });
             }
           } catch (error) {
@@ -261,7 +179,7 @@ function groupAnagrams(strs) {
             });
           }
         },
-        message: "Function should handle strings of different lengths."
+        message: "Function should remove elements at correct positions."
       }
     ]
   }