fix(curriculum): guide users to enable the interactive editor (freeCodeCamp#63328)

Author: st3lll4

curriculum/challenges/english/blocks/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md

@@ -28,7 +28,7 @@ The value of `tabindex` determines how the element behaves in keyboard navigatio
 
 Tabbing will move focus from the `button` to the `div`, then to the link, following their order in the HTML.
 
-Click anywhere in the whitespace of the preview window. Then use the `Tab` key to see the focus move between the different elements.
+Click anywhere in the whitespace of the preview window. Then use the `Tab` key to see the focus move between the different elements. To interact with the example, you will need to enable the interactive editor.
 
 :::interactive_editor
 
@@ -62,7 +62,7 @@ Custom positive values are sometimes used in complex widgets, such as a toolbar
 
 `accesskey` is another attribute you can use to make your web project keyboard accessible. It allows you to define a key that focuses on or activates a particular element.
 
-Here is an interactive example you can try out following the suggestions below:
+Here is an interactive example you can try out following the suggestions below (enable the interactive editor first):
 
 - `accesskey="s"` assigns the key `S` to the `Save` button. On most browsers, pressing `ALT + S` (on Windows) and `CTRL + Option + S` (on Mac) will activate this button.
 - `accesskey="c"` sets the key `C` to the `Cancel` button, allowing users to activate it using `ALT + C` (Windows) and `CTRL + Option + C` (Mac).
@@ -82,7 +82,7 @@ Please note that the exact key combination to activate the accesskey might vary
 
 Another way to make the keyboard accessible in your apps is to make sure you provide clear focus indicators. If you feel the default browser focus indicator is not enough, you can override it by targeting the focus state of the element.
 
-Here is an example of styling the focus state for a `button` element. Click anywhere in the whitespace of the preview window followed by pressing the `Tab` key to focus the button. 
+Here is an example of styling the focus state for a `button` element. Click anywhere in the whitespace of the preview window followed by pressing the `Tab` key to focus the button. To interact with the example, you will need to enable the interactive editor.
 
 :::interactive_editor
 

curriculum/challenges/english/blocks/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md

@@ -30,7 +30,7 @@ This `@keyframes` rule, named `slide-in`, defines an animation that moves an ele
 
 The `translateX` function in your `@keyframes` animation is controlling the horizontal position of an element as it animates into view.
 
-To apply this animation to an element, you use the `animation` property. This example also repeats the animation infinitely so you can see it in action:
+To apply this animation to an element, you use the `animation` property. This example also repeats the animation infinitely so you can see it in action (you will need to enable the interactive editor to see previews):
 
 :::interactive_editor
 

curriculum/challenges/english/blocks/lecture-html-fundamentals/670803abcb3e980233da4768.md

@@ -9,7 +9,7 @@ dashedName: what-are-div-elements
 
 The `div` element is used as a container to group other elements. 
 
-Here is an example of a `div` element. Add another paragraph element inside of the `div` element and see the changes in the preview window.
+Here is an example of a `div` element. Add another paragraph element inside of the `div` element and see the changes in the preview window. To see the previews, you will need to enable the interactive editor.
 
 :::interactive_editor
 
@@ -28,7 +28,7 @@ Even though the `div` element is commonly used in real world codebases, you shou
 
 For example, if you wanted divide up your content into sections, then the `section` element would be more appropriate than a `div` element. 
 
-Add another `section` element below the first one. Then inside of the `section` element, a `h2` and `p` elements. You can use whatever text you like and you will see the changes in the preview window.
+Add another `section` element below the first one. Then inside of the `section` element, a `h2` and `p` elements. You can use whatever text you like and you will see the changes in the preview window. To interact with the example, you will need to enable the interactive editor.
 
 :::interactive_editor
 

curriculum/challenges/english/blocks/lecture-html-fundamentals/6708382cf088b216580a9ff1.md

@@ -11,7 +11,7 @@ The `id` attribute adds a unique identifier to an HTML element.
 
 Here is an example of an `h1` element with an `id` of `title`. 
 
-Below the `h1` element, add an `h2` element with an `id` set to `"subtitle"`. You can write whatever text you like for the `h2` and you will see the changes in the preview window. 
+Below the `h1` element, add an `h2` element with an `id` set to `"subtitle"`. You can write whatever text you like for the `h2` and you will see the changes in the preview window. To interact with the example, you will need to enable the interactive editor.
 
 :::interactive_editor
 
@@ -24,7 +24,7 @@ Below the `h1` element, add an `h2` element with an `id` set to `"subtitle"`. Yo
 
 You can reference the `id` name of `title` within your JavaScript or CSS. Here's a CSS example referencing the `id` of `title` to change the text `color` to `red`.
 
-**NOTE**: Some CSS has been provided for you in this interactive example. Don't worry about trying to understand the CSS code because you will learn more about that in future lessons. But if you want to see the text color change to blue, click on the `styles.css` tab in the editor and change the `color: red;` to `color: blue;`. 
+**NOTE**: Some CSS has been provided for you in this interactive example. Don't worry about trying to understand the CSS code because you will learn more about that in future lessons. But if you want to see the text color change to blue, enable the interactive editor, click on the `styles.css` tab and change the `color: red;` to `color: blue;`. 
 
 :::interactive_editor
 
@@ -77,7 +77,7 @@ If you wanted to add multiple class names to an element, you can do so by separa
 
 Here is an another example of applying multiple classes to multiple `div` elements. 
 
-**NOTE**: Some CSS has been provided for you in this interactive example. Don't worry about trying to understand the CSS code because you will learn more about that in future lessons. But if you wanted to change the color of the first and third boxes, click on the `styles.css` tab and change the `background-color: red;` to `background-color: black;`.
+**NOTE**: Some CSS has been provided for you in this interactive example. Don't worry about trying to understand the CSS code because you will learn more about that in future lessons. But if you wanted to change the color of the first and third boxes, enable the interactive editor and click on the `styles.css` tab and change the `background-color: red;` to `background-color: black;`.
 
 :::interactive_editor
 

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

@@ -9,7 +9,8 @@ dashedName: what-are-html-entities
 
 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. 
+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. To interact with the example, you will need to enable the interactive editor.
+
 
 :::interactive_editor
 
@@ -23,7 +24,7 @@ When the HTML parser sees the less than (`<`) symbol followed by an HTML tag nam
 
 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.
+Enable the interactive editor and 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
 
@@ -40,7 +41,7 @@ Another type of character reference would be the decimal numeric reference. This
 
 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.
+Enable the interactive editor and change the code to see different symbols. You can use `&#169;` for the copyright symbol and `&#174;` for the trademark symbol.
 
 :::interactive_editor
 
@@ -54,7 +55,7 @@ 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.
 
-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.
+Enable the interactive editor and change the code to see different symbols. You can use `&#x20AC;` for the euro symbol and `&#x03A9;` for the Greek capital letter Omega symbol.
 
 :::interactive_editor
 

curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md

@@ -9,7 +9,7 @@ dashedName: what-is-the-role-of-the-script-element-in-html
 
 The `script` element is used to embed executable code. Most developers will use this to execute JavaScript code. JavaScript is used to add interactivity to your web pages. Common examples of using JavaScript include interactive games, image sliders, and dynamic forms that validate user input in real-time. 
 
-Here is an example of using the `script` element in an HTML document. Remove the `//` from in front of the `alert("Welcome to freeCodeCamp");` and you should see an alert pop up. 
+Here is an example of using the `script` element in an HTML document. Remove the `//` from in front of the `alert("Welcome to freeCodeCamp");` and you should see an alert pop up. To see the previews, you will need to enable the interactive editor.
 
 :::interactive_editor
 

curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md

@@ -27,7 +27,7 @@ Following the pattern, your `h3` element should always come after an `h2` elemen
 
 But this code would not be correct, because `h3` comes before `h2`. 
 
-Move the `h2` element above the `h3` so it is semantically correct. 
+Move the `h2` element above the `h3` so it is semantically correct. To interact with the code, you will need to enable the interactive editor.
 
 :::interactive_editor
 

curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md

@@ -13,7 +13,7 @@ Many presentational HTML elements are deprecated, which means that they are outd
 
 The `font` element is a deprecated element used to set the font size and color of the text. Here's an example of a `font` element.
 
-Change the size from 5 to 7 to see the font increase.
+Enable the interactive editor and change the size from 5 to 7 to see the font increase.
 
 :::interactive_editor
 
@@ -29,7 +29,7 @@ While this element still works, you should not use it because the font size and
 
 The `center` element is another deprecated element that is used to center the content horizontally within its container. Here's an example of the `center` element that contains text and a paragraph element.
 
-Add `center` tags around the `<p>Another example text.</p>` to see it centered on the page.
+Enable the interactive editor and add `center` tags around the `<p>Another example text.</p>` to see it centered on the page.
 
 :::interactive_editor
 
@@ -46,7 +46,7 @@ Add `center` tags around the `<p>Another example text.</p>` to see it centered o
 
 And next, we have the `big` element. This is another deprecated presentational HTML element that makes the enclosed text one level bigger than its surrounding text. Here we have an example that defines a paragraph with two parts.
 
-Add `big` tags around the `Some other text` and see the changes in the preview window.
+Enable the interactive editor and add `big` tags around the `Some other text` and see the changes in the preview window. 
 
 :::interactive_editor
 
@@ -77,7 +77,7 @@ Examples of semantic HTML elements include:
 
 This is an example of a `header` element that contains a navigation section element.
 
-Add a `<a href="#">Products</a>` inside of the `nav` and see the changes in the preview window.
+Enable the interactive editor and add a `<a href="#">Products</a>` inside of the `nav` and see the changes in the preview window.
 
 :::interactive_editor
 

curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md

@@ -20,11 +20,11 @@ It is important to remember that `aria-hidden` only hides content from assistive
 
 You should never use `aria-hidden` to hide an element that is focusable with the keyboard. The `aria-hidden` attribute only removes the element from the accessibility tree. It does not remove it from the DOM. Thus, it will still be possible for screen reader users to tab to the element, but their screen reader will not announce the element, effectively causing them to focus on "nothing".
 
-Here's an example where we hide an icon from the accessibility tree by adding the `aria-hidden` attribute with a value of `true`.
+Here's an example where we hide an icon from the accessibility tree by adding the `aria-hidden` attribute with a value of `true`. 
 
 We only keep the text exposed to assistive technologies to avoid any confusion that may arise from the redundancy of having both an icon and text for the same purpose.
 
-**NOTE**: This interactive example includes the Font Awesome CDN so you can see the gear icon displayed in the preview window.
+**NOTE**: This interactive example includes the Font Awesome CDN so you can see the gear icon displayed in the preview window. To see the previews, you will need to enable the interactive editor.
 
 :::interactive_editor
 

curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md

@@ -13,7 +13,7 @@ The most common use for `aria-describedby` is to associate instructions and erro
 
 Let's take a look at a few examples to understand how it works. In this first example, we have a `form` element that accepts a password.
 
-Type a few characters into the password input field and you will see that the password is masked in the preview window. You should also see that the `password-help` text remains red until you provide 8 or more characters into the input. 
+Enable the interactive editor and type a few characters into the password input field. You will see that the password is masked in the preview window. You should also see that the `password-help` text remains red until you provide 8 or more characters into the input. 
 
 NOTE: This interactive example is using CSS and JavaScript to dynamically update the color for the `password-help` text. Don't worry about trying to understand the JavaScript code because you will learn JavaScript in future modules.