feat(curriculum): add interactive examples to HTML chapter review page (#65202)

curriculum/challenges/english/blocks/review-html/671a883163d5ab5d47145880.md

@@ -5,7 +5,7 @@ challengeType: 31
 dashedName: review-html
 ---
 
-# --description--
+# --interactive--
 
 Review the concepts below to prepare for the upcoming prep exam.
 
@@ -123,6 +123,8 @@ Review the concepts below to prepare for the upcoming prep exam.
 - **`disabled` attribute**: used to specify that an input field should be disabled.
 - **`readonly` attribute**: used to specify that an input field is read-only.
 
+:::interactive_editor
+
 ```html
 <!-- Text input -->
 <input 
@@ -150,10 +152,14 @@ Review the concepts below to prepare for the upcoming prep exam.
 <input type="button" value="Show Alert" />
 ```
 
+:::
+
 - **`label` element**: used to create a label for an input field.
 - **`for` attribute**: used to specify which input field the label is for.
 - **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
 
+:::interactive_editor
+
 ```html
 <form action="">
   <label>
@@ -163,8 +169,12 @@ Review the concepts below to prepare for the upcoming prep exam.
 </form>
 ```
 
+:::
+
 - **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
 
+:::interactive_editor
+
 ```html
 <form action="">
   <label for="email">Email Address: </label>
@@ -172,17 +182,25 @@ Review the concepts below to prepare for the upcoming prep exam.
 </form>
 ```
 
+:::
+
 - **`button` element**: used to create a clickable button. A button can also have a `type` attribute, which controls the behavior of the button when it is activated, e.g., `submit`, `reset`, `button`.
 
+:::interactive_editor
+
 ```html
 <button type="button">Show Form</button>
 <button type="submit">Submit Form</button>
 <button type="reset">Reset Form</button>
 ```
 
+:::
+
 - **`fieldset` element**: used to group related inputs together.
 - **`legend` element**: used to add a caption to describe the group of inputs.
 
+:::interactive_editor
+
 ```html
 <!-- Radio group -->
 <fieldset>
@@ -209,6 +227,8 @@ Review the concepts below to prepare for the upcoming prep exam.
 </fieldset>
 ```
 
+:::
+
 - **Focused state**: this is the state of an input field when it is selected by the user.
 
 ## Working with HTML Table Elements and Attributes
@@ -223,6 +243,8 @@ Review the concepts below to prepare for the upcoming prep exam.
 - **`caption` element**: used to add a title of an HTML table.
 - **`colspan` attribute**: used to specify the number of columns a table cell should span.
 
+:::interactive_editor
+
 ```html
 <table>
   <caption>Exam Grades</caption>
@@ -264,6 +286,8 @@ Review the concepts below to prepare for the upcoming prep exam.
 </table>
 ```
 
+:::
+
 ## HTML Tools
 
 - **HTML validator**: A tool that checks the syntax of HTML code to ensure it is valid.