feat(curriculum): add interactive examples to JavaScript math (#65317)

Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>

curriculum/challenges/english/blocks/review-javascript-math/6723c463e51a2d9b747d7529.md

@@ -5,7 +5,7 @@ challengeType: 31
 dashedName: review-javascript-math
 ---
 
-# --description--
+# --interactive--
 
 ## Working with the Number Data Type
 
@@ -25,10 +25,12 @@ dashedName: review-javascript-math
 
 - **Explanation**: When you use the `+` operator with a number and a string, JavaScript will coerce the number into a string and concatenate the two values.  When you use the `-`, `*` or `/` operators with a string and number, JavaScript will coerce the string into a number and the result will be a number. For `null` and `undefined`, JavaScript treats `null` as 0 and undefined as `NaN` in mathematical operations.
 
+:::interactive_editor
+
 ```js
 const result = 5 + '10';
 
-console.log(result); // 510
+console.log(result); // "510"
 console.log(typeof result); // string
 
 const subtractionResult = '10' - 5;
@@ -52,10 +54,14 @@ console.log(result2); // NaN
 console.log(typeof result2); // number
 ```
 
+:::
+
 ## Operator Precedence 
 
 - **Definition**: Operator precedence determines the order in which operations are evaluated in an expression. Operators with higher precedence are evaluated before those with lower precedence. Values inside the parenthesis will be evaluated first and multiplication/division will have higher precedence than addition/subtraction. If the operators have the same precedence, then JavaScript will use associativity. 
 
+:::interactive_editor
+
 ```js
 const result = (2 + 3) * 4;
 
@@ -70,18 +76,26 @@ const result3 = 2 ** 3 ** 2;
 console.log(result3); // 512
 ```
 
+:::
+
 - **Definition**: Associativity informs us the direction in which an expression is evaluated when multiple operators of the same type exist. It defines whether the expression should be evaluated from left-to-right (`left-associative`) or right-to-left (`right-associative`). For example, the exponent operator is also right to left associative:
 
-```js
-const result4 = 5 ** 4 ** 1; // 625
+:::interactive_editor
 
-console.log(result4);
+```js
+const result4 = 5 ** 4 ** 1; 
+
+console.log(result4); // 625
 ```
 
+:::
+
 ## Increment and Decrement Operators
 
 - **Increment Operator**: This operator is used to increase the value by one. The prefix notation `++num` increases the value of the variable first, then returns a new value. The postfix notation `num++` returns the current value of the variable first, then increases it.
 
+:::interactive_editor
+
 ```js
 let x = 5;
 
@@ -95,8 +109,12 @@ console.log(y++); // 5
 console.log(y); // 6
 ```
 
+:::
+
 - **Decrement Operator**: This operator is used to decrease the value by one. The prefix notation and postfix notation work the same way as earlier with the increment operator.
 
+:::interactive_editor
+
 ```js
 let num = 5;
 
@@ -105,6 +123,8 @@ console.log(num--); // 4
 console.log(num); // 3
 ```
 
+:::
+
 ## Compound Assignment Operators
 
 - **Addition Assignment (`+=`) Operator**: This operator performs addition on the values and assigns the result to the variable.
@@ -119,16 +139,24 @@ console.log(num); // 3
 - **Boolean Definition**: A boolean is a data type that can only have two values: `true` or `false`. 
 - **Equality (`==`) Operator**: This operator uses type coercion before checking if the values are equal.
 
+:::interactive_editor
+
 ```js
 console.log(5 == '5'); // true
 ```
 
+:::
+
 - **Strict Equality (`===`) Operator**: This operator does not perform type coercion and checks if both the types and values are equal.
 
+:::interactive_editor
+
 ```js
 console.log(5 === '5'); // false
 ```
 
+:::
+
 - **Inequality (`!=`) Operator**: This operator uses type coercion before checking if the values are not equal.
 - **Strict  Inequality (`!==`) Operator**: This operator does not perform type coercion and checks if both the types and values are not equal.
 
@@ -143,6 +171,8 @@ console.log(5 === '5'); // false
 
 - **Unary Plus Operator**: This operator converts its operand into a number. If the operand is already a number, it remains unchanged.
 
+:::interactive_editor
+
 ```js
 const str = '42';
 const num = +str;
@@ -151,13 +181,19 @@ console.log(num); // 42
 console.log(typeof num); // number
 ```
 
+:::
+
 - **Unary Negation (`-`) Operator**: This operator negates the operand.
 
+:::interactive_editor
+
 ```js
 const num = 4;
 console.log(-num); // -4
 ```
 
+:::
+
 - **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it's `false`, it becomes `true`. 
 
 ## Bitwise Operators  
@@ -175,6 +211,8 @@ console.log(-num); // -4
 
 - **`if/else if/else`**: An `if` statement takes a condition and runs a block of code if that condition is `truthy`. If the condition is `false`, then it moves to the `else if` block. If none of those conditions are `true`, then it will execute the `else` clause. `Truthy` values are any values that result in `true` when evaluated in a Boolean context like an `if` statement. `Falsy` values are values that evaluate to `false` in a Boolean context. 
 
+:::interactive_editor
+
 ```js
 const score = 87;
 
@@ -189,8 +227,12 @@ if (score >= 90) {
 }
 ```
 
+:::
+
 - **Ternary Operator**: This operator is often used as a shorter way to write `if else` statements. 
 
+:::interactive_editor
+
 ```js
 const temperature = 30;
 const weather = temperature > 25 ? 'sunny' : 'cool';
@@ -198,19 +240,27 @@ const weather = temperature > 25 ? 'sunny' : 'cool';
 console.log(`It's a ${weather} day!`); // It's a sunny day!
 ```
 
+:::
+
 ## Binary Logical Operators  
 
 - **Logical AND (`&&`) Operator**: This operator checks if both operands are `true`. If both are `true`, then it will return the second value. If either operand is `falsy`, then it will return the `falsy` value. If both operands are `falsy`, it will return the first `falsy` value. 
 
+:::interactive_editor
+
 ```js
 const result = true && 'hello';
 
 console.log(result); // hello
 ```
 
+:::
+
 - **Logical OR (`||`) Operator**: This operator checks if at least one of the operands is truthy. 
 - **Nullish Coalescing (`??`) Operator**: This operator will return a value only if the first one is `null` or `undefined`.
 
+:::interactive_editor
+
 ```js
 const userSettings = {
  theme: null,
@@ -222,6 +272,7 @@ let theme = userSettings.theme ?? 'light';
 console.log(theme); // light
 ```
 
+:::
 
 ## The `Math` Object 
 
@@ -232,12 +283,16 @@ console.log(theme); // light
 - **The `Math.floor()` Method**: This method rounds a value down to the nearest whole integer. 
 - **The `Math.round()` Method**: This method rounds a value to the nearest whole integer. 
 
+:::interactive_editor
+
 ```js
 console.log(Math.round(2.3)); // 2
 console.log(Math.round(4.5)); // 5
 console.log(Math.round(4.8)); // 5
 ```
 
+:::
+
 - **The `Math.trunc()` Method**: This method removes the decimal part of a number, returning only the integer portion, without rounding.
 - **The `Math.sqrt()` Method**: This method will return the square root of a number.
 - **The `Math.cbrt()` Method**: This method will return the cube root of a number.
@@ -248,6 +303,8 @@ console.log(Math.round(4.8)); // 5
 
 - **`isNaN()`**: `NaN` stands for "Not-a-Number". It's a special value that represents an unrepresentable or undefined numerical result. The `isNaN()` function property is used to determine whether a value is `NaN` or not.  `Number.isNaN()` provides a more reliable way to check for `NaN` values, especially in cases where type coercion might lead to unexpected results with the global `isNaN()` function.
 
+:::interactive_editor
+
 ```js
 console.log(isNaN(NaN));       // true
 console.log(isNaN(undefined)); // true
@@ -266,6 +323,8 @@ console.log(Number.isNaN("NaN"));      // false
 console.log(Number.isNaN(undefined));  // false
 ```
 
+:::
+
 - **The `parseFloat()` Method**: This method parses a string argument and returns a floating-point number. It's designed to extract a number from the beginning of a string, even if the string contains non-numeric characters later on.
 - **The `parseInt()` Method**: This method parses a string argument and returns an integer. `parseInt()` stops parsing at the first non-digit it encounters. For floating-point numbers, it returns only the integer part. If it can't find a valid integer at the start of the string, it returns `NaN`.
 - **The `toFixed()` Method**: This method is called on a number and takes one optional argument, which is the number of digits to appear after the decimal point. It returns a string representation of the number with the specified number of decimal places.