73 feature make lessonside pull text from json file and update based …

…on the current exercise (#81)

* create JSON file for lesson side content

* Create simple level text changes for each level

* fix lint errors

src/components/shared/LessonSide/LessonSide.tsx

@@ -1,27 +1,17 @@
 import '../../../styles/LessonSide.scss';
 import penPalsLogo from '../../../assets/turtleLogo.svg';
 import Footer from './Footer';
+import * as LessonSideContent from './LessonSideContent.JSON';
 import LessonText from './LessonText';
 import LevelSelector from './LevelSelector';
 import Turtle from './Turtle';
 
-const exArray: { id: string; text: string }[] = [
-  { id: 'lesson-side-header', text: 'Positioning of Computers' },
-  {
-    id: 'lesson-side-body',
-    text: 'In order to tell computers where to move the cursor, we have to use the coordinate system. The coordinate system is a grid with lots of small chunks, called units. To figure out where to move, the cursor uses its starting point at the center of the grid and counts out some number of units. For example, the point (2, 1) would be two units RIGHT and one unit UP from the center.',
-  },
-  {
-    id: 'lesson-side-body',
-    text: 'When looking at these numbers, remember that the number to move sideways comes first. A positive number means you move right, and a negative number means you move left. And when moving up and down with the second number, a positive number means you move up and a negative means down.',
-  },
-];
-
 interface lessonSideProps {
   levelNum: number;
 }
 
 function LessonSide({ levelNum }: lessonSideProps): JSX.Element {
+  const lesson_info = LessonSideContent[levelNum] || [];
   return (
     <section id="lesson-side-container">
       <div>
@@ -33,7 +23,7 @@ function LessonSide({ levelNum }: lessonSideProps): JSX.Element {
           />
           <div id="turtle-logo-text">Pen Pals</div>
         </div>
-        <LessonText text_array={exArray} />
+        <LessonText text_array={lesson_info} />
       </div>
       <div>
         <Turtle turtleID="your-genius" />

src/components/shared/LessonSide/LessonSideContent.JSON

@@ -0,0 +1,63 @@
+{
+    "1": [
+        { "id": "lesson-side-header", "text": "Positioning of Computers" },
+        {
+            "id": "lesson-side-body",
+            "text": "In order to tell computers where to move the cursor, we have to use the coordinate system. The coordinate system is a grid with lots of small chunks, called units. To figure out where to move, the cursor uses its starting point at the center of the grid and counts out some number of units. For example, the point (2, 1) would be two units RIGHT and one unit UP from the center."
+        },
+        {
+            "id": "lesson-side-body",
+            "text": "When looking at these numbers, remember that the number to move sideways comes first. A positive number means you move right, and a negative number means you move left. And when moving up and down with the second number, a positive number means you move up and a negative means down."
+        }
+    ],
+    "2": [
+        { "id": "lesson-side-header", "text": "Moving the Cursor: turtle.goto()" },
+        {
+            "id": "lesson-side-body",
+            "text": "There are many commands that allow us to move the cursor with Turtle. The simplest such command is goto(), which accepts arguments in the form of the pairs of numbers we saw before. In order to use it, we simply call it like this:"
+        },
+        {"id": "code-text", "text": "turtle.goto(-1,2)"},
+        {
+            "id": "lesson-side-body",
+            "text": "The above line tells the Turtle cursor to move 1 unit to the left and 2 units up from the center. Now try it yourself!"
+        }
+    ],
+    "3": [
+        { "id": "lesson-side-header", "text": "Moving the Cursor: forward() and backward()" },
+        {
+            "id": "lesson-side-body",
+            "text": "If we don't know exactly what position to move to, we can also tell the cursor to move some number of units either forward or backward. In order to use the forward() and backward() functions, you call them like this:"
+        },
+        {"id": "code-text", "text": "turtle.forward(1)"},
+        {"id": "code-text", "text": "turtle.backward(2)"},
+        {
+            "id": "lesson-side-body",
+            "text": "The above code tells the cursor to move 1 unit forward, then 2 units backward. Since the cursor points to the right at the beginning, the forward() function makes it move right and the backward() function goes left."
+        }
+    ],
+    "4": [
+        { "id": "lesson-side-header", "text": "Rotations in Computers" },
+        {
+            "id": "lesson-side-body",
+            "text": "Just as computers have the coordinate system to figure out where to move, they also use a system called the unit circle to determine which way to point the cursor. The unit circle is made up of 360 segments called degrees. As such, turning a cursor 90 degrees is equivalent to turning it one-fourth of the circle."
+        },
+        {
+            "id": "lesson-side-body",
+            "text": "Just like the coordinate system, degrees can be either positive or negative."
+        }
+    ],
+    "5": [
+        { "id": "lesson-side-header", "text": "Turning the Cursor: left() and right()" },
+        {
+            "id": "lesson-side-body",
+            "text": "Sometimes, you may want to move the cursor in a different direction than the one it's currently pointing in. You could use goto(), but that can be messy and hard to understand. Another solution is to use the left() and right() commands to turn the cursor to the direction you want it to go, like this:"
+        },
+        {"id": "code-text", "text": "turtle.left(90"},
+        {"id": "code-text", "text": "turtle.right(180)"},
+        {
+            "id": "lesson-side-body",
+            "text": "These functions use the 360-degree circle to figure out how much to turn. For example, if your cursor is pointing right and you turn left 90 degrees, you'll then be pointing up."
+        }
+    ]
+
+}

src/styles/LessonSide.scss

@@ -8,6 +8,16 @@
   font-weight: bold;
 }
 
+#code-text {
+  color: colors.$text-white;
+  font-family: Cascadia Code, sans-serif;
+  font-size: vars.$body-font-size;
+  padding-left: vars.$lesson-side-left-padding;
+  padding-right: vars.$lesson-side-left-padding;
+  padding-top: 2.5vh;
+  text-align: center;
+}
+
 #lesson-side-container {
   background-color: colors.$primary-green;
   display: flex;