Remove all text hardcoding on the lessonside and move it to pull text from a file containing each levelNum and a list of paragraphs. Paragraphs should contain the text of the paragraph and the css class used for that paragraph.

Use Case

We need the lesson side to have different instructions depending on the current exercise.

Proposed Solution

TBD, needs #48 and #54 to be implemented first

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Make the placement of the graph exercise match the Figma

This is a 🐾 Minor Update

Use Case

Proposed Solution

• 👋 I may be able to implement this refactor request

This is a 🧹 Refactor Request

Use Case

Right now the Lesson Side is all just hardcoded. In order to allow it to switch when we change components, we'll need to make it read from a parameter instead of a single variable

Proposed Solution

• Look at components/shared/LessonSide/index.tsx
• Create a new component LessonText taking a property text_string
• text_array should be an array containing objects of the following form: `{"id": "lesson-side-body", "text": "some random text"}
• The component should map text_array to create a sequence div tags with the id equal to "id" and the body text equal to text, allowing the contents of text_array to be rendered on the page with the correct formatting
• This should be possible just by using the JS map function along with a function returning each individual div tag
• Replace the existing divs with a single LessonText component

This is a 🚀 Feature Request

Make it so that when the user hovers over a circle in the lesson circle, it appears as filled

Proposed Solution

• Add a CSS hover selector for the level-button css class in LessonSide.scss
• Make it so that this fills in the button, similar to the existing filled in level selector

This is a 🚀 Feature Request

Make the UnitCircleInput component take prop for the question text and answers, and add input validation. It can still be hardcoded to have three questions.

Use Case

We want to add more versions of the UnitCircleExercise and make them actually work!

Proposed Solution

• Add a string[] prop called questions and a string[] prop called answers
• Use the questions array to get the question text, instead of having it hardcoded
• Use React state variable to record the input in each text box
• Change the OnClick function to verify the input in each textbox before calling nextExercise

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Create a dummy input component for Unit circle input similar to the AxisInput component. It should look like the version on the Figma on level 4, with the label in italics, the left/right after an equals sign and in regular text. For now this can just be a dummy component, it doesn't need to validate any input or take any input, just have it look like the Figma

This is a 🚀 Feature Request

In this ticket, you'll be making the exercise component that renders the input boxes where the user types in answers for the axis exercise.

This component will likely need to carry a "counter" indicating how many exercises have been completed, as a state variable. Each time a question gets answered correctly, the counter can increase and the component can render the next exercise. Feel free to play around with fading animations and stuff to make it interesting :-)

Until the Exercise Side component is finished, just render this anywhere in the exercise side to test it.

Thanks!

We have the GraphExercise component mostly finished, but the test implementation doesn't match the figma. Please add another call to GraphExercise matching "Turtle LL Level 2" on the Figma](https://www.figma.com/file/2ScrsUFHT5EZPxkV5xw6zL/Pen-Pals-Turtle-LL?type=design&node-id=65-355&mode=design&t=zkVIwERaBuC9t8Dj-0)

Proposed Solution

• Look at the section of ExerciseSide.tsx where GraphExercise is used, and make a copy of the whole if statement
• Within this copy, change the line that says if (exercises[completeExercises] == 'graph') to use graph1, and within the original version change it to be graph0
• Update the availableExercises list to have graph1, then graph2
• You may also need to increment other places whree the number of levels is hardcoded as 6 to 7 instead, and you may have issues with LessonSide, if that happens let me know!

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Make it match the figma

Use Case

Proposed Solution

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Use Case

Proposed Solution

• 👋 I may be able to implement this refactor request

This is a 🧹 Refactor Request

Use Case

Proposed Solution

• Change the invocation of UnitCircleExercise match how it looks in the figma
• Have it check the inputs and only allow you to continue if it's correct, otherwise show a similar message to AxisInput, for now these values can be hardcoded because we only have one invocation of UnitCircleExercise

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

In this ticket, you'll be making the exercise component that renders a single axis for the user to fill in blanks.

This component will likely need, as props, information such as the axis window, the orientation, locations of numerical markings, location of labels, and the location of the little animated turtle. Feel free to include any other necessary (or even convenient) props at your own discretion.

Until the Exercise Side component is finished, just render this anywhere in the exercise side to test it. Don't include the box-shadowed container as part of this component; that container is part of the Exercise Side ticket.

Thanks!

Currently, the footer is bright white with unstyled text and a heart emoji. Let's make it look a little nicer :)

I've added a footer design to Figma. Some notes:

• The heart is an icon that you should download from Figma (as an SVG) and then add to the footer in the correct spot. You'll have to put the text before and after it properly instead of just putting extra spaces between the words and putting the heart on top (which is what I did in the design, for the sake of visuals).
• Some of the lines in the TeachLA icon vector might be a bit finicky due to sizing. There's already a TeachLA icon in the assets folder that you should use, but if it doesn't work feel free to try downloading the one in Figma to replace it. If neither works, let me know and we can figure it out together.

This is a 🚀 Feature Request

The Congratulations page is the very last screen in the lab, which people will see upon completing all of the levels associated with a particular exercise. Your task is to implement a static version of this page.

Unlike the other screens, this one must be independent of the standard lesson/exercise layout. You don't have to worry about making the root React component dynamic to handle this switch; that will be done in a later ticket. You can also download the turtle, speech bubble, cat, and dog images from the Figma. Note that the boxes and stuff will still have to be rendered using HTML/CSS; it's just the elaborate images and drawings that can be downloaded and added in (preferably as a vector).

Thanks!

Use Case

Proposed Solution

Add a prop to the AxisInput component for explanation text, and display it matching the Figma. The Axis exercise is the one with the number line in the first couple of figma slides. Alter the AxisParent component to pass in this text (it can be hardcoded)

• 👋 I may be able to implement this update request

This is a 🐾 Minor Update

Use Case

We need to take input for the graph input module!

Proposed Solution

For now, create a component that displays the input from the first GraphInput slide on the Figma ("Turtle LL Level 2"). This component should have the same input boxes and be formatted similarly to AxisInput. It also needs to have a Check button, identical to AxisInput.

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Overview:

This issue is for tracking overall progress on the website and to view at a glance which tasks are assigned to whom.

Primary points of contact for any questions:

• @8BitRobot
• @doubleiis02
• @reginawang3495

Others on the team are:

• @abishan1
• @ArushRam
• @jpaten

Design & Implementation:

Figma designs can be found here
Future tickets can be found here

This is a 👀 Tracking Issue

Update node and all packages to 18.18.2, fix package versions

• 👋 I may be able to implement this refactor request

This is a 🧹 Refactor Request

Use Case

Proposed Solution

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Overview:

Onboard new members for Fall 2023!

Checklist:

• Clone Repo - git clone [email protected]:uclaacm/pen-pals.git
• Install Node - should be able to run node --version
• Run npm i
• Run npm start
• Get added to the Git repo so you can contribute!

This is a 👀 Tracking Issue

Use Case

Allow the user to view their progress through the exercises

Proposed Solution

The bottom left corner of the screen contains a lesson selector, which takes props for the number of levels, the total levels, and the max level reached. This should be updated to match the current level, potentially by passing the value for the currently active exercise to the LessonSide component. You may find it helpful to alter the level selection code to be a bit neater, right now it's in a bit of a rushed state

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Use Case

Need to figure out how to represent the different options for the graph input module

This is a 🐾 Minor Update

The Lesson Side of the learning lab is the green-background section containing the header and logo, some introductory text, a turtle with motivational messages, and a level picker at the bottom. Your task is to, using the Figma design here, add in some placeholders for each of these.

You will need to:

1. Add in the header and logo. This is as simple as downloading the logo image (as a vector) from Figma and inserting it at the top of the section along with the header text.
2. Add the body text. You can either copy paste some text from the Figma or generate lorem-ipsum text to fill this in.
3. Add the turtle and its speech bubble as an image. The text part will be dynamic and you'll need to place it on the speech bubble using code; however, the turtle and bubble themselves can be an image. Again, you can either copy text from the design or use lorem-ipsum; eventually, we'll make it all context-dependent so the placeholders won't matter.
4. Ensure the spacing is accurate to the design in percentages. Don't use pixel values, as those aren't responsive to screen size; instead, use percentages.

Thanks!

Make the "encouraging turtle" easily changeable

Use Case

We want to change what the beloved encouraging turtle is saying between lessons, to make the experience more interactive for users.

Proposed Solution

Let's refactor the turtle to be it's own component, with a parameter to allow changing the particular turtle based on some ID. Document the ids in a comment somewhere(ideally using a custom TypeScript type, lmk if you need help with this) and download at least two additional turtles from Figma to demonstrate(you don't need to do them all for now!)

This is a 🚀 Feature Request

Change the lesson side text to match the activity that is on the lesson side, so it looks like how it is on the figma.

Use Case

The LessionSide text does not match up with the ExerciseSide exercise, creating confusion on the instructions of the activity 😵‍💫.

Proposed Solution

• change the ordering of the descriptions in LessonSideContent.JSON so that it matches with the order the exercises are in.
• figma for the design.

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Use Case

We need to display something to the user when the user successfully completes an exercise. This ticket is to design and implement such a component

Details

Your component should:

• Congratulate the player for completing an exercise, the name of which should be passed as a parameter
• Include some encouraging imagery(you can use the encouraging turtle image for now, if you want something more let me know and I can reach out to design)
• Have a dummy button the user can press to continue

This is a 🚀 Feature Request

Overview

Looking at the axis input module, make a similar module that allows for "fill in the blanks" code questions, where a text box can be surrounded by arbitrary text. See the graph module pages on Figma for an image. For now, try and get a set of arbitrary hardcoded questions(take them from the Figma and just code the text with the input boxes in between along with the button, don't worry about validation yet.

This is a 🚀 Feature Request

Use Case

Proposed Solution

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Add instructions for how to complete the Unit Circle Exercise in the UnitCircleInput component. The instructions should say "Type the correct numbers into the blanks below!" and should match the Figma

This is a 🐾 Minor Update

In this ticket, you'll make the layout for the graph component, which fits into the exercise side.

The component will need to display two axes (x and y), as well as lighter markings for the other coordinate points. In addition, it should have a cursor (whose position can be controlled by a prop) and a list of points that it would need to "navigate" to.

For now, as props, this component will need the window, a list of points (and, for some of them, alphabetical labels), and the location of the cursor. Feel free to include any other necessary (or even convenient) props at your own discretion.

As an additional note, make sure that the alphabetical labels' position relative to the point they indicate can be controlled by the props. In other words, include an additional field for whether the label should be on the top left, top right, bottom left, or bottom right of the point; this helps to make the exercises easier to read.

Just like with the axis ticket, until the Exercise Side component is finished, just render this anywhere in the exercise side to test it. Don't include the box-shadowed container as part of this component; that container is part of the Exercise Side ticket.

In a future ticket, we'll add in other features like previously-filled paths and cursor progress; you can ignore those for now. Refer to Turtle LL Level 2 for an idea of points and paths with which you can demonstrate the functionality.

Thanks!

Whenever a user clicks on a level selector button, it should take them to the level with that number. Level selector buttons should also appear as clickable so users know to click on them.

Proposed Solution

• Add a prop the LessonSide component to pass a function to update the current exerciseCount state kept in App.tsx, then pass this function further into LevelSelector.tsx
• Update LessonSelector.tsx to make clicking on the level button divs call that function with the correct value to go to their level

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Use Case

The Axis Exercise is fully inplemented, except that there's only two versions of it. We need to add more!

Proposed Solution

• Refer to the Figma to find each possible axis exercise

• Add props to AxisParent and AxisParentProps to allow a list of orientations and turtle locations to be passed

• Add each of these props where AxisParent is called in ExerciseSide.tsx

• You shouldn't need to mess with the confusing math in AxisInput.tsx

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Is there an existing issue for this?

• I have searched existing issues

What happened?

typescript

What was the expected behavior?

No response

Steps To Reproduce

No response

Relevant log output

No response

Anything else?

No response

Use Case

Currently it's hard to tell the purpose of the graph exercise input

Proposed Solution

Add a prop to the GraphInput module for explanation text, and display it matching the Figma. The GraphInput module is the one with the picture of a graph with an arrow on it

• 👋 I may be able to implement this update request

This is a 🐾 Minor Update

Right now there's no way to continue from the UnitCircle input, this needs to be fixed by adding a "Check" button similar to the other exercises. For now, this doesn't have to support validation, it just needs to move to the next exercise

Proposed Solution

• Add a nextExercise prop that takes a () => void function to the UnitCircleInput component
• Create a button similar to the other next buttons that calls this function
• Initialize the component inExerciseSide.tsxusing a similar function to the ones used for other component, if possible refactor this so we're not repeating it
• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Description

Right now, we have an axis input component, which displays questions the user can input, and an axis exercise module, which shows a number line associated with the question. We want to allow these modules to be consistent, so the markers on the axis exercise number line correspond to questions on the axis input. You can do this however you want, however the best way may be to create a component wrapping both the input and exercise module. This will likely require adding a function to the axis input module's props to change a state variable in a parent component(which you will likely have to create), then using that to update the values passed to the axis exercise.

First step

Try to just create the component to wrap the axis exercise and axis input and keep them consistent for the first question. Later on, we can get the axis input and axis exercise changed so they update consistently

This is a 🚀 Feature Request

The level picker is the little string of circles with numbers in them at the bottom of the Lesson Side. Your task is to implement that component.

You will need to:

1. Make the circles, along with the appropriate styling.
2. Pick one of the circles and style it according to the "selected level" styles (white background, green text instead of transparent background, white text).
3. Add some lines between circles. Eventually we'll be making this dynamic, but for now you can just add the lines in between the first few circles.

Thanks!

The LevelSelector component creates a list of divs by mapping over a dummy array. Because a key property is not present in the divs, React generates a warning. (I believe it's a performance concern.)

The fix is already implemented for the divs in the AxisSelector. Simply add a key property to the div created in the map lambda and set it to some unique value like i.

• 👋 I may be able to implement this update request

This is a 🐾 Minor Update

Use Case

Proposed Solution

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

The turtle is too small and looks like it's in the wrong position

Proposed Solution

• Change the CSS around the turtle, footer, and lesson selector to make it match the Figma

• 👋 I may be able to implement this update request

This is a 🐾 Minor Update

In order to make the pages dynamic and easy to create, we need a data format for storing them. This data should ideally be stored in JavaScript object format (though not necessarily JSON, as a global object in a JS file exported would work just as well.

This data should store, for each page,

• a title for the lesson side,
• a body for the lesson side,
• a message for the turtle’s speech bubble,
• the level number, and
• the contents of the exercise.

Each exercise should contain

• a type of exercise (axis, circle, graph), and
• some exercise-specific content.

For axes, the exercise-specific content would be

• an orientation (x or y), and
• a list of objects containing:
  • a label, and
  • a correct answer.

For the unit circle, the exercise-specific content would be

• a list of objects containing:
  • a label, and
  • a correct answer.

For the graph, the exercise-specific content would be

• the window of the graph (minX, maxX, minY, maxY),
• the cursor’s starting position as a coordinate pair, and
• a list of objects containing:
  • a label,
  • a prompt (e.g. turtle.forward(__)), and
  • a correct answer.

Note that, wherever possible, the structure of the object at the root should be identical. In other words, don't do

{
    “type”: “graph”,
    “g1”: 1,
    “g2”: 2,
},
{
    “type”: “axis”,
    “a1”: 1,
    “a2”: 2,
}

when you could instead do

{
    “type”: “graph”,
    “content”: {
        “g1”: 1,
        “g2”: 2,
    }
},
{
    “type”: “axis”,
    “content”: {
        “a1”: 1,
        “a2”: 2,
    }
}

In the first example, the root of the object has different attributes depending on the type; in the second, both objects have a type and a content and only the content is different. Doing this ensures that the page data is easier to follow as a developer, and it makes coding more uniform as well.

Thanks!

Make the LessonSide text read from a file instead of being hardcoded

Use Case

Right now the lesson side text is all placeholder, we want to make it read from a file so we can change it when the lesson increments

Proposed Solution

• Create a json file called lessons.json in /src/ with the following format, and extend it by adding the contents and id of each div tag (starting with the title) in /src/components/shared/LessonSide/index.tsx

[
    {
        "lesson": "LESSON_1", 
         "text":[
              {"id":"lesson-side-header", "body": Positioning In Computers"}, 
               ...
          ]
     },
    ...
]

(also make sure the indentation is consistent because it's hard in the Github text box)

• Import this file into the index.tsx module so it can be accessed by the rest of the program (we can figure out exactly how to do this at the standup meeting!)

This is a 🧹 Refactor Request

The Exercise Side is the white-background right-half of the screen with a graph, some exercises, and a check button. Your task is to, using the Figma design here, add in some placeholders for each of these.

You will need to:

1. Add in an empty box for the graph. Make sure to add the appropriate styling to the box (e.g. box shadow and rounding), but the inside of the box can be left blank.
2. Add the body text. You should fill in a placeholder for the prompt (e.g. "Type the answers in the blanks!") and leave sufficient empty space for the code samples and actual exercises. We'll eventually be implementing syntax highlighting for the code samples, so no need to fill anything in here.
3. Add the Check button. As with the other parts, make sure to add the appropriate styling.

Thanks!

Restrict users to only move through levels that they have already completed using the level selector

Proposed Solution

Record the maximum levelNum/exerciseNum reached, and only allow the level selector to be used if it is going to a level less than or equal to that maximum value

Waiting on #78

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Use Case

Proposed Solution

• 👋 I may be able to implement this feature request

This is a 🚀 Feature Request

Take a look at our Figma mockup, and try to make the axis input match it better. In particular:

• Ensure the font sizes and styles are correct
• Make them spaced in a left-aligned block spaced together similarly to how they are on Figma
• Make sure it still scales when the number of labels change on the page

This is a 🐾 Minor Update

Right now, we don't have a way to switch between different exercises and other pages. Once we get this done, we should have the main functionality for ExerciseSide! In order to get this working, I think you'll need the following:

• Give all input modules a void function that takes no parameters as a prop, and make it so that function is ran after successful completion of the exercise
• Create an integer state variable to store how many exercises the user has completed
• Create a string type which can store values of the form "axis", "unit_circle", etc. for all the exercise
  • To create a simple string type you do type blah = "blah 1" | "blah 2". Then, any variable of type blah will be constrained to be blah 1 or blah 2
• Create an array of the type above, storing the order of the exercises we want to execute, containing exercises. For now, this should just be something like `[axis, congrats]' since the only finished component is the axis exercise and the congratulations page
• Change the ExerciseSide component to return the component corresponding to the component the user is currently on, as determined through that state variable and the exercise array.

This is a 🚀 Feature Request

In this ticket, you'll be making the exercise component that renders half a unit circle for the user to fill in blanks.

This component will likely need, as props: the turtle's current angle, a list of which ticks should be labeled with numbers, and a similar list for which ones are exercises. Feel free to rearrange the above or include any other necessary (or even convenient) props at your own discretion.

Until the Exercise Side component is finished, just render this anywhere in the exercise side to test it. This circle doesn't have its own box-shadowed container, so you'll probably have to download the vector of the unit circle outline from Figma and give it the appropriate styling.

Thanks!

Here's a screenshot of what the component should end up looking like:

Is there an existing issue for this?

• I have searched existing issues

What happened?

Refreshing the page loses all progress.

What was the expected behavior?

Refreshing the page returns me to the same section.

Steps To Reproduce

1. Go to a middle section
2. Refresh the page
3. Observe that you're back at the start.

Relevant log output

No response

Anything else?

No response