feat(curriculum): Add interactive examples to What Is a Shallow Copy of an Array lesson (#63297)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>

curriculum/challenges/english/blocks/lecture-working-with-common-array-methods/6732b29b8b7d4f15b94d12ca.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-a-shallow-copy-of-an-array-and-what-are-some-ways-to-create-these-copies
 ---
 
-# --description--
+# --interactive--
 
 A shallow copy of an array is a new array that has the same items as the original. If the array only contains primitive values like numbers or strings, the new array is completely separate. But if the array contains other arrays inside it, both the original and the copy have references to the same inner arrays. This means that if you change something inside a shared inner array, you will see that change in both arrays.
 
@@ -15,6 +15,8 @@ There are several methods for creating shallow copies of arrays, and we'll explo
 
 Let's start with the `concat()` method. This method creates a new array by merging two or more arrays. When used with a single array, it effectively creates a shallow copy. Here's an example:
 
+:::interactive_editor
+
 ```js
 const originalArray = [1, 2, 3];
 const copyArray = [].concat(originalArray);
@@ -23,12 +25,16 @@ console.log(copyArray); // [1, 2, 3]
 console.log(copyArray === originalArray); // false
 ```
 
+:::
+
 In this example, we are using the `concat()` method to concatenate an empty array to the `originalArray`. This will create a new array that is a shallow copy of `originalArray`. 
 
 The `copyArray` contains the same elements as `originalArray`, but it is a different array object, which is why the strict equality check (`===`) returns `false`.
 
 Another method to create a shallow copy is the `slice()` method. When called without arguments, `slice()` returns a shallow copy of the entire array. Here's how it works:
 
+:::interactive_editor
+
 ```js
 const originalArray = [1, 2, 3];
 const copyArray = originalArray.slice();
@@ -37,10 +43,14 @@ console.log(copyArray); // [1, 2, 3]
 console.log(copyArray === originalArray); // false
 ```
 
+:::
+
 In this case, `originalArray.slice()` creates a new array that is a shallow copy of `originalArray`. Again, the `copyArray` contains the same elements but is a different array object.
 
 The spread operator (`...`), introduced in ES6, provides another concise way to create shallow copies of arrays. Here's an example:
 
+:::interactive_editor
+
 ```js
 const originalArray = [1, 2, 3];
 const copyArray = [...originalArray];
@@ -49,8 +59,12 @@ console.log(copyArray); // [1, 2, 3]
 console.log(copyArray === originalArray); // false
 ```
 
+:::
+
 The spread operator (`...`) spreads the elements of `originalArray` into a new array, effectively creating a shallow copy. It's important to note that all these methods create new array objects, which means you can modify the copy without affecting the original array. For example:
 
+:::interactive_editor
+
 ```js
 const originalArray = [1, 2, 3];
 const copyArray = [...originalArray];
@@ -60,6 +74,8 @@ console.log(originalArray); // [1, 2, 3]
 console.log(copyArray);     // [1, 2, 3, 4]
 ```
 
+:::
+
 In this example, adding an element to `copyArray` doesn't affect `originalArray`.
 
 In summary, shallow copies of arrays can be easily created using methods like `concat()`, `slice()`, or the spread operator. These methods are useful for creating new arrays that can be manipulated independently of the original array.