Merge branch 'main' into 94-add-new-unitcircle-exercise

src/components/shared/LessonSide/LessonSide.tsx

@@ -12,12 +12,17 @@ interface lessonSideProps {
   maxLevel: number;
 }
 
+function getRandomNumber(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
 function LessonSide({
   levelNum,
   updateLevel,
   maxLevel,
 }: lessonSideProps): JSX.Element {
   const lesson_info = LessonSideContent[levelNum] || [];
+  const randomTurtleMessage = getRandomNumber(1, 7);
   // console.log("max:" + maxLevel);
   return (
     <section id="lesson-side-container">
@@ -33,7 +38,7 @@ function LessonSide({
         <LessonText text_array={lesson_info} />
       </div>
       <div>
-        <Turtle turtleID="your-genius" />
+        <Turtle turtleID={randomTurtleMessage} />
 
         {/* passed from parent component */}
         <LevelSelector

src/components/shared/LessonSide/LessonSideContent.JSON

@@ -1,49 +1,50 @@
 {
     "1": [
-        { "id": "lesson-side-header", "text": "Positioning of Computers" },
+        { "id": "lesson-side-header", "text": "Rotations in 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."
+            "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": "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."
+            "text": "Just like the coordinate system, degrees can be either positive or negative."
         }
     ],
     "2": [
-        { "id": "lesson-side-header", "text": "Moving the Cursor: turtle.goto()" },
+        { "id": "lesson-side-header", "text": "Positioning in Computers" },
         {
             "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:"
+            "text": "Computers use the coordinate system to tell the cursor where to move. The coordinate system is a grid made of small chunks called units. The cursor starts out at the center of the grid and counts out some number of units to move. For example, the point (2, 1) would be two units RIGHT and one unit UP from the center."
         },
         {"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!"
+            "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."
         }
     ],
     "3": [
-        { "id": "lesson-side-header", "text": "Moving the Cursor: forward() and backward()" },
+        { "id": "lesson-side-header", "text": "Moving the Cursor: turtle.goto()" },
         {
             "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:"
+            "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.forward(1)"},
-        {"id": "code-text", "text": "turtle.backward(2)"},
+        {"id": "code-text", "text": "turtle.goto(-1, 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."
+            "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!"
         }
     ],
     "4": [
-        { "id": "lesson-side-header", "text": "Rotations in Computers" },
+        { "id": "lesson-side-header", "text": "Moving the Cursor: forward() and backward()" },
         {
             "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."
+            "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": "Just like the coordinate system, degrees can be either positive or negative."
+            "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."
         }
     ],
     "5": [

src/components/shared/LessonSide/Turtle.tsx

@@ -7,36 +7,21 @@ import encouragingTurtleSkills from '../../../assets/LessonSide/EncouragingTurtl
 import encouragingTurtleSuccess from '../../../assets/LessonSide/EncouragingTurtleSuccess.svg';
 
 interface TurtleProps {
-  turtleID: string;
+  turtleID: number;
 }
 
 interface TurtleData {
-  [key: string]: [fig: string, altText: string];
+  [key: number]: [fig: string, altText: string];
 }
 
 const turtleIDs: TurtleData = {
-  'full-points': [
-    encouragingTurtleFullPoints,
-    'Turtle saying Full points for you!',
-  ],
-  'you-can-do-it': [encouragingTurtle, 'Turtle saying You can do it!'],
-  'numerous-skills': [
-    encouragingTurtleSkills,
-    'Turtle saying Your skills are numerous!',
-  ],
-  'your-genius': [
-    encouragingTurtleGenius,
-    "Turtle saying There's no end to your genius!",
-  ],
-  'nice-going': [encouragingTurtleNiceGoing, 'Turtle saying Nice going!'],
-  'drawn-to-work': [
-    encouragingTurtleWork,
-    "Turtle saying I'm drawn to your work!",
-  ],
-  'large-success': [
-    encouragingTurtleSuccess,
-    'Turtle saying A large degree of success!',
-  ],
+  1: [encouragingTurtleFullPoints, 'Turtle saying Full points for you!'],
+  2: [encouragingTurtle, 'Turtle saying You can do it!'],
+  3: [encouragingTurtleSkills, 'Turtle saying Your skills are numerous!'],
+  4: [encouragingTurtleGenius, "Turtle saying There's no end to your genius!"],
+  5: [encouragingTurtleNiceGoing, 'Turtle saying Nice going!'],
+  6: [encouragingTurtleWork, "Turtle saying I'm drawn to your work!"],
+  7: [encouragingTurtleSuccess, 'Turtle saying A large degree of success!'],
 };
 
 function Turtle({ turtleID }: TurtleProps): JSX.Element {

src/styles/Exercises/GraphInput.scss

@@ -24,7 +24,7 @@
   margin-bottom: 2vh;
   margin-left: 0;
   margin-right: auto;
-  margin-top: 100px;
+  margin-top: 150px;
   padding-left: 8%;
 }