feat(curriculum): Add interactive examples to dialog element lesson (#63477)

curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-you-open-and-close-dialog-elements-using-javascript
 ---
 
-# --description--
+# --interactive--
 
 Dialogs let you display important information or actions to users. With HTML's built-in `dialog` element, you can easily create these dialogs (both modal and non-modal dialogs) in your web apps.
 
@@ -19,68 +19,99 @@ When you want to make sure the user focuses on a specific action or message of a
 
 Here's the HTML for the modal dialog:
 
+:::interactive_editor
+
 ```html
 <dialog id="my-modal">
-   <p>This is a modal dialog.</p>
+  <p>This is a modal dialog.</p>
 </dialog>
 ```
 
+:::
+
 For now, you can't see anything on the page because the modal is closed on the initial render. You can automatically open the modal by using the `showModal()` method:
 
+:::interactive_editor
+
+```html
+<dialog id="modal">
+  <p>This is a modal dialog.</p>
+</dialog>
+<script src="index.js"></script>
+```
+
 ```js
-const dialog = document.getElementById("my-modal");
+const dialog = document.getElementById("modal");
 dialog.showModal();
 ```
 
+:::
+
 The result in the browser will show a modal with the text `This is a modal dialog.`
 
 It's best to give control to the user. To achieve this, you can add a click event listener to a button and use the `showModal()` method:
 
+:::interactive_editor
+
 ```html
-<dialog id="my-modal">
-   <p>This is a modal dialog.</p>
+<dialog id="modal">
+  <p>This is a modal dialog.</p>
 </dialog>
-<button id="open-modal">Open Modal Dialog</button>
+<button id="open-modal-btn">Open Modal Dialog</button>
+<script src="index.js"></script>
 ```
 
-Here's the JavaScript:
-
 ```js
-const dialog = document.getElementById("my-modal");
-const openButton = document.getElementById("open-modal");
+const dialog = document.getElementById("modal");
+const openButton = document.getElementById("open-modal-btn");
 
 openButton.addEventListener("click", () => {
   dialog.showModal();
 });
 ```
 
+:::
+
 If you needed to show a dialog while still allowing interaction with content outside of the dialog, then you can use the `show()` method:
 
+:::interactive_editor
+
+```html
+<dialog id="modal">
+  <p>This is a modal dialog.</p>
+</dialog>
+<button id="open-modal-btn">Open Modal Dialog</button>
+<script src="index.js"></script>
+```
+
 ```js
-const dialog = document.getElementById("my-modal");
-const openButton = document.getElementById("open-modal");
+const dialog = document.getElementById("modal");
+const openButton = document.getElementById("open-modal-btn");
 
 openButton.addEventListener("click", () => {
   dialog.show();
 });
 ```
 
-To close a modal, you can add a button to the modal inside the `dialog` element:
+:::
+
+To close a modal, you can add a button to the modal inside the `dialog` element and use the `close()` method:
+
+:::interactive_editor
 
 ```html
-<dialog id="my-modal">
-   <p>This is a modal dialog.</p>
-   <button id="close-modal">Close Modal</button>
+<dialog id="modal">
+  <p>This is a modal dialog.</p>
+  <button id="close-modal-btn">Close Modal</button>
 </dialog>
-<button id="open-modal">Open Modal Dialog</button>
+<button id="open-modal-btn">Open Modal Dialog</button>
+<script src="index.js"></script>
 ```
 
-Then use the `close()` method on the button:
-
 ```js
-const dialog = document.getElementById("my-modal");
-const openButton = document.getElementById("open-modal");
-const closeButton = document.getElementById("close-modal");
+const dialog = document.getElementById("modal");
+const openButton = document.getElementById("open-modal-btn");
+const closeButton = document.getElementById("close-modal-btn");
 
 openButton.addEventListener("click", () => {
   dialog.show();
@@ -91,6 +122,8 @@ closeButton.addEventListener("click", () => {
 });
 ```
 
+:::
+
 # --questions--
 
 ## --text--