chore(curriculum): update JS data type lesson (#64132)

Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>

curriculum/challenges/english/blocks/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md

@@ -5,55 +5,105 @@ challengeType: 19
 dashedName: what-is-a-data-type
 ---
 
-# --description--
+# --interactive--
 
-In JavaScript, a data type refers to the kind of value a variable holds.
+In JavaScript, a data type is the kind of value you store like a number or piece of text.
 
-A variable is a named container that stores a value of a specific data type, allowing you to reference and manipulate it throughout your code. Data types help the program understand the kind of data it's working with, whether it's a number, text, or something else.
+A variable is a named container that stores a value of a specific data type, allowing you to reference and manipulate it throughout your code. 
+
+You might remember in math class working with variables like this:
+
+```md
+x = 2
+y = 4
+
+x + y
+```
+
+You were able to create variables like `x` and `y` and then reference those throughout your program and do mathematical operations like addition. It is a similar concept in programming. You can create your own variable names and assign values to them. These values will be different data types.
+
+Data types help the program understand the kind of data it's working with, whether it's a number, text, or something else.
 
 JavaScript has several basic data types that you'll use in your programs. We'll explore each data type in greater detail in future lessons. For now, here is a brief introduction of the different data types in JavaScript.
 
 The first data type we will look at is the `Number` type.
 
-A `Number` represents both integers and floating-point values. Examples of integers include `7`, `19`, and `90`. Examples of floating point numbers include `3.14` and `5.2`. A floating point number is a number with a decimal point.
+A `Number` represents both integers and floating-point values. Examples of integers include `7`, `19`, and `90`. 
+
+**NOTE**: `console.log()` is a function that outputs information to the console, which is a part of your web browser used for debugging code. You will learn more about `console.log()` in future lessons. Also, the `//` symbols are used to add comments in your code. Comments are notes for yourself or other programmers that are ignored when the code runs.
+
+Enable the interactive editor and try changing some of the integers to see it update in the console.
+
+:::interactive_editor
+
+```js
+// Examples of integers
+console.log(3);
+console.log(5);
+console.log(-67);
+```
+
+:::
+
+A floating point number is a number with a decimal point. Examples of floating point numbers include `3.14` and `5.2`. 
+
+:::interactive_editor
+
+```js
+// Examples of floating point numbers
+console.log(3.14);
+console.log(7.2);
+console.log(-14.5);
+```
+
+:::
 
 The next data type is a `String`.
 
-A `String` is a sequence of characters, or text, enclosed in quotes. Here are two examples:
+A `String` is a sequence of characters, or text, enclosed in quotes. Here is an example string using double quotes: 
 
-```md
-"Hello, world"
+:::interactive_editor
+
+```js
+console.log("I love to code!");
 ```
 
-```md
-'JavaScript'
+:::
+
+Here is an example using single quotes:
+
+:::interactive_editor
+
+```js
+console.log('I love to code!');
 ```
 
+:::
+
+Oftentimes you will use strings to represent names, labels, alert messages, etc.
+
 Another data type used in JavaScript is the `Boolean` type.
 
-A `Boolean` represents one of two possible values: `true` or `false`. You can use a boolean to check if a page is loading, or if a user is logged in or not.
+A `Boolean` represents one of two values: `true` or `false`. For example, a program might check whether a user is logged in (`true`) or not (`false`) and change the page based on that. If the user is logged in, you probably want to show them the dashboard page. Otherwise, you will want to show them the login page.
 
 The next two data types used in JavaScript are `undefined` and `null`.
 
-`undefined` means a variable has been declared but hasn't been given a value yet. `null` means the variable has been intentionally set to "nothing" and does not hold any value. We will explore more on how this works in future lessons.
+`undefined` means a variable has been declared but hasn't been given a value yet. You will learn more about this in the next lesson.
 
-The next data type we will look at is the `Object` type.
+`null` means the variable has been intentionally set to "nothing" and does not hold any value. We will explore more on how this works in future lessons.
 
-An `Object` is a more complex data type that can hold collections of key-value pairs. Let's break this down. The key (also called a property name), is like a label for the data, whereas the value, is the actual data you want to store. Here is an example:
+The last three data types are more complex in nature. These are objects, symbols and `BigInt`. 
+
+An `Object` is a collection of key-value pairs. 
 
 ```js
-let book = {
-  title: "The Great Gatsby",
-  author: "F. Scott Fitzgerald",
-  year: 1925
+{
+  name: "Alice",
+  age: 30
 };
 ```
 
-In this object, `title`, `author`, and `year` are the keys (or property names). `The Great Gatsby`, `F. Scott Fitzgerald`, and `1925` are the corresponding values.
-
-Each key-value pair in an object is called a property. So we can say that this book object has three properties. This is just a basic introduction to objects and their properties. In future lessons, we'll go deeper into more advanced concepts.
-
-The last two data types are the `Symbol` and `BigInt` data types.
+Objects are great for grouping related information together. You will learn more about how to work with objects in a future module.
 
 A `Symbol` is a special type of value in JavaScript that is always unique and cannot be changed. It's often used to create unique labels or identifiers for properties: