diff --git a/curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md b/curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
index 89c4879ca37..e593c9793b9 100644
--- a/curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
+++ b/curriculum/challenges/english/blocks/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
@@ -5,32 +5,60 @@ challengeType: 19
 dashedName: what-are-best-practices-for-hiding-content-so-it-doesnt-become-inaccessible
 ---
 
-# --description--
+# --interactive--
 
 Hiding content on a webpage is a common practice in web development, but it's crucial to do it in a way that doesn't compromise accessibility. Different hiding techniques can have varying impacts on how assistive technologies interpret and present the content to users. Let's explore some best practices for hiding content while maintaining accessibility. One common method to hide content is using `display: none`. Here's an example:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p class="hidden">Hidden text</p>
+<p>Visible text</p>
+```
+
 ```css
 .hidden {
   display: none;
 }
 ```
 
+:::
+
 While this effectively hides the content visually, it also removes it from the accessibility tree. The accessibility tree is a structure used by assistive technologies, such as screen readers, to interpret and interact with the content on a web page. It represents the content and its semantic meaning in a way that assistive technology can understand and present to the user.
 
 Using `display: none` means that screen readers and other assistive technologies won’t be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility. 
 
 Another approach to hiding content is using `visibility: hidden`:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p class="hidden">Hidden text</p>
+<p>Visible text</p>
+```
+
 ```css
 .hidden {
   visibility: hidden;
 }
 ```
 
+:::
+
 `visibility: hidden` hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. Like `display: none`, `visibility: hidden` also removes content from the accessibility tree. This means that assistive technologies, like screen readers, will not be able to access the hidden content. Only use `visibility: hidden` when you want to hide content from everyone, including people who use assistive technology.
 
 For content that should be hidden visually but remain accessible to screen readers, you can use a technique often referred to as "visually hidden" or "screen reader only". Here is an example using the `.sr-only` CSS class which is a common technique used to visually hide content while keeping it accessible to screen readers:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p class="sr-only">Hidden text</p>
+<p>Visible text</p>
+```
+
 ```css
 .sr-only {
   position: absolute;
@@ -45,14 +73,21 @@ For content that should be hidden visually but remain accessible to screen reade
 }
 ```
 
+:::
+
 In this example, we are using properties like `position`, `clip`, and `white-space`, which you will learn about in future lessons. For now, just know that this CSS rule effectively hides the content visually while keeping it accessible to screen readers. It's useful for providing additional context to screen reader users without affecting the visual layout. 
 
 For toggling content visibility, consider using the `hidden` attribute:
 
+:::interactive_editor
+
 ```html
-<div hidden>This content is hidden</div>
+<p hidden>This content is hidden</p>
+<p>This content is visible</p>
 ```
 
+:::
+
 The `hidden` attribute is supported by most modern browsers and hides content both visually and from the accessibility tree. It can be easily toggled with JavaScript. Lastly, be cautious about hiding important content. If information is crucial for understanding or using the website, it should be visible and accessible to all users. Only hide content when doing so genuinely enhances the user experience. By following these best practices, you can ensure that your content remains accessible to all users, regardless of how they interact with your website.
 
 # --questions--