feat(curriculum): Add interactive example for calc lesson (#62959)

curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb851b068e3954a05b9b1.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-calc-function
 ---
 
-# --description--
+# --interactive--
 
 With the `calc()` function, you can perform calculations directly within your stylesheets to determine property values dynamically. This means that you can create flexible and responsive user interfaces by calculating dimensions based on the viewport size or other elements.
 
@@ -41,14 +41,17 @@ You can use the addition (`+`), subtraction (`-`), multiplication (`*`), and div
 
 If there are multiple operands and operators, `calc()` will follow the standard operator precedence rule. You can also add parentheses to establish the order of the operations if needed.
 
-In the example below, you can see a `div` with the text `Hello, World!`:
-
-```html
-<div>Hello, World!</div>
-```
+In the example below, you can see a `div` with the text `Hello, World!`.
 
 Using the CSS type selector for selecting the `div`, you can style it with white text and a dark blue background: 
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div>Hello, World!</div>
+```
+
 ```css
 div {
   color: white;
@@ -57,6 +60,8 @@ div {
 }
 ```
 
+:::
+
 What's new here is that the width is calculated dynamically. Notice how we are calling the `calc()` function and passing an expression as an argument. The expression has two operands with different units and one operator, the subtraction operator.
 
 Percentage is a relative unit. The value (`50%`) will be determined by the width of the parent container. Then, `20px` is subtracted from the value. The result of this expression will determine the width of the `div`.