uclaacm/recursion-lab

Recursion Excursion is a TeachLA web app for CS 31/32 wanting practice with recursion problems.

Recursion Excursion

What's this? This is a template repository that sets up a few minor systems for a React micro-app, which is something that we've done frequently at Teach LA. Here's what it does:

• has GitHub Actions automatically set up for testing and linting builds
• has a default Dependabot config for yarn (with monthly audits)
• has Netlify redirects set up for multi-route SPAs
• has Webpack that helps bundle JS/TS files for browser usage
• Husky for Git Hooks which enforces linting rules for files on commit
• ESLint for our .TS and .TSX files
• StyleLint with SASS guidelines for CSS, SASS, SCSS stylesheets.
• includes the Contributor Covenant in CODE_OF_CONDUCT.md
• has a little bit of documentation for new people!
• Some extra stuff like changing the app logo to TeachLA's logo and setting up the src directory for further development!

Overview

Recursion Excursion is a step-by-step, interactive format for teaching the concept of recursion. This web app is suitable for CS31 and CS32 students who want practice with recursion.

Development Setup

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/recursion-lab.git
cd recursion-lab

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.

macOS or Linux

Instructions for installing NVM on macOS and Linux (including WSL) are here.

At this point you can run nvm install. Assuming you've already cded into the correct directory as mentioned earlier, this will download the LTS (Long-Term Support) version of Node.js for you. Then, run nvm use to make sure you've switched to the right version; if it tells you Now using Node v16.13.2 or something similar, you're good to go!

Windows

If you're on Windows, you can use NVM for Windows, a separate version manager whose installation instructions can be found here. Once you've done that, you can run nvm install 16.13.2 to install the LTS version of Node.js, and nvm use 16.13.2 to switch to it.

If you don't have yarn installed...

npm install --global yarn

Then install our dependencies!

yarn install
yarn prepare

(If the above commands don't work even after installing yarn via npm, check this npm installation guide, click on alternatives, choose your operating system, and follow the steps there!)

(We handle the yarn and npm conflict issues within our .gitignore we set up so dw about it!) To start our app, you just need to run yarn start!

yarn start

And to build our project for production (with CRA and Webpack's bundling with all that goodness),

yarn run build

Contribution Workflow

Thanks for your interest in contributing to Recursion Excursion! ❤️

Here's a quick guide for working on a new Github issue:

1. Make sure your main branch is updated with other peoples' changes.

   git checkout main
   git pull
   

2. Make a new branch of this repository. main is a protected branch, so you cannot push to it. a. For branch naming, follow this convention: <issue-number>_<change-you-made> (e.g. 43_animate_checkmark).

   git checkout -b <your-branch-name>
   

3. Implement your code changes for your feature: Beep boop away!
4. Update your local branch with changes from main branch.

   git merge main
   

5. Before you push, make sure you fix linting errors with yarn lint-fix and your app runs with yarn start. If there are any errors, our CI/CD service will reject your build.

   yarn lint-fix
   yarn start
   

6. Once you're ready, stage and commit your changes.

   git commit -am <your-message>
   

7. Move your local branch changes to remote repository.

   git push --set-upstream origin <your-branch-name>
   

8. Make a pull request 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 for more info!
9. 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.

Note that if you are continuing to work on the same issue you were in a previous session:

• for Step 2, run git checkout <your-local-branch> instead.
• for Step 7, run git push instead.

Helpful Commands

By running yarn lint-fix we can use the linter that we set-up to format our code the way that passes our style checks! Before you commit your changes and submit a pull request, make sure to run

yarn lint-fix

By running git status you'll get suggestions about what actions you might need to take to bring your repository to a clean and organized state.

git status

By running git branch you can list, create, delete, and manage branches within your repository.

git branch [options] [branch-name]

FAQs

Some lint is unnecessary :( How do I disable it?

There are actually 2 main ways to disable lint. Disabling the "rule" entirely, or in just a single line or file!

Disabling the rule entirely.

** Make sure this is what you really want!! It is often likely that you want to disable for just a single file. **

Depending on whether it's from stylelint or eslint, you can go to stylelintrc.json and add to `"rules"

<rule-name>: null

or eslintrc.json and add

'<rule-name>': 'off',

Disabling a rule for a single line or file

Take a look at the eslint docs for this: https://eslint.org/docs/user-guide/configuring/rules#disabling-rules

Or the stylelint docs for this: https://stylelint.io/user-guide/ignore-code/

It's pretty simple though, it'd look something like

/* eslint-disable <rule-name> */

or

// eslint-disable-next-line

The process for stylelint is very similar.

Assets are angry and won't accept

Our webpack set-up currently accepts asset files with the following extensions: png, svg, jpg/jpeg, gif, mp3, ttf

Code for it can be seen in line 22 webpack.dev.js and in webpack.prod.js

      {
        test: /\.(png|svg|jpe?g|gif|mp3|ttf)$/i, // we use regex to test different file types
        use: {
          loader: 'file-loader',
          options: {
            name: 'assets/[name].[ext]',
          },
        },
      },

If you want to add more assets like .pdf, .wav, .mp4, <YOUR_ASSET_TYPE> etc.

• Update webpack.dev.js file. Change test: /\.(png|svg|jpe?g|gif|mp3)$/i to test: /\.(png|svg|jpe?g|gif|mp3|<YOUR_ASSET_TYPE>)$/i
• Update webpack.prod.js file. Change test: /\.(png|svg|jpe?g|gif|mp3)$/i, to test: /\.(png|svg|jpe?g|gif|mp3|<YOUR_ASSET_TYPE>)$/i
• (If typing is needed) add a folder under custom_typing => import-<YOUR_ASSET_TYPE>
• (If typing is needed) create a file like import-<YOUR_ASSET_TYPE>.d.ts
• (If typing is needed) add in:

/* eslint-disable @typescript-eslint/no-explicit-any */
declare module '*.<YOUR_ASSET_TYPE>' {
  const value: <YOUR_ASSET_TYPE-TYPE>;
  export default value;
}

How can I tell if my asset is actually being served?

Take a look at https://recursion-excursion.netlify.app/asset-manifest.json. Like this!

Some More Helpful Tools

• Preloading Images - if rendering images gets annoying because it's slow: Link Example here

Licensing & Attribution

This project and its code are licensed under the MIT License. You're free to use them however you wish, though we'd love to hear from you if you found this useful!

recursion-lab's Issues

Style Rabbit Page

• import rabbit backgrounds/graphics from Figma
• center title/subtext as shown on Figma
• use proper fonts

🐾 Minor Update: Rabbit Page Sub-Text

Update the sub-text ("Setup") on the Rabbit Page

Proposed Solution

This is a sample to help you get started. Feel free to use it and expand on it or come up with something different. Just something to introduce the Fibonacci Sequence in a creative way.

@lediemhang87

🐾 Minor Update: Bunny Page Styling

Update use of Khan Component and other small styling fixes on Problem3.tsx

Proposed Solution

Check out MarioBaseCase.tsx for help on using the KhanCard component
The idea is to make use of the parent component to manage and handle the state of the child KhanCard/KhanInput

• Make sure you're using KhanCard and KhanInput as shown in example
• Remove use of submit button
• Increase font of title "Rabbit" to same as Mario page
• Increase spacing between the subtext (ie. the lorem lipsum text) and the bunnies image
• Make sure the checkboxes render

@lediemhang87

🚀 Feature: Progress Bar (shared)

A progress bar is a visual indication of what problem the user is currently working on.

Use Case

Lets the user know what stage they are on and how many problems there are left.

Proposed Solution

What it would look like when the user is on the last problem (Binary Search):

Consult with the Figma to find all of the progress bars

• Import the four progress bar images from Figma and place them into the assets folder
• Render them onto their specific page at their specific location

---

🧹 Refactor: Binary Search Page CSS Array Refactoring

Context

The Binary Search page is the last problem in the Recursion Excursion series of problems.

Problem

The current CSS styling for the search array can be improved a bit, animation-wise:

Proposed Solution

Improve existing CSS implementations to your discretion (it may go beyond the search array)

Note: Please do not improve the styling on the buttons, that is for a different issue.

This is a 🧹 Refactor Request

🐾 Minor Update: Close Sidebar on Outside Click + Refactor

Right now, the sidebar only closes when the user clicks the "X" button. This works, but most people expect to close the sidebar when they click on the outside the sidebar. Therefore, this task is to implement that functionality. After finishing this, refactor Header.tsx.

Sidebar (visual)

Proposed Solution

This link explains the way to use useRef and eventListeners for this task (very specific):
https://stackoverflow.com/questions/66626487/hiding-sidebar-component-on-outside-click

How to Start

(First, check out the Contribution Workflow in this Github README.md: https://github.com/uclaacm/recursion-lab)

The sidebar code can be found in src > components > shared > AppWrapper > Header.tsx This code here combines both the actual header (ie. the blue header with the menu icon + page title) and the Sidebar data (ie. everything within the nav tag).

After you finish the outside click feature, you'll want to refactor the Header.tsx code into two files: Header.tsx and a new file, Sidebar.tsx . The path of Sidebar.tsx should be src > components > shared > Sidebar.tsx. This is because right now, Header.tsx contains both the actual header and the sidebar code, and we want to isolate them. Header.tsx will use Sidebar (found in Sidebar.tsx) as a functional component.

The usage of Sidebar as a functional component will look something like this within Header.tsx:

<Sidebar sidebar={sidebar} setSidebar={setSidebar}>

where the sidebar and setSidebar within the brackets are the state in the Header.tsx .

Steps to Complete

1. Follow the stack overflow guide (or other helpful resources) to implement the 'close on outside click'
2. Refactor the Header.tsx into two files: Header.tsx and Sidebar.tsx
3. Have Header.tsx use Sidebar as a functional component.
4. Update Sidebar titles in SidebarData to actual titles
   Problem 1 --> Mario Stairs
   Problem 2 --> Dining Out
   Problem 3 --> Rabbit Growth
   Problem 4 --> Word Search
5. Additional Request below

Header (code)

Additional Request

If possible, please have the "X" positioned leftward instead of where it currently is (center). It will require some HTML/CSS reconfiguring, but this would be great.

🚀 Feature: Dining page function call stack component

An step-through animation that allows the user to visualize what exactly the code is doing at every step. It's the same idea of a function call stack but putting "Friends"/nodes onto the stack rather than functions. The output box is a verbose version of what's happening in the stack.

Proposed Solution

🚀 Feature: FinishCode component for Rabbit "Code the Components Together"

Finished Code:

Proposed Solution

Basically, it is going to just look like the two previous steps (Base Case + Recursive Formula) combined but into one (ie. the entire function). There is an example of using the FinishCode component in the Intro page using factorials, so check that out to see how it is used.

@lediemhang87

🧹 Refactor: Make the buttons across pages modular and consistent

Context

There are a lot of buttons across the site, all implemented using HTML/CSS. Some are part of the KhanCard component and others are part of the interactive visual component of the page, as seen below:

Problem

Because everything was implemented in CSS and by different developers, there was no consistency between our design. Thus, each button has a different feel to it, which was not the original intention.

Proposed Solution

By making a Button React component, each page can simply import that component and the CSS pertaining to the component will be applied consistency among pages. The end result will model the KhanCard's button styling.

The basic props for Button are

• className: string
• onClick: handler function
• size: string (e.g. small, medium, large)
• color: string (e.g. red, orange, yellow, green, blue, purple, any-hex-color (#fcba03), etc. -- (have a default color))

Disclaimer:

• There is currently a Button React component. Please change this name to NavButton and change the component name usage in the pages accordingly.
• There may also be optional parameters, so account for those with default values, such as with disable used only in KhanCard. Also note that in the implementation, you will have to render children, which will usually be something like "Check" or "Next".
• To translate the standard colors (e.g. red, orange, yellow, etc.) to hex values as well as darken the CSS color on hover, you'll need to have a map that maps colorNames -> hex as well as hex -> (darker) hex, respectively.

---

This is a 🧹 Refactor Request

🚀 Feature: Implement Slider for Mario Staircase component

Context

Right now, the Mario staircase interactive component (found in Problem 1, Understand the Problem) allows the user to type in a number from 1-9 and this input displays the staircase and the corresponding number of steps the user chose.

Problem

This is clunky for the user because we want them to see how the staircase changes over time (ie. from 1 to 2 to 3, etc). They could type 1 and then 9 and not necessarily see the gradual changes.

Proposed Solution

A great solution would be to implement a slider that goes from 1-9 because this inherently moves through the numbers consecutively, showing the staircase changes over time.

---

This is a 🚀 Feature Request

🐾 Minor Update: Create sizing variants for KhanInput and Dropdown

Context

The KhanInput (src/components/shared/KhanInput.tsx) and the Dropdown (src/components/shared/Dropdown.tsx) have a fixed width.

Problem

Sometimes, the answer / representation we expect is just one digit or character, so we want the sizing of the input box to reflect that.

Proposed Solution

Create a prop for both KhanInput and Dropdown called size that takes small and medium as values. Note: the current sizing for both of these should correspond to medium, so define small as you see fit. Update these components accordingly through conditional operations.

Example Usage

<Dropdown

size="medium"
options={options2}
correct_answer={isCorrect}
index={0}
answer={answerKey.question2}
update_answer={setIsCorrect}

/>

🐾 Minor Update: Remove dummy text in Bunny "Understanding the Problem" KhanCard

Currently, this KhanCard has dummy text for the "correct" and "incorrect" props. Please update these accordingly to make sense for Fibonacci.

    <KhanCard
      correct="This is an explanation for when you get the answer correct." //explanation for when user gets answer correct
      incorrect="This is a hint for when you get the answer incorrect." //hint when user gets answer incorrect
      correct_answer={isCorrect} //must pass in correctness state from parent
      index={[0]} //index for what KhanCard you are referring to
    >

🚀 Feature: FinishCode component for Dining "Code the Components Together"

The Function Code:

Proposed Solution

Basically, it is going to just look like the two previous steps (Base Case + Recursive Formula) combined but into one (ie. the entire function). There is an example of using the FinishCode component in the Intro page using factorials, so check that out to see how it is used.

@lediemhang87

🐾 Minor Update: Dining "Generalize the Pattern..." KhanCard

Right now, the Dining KhanCard for "Generalize the Pattern: Recursive Formula:" is not there. Use one and include the correct code for the problem. This KhanCard will take two inputs:

"Friend.left" will be a KhanInput
"Friend.left" will be a KhanInput

Proposed Solution

It will look something like this:

left_sum = post_order_sum([KhanInput])
right_sum = post_order_sum([KhanInput])

Correct Python Code:

🚀 Feature: Output component based on the function the user "creates"

This is adding onto the existing FinishCode component. It is specific to the "Dining" Page in the "Code the Components" section (ie. the Factorial code). (Side note: the Factorial code is simply an example, once we figure out the exact implementation we will expand it to other functions.)

Use Case

The Output box works like this. As you can see, there are two Dropdown components where the user can choose what specific code they want to use. Once they make their selections, you basically "record" this function and pass it to the FinishCode component so it can execute it. That's the main goal: having the Output box execute the exact code that the user chooses. It may be the correct factorial function, or it may be some other similar function, but run it anyways.

Your goal is to have something like this in the Output box, assuming they wrote a similar but incorrect factorial function:

Correct Output: 120
Your Output: 720

From the user's perspective, these look like test case(s) to help see if they're on the right track or not.

Proposed Solution

Right now, the Output box is executing the factorial function, but it is running only the correct factorial recursive function and not what the user inputted. Therefore, you must create a "dynamic factorial function" that uses the user's choices from Dropdowns and displays it on the box. Thus, useState and dynamic variables will be your best friend. Possibly useEffect may be necessary.

🚀 Feature: Animation for Fibonacci Rabbit page's Understand the Problem

Note: make sure nothing is currently in "Understand the Problem" for the Rabbit page. There used to be a KhanCard but it should be moved to "Identifying the Base Case" (ie. run git pull to get all the new changes)

Also please work on this task only after re-working the previous tasks!

Proposed Solution

We could use the Fibonacci sequence as our example. We could have 1 1 2 3 5 8 (shown using rabbits) as an animation so they can see that this problem is the Fibonacci sequence. Showing the next sequence could be automatic (as in timed) or manual (with a next button).
So like if we were at the sequence 1 1 2 3 (in terms of rabbits)

Them clicking next or waiting 1 second would trigger the next number (of rabbits) 1 1 2 3 5

We could also have a number above the rabbits to indicate how many there are at that current step.

@lediemhang87

🧹 Refactor: Modularize Buttons

Context

Right now, all the buttons used in the learning lab are coded as raw HTML buttons.

Problem

In React, the idea is to wrap commonly used elements as a component since it is easier to read, test, and make changes. Also, we are using one-line css attributes that are not necessary.

Proposed Solution

The idea is to have a button component as follows:

<CustomButton backgroundColor="some-color" hoverColor="#9500ae">Click me!</CustomButton>

Note that you'll have to use the .shared-button class, remove the other CSS one-liners, and then inline-style for the correct background color and hover color. For completeness sake, also add an optional disabled prop (defaulted false) so that we can use this component within the KhanCard and FinishCard. Besides those "Check" buttons, the other button usage places are as follows:

• Excursion 2, Understand the Problem ("Play")
• Excursion 3, Understand the Problem ("Next")
• Problem4.tsx ("Next")
• BinarySearchExample.tsx ("Lower", "Higher")

Also note that it would be best if you support not only "#[some-alpha-numeric-characters]" but also the generic colors, such as "red", "orange", "yellow", "green", "blue", "purple" as CSS would define them. In other words, both the propr backgroundColor and hoverColor should support a hex code string as well as a regular color name string (Think of using a map). This makes the programmers' life easier so they don't have to find the hex code for a simple color every time.

---

This is a 🧹 Refactor Request

🚀 Feature: Use local storage for KhanCard answers

Context

Right now, we are saving the users' correctness state for each KhanCard in an array in state for every Excursion page, and more than not in every step of each Excursion page.

Problem

Once the user refreshes or exists the application, their correctness state resets back to all false (no questions correct). We want the users' correctness information to persist in the browser.

Proposed Solution

Implement localStorage for each of these correctness arrays.
Great article, but doesn't take into account initial null state for the localStorage keys
This article does, but quite verbose.

Add-on:

• Also want to implement a Reset button on the Home page, we'll see how fast this issue gets taken care of. The reset button is quite literally a one-line solution ("clear"), so it should be easy to implement.

---

This is a 🚀 Feature Request

🐾 Minor Update: Update Mario "Identifying the Base Case" KhanCard

** SAME AS #78 **
Right now, the Mario KhanCard for "Identifying the Base Case" is dummy text. Update it to include the correct code for the problem. This KhanCard will take two inputs:

• "n <= 1" will use a Dropdown component
• "n" should use a KhanInput component

Proposed Solution

In essence, it will look something like this:

if ([Dropdown]){
  return [KhanInput]
}

🚀 Feature: Create a "Finish the Code" Component (shared)

Allows the user to write code through a "fill in the blank" style of learning.

Use Case

Basically used on every page to get the user to write code and see the output.

Proposed Solution

See the KhanCard component for guidance

• Create the component and place it in the shared components/shared folder
• Style the component so it visually looks like the Figma reference (except with Dropdown, not KhanInput)
• ^^ Do not use the KhanInput. Use the DropDown component. Example is on on Mario page.
• Implement the functionality of "Tries Left" dots, Show Answer, and displaying the Correct and Incorrect explanations
  Up to this point, the idea is the same as KhanCard
• Implement the Output box (by passing the problem function to your card component and displaying that answer)

🚀 Feature: Create Excursion 4 Binary Search FinishTheCode component

Context

File: src/components/binary-comps/BinaryCode.tsx

Please reference Excursion 1 and Excursion 1's Code the Components Together as an example for how FinishTheCode component is used and its source code (src/components/mario-comps/MarioCode.tsx) for how it is implemented.

Problem

The FinishTheCode component is the last component in the Binary Search pages to complete it entirely.

Proposed Solution

Note that there is a more robust way of creating the chosen_function than shown in MarioCode. Everything else should be similar.

🐾 Minor Update: Add 1-9 numbers under slider tick marks

Context

This slider can be found on Excursion 1, "Staircases", Understand the Problem. Basically, the slider determines how many rows of the triangle there are.

Problem

Although there is a variable that does show how many rows there are currently, it would so much more user-friendly to visually see the numbers, like a number line.

Proposed Solution

Add the numbers 1-9 right beneath the slider tick marks so it looks like a slider number line.

• Remove the margin-bottom from the n-input-container class.
• Create a div container for these 9 tickmarks, where each tickmark is represented as a div:

<div className="tickmark-container">
    <div className="tickmark-label">1</div>
    <div className="tickmark-label">2</div>
    <div className="tickmark-label">3</div>
    <div className="tickmark-label">4</div>
    <div className="tickmark-label">5</div>
    <div className="tickmark-label">6</div>
    <div className="tickmark-label">7</div>
    <div className="tickmark-label">8</div>
    <div className="tickmark-label">9</div>
</div>

• Align the container directly underneath the slider input. Use display: flex and justify-content: space-between for container css
• Change font-size and container size as needed to perfectly align the numbers
• It would be cool where the number that is being chosen is bolded at that time. This is quite simple since we know the value of the input, which is numColumns. You could add a new css class on the tickmark to bold it or just inline style for bold
• On hover for the slider, add cursor:pointer
• Add a little space between the bottom of the staircase and the "Sum = 1 + 2 + 3...". Make sure this space matches the space between the numbers on the number line and the top of the staircase.

---

This is a 🐾 Minor Update

🚀 Feature: Create a Dropdown component (shared)

Lets user select an option from given choices

Use Case

This will be heavily used in the "Finish the Code" component since we can give options that actually produce working code, albeit correct/incorrect. Using text inputs from the user may result in non-working code, and it is not worth it to parse and fix their inputs.

Proposed Solution

• Create a component named Dropdown and place it in the component/shared folder
• Follow HTML/React documentation on dropdowns
• Make sure it updates the state from the parent

---

🐾 Minor Update: Binary Search Book Graphic

Make book searching look like an actual book

Use Case

To visually make the book searching simulation more recognizable

Proposed Solution

• Add a book image behind the four search entries. Play with z-index
• Resize the 4 boxes to fit nicely within the book, so they appear as lines in the book

🐾 Minor Update: Dining Call Recursive Stack

UI and Functionality Updates

Proposed Solution

UI Changes:

• Change blue stack background to that color in the Figma
• Change grey Output box to that color in the Figma
• Change location of the next and previous buttons
• Have the Output box text start from the bottom like the stack (ie. justify-content: end)
• Change "X minutes" to "X min" (ie. "minutes" -> "min")
• Change orientation of name, image, and minutes from $minutes$ | $\frac{name}{image}$
  to [ $\frac{name}{min}$ | image] Make sure to make the name stands out (ie. bold + font-size)
• Make the entire "Friend" block smaller (ie. probably by making the images smaller) so the whole stack can fit on the screen

Functionality Changes:
I noticed that the stack ends with "May is on a call with Lea This call takes 20 minutes." and finally "Lea is on a call with May. This call takes 10 minutes." Notice how this is a cycle. It's supposed to end on Lea having no more calls. In other words, there's a misinterpretation in what this stack possibly represents. Please see the Recursion Lab Notes document for clarification.

• Have the recursion nature of the stack end with the last person has no more calls.

Another thing is that technically, this recursion stack is incomplete. Think of it like a post-sum traversal stack (as stated in docs). You traversed the whole way, but we never showed the "backward traversal" back to the root node to show how we computed the root node, where the whole sum is [root.val] + recurse(root.left) + recurse(root.right). Our example just assumes there's only one child for all nodes, but even in this case, there is still backtracking.

• Implement backtracking. This means once the last person has no calls, then that means we can compute all of the previous people's "time until their call is finished".

@tylerdtran

Style Dining Page

• Import food background
• Write out title and subtext in correct CSS position
• Import the circular loop diagram with correct names from Figma
• Update font for page

🐛 Bug: KhanCard cannot handle Multiple Input Types

Is there an existing issue for this?

No.

What happened?

KhanCard does not allow for intermixing of Dropdown and KhanInput, specifically when there is one of each.

What was the expected behavior?

Both are required for the KhanCard to be correct.

🐾 Minor Update: Fix Code + Output 60% 40% Width

Context

There is a component FinishCode found at src/components/shared/FinishCode.tsx. An example of its usage is in Excursion 2 in the Code the Components Together box:

Problem

We want to avoid having the Output box shrink tremendously when the code is long. As you can see, the dark grey output box is practically non-existent. An example of what it should look like is Excursion 1 in the Code the Components Together box:

Proposed Solution

• There is margin: 5em on the finish-card-container class. This is way too much. Use margin: 20px.
• If we fix the box sizes of each (e.g. 60% code + 40% Output box) that should allow the Output box to not get distorted.
• Add any other fixes that you see fit.

🚀 Feature: Animated checkmark

Context

Right now we are using a dependency to draw a static checkmark on all our pages.

Problem

Having unnecessary dependencies, for one, makes our code slower, but also it does not have an interesting animation feedback when the user gets the answer correct.

Proposed Solution

I would advise to use an existing checkmark SVG found online or through one of these solutions, but for learning purposes, I would definitely understand how the CSS interacts with the SVG (ie. what class corresponds to what and what each CSS property does). You could also look into SVG animations for fun as well before/after this issue.

Example Solution
Example Solution

This is a 🚀 Feature Request

🐾 Minor Update: Update Friend Diagram to show Binary Tree

Context

In Excursion 2 (Dining Out), the visual image shows the model as a linked list, where Lea calls May who calls Jane, and so on. The call stack in Understand the Problem is based on this image, where Lea knows how long her phone calls based on the people she's calling and their phone call times. Read Recursion Lab Notes to understand the problem itself.

Problem

The issue is with the (1) people with phones image and (2) the stack in Understand the Problem. The current implementation treats this problem as a simple list, where one person calls another who calls another, etc. However, the original emphasis of the problem is the binary tree-like nature, where Lea can call May and Jane, not just one other person. This tree representation aligns nicely with the recursive solution, so we want to get rid of the list structure.

Note: just ignore the stack implementation stuff for now (ie. create a new page/component with the tree work, maybe visually on top of the stack stuff).

Proposed Solution

• Replace list-people picture with tree-people picture
• Implement a tree (and node) class that uses the given people as nodes as stores their node values as specified below.
• Make sure the postsum function works when iterating through this tree (ie. hits the nodes in the correct order)
• Begin the SVG CSS + JavaScript animations

Node values (in minutes):
Lea: 10
May: 7
Ryan: 5
Jane: 15
Sam: 12

(Future reference:push Lea, push May, push Sam, pop Sam, pop May, push Jane, push Ryan, pop Ryan, pop Jane, pop Lea, display answer.)

@kesdlvi -- for this upcoming Tuesday, 11/14, I would only expect check points #1,2,3 to be completed. It would be great if you looked into SVG CSS / JavaScript animations, but the animation implementation of that can begin next week.

Interesting JavaScript-focused binary tree animation solution: Youtube Video

🚀 Feature: Binary Search "Understanding the Problem" pt1

Simulate the user searching through an array of words in lexicographical order and them clicking "higher" or "lower" to update what word they are currently searching.

"Understanding the Problem" pt.1 is the case when the element exists in the array (ie. there is an answer):

if (x == arr[mid])
            return mid;

Proposed Solution

It's basically just an array of "Word" components that render a different color if it's currently selected based on its index.
The "higher" and "lower" buttons work by changing what index is currently being selected. At each index change, there should be a function that checks whether or not the "Word" at that index is correct, and if so, render some sort of "complete" explanation or if left > right (ie. the binary search failed) then show a different "complete" section.

🚀 Feature: Refactor Excursion 3 BunnyCode function creation

Context

File: ~/src/components/bunny-comps/BunnyCode.tsx

FinishTheCode component works by taking in the correct function in the prop given_function and taking in the user-defined function in the prop chosen_function. It also includes the parameters, so it runs the functions in this page. Note that it needs to have a test case value to determine correctness, namely n=7. Example from the page:

given_function={() => recurFib(7)}
chosen_function={() =>
  selectedRecurFib(
    7,
    selectedanswer.question1,
    selectedanswer.question2,
    selectedanswer.question3
  )
}

Problem

Although our solution works, we are creating functions for every permutation possible based on user-input. If you were to tell someone that you were dynamically creating a function based on user input and defining functions for every permutation of user input and selecting the chosen user function based on these inputs, they'll look at you crazy. This is because creating all these functions are a waste of memory since we (technically) already have the user function, so all we have to do is execute it.

Think of a code editor... when you write and run the code, the editor is not going to guess which functions you are going to use and then match it with your input function, it'll just run what you gave it. That's what we want to do.

Proposed Solution

Thankfully, Javascript has a solution for this. Please look into this documentation for Function constructor. It creates a function based on a string. Therefore, if we can get the function into a string format, and run the Function constructor, we can have the function we want without having to case-by-case select the function. THIS IS HUGE!!! (We don't need a Code Editor and we don't have to hard-code anything!)

---

This is a 🚀 Feature Request

🚀 Feature: Checkmark upon Correct for KhanCard component

The KhanCard component (ie. "Fill in the Blank") should have a checkmark next to the words "Fill in the Blank" to indicate whether the user got it correct or not. Moreover, upon correct, the grey checkmark should change to a green one.

Use Case

To be used in the KhanCard and maybe expanded to the accordion. Many uses.

Proposed Solution

[EDIT: Maybe try using the CheckCircle from the MUI library first to get the checkmark placed correctly and dynamically render the grey / green color without animations -->
import CheckCircleIcon from '@mui/icons-material/CheckCircle']

After the above works, try to use react-checkmark or something similar to make it more visually appealing. Try the command "yarn add react-checkmark" or anything yarn. Do not use the npm command.

Feel free to implement this feature first in the Mario Page's Khan Card component so you have something to work with. KhanCard does have its own state called "correct" so it does know whether the user got the question correct or not. Use this to conditionally render the checkmark type.

The tricky part is working between the KhanCard state and the parent state (ie. MarioBaseCase.tsx). This is because MarioBaseCase knows which questions are correct, not the KhanCard. So, MarioBaseCase is going to have to pass the correct checkmark to KhanCard and KhanCard just has to render it.

🐾 Minor Update: Home page styling

Context

The home page is the first page the user sees when opening Recursion Excursion:

Problem

It does not currently match the updated version on the Figma:

Proposed Solution

As we noted, the title styling should stay the same. However, here are the things that should be changed:

• Add the subtitle
• Add lighter opacity when user hovers on button
• Make the margins align between the title, subtitle, and the start button. Note that the title is a bit lower in the Figma.

Lighter opacity solution:

.element{
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
} 
.element:hover{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

This is a 🐾 Minor Update

🐾 Minor Update: Update Dining "Identifying the Base Case" KhanCard

Right now, the Dining KhanCard for "Identifying the Base Case" is not there. Use one and include the correct code for the problem. This KhanCard will take two inputs:

• "Friend is None" will be two KhanInput
• "0" will be a KhanInput

Proposed Solution

It will look something like this:

if [KhanInput] is [KhanInput]:
   return [KhanInput]

Sample KhanCard with One KhanInput:

Correct Python Code:

🐾 Minor Update: Include text preceding KhanCards + FinishCode

Context

Some ExpandBox(es) have KhanCard(s), such as in the Excursion 1 Identify the Base Case ExpandBox. The KhanCard component takes these two of four props:
correct prop: string that gives an explanation of the answer once the user gets the question correct or attempts out.
incorrect prop: string that gives a hint for the answer when the user gets the answer incorrect.

Problem

These KhanCards have dummy text:

• Excursion 1, Identify the Base Case
• Excursion 1, Generalize the Pattern: Recursive Formula

Proposed Solution

Write the correct props (explanations) and incorrect props (hints) to have actual helpful text.

🐾 Minor Update: Bunny "Generalize the Pattern..." KhanCard

Right now, the Bunny KhanCard for "Generalize the Pattern: Recursive Formula" is not there. Use it and include the correct code for the problem. This KhanCard will take two inputs:

"fib(n-1)" will use a KhanInput component
"fib(n-2)" will use a KhanInput component

Proposed Solution

It will look something like this:
fib(n) = [KhanInput] + [KhanInput]

Correct Python Code:

🚀 Feature: animate checkmark upon correct

Use yarn package react-typescript-checkmark to have a green checkmark animation rather than a static one.

🐾 Minor Update: Reset to Top of Page upon Page Navigation

Context

Because the Prev and Next nav buttons are at the bottom of the screen, when the user navigates to the next page, they stay at the bottom of the page.

Problem

It should bring them to the top of the page where the start of the next problem will be.

Proposed Solution

On route change, have the scroll reset back to the top: Dev.to React Scroll Solution

🐾 Minor Update: Bunny "Identifying the Base Case" KhanCard

Right now, the Bunny KhanCard for "Identifying the Base Case" is not there. Use it and include the correct code for the problem. This KhanCard will take two inputs:

"n <= 1" will use a Dropdown component
"n" should use a KhanInput component

Proposed Solution

It will look something like this:

if [Dropdown]:
   return [KhanInput]

🐾 Minor Update: Update Mario "Generalize the Pattern..." KhanCard

Right now, the Mario KhanCard for "Generalize the Pattern: Recursive Formula" is dummy text. Update it to include the correct recursive formula for the problem. This KhanCard will take two inputs:

• "n" will use a KhanInput
• "recurSum(n-1)" will use a Dropdown component

Proposed Solution

The final product will look something like this:
return [KhanInput] + [Dropdown]

🐾 Minor Update: FinishCode body responsiveness

Context

The FinishCode component is at the end of every "Excursion X" page that contains a function (on the left) and an output box (on the right).

Problem

The output box of the FinishCode component shrinks indefinitely when shrinking the screen size. Instead, we want it to still be distinguishable as a box and readable comfortably despite screen size.

Proposed Solution

Give FinishCode component output box a min-width and/or flex-shrink.

Do not worry about the other elements of the FinishCode that may overflow, that would be a future issue revolving around mobile-responsiveness.

This is a 🐾 Minor Update

🚀 Feature: Create a KhanCard component

Allows the user to try to guess the correct answer based on what they learned from the visual component. Users will input text.

Use Case

Useful for getting user input and checking to see if they understand the problem.

Proposed Solution

---

🚀 Feature: Intro Page Animations/Images

Visual animations/images that illustrate the recursive concepts being taught

Proposed Solution

GIF / JPG / PNG images & animations work
If possible, try to add an interactive component (could be through the animation)

Resource for Recursion Visualization:
Medium Article on Recursion Animation Examples
Example what the "Intro" page might look like as a finished product
Example explaining Recursion while also using Factorial example
Slideshow example for Recursion

🚀 Feature: Update Mario "Code the Components Together"

Right now, the Mario section for "Generalize the Pattern: Recursive Formula" is empty. Update it using FinishCode component to simulate a running program from user input. Make sure you create the particular formula correctly, allowing for user input.

Proposed Solution

Use the FinishCode to finish this section. It is similar to KhanCard but it also requires two functions -- in this case, the "sum of the first n natural numbers" function, and its input from the user, to function. The output box outputs whatever the function would based what dropdowns the user chose.

This is the code:

🐾 Minor Update: Style KhanCard like FinishCode

Context

KhanCard and FinishCode have different border styling, where KhanCard is flat and bold and FinishCode is rounded and shadowy.

Problem

It would be great if they were consistent, and FinishCode looks better.

Proposed Solution

Find the CSS on FinishCode (the border) and apply it to KhanCard.

---

This is a 🐾 Minor Update

Style Home page

• Import background image from Figma
  the title, subtext, start btn, mario, and the rabbits are not part of the background image
• Animate start btn to be constantly blinking in size unless hovered (in which it stops blinking)
• Animate mario to be looking left, pause for a second, then look right, and so on
• Animate title to come from top and to center (or any cool title animation)
• Animate rabbits to come up and down (like whack-a-mole) occasionally

🐾 Minor Update: Update naming of Recursion steps

Context

The current naming of the Recursion steps are as follows:

Problem

The wording is a little awkward from the users' perspective.

Proposed Solution

The first two steps should be changed to as follows:

1. Understand the Problem
2. Identify the Base Case

Please make these changes to Excursion 1, Excursion 2, Excursion 3, Excursion 4

---

This is a 🐾 Minor Update

🐾 Minor Update: KhanCard taking multiple inputs

Motivation

Previously, the KhanCard only took one input in the form of an Input box or a Dropdown menu. While this is fine for some questions, most of the questions in this learning lab require the user to choose 2 or more answers per questions, making this component obsolete.

Proposed Solution

Instead of KhanCard taking an index (representing one answer per card), it should take as many indices as it needs, or rather, an array of indices. Iterate through this array of indices to determine whether the user got the question correct or incorrect.

🐾 Minor Update: Figma Design Updates

• Update Dining Setup text (right underneath the title)

  • See Recursion Lab Docs for specific details + Mario or Bunny Page for example

• Change Dining Page font to what’s on the Figma

• Style Bunny Page Understand The Problem section’s “Next” button to look nicer [not the navigation buttons on the bottom] Can use MUI buttons

• Style Binary Search “Next” and “Go” buttons to look nicer [not the navigation buttons on the bottom] Can use MUI buttons