feat(curriculum): Add interactive examples to HTML entities lesson (#62646)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

curriculum/challenges/english/blocks/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md

@@ -5,41 +5,65 @@ challengeType: 19
 dashedName: what-are-html-entities
 ---
 
-# --description--
+# --interactive--
 
-An HTML entity, or character reference, is a set of characters used to represent a reserved character in HTML. In this example, there is a paragraph element with an image element nested inside:
+An HTML entity, or character reference, is a set of characters used to represent a reserved character in HTML. 
+
+Let's say you wanted to display the text `This is an <img/> element` on the screen. If you use the code currently in the editor, it won't display the desired result. Even if you added `src` and `alt` attributes to the example, it would show an image in the middle of the paragraph. Not the desired result. 
+
+:::interactive_editor
 
 ```html
 <p>This is an <img /> element</p>
 ```
 
-The text on the screen should say `This is an <img/> element`. However, the text currently says `This is an element.` This is happening because when the HTML parser sees the less than (`<`) symbol followed by an HTML tag name, it interprets that as an HTML element.
+:::
 
-To fix this issue, you can use HTML entities. Here is an updated example using the correct HTML entities for the less than and greater than (`>`) symbols.
+When the HTML parser sees the less than (`<`) symbol followed by an HTML tag name, it interprets that as an HTML element. That is why you are not getting the desired result of `This is an <img/> element` on the screen.
+
+To fix this issue, you can use HTML entities. Here is an updated example using the correct HTML entities for the less (`<`) than and greater than (`>`) symbols. Now you should see `This is an <img/> element` on the screen.
+
+Try adding a `&lt;p&gt;learning is fun&lt;/p&gt;` below the paragraph element. You should see `<p>learning is fun</p>` on the screen.
+
+:::interactive_editor
 
 ```html
 <p>This is an &lt;img /&gt; element</p>
+
 ```
 
-These types of character references are known as named character references. Named references start with an ampersand sign (`&`) and end with a semicolon (`;`). By using a named character reference, the HTML parser will not confuse this with an actual HTML element. Here is what the updated paragraph element looks like on the page: `This is an <img/> element`. Now, users will be able to see the entire image element syntax as you intended it.
+:::
 
-Another type of character reference would be the decimal numeric reference. Here is an example of using the decimal numeric reference for the less than symbol:
+These types of character references are known as named character references. Named references start with an ampersand sign (`&`) and end with a semicolon (`;`). By using a named character reference, the HTML parser will not confuse this with an actual HTML element. 
+
+Another type of character reference would be the decimal numeric reference. This character reference starts with an ampersand sign and hash symbol (`#`), followed by one or more decimal digits, followed by a semicolon.
+
+Here is an example of using the decimal numeric reference for the less than symbol. 
+
+Change the code in the editor to see different symbols. You can use `&#169;` for the copyright symbol and `&#174;` for the trademark symbol.
+
+:::interactive_editor
 
 ```html
 &#60;
 ```
 
-This character reference starts with an ampersand sign and hash symbol (`#`), followed by one or more decimal digits, followed by a semicolon.
+:::
 
-The last type of character reference would be the hexadecimal numeric reference. Here is an example of using the hexadecimal numeric reference for the less than symbol:
+The last type of character reference would be the hexadecimal numeric reference. This character reference starts with an ampersand sign, hash symbol, and the letter `x`. Then it is followed by one or more ASCII hex digits and ends with a semicolon.
+
+Here is an example of using the hexadecimal numeric reference for the less than symbol.
+
+Change the code in the editor to see different symbols. You can use `&#x20AC;` for the euro symbol and `&#x03A9;` for the Greek capital letter Omega symbol.
+
+:::interactive_editor
 
 ```html
 &#x3C;
 ```
 
-This character reference starts with an ampersand sign, hash symbol, and the letter `x`. Then it is followed by one or more ASCII hex digits and ends with a semicolon.
+:::
 
-So what are some other examples of using HTML entities? Well, you often see them used for symbols like the copyright symbol (`©`), quotes (`"`), trademark symbol (`™`), and the ampersand sign.
 
 # --questions--