feat(curriculum): Add interactive examples to What Are Arrow Functions, and How Do They Work (#63274)

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

curriculum/challenges/english/blocks/lecture-working-with-functions/673284d5e52ef81a2169b097.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-arrow-functions-and-how-do-they-work
 ---
 
-# --description--
+# --interactive--
 
 In the previous lesson, you learned how to work with functions, which are reusable pieces of code that help make your code more modular, easier to maintain, and more efficient. All previous examples used the regular function syntax, like this:
 
@@ -54,6 +54,8 @@ function greetings name console.log("Hello, " + name + "!");
 
 These types of one line functions only work if you are using the arrow function syntax. Another key concept is the `return` statement. Here is an example of using the arrow function syntax to calculate the area:
 
+:::interactive_editor
+
 ```js
 const calculateArea = (width, height) => {
   const area = width * height;
@@ -63,14 +65,22 @@ const calculateArea = (width, height) => {
 console.log(calculateArea(5, 3)); // 15
 ```
 
+:::
+
 We are creating a variable inside the function called `area` and then returning that variable. But we could clean up our code a bit and return the calculation itself:
 
+:::interactive_editor
+
 ```js
 const calculateArea = (width, height) => {
   return width * height;
 }; 
+
+console.log(calculateArea(5, 3)); // 15
 ```
 
+:::
+
 If you tried to remove the curly braces and place the calculation on the same line, then you would get an `Uncaught SyntaxError: Unexpected token 'return'` message:
 
 ```js