diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672137c47fa88d6f753f6d0b.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672137c47fa88d6f753f6d0b.md
index 7642bd30684..0613661ffbb 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672137c47fa88d6f753f6d0b.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672137c47fa88d6f753f6d0b.md
@@ -11,6 +11,35 @@ Currently, your `instrumentCards` function returns an array with instrument obje
 
 Modify your function so that it returns an array of strings containing the HTML code to display the instrument cards, each string corresponding to an object in the `instruments` array. The strings should have this format `<div class="card"><h2>[instrument]</h2><p>$[price]</p></div>`
 
+# --before-all--
+
+```js
+const allInstrmnts = [
+  { category: "woodwinds", instrument: "Flute", price: 500 },
+  { category: "woodwinds", instrument: "Clarinet", price: 200 },
+  { category: "woodwinds", instrument: "Oboe", price: 4000 },
+  { category: "brass", instrument: "Trumpet", price: 200 },
+  { category: "brass", instrument: "Trombone", price: 300 },
+  { category: "brass", instrument: "French Horn", price: 4300 },
+  { category: "percussion", instrument: "Drum Set", price: 500 },
+  { category: "percussion", instrument: "Xylophone", price: 3000 },
+  { category: "percussion", instrument: "Cymbals", price: 200 },
+  { category: "percussion", instrument: "Marimba", price: 3000 }
+]
+function getInstrumentsArr(instrumentCategory) {
+  const instruments =
+    instrumentCategory === "all"
+      ? JSON.parse(JSON.stringify(allInstrmnts))
+      : allInstrmnts.filter(
+          ({ category }) => category === instrumentCategory
+        );
+
+  return instruments
+}
+
+const regex = /<\s*div\s+class=('|")card\1\s*>\s*<\s*h2\s*>[\s\w]+?<\/\s*h2\s*>\s*<\s*p\s*>\$\d+?<\/\s*p\s*>\s*<\/\s*div\s*>/;
+```
+
 # --hints--
 
 `instrumentCards("all")` should return an array of strings representing instrument cards, each with the format `<div class="card"><h2>[instrument]</h2><p>$[price]</p></div>`.
@@ -139,35 +168,6 @@ assert.isEmpty(instrArr);
 
 # --seed--
 
-## --after-user-code-- 
-
-```js
-const allInstrmnts = [
-  { category: "woodwinds", instrument: "Flute", price: 500 },
-  { category: "woodwinds", instrument: "Clarinet", price: 200 },
-  { category: "woodwinds", instrument: "Oboe", price: 4000 },
-  { category: "brass", instrument: "Trumpet", price: 200 },
-  { category: "brass", instrument: "Trombone", price: 300 },
-  { category: "brass", instrument: "French Horn", price: 4300 },
-  { category: "percussion", instrument: "Drum Set", price: 500 },
-  { category: "percussion", instrument: "Xylophone", price: 3000 },
-  { category: "percussion", instrument: "Cymbals", price: 200 },
-  { category: "percussion", instrument: "Marimba", price: 3000 }
-]
-function getInstrumentsArr(instrumentCategory) {
-  const instruments =
-    instrumentCategory === "all"
-      ? JSON.parse(JSON.stringify(allInstrmnts))
-      : allInstrmnts.filter(
-          ({ category }) => category === instrumentCategory
-        );
-
-  return instruments
-}
-
-const regex = /<\s*div\s+class=('|")card\1\s*>\s*<\s*h2\s*>[\s\w]+?<\/\s*h2\s*>\s*<\s*p\s*>\$\d+?<\/\s*p\s*>\s*<\/\s*div\s*>/;
-```
-
 ## --seed-contents--
 
 ```html
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md
index 6d671817950..3dd80651f60 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md
@@ -11,6 +11,41 @@ Remove your `console.log` from the event listener and set the inner HTML of `pro
 
 Then, select different options from your dropdown and see the result in the preview window.
 
+# --before-all--
+
+```js
+const allInstrmnts = [
+  { category: "woodwinds", instrument: "Flute", price: 500 },
+  { category: "woodwinds", instrument: "Clarinet", price: 200 },
+  { category: "woodwinds", instrument: "Oboe", price: 4000 },
+  { category: "brass", instrument: "Trumpet", price: 200 },
+  { category: "brass", instrument: "Trombone", price: 300 },
+  { category: "brass", instrument: "French Horn", price: 4300 },
+  { category: "percussion", instrument: "Drum Set", price: 500 },
+  { category: "percussion", instrument: "Xylophone", price: 3000 },
+  { category: "percussion", instrument: "Cymbals", price: 200 },
+  { category: "percussion", instrument: "Marimba", price: 3000 }
+]
+function getCardsArr(family) {
+  const instrmnts =
+    family === "all"
+      ? allInstrmnts
+      : allInstrmnts.filter(
+          ({ category }) => category === family
+        );
+
+  return instrmnts
+    .map(({ instrument, price }) => {
+      return `
+          <div class="card">
+            <h2>${instrument}</h2>
+            <p>$${price}</p>
+          </div>
+        `;
+    })
+}
+```
+
 # --hints--
 
 When the dropdown menu option is changed you should set the inner HTML of `productsContainer` to the result of the `instrumentCards` function called with the selected option as argument.
@@ -61,41 +96,6 @@ try {
 
 # --seed--
 
-## --after-user-code--
-
-```js
-const allInstrmnts = [
-  { category: "woodwinds", instrument: "Flute", price: 500 },
-  { category: "woodwinds", instrument: "Clarinet", price: 200 },
-  { category: "woodwinds", instrument: "Oboe", price: 4000 },
-  { category: "brass", instrument: "Trumpet", price: 200 },
-  { category: "brass", instrument: "Trombone", price: 300 },
-  { category: "brass", instrument: "French Horn", price: 4300 },
-  { category: "percussion", instrument: "Drum Set", price: 500 },
-  { category: "percussion", instrument: "Xylophone", price: 3000 },
-  { category: "percussion", instrument: "Cymbals", price: 200 },
-  { category: "percussion", instrument: "Marimba", price: 3000 }
-]
-function getCardsArr(family) {
-  const instrmnts =
-    family === "all"
-      ? allInstrmnts
-      : allInstrmnts.filter(
-          ({ category }) => category === family
-        );
-
-  return instrmnts
-    .map(({ instrument, price }) => {
-      return `
-          <div class="card">
-            <h2>${instrument}</h2>
-            <p>$${price}</p>
-          </div>
-        `;
-    })
-}
-```
-
 ## --seed-contents--
 
 ```html
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672146dde7104896adb274ae.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672146dde7104896adb274ae.md
index 4dc0852395a..8646ac1b23c 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672146dde7104896adb274ae.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672146dde7104896adb274ae.md
@@ -11,41 +11,7 @@ When you select a category from the dropdown menu, the instrument cards are corr
 
 Do it by joining the array returned by `instrumentCards`. With that, your music instrument filter is complete.
 
-# --hints--
-
-You should join the array returned by the `instrumentCards` function. Do not modify your event listener.
-
-```js
-let cardsArr = getCardsArr("all");
-const testDiv = document.createElement("div");
-testDiv.classList.add("products-container");
-testDiv.innerHTML = cardsArr;
-selectContainer.value = "all";
-selectContainer.dispatchEvent(new Event("change"));
-assert.isTrue(productsContainer.isEqualNode(testDiv));
-
-cardsArr = getCardsArr("woodwinds");
-testDiv.innerHTML = cardsArr;
-selectContainer.value = "woodwinds";
-selectContainer.dispatchEvent(new Event("change"));
-assert.isTrue(productsContainer.isEqualNode(testDiv));
-
-cardsArr = getCardsArr("brass");
-testDiv.innerHTML = cardsArr;
-selectContainer.value = "brass";
-selectContainer.dispatchEvent(new Event("change"));
-assert.isTrue(productsContainer.isEqualNode(testDiv));
-
-cardsArr = getCardsArr("percussion");
-testDiv.innerHTML = cardsArr;
-selectContainer.value = "percussion";
-selectContainer.dispatchEvent(new Event("change"));
-assert.isTrue(productsContainer.isEqualNode(testDiv));
-```
-
-# --seed--
-
-## --after-user-code--
+# --before-all--
 
 ```js
 const allInstrmnts = [
@@ -81,6 +47,40 @@ function getCardsArr(family) {
 }
 ```
 
+# --hints--
+
+You should join the array returned by the `instrumentCards` function. Do not modify your event listener.
+
+```js
+let cardsArr = getCardsArr("all");
+const testDiv = document.createElement("div");
+testDiv.classList.add("products-container");
+testDiv.innerHTML = cardsArr;
+selectContainer.value = "all";
+selectContainer.dispatchEvent(new Event("change"));
+assert.isTrue(productsContainer.isEqualNode(testDiv));
+
+cardsArr = getCardsArr("woodwinds");
+testDiv.innerHTML = cardsArr;
+selectContainer.value = "woodwinds";
+selectContainer.dispatchEvent(new Event("change"));
+assert.isTrue(productsContainer.isEqualNode(testDiv));
+
+cardsArr = getCardsArr("brass");
+testDiv.innerHTML = cardsArr;
+selectContainer.value = "brass";
+selectContainer.dispatchEvent(new Event("change"));
+assert.isTrue(productsContainer.isEqualNode(testDiv));
+
+cardsArr = getCardsArr("percussion");
+testDiv.innerHTML = cardsArr;
+selectContainer.value = "percussion";
+selectContainer.dispatchEvent(new Event("change"));
+assert.isTrue(productsContainer.isEqualNode(testDiv));
+```
+
+# --seed--
+
 ## --seed-contents--
 
 ```html