feat(curriculum): Add interactive examples to What Is the prompt() Method, and How Does It Work (#63196)

curriculum/challenges/english/blocks/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-prompt-method-and-how-does-it-work
 ---
 
-# --description--
+# --interactive--
 
 The `prompt()` method is an important part of JavaScript's interaction with the user. It’s one of the simplest ways to get input from a user through a small pop-up dialog box.
 
@@ -15,17 +15,36 @@ So, what exactly does the `prompt()` method do? It opens a dialog box that asks
 
 The `prompt()` method takes two arguments: The first one is the message which will appear inside the dialog box, typically prompting the user to enter information. And the second one is a default value which is optional and will fill the input field initially.
 
-Here's an example of how it works:
-
 ```js
-let userName = prompt("What is your name?", "Guest");
+prompt(message, default);
 ```
 
-In this example, the `prompt()` method displays a dialog box with the message `What is your name?` and an input field that initially contains the value `Guest`.
+Here's an example of how it works.
 
-If the user types their name and presses "OK", the `userName` variable will store the entered value. If the user presses "Cancel," the `userName` variable will be set to `null`. `null` signifies that the user did not provide any input.
+**NOTE**: This example includes code you have not learned yet. Don't worry about trying to understand everything in the code. This is just to illustrate how the `prompt()` method works and ensure that the prompt doesn't appear immediately when the page loads which can be seen as intrusive. If you have the interactive editor enabled, you can try it out yourself.
 
-When the page first loads, you'll see the prompt dialog box appear with the message `What is your name?` and the input field pre-filled with `Guest`.
+:::interactive_editor
+
+```html
+<button id="prompt-btn">Show Prompt</button>
+<p id="output"></p>
+<script src="index.js"></script>
+```
+
+```js
+const btn = document.getElementById("prompt-btn");
+const output = document.getElementById("output");
+btn.addEventListener("click", () => {
+  const userName = prompt("What is your name?", "Guest");
+  output.textContent = "Hello, " + userName + "!";
+});
+```
+
+:::
+
+In this example, when the user clicks on the button, the `prompt()` method displays a dialog box with the message `What is your name?` and an input field that initially contains the value `Guest`.
+
+If the user types their name and presses "OK", the `userName` variable will store the entered value. If the user presses "Cancel," the `userName` variable will be set to `null`. `null` signifies that the user did not provide any input. The output paragraph will then display a greeting message using the provided name or `Guest` if the user canceled.
 
 Keep in mind that the `prompt()` method will halt the execution of the script until the user interacts with the dialog box.
 
@@ -33,19 +52,6 @@ This means the rest of your JavaScript code won’t run until the user either pr
 
 One other point to consider is that while `prompt()` is useful for quick testing or small applications, it's generally avoided in modern, complex web applications due to its disruptive nature and inconsistent behavior across different browsers.
 
-Here's an example:
-
-```js
-let age = prompt("How old are you?");
-if (age !== null) {
-  console.log("You are " + age + " years old.");
-} else {
-  console.log("User canceled the prompt.");
-}
-```
-
-In this example, if the user provides input, it will be displayed in the console. If they cancel, the console will log that the user canceled the prompt.
-
 By understanding the `prompt()` method, you gain a simple way to interact with users and retrieve information directly through the browser, even though it may not be widely used in modern web applications.
 
 # --questions--