Merge branch 'main' into Update-Description

README.md

@@ -1,4 +1,4 @@
-# Your Teach LA Project Here!
+# Pen Pals
 
 ![Production Build](https://github.com/uclaacm/teach-la-react-starter-barebones/workflows/Production%20Build/badge.svg)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -28,7 +28,7 @@ Thanks for using our template! We hope this makes your life developing significa
 
 Things you should do **after using this as a template**:
 
-- [ ] find-and-replace `YOUR_PROJECT_URL_HERE` with your GitHub repo's project name in this README (it's in a few places, so use an editor!)
+- [ ] find-and-replace `pen-pals` with your GitHub repo's project name in this README (it's in a few places, so use an editor!)
 - [x] set up [Netlify](https://www.netlify.com/) for this app - talk to jiin (`@doubleiis02`) if you need access to the Teach LA Netlify team.
 - [x] turn on "Automatically delete head branches" in GitHub `Settings > Options`
 - [x] in `Settings > Branches`, create a branch protection rule for `main` that requires PR reviews. Also require status checks, like passing `build`.
@@ -46,8 +46,8 @@ We'll use a really common Node.js project workflow + Yarn!
 First, let's clone our repository, and install all of our yarn dependencies:
 
 ```
-git clone https://github.com/uclaacm/YOUR_PROJECT_URL_HERE.git
-cd YOUR_PROJECT_URL_HERE
+git clone https://github.com/uclaacm/pen-pals.git
+cd pen-pals
 ```
 
 The instructions to install Node.js will be different based on which platform you're running. It's heavily advised to install your Node.js using NVM (Node Version Manager) because it's easy to manage a standardized version and update it as needed.
@@ -92,7 +92,7 @@ yarn run build
 
 ## Contribution Workflow
 
-Thanks for your interest in contributing to YOUR_PROJECT_URL_HERE! ❤️
+Thanks for your interest in contributing to pen-pals! ❤️
 
 Here's a quick guide on how to get started.
 
@@ -101,7 +101,7 @@ Here's a quick guide on how to get started.
 3. Beep boop away!
 4. **Before you push**, make sure your app runs with `yarn start`. If there are any errors, our CI/CD service will **reject your build**.
 5. Once you're ready, stage and commit your changes!
-6. Make a [pull request](https://github.com/uclaacm/YOUR_PROJECT_URL_HERE/pulls) with your changes, and let someone on your project team know.
+6. Make a [pull request](https://github.com/uclaacm/pen-pals/pulls) with your changes, and let someone on your project team know.
    a. Netlify has a neat feature called "Deploy Previews" that give you a link to preview your changes; [see the blog post](https://www.netlify.com/blog/2016/07/20/introducing-deploy-previews-in-netlify/) for more info!
 7. If your code passes code review, then we can **squash and merge** it into `main`. Congratulations! If you'd like, it's now safe to delete your branch/fork.
 

src/components/App.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import CongratsPage from './shared/Congratulations';
 import ExerciseSide from './shared/ExerciseSide';
 import LessonSide from './shared/LessonSide/LessonSide';
 import '../assets/WestwoodSans-Regular.ttf';
@@ -24,25 +23,28 @@ function App(): JSX.Element {
     }
   };
 
-  if (exerciseCount == 5) {
-    return (
-      <main>
-        <CongratsPage />
-      </main>
-    );
-  }
+  // change it to be max exercise
   return (
     <div>
       <main>
-        <LessonSide
-          levelNum={exerciseCount + 1}
-          updateLevel={updateLevel}
-          maxLevel={completeExercises}
-        />
-        <ExerciseSide
-          ExercisesNum={exerciseCount}
-          incrementExercise={() => setExerciseCount(exerciseCount + 1)}
-        />
+        {exerciseCount < 7 ? (
+          <>
+            <LessonSide
+              levelNum={exerciseCount + 1}
+              updateLevel={updateLevel}
+              maxLevel={completeExercises}
+            />
+            <ExerciseSide
+              ExercisesNum={exerciseCount}
+              incrementExercise={() => setExerciseCount(exerciseCount + 1)}
+            />
+          </>
+        ) : (
+          <ExerciseSide
+            ExercisesNum={exerciseCount}
+            incrementExercise={() => setExerciseCount(exerciseCount + 1)}
+          />
+        )}
       </main>
     </div>
   );

src/components/shared/ExerciseSide.tsx

@@ -4,6 +4,7 @@ import '../../styles/ExerciseSide.scss';
 
 //import AxisExercise from './Exercises/AxisExercise';
 //import AxisInput from './Exercises/AxisInputs';
+import CongratsPage from './Congratulations';
 import AxisParent from './Exercises/AxisParent';
 import GraphExercise from './Exercises/GraphExercise';
 import GraphInput from './Exercises/GraphInput';
@@ -26,8 +27,8 @@ ExerciseSideProps): JSX.Element {
   const [displayExercise, setDisplayExercise] = useState(0);
 
   type availableExercises =
-    | 'axis'
     | 'congrats'
+    | 'axis'
     | 'graph0'
     | 'unitcircle'
     | 'graph1';
@@ -220,17 +221,36 @@ ExerciseSideProps): JSX.Element {
             unitCircleMarkers={[
               ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
               ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
-              ['-90\xB0', '-45\xB0', '0\xB0', '45\xB0', '90\xB0'],
+              [
+                '-90\xB0',
+                '-60\xB0',
+                '-30\xB0',
+                '0\xB0',
+                '30\xB0',
+                '60\xB0',
+                '90\xB0',
+              ],
+              [
+                '-90\xB0',
+                '-60\xB0',
+                '-30\xB0',
+                '0\xB0',
+                '30\xB0',
+                '60\xB0',
+                '90\xB0',
+              ],
             ]}
             unitCircleLabels={[
               ['A', 'C', '', 'B', ''],
-              ['B', 'A', '', 'C', ''],
-              ['', '', 'C', 'A', 'B'],
+              ['', 'A', 'B', '', 'C'],
+              ['', '', 'A', 'B', '', 'C', ''],
+              ['', 'A', '', '', 'B', '', 'C'],
             ]}
             directions={[
               ['left', 'right', '', 'right', ''],
-              ['left', 'left', '', 'left', ''],
-              ['', '', 'right', 'right', 'left'],
+              ['', 'left', 'left', '', 'left'],
+              ['', '', 'right', 'left', '', 'right', ''],
+              ['', 'right', '', '', 'right', '', 'left'],
             ]}
             toNextExercise={() => {
               setDisplayExercise(displayExercise + 1);
@@ -241,6 +261,8 @@ ExerciseSideProps): JSX.Element {
         </div>
       </div>
     );
+  } else if (exercises[displayExercise] === 'congrats') {
+    return (curExercise = <CongratsPage></CongratsPage>);
   }
 
   return (

src/components/shared/Exercises/AxisParent.tsx

@@ -54,7 +54,7 @@ function AxisParent({
         }
         markers={axisMarkers[Math.min(exerciseNum, axisMarkers.length - 1)]}
         labels={axisLabels[Math.min(exerciseNum, axisLabels.length - 1)]}
-        turtlePosition={1}
+        turtlePosition={0}
       />
       <AxisInput
         questionLabels={questionLabels}

src/components/shared/Exercises/GraphExercise.tsx

@@ -128,7 +128,7 @@ GraphProps): JSX.Element {
         const dyPercent = yPos(endY) - yPos(startY);
         // use this factor because dyPercent is relative to height,
         // but we express a line's length as a percentage of width.
-        const yxRatio = 22.5 / 50;
+        const yxRatio = 14.5 / 31;
         const lineLengthPercent =
           Math.sqrt(
             (dxPercent / 100) ** 2 + ((dyPercent * yxRatio) / 100) ** 2

src/components/shared/Exercises/GraphInput.tsx

@@ -1,5 +1,5 @@
 //import { useState } from 'react';
-//import { useState } from 'react';
+import { useState } from 'react';
 import '../../../styles/Exercises/GraphInput.scss';
 
 interface GraphQuestionData {
@@ -105,14 +105,24 @@ function GraphInput({
       //console.log(i);
       if (!i) {
         //console.log(`${i} is incorrect`);
-        //setWrong(true);
+        setWrong(true);
         return;
       }
     }
     //console.log('all right!');
     nextExercise();
   };
 
+  function wrongMessage(isWrong: boolean) {
+    if (isWrong) {
+      return "That's not quite right. Try again!";
+    } else {
+      return;
+    }
+  }
+
+  const [wrong, setWrong] = useState(false);
+
   const makeLine = (
     data: GraphLineData,
     setCorrect: (id: number, value: boolean) => void
@@ -128,6 +138,9 @@ function GraphInput({
       <div id="graphinput-question-box">
         {questionArray.map((x) => makeLine(x, setValueCorrect))}
       </div>
+      <div className="axinput-wrong-box">
+        <h3 id="axinput-check-wrong">&nbsp;{wrongMessage(wrong)}&nbsp;</h3>
+      </div>
       <div id="graphinput-check-button-container">
         <button id="graphinput-check-button" onClick={checkCorrect}>
           Check

src/components/shared/Exercises/UnitCircleExercise.tsx

@@ -66,7 +66,7 @@ function UnitCircleExercise({
                     (curAngle <= Math.PI / 2
                       ? curAngle == Math.PI / 2
                         ? 19 //middle
-                        : 20 //left
+                        : 17 //left
                       : 15) //right
                   }%`,
                   bottom: `${
@@ -82,7 +82,6 @@ function UnitCircleExercise({
                 {markers[idx]}
               </div>
             ) : null}
-
             <img
               src={Cursor}
               className="circle-cursor"
@@ -92,16 +91,16 @@ function UnitCircleExercise({
                   (cursorAngle <= Math.PI / 2
                     ? cursorAngle == Math.PI / 2
                       ? 5
-                      : 7
-                    : 2)
+                      : 6
+                    : 6)
                 }%`,
                 bottom: `${
                   Math.sin(cursorAngle) * 80 +
                   (cursorAngle <= Math.PI / 2
                     ? cursorAngle == Math.PI / 2
                       ? 25
                       : 28
-                    : 28)
+                    : 27)
                 }%`,
                 transform: `rotate(${cursorAngle}rad) ${
                   labels.length % 2 === 1 &&

src/styles/Congratulations.scss

@@ -10,8 +10,10 @@
 
 #congrats-page-container {
   background-color: colors.$primary-green;
-  flex-grow: 1;
+  display: flex;
   height: 100%;
+  position: relative;
+  width: 100%;
 }
 
 #turtle-logo {
@@ -34,27 +36,28 @@
 #turtle-image {
   display: inline-block;
   vertical-align: middle;
-  //float:left;
 }
 
 .speech-bubble {
+  height: auto;
   padding-left: 12.816vw;
-  padding-right: 16.463vw;
+  padding-right: 18.463vw;
   padding-top: 6vh;
   position: absolute;
+  width: auto;
 }
 
 #speech-bubble-image {
   height: auto;
-  width: 94%;
+  width: 75%;
 }
 
 #congratsTxt {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
-  font-size: 5vw;
+  font-size: 4vw;
   font-weight: bold;
-  left: 54%;
+  left: 52%;
   position: absolute;
   top: 26%;
   transform: translate(-64%, -26%);
@@ -63,7 +66,7 @@
 #blurb {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
-  font-size: 3.8vw;
+  font-size: 2.8vw;
   font-weight: bold;
   left: 50%;
   position: absolute;
@@ -80,6 +83,7 @@
 }
 
 #turtle-picture {
+  padding-left: 6vw;
   width: 14vw;
 }
 
@@ -97,8 +101,10 @@
   font-family: 'PT Sans', sans-serif;
   font-size: 4vh;
   font-weight: bold;
+  height: auto;
   position: absolute;
   right: 10vw;
+  width: auto;
 }
 
 #rectangle1 {

src/styles/Exercises/GraphInput.scss

@@ -24,7 +24,7 @@
   margin-bottom: 2vh;
   margin-left: 0;
   margin-right: auto;
-  margin-top: 150px;
+  margin-top: 50px;
   padding-left: 8%;
 }
 
@@ -78,7 +78,9 @@
 
 #graphinput-check-button-container {
   align-self: center;
-  padding-top: 4vh;
+  padding-bottom: 10vh;
+  //padding-top: 4vh;
+  position: relative;
 }
 
 #graphinput-check-button {
@@ -89,3 +91,12 @@
   color: colors.$text-white;
   padding: 1.25vw 2.5vw;
 }
+
+#graphinput-check-wrong {
+  @include font-styles();
+  color: red;
+}
+
+.graphinput-wrong-box {
+  align-self: center;
+}

src/styles/Graph.scss

@@ -3,13 +3,13 @@
   border: solid 1px rgb(209, 209, 209);
   border-radius: 12px;
   height: 0;
-  margin-left: 5%;
+  margin-left: 15%;
   // If editing the sizing of graph-container (padding-bottom or width),
   // modify the value of `yxRatio` in Graph.tsx
-  padding-bottom: 22.5%;
+  padding-bottom: 14.5%;
   position: absolute;
   top: 5%;
-  width: 50%; // see above warning
+  width: 31%; // see above warning
 }
 
 .grid-line {