From a124dd0aea24ecb4396fa340089cb036f0d4177e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Giftea=20=E2=98=95?= <Eleojogiftuhiene@gmail.com>
Date: Fri, 10 Oct 2025 22:08:08 +0100
Subject: [PATCH] feat(curriculum): Add interactive examples to sup & sub
 elements lesson (#62701)

---
 .../672995ffdfd2f337f5f215f8.md                  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md b/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md
index deaee3de300..e0725dc5b2d 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md
@@ -5,26 +5,34 @@ challengeType: 19
 dashedName: how-do-you-display-mathematical-equations-and-chemical-formulas-in-html
 ---
 
-# --description--
+# --interactive--
 
 The superscript element is used to display a piece of text as a superscript. A superscript is a symbol or letter printed above the normal line of text.
 
 Here is an example using the superscript element to illustrate exponents:
 
+:::interactive_editor
+
 ```html
 <p>2<sup>2</sup> (2 squared) is 4.</p>
 ```
 
-In this example, the number 2 is wrapped in `sup` tags to represent the superscript inside the paragraph. In the browser, you would see that the second number 2 is smaller and slightly higher than the first number 2.
+:::
+
+In this example, the number 2 is wrapped in `sup` tags to represent the superscript inside the paragraph. In the preview window, you will see that the second number 2 is smaller and slightly higher than the first number 2.
 
 Common use cases for the superscript element would include exponents, superior lettering, and ordinal numbers. Here is an example using the superscript element for superior lettering:
 
+:::interactive_editor
+
 ```html
 <p>
   Monseigneur is often written as <strong>M<sup>gr</sup></strong>.
 </p>
 ```
 
+:::
+
 Superior lettering refers to letters written in superscript, usually to indicate abbreviations. The letters `g` and `r` are wrapped inside superscript tags to illustrate the abbreviation in this example.
 
 It is important to note that the superscript element should only be used for typographical reasons. If you want style a piece of text with a raised baseline, then you should use CSS instead of the superscript element.
@@ -33,10 +41,14 @@ To represent chemical equations inside HTML, you would use the subscript element
 
 Here is an example of using the subscript element to show the chemical representation for carbon dioxide.
 
+:::interactive_editor
+
 ```html
 <p>CO<sub>2</sub></p>
 ```
 
+:::
+
 The number two is wrapped inside `sub` tags to illustrate that the character should be a subscript.
 
 Common use cases for the subscript element include chemical formulas, footnotes, and variable subscripts.