fix lint errors

src/components/shared/LessonSide/LessonSide.tsx

@@ -1,22 +1,10 @@
 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';
-import * as LessonSideContent from './LessonSideContent.JSON'
-
-// 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;

src/components/shared/LessonSide/LessonSideContent.JSON

@@ -16,6 +16,7 @@
             "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!"
@@ -27,6 +28,8 @@
             "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."
@@ -49,6 +52,8 @@
             "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;