From e6bb589b5ff1c127124cfe4cfeb4e7dee2e6c198 Mon Sep 17 00:00:00 2001
From: Vinson Pham <57196881+cuongpham24@users.noreply.github.com>
Date: Thu, 23 Oct 2025 10:02:32 -0500
Subject: [PATCH] feat(curriculum): Add interactive example for calc lesson
 (#62959)

---
 .../672bb851b068e3954a05b9b1.md                 | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb851b068e3954a05b9b1.md b/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb851b068e3954a05b9b1.md
index 1aeee0cc73c..a4ff4f2e290 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb851b068e3954a05b9b1.md
+++ b/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`.