From fbcd965f1554814a1708f6f45fa8d292189f7c8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Giftea=20=E2=98=95?= <Eleojogiftuhiene@gmail.com>
Date: Fri, 10 Oct 2025 23:07:56 +0100
Subject: [PATCH] feat(curriculum): Add interactive examples to description
 lists lesson (#62688)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 .../672995bda6c67e369aaf8588.md               | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md b/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md
index 065beb5aecc..fd657cd013c 100644
--- a/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md
+++ b/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md
@@ -5,11 +5,15 @@ challengeType: 19
 dashedName: what-are-description-lists
 ---
 
-# --description--
+# --interactive--
 
 Description lists are perfect for presenting terms and definitions in an organized and easy-to-read format, like in a glossary, or real dictionary, where you can find words with their corresponding definitions.
 
-This is an example of a description list in HTML with two terms and their corresponding details:
+This is an example of a description list in HTML with two terms and their corresponding details.
+
+Uncomment the code to see the new detail item show up in the preview window.
+
+:::interactive_editor
 
 ```html
 <dl>
@@ -17,14 +21,18 @@ This is an example of a description list in HTML with two terms and their corres
   <dd>HyperText Markup Language</dd>
   <dt>CSS</dt>
   <dd>Cascading Style Sheets</dd>
+  <!-- <dt>JS</dt>
+  <dd>JavaScript</dd> -->
 </dl>
 ```
 
+:::
+
 In this case the terms are the acronyms HTML and CSS, and the details are their expansions. The details could also be definitions, or other information related to the terms.
 
 You will need three HTML elements to define a description list. First, the description list element, `dl`, which is the container for the entire list. You can see it wraps around all the other elements of the description list in the example.
 
-Then, one description term element, `dt`,  for each term. In this case the description list has two terms, HTML and CSS, so it has two of these elements.
+Then, one description term element, `dt`, for each term. In this case the description list has two terms, HTML and CSS, so it has two of these elements.
 
 And finally, after each term you will find a description details element, `dd`, for the description, or details associated with that term. In this example, they are Hypertext Markup Language and Cascading Style Sheets.
 
@@ -32,15 +40,23 @@ In the browser, you would see each term followed by its corresponding descriptio
 
 But description lists are not limited to only terms and definitions. They are much more versatile than that. Here we have a recipe with two ingredients.
 
+Uncomment the code to see the new detail item show up in the preview window.
+
+:::interactive_editor
+
 ```html
 <dl>
   <dt>Flour</dt>
   <dd>2 cups</dd>
   <dt>Sugar</dt>
   <dd>1/2 cup</dd>
+  <!-- <dt>Vegetable Oil</dt>
+  <dd>2 tablespoons</dd> -->
 </dl>
 ```
 
+:::
+
 The entire description list is within a description list element. The first ingredient, `Flour`, is within a description term element. Then, you can see how much of this ingredient you will need: `2 cups`. This is within a description details element directly after its corresponding ingredients.
 
 And the same structure is repeated for `Sugar`. In this case, the recipe has only two ingredients, but if there were more the same structure could be repeated throughout the description list.