feat(curriculum): Add interactive examples to What Is a While Loop, and How Does It Differ from the Do...while Loop (#63341)

curriculum/challenges/english/blocks/lecture-working-with-loops/6732c06654ea3442724284fe.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-a-while-loop-and-how-does-it-differ-from-the-do-while-loop
 ---
 
-# --description--
+# --interactive--
 
 In previous lessons, you learned how to work with `for` loops, `for...in` loops and `for...of` loops. In this lesson, you will learn about the `while` loop and the `do...while` loop.
 
@@ -19,27 +19,21 @@ while (condition) {
 
 The condition is checked before the block of code is executed. If the condition is false, the block of code will not be executed.
 
-`while` loops are useful when you do not know how many times you need to run the block of code. Here is an example of using a `while` loop to validate user input:
+`while` loops are useful when you do not know how many times you need to run the block of code. Here is an example of using a `while` loop:
+
+:::interactive_editor
 
 ```js
-let userInput = prompt("Please enter a number between 1 and 10");
-
-while (isNaN(userInput) || Number(userInput) < 1 || Number(userInput) > 10) {
-  userInput = prompt("Invalid input. Please enter a number between 1 and 10.");
+let counter = 0;
+while(counter < 5) {
+  console.log(counter);
+  counter++;
 }
-
-alert("You entered a valid number!");
 ```
 
-In this example, we are using the `prompt` method to ask for user input. Then, the `while` loop first checks if the `userInput` is `NaN`. Remember that `NaN` is "Not a Number". `isNaN` checks whether the value is `NaN` and that `NaN` is the result of an invalid number conversion because it's not a number.
+:::
 
-So if the user types in random characters or nothing at all, then they will be prompted with the message again. The `while` loop is also checking if the `userInput`, when converted to a number, is between `1` and `10`. 
-
-We are using the `Number` constructor here because a prompt will return a string and we want only want to be explicitly checking numbers here.
-
-If the user input is not between `1` and `10`, the `while` loop will continue to prompt the user to enter a number between `1` and `10`.
-
-Once the user enters a valid number, the `while` loop will exit and an alert will be displayed to the user.
+In this example, we have a variable called `counter` that is initialized to `0`. The `while` loop will continue to run as long as the value of `counter` is less than `5`. Inside the loop, we log the value of `counter` to the console and then increment `counter` by `1`.
 
 Another loop similar to the `while` loop would be the `do...while` loop. Here is the basic syntax:
 
@@ -53,23 +47,21 @@ One key difference between a `do...while` loop and a `while` loop is that the `d
 
 If the condition is true, the block of code will continue to execute. If the condition is false, the block of code will stop executing.
 
-Here is an example of using a `do...while` loop to validate user input:
+Here is an example of using a `do...while` loop:
+
+:::interactive_editor
 
 ```js
-let userInput;
-
+let counter = 0;
 do {
-  userInput = prompt("Please enter a number between 1 and 10");
-} while (Number(userInput) < 1 || Number(userInput) > 10);
-
-alert("You entered a valid number!");
+  console.log(counter);
+  counter++;
+} while (counter < 5);  
 ```
 
-In this example, we have a variable called `userInput` and have not assigned a value to it. Then we have a `do...while` loop that will prompt the user to enter a number between `1` and `10`.
+:::
 
-Then the `while` loop will check if the user input is less `than` 1 or greater than `10`. If the input is not between `1` and `10`, the `do...while` loop will continue to prompt the user to enter a number between `1` and `10`.
-
-Once the user complies and enters a valid number, the `do...while` loop will exit and an alert will be displayed to the user.
+In this example, we have a variable called `counter` that is initialized to `0`. The `do...while` loop will log the value of `counter` to the console and then increment `counter` by `1`. After executing the block of code, it checks if the value of `counter` is less than `5`. If it is, the loop will continue to run. If not, the loop will stop.
 
 In most cases, you will probably use the `while` loop more often than the `do...while` loop. However, it is good to know both types of loops and when to use them.