feat(curriculum): Add interactive examples to What Is the Purpose of Functions, and How Do They Work (#63270)

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

curriculum/challenges/english/blocks/lecture-working-with-functions/672d269da46786225e3fe3fd.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-purpose-of-functions-and-how-do-they-work
 ---
 
-# --description--
+# --interactive--
 
 Functions are reusable pieces of code that perform a specific task or calculate a value. Think of functions as a machine that takes some input, does some operations on it, and then produces an output. Here is an example of declaring a function:
 
@@ -19,6 +19,8 @@ In this example, we have declared a function called `greet`.  Inside that functi
 
 A function call, or invocation, is when we actually use or execute the function. To call a function, you will need to reference the function name followed by a set of parentheses:
 
+:::interactive_editor
+
 ```js
 function greet() {
   console.log("Hello, Jessica!");
@@ -27,10 +29,14 @@ function greet() {
 greet(); // "Hello, Jessica!"
 ```
 
+:::
+
 Now the message of `Hello, Jessica!` will be logged to the console. But what if we wanted the message to say `Hello, Nick!` or `Hello, Anna!`? We don't want to write a new function each time we greet a different user. Instead, we can create a reusable function that uses function parameters and arguments. 
 
 Parameters act as placeholders for the values that will be passed to the function when it is called. They allow functions to accept input and work with that input. Arguments are the actual values passed to the function when it is called. Here is an updated version of the `greet` function that uses parameters and arguments:
 
+:::interactive_editor
+
 ```js
 function greet(name) {
   console.log("Hello, " + name + "!");
@@ -40,21 +46,29 @@ greet("Alice"); // Hello, Alice!
 greet("Nick"); // Hello, Nick!
 ```
 
+:::
+
 The `name` serves as the parameter while the strings `Alice` and `Nick` serve as the arguments. Now we have a reusable function that can be used dozens of times throughout our code with different arguments. 
 
 When a function finishes its execution, it will always return a value. By default, the return value will be `undefined`. Here is an example: 
 
+:::interactive_editor
+
 ```js
 function doSomething() {
-    console.log("Doing something...");
+  console.log("Doing something...");
 }
 
 let result = doSomething();
 console.log(result); // undefined
 ```
 
+:::
+
 If you need your function to return a specific value, then you will need to use the `return` statement. Here is an example of using a `return` statement to return the sum of two values:
 
+:::interactive_editor
+
 ```js
 function calculateSum(num1, num2) {
   return num1 + num2;
@@ -63,10 +77,14 @@ function calculateSum(num1, num2) {
 console.log(calculateSum(3, 4)); // 7
 ```
 
+:::
+
 Often times you will be using the `return` statement, because you can use that value that was output from the function later on in your code.
 
 So far, we've been working with named functions, but you can also create what's called an anonymous function. An anonymous function is a function without a name that can be assigned to a variable like this:
 
+:::interactive_editor
+
 ```js
 const sum = function (num1, num2) {
   return num1 + num2;
@@ -75,10 +93,14 @@ const sum = function (num1, num2) {
 console.log(sum(3, 4)); // 7
 ```
 
+:::
+
 In this example, we have a `const` variable called `sum` and we are assigning it an anonymous function that returns the sum of `num1` and `num2`. We are then able to call `sum` and pass in the numbers `3` and `4` to get the result of `7`. 
 
 Functions support default parameters, allowing you to set default values for parameters. These default values are used if the function is called without an argument for that parameter. Here's an example:
 
+:::interactive_editor
+
 ```js
 function greetings(name = "Guest") {
   console.log("Hello, " + name + "!");
@@ -88,6 +110,8 @@ greetings(); // Hello, Guest!
 greetings("Anna"); // Hello, Anna!
 ```
 
+:::
+
 In this example, if no argument is provided for `name`, it defaults to `Guest`.
 
 In summary, functions allow you to write reusable and organized code. They can take inputs (parameters), perform actions, and return outputs.