From 6d966d1edcd4d73825370ccc4d0df2c58755d0bd Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Wed, 21 Jan 2026 07:32:09 -0600
Subject: [PATCH] feat(curriculum): add interactive examples to HTML chapter
 review page (#65202)

---
 .../review-html/671a883163d5ab5d47145880.md   | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/review-html/671a883163d5ab5d47145880.md b/curriculum/challenges/english/blocks/review-html/671a883163d5ab5d47145880.md
index 08a1de00780..47280576b53 100644
--- a/curriculum/challenges/english/blocks/review-html/671a883163d5ab5d47145880.md
+++ b/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.