feat(curriculum): Add interactive examples to Map method lesson (#63390)

curriculum/challenges/english/blocks/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-map-method-and-how-does-it-work
 ---
 
-# --description--
+# --interactive--
 
 The `map` method is a powerful and widely used function in JavaScript that operates on arrays. It is designed to create a new array by applying a given function to each element of the original array.
 
@@ -13,6 +13,8 @@ This method does not modify the original array but instead returns a new array c
 
 Here is an example of using the `map` method on an array of numbers:
 
+:::interactive_editor
+
 ```js
 const numbers = [1, 2, 3, 4, 5];
 const doubled = numbers.map((num) => num * 2);
@@ -20,6 +22,8 @@ console.log(numbers); // [1, 2, 3, 4, 5]
 console.log(doubled); // [2, 4, 6, 8, 10]
 ```
 
+:::
+
 To create a new array where each number is doubled, we are using the `map` method. The `map` method accepts a callback function where the function is called on every single element in the array.
 
 In this case, each number in the array will be multiplied by `2`. The result will be a new array of the numbers `2,4,6,8,10`.
@@ -28,6 +32,8 @@ The callback function can accept up to three arguments.
 
 The first argument is the current element being processed.
 
+:::interactive_editor
+
 ```js
 const numbers = [3, 4, 5, 6, 7].map((element) => {
   console.log("Element:", element);
@@ -35,8 +41,12 @@ const numbers = [3, 4, 5, 6, 7].map((element) => {
 });
 ```
 
+:::
+
 The second argument is the index of the current element being processed.
 
+:::interactive_editor
+
 ```js
 const numbers = [3, 4, 5, 6, 7].map((element, index) => {
   console.log("Element:", element);
@@ -45,8 +55,12 @@ const numbers = [3, 4, 5, 6, 7].map((element, index) => {
 });
 ```
 
+:::
+
 The third argument is the array where `map` is being called on.
 
+:::interactive_editor
+
 ```js
 const numbers = [3, 4, 5, 6, 7].map((element, index, array) => {
   console.log("Element:", element);
@@ -56,6 +70,8 @@ const numbers = [3, 4, 5, 6, 7].map((element, index, array) => {
 });
 ```
 
+:::
+
 Understanding and effectively using the `map` method can significantly improve your ability to work with arrays in JavaScript. In future lessons, we'll dive deeper into more advanced uses of `map` and explore how it can be a powerful tool for building dynamic and efficient programs.
 
 # --questions--