feat(curriculum): Add interactive examples to to static properties and methods lesson (#64767)

curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md

@@ -5,9 +5,7 @@ challengeType: 19
 dashedName: what-are-static-properties-and-methods-in-classes
 ---
 
-# --description--
+# --interactive--
-
-Let's learn about static properties and methods.
 
 Static properties and methods belong to the class itself, not to the individual instances of the class. You can access them directly on the class name without creating an instance of the class. They are defined within classes to encapsulate related functionality.
 
@@ -33,8 +31,8 @@ We could consider this comparison method as a higher level method that is not sp
 
 ```js
 if (movieA.rating < movieB.rating) {
-      console.log(`${movieB.title} has a higher rating.`);
+  console.log(`${movieB.title} has a higher rating.`);
-    } 
+} 
 ```
 
 It's like a more general method related to the `Movie` class.
@@ -43,6 +41,8 @@ For readability and maintainability purposes, it would be helpful to define it w
 
 Therefore, this is a perfect candidate for a static method. You can see it here, just below the constructor:
 
+:::interactive_editor
+
 ```js
 class Movie {
 
@@ -62,8 +62,14 @@ class Movie {
   }
 
 }
+
+let movieA = new Movie("Movie A", 80);
+let movieB = new Movie("Movie B", 45);
+console.log(movieA);
 ```
 
+:::
+
 The static method is defined with the `static` keyword and it's called `compareMovies`. It has two parameters: `movieA` and `movieB`. These will be instances of the `Movie` class.
 
 We will compare them based on their rating, on a range from `0` to `100`. This logic is implemented with a conditional and it will print an appropriate message based on which movie has a higher rating.
@@ -88,12 +94,38 @@ Then, you pass the arguments within parentheses. In this case, they are the two
 Movie.compareMovies(movieA, movieB);
 ```
 
-This is the output:
+Here is the updated example:
+
+:::interactive_editor
 
 ```js
-Movie A has a higher rating.
+class Movie {
+
+  constructor(title, rating) {
+    this.title = title;
+    this.rating = rating;
+  }
+
+  static compareMovies(movieA, movieB) {
+    if (movieA.rating > movieB.rating) {
+      console.log(`${movieA.title} has a higher rating.`);
+    } else if (movieA.rating < movieB.rating) {
+      console.log(`${movieB.title} has a higher rating.`);
+    } else {
+      console.log("These movies have the same rating.");
+    }
+  }
+
+}
+
+let movieA = new Movie("Movie A", 80);
+let movieB = new Movie("Movie B", 45);
+Movie.compareMovies(movieA, movieB);
+console.log(movieA);
 ```
 
+:::
+
 Static methods are also helpful for implementing "factory" methods. A factory method is a method that you define in addition to the constructor to create objects based on specific criteria.
 
 Here's an example with a `Pizza` class. The static method `createMargherita` is a factory method that you can call to create a Margherita pizza instance with its type and price already set.
@@ -141,12 +173,29 @@ You can also use dot notation to call its methods and access its properties, lik
 console.log(myPizza.type);
 ```
 
-This is the output:
+Here is the full example:
+
+:::interactive_editor
 
 ```js
-Margherita
+class Pizza {
+  constructor(type, price) {
+    this.type = type;
+    this.price = price;
+  }
+
+  static createMargherita() {
+    return new this("Margherita", 6.99);
+  }
+}
+
+let myPizza = Pizza.createMargherita();
+console.log(myPizza);
+console.log(myPizza.type);
 ```
 
+:::
+
 In addition to methods, you can also define static properties with the `static` keyword.
 
 In this example, we have a static `numberOfPizzasSold` property.
@@ -176,6 +225,18 @@ let pizza2 = new Pizza("Neapolitan");
 To access the value of a static property, you just need to use dot notation on the class itself, since the property belongs to the class.
 
 ```js
+class Pizza {
+  static numberOfPizzasSold = 0;
+
+  constructor(type) {
+    this.type = type;
+    Pizza.numberOfPizzasSold++;
+  }
+}
+
+let pizza1 = new Pizza("Margherita");
+let pizza2 = new Pizza("Neapolitan");
+
 console.log(Pizza.numberOfPizzasSold);
 ```