🚀 Feature: Update test-case UI + functionality

[RahulKhanna14]

Context

Currently, many of the exercises end in a "Finish the Code" component, where students are expected to correctly fill in the missing code from a set of given options.

This component can only currently handle 1 test case (given in the statement), and the UI for test-case feedback is relatively minimalistic.

Problem

We'd like the ability to test the students' code with more test cases, (e.g. 2-3) instead of just 1. We also want to update the UI (within that large gray square above to resemble that of Leetcode; where students can click between the test cases like Tabs and see the input / output based on their attempted code.

Proposed Solution

1. Start by implement the functionality to handle multiple test cases for each of the "Finish the Code!" components; You will have to modify src/components/shared/FinishCode.tsx, specifically the props correct_answer, chosen_function, and given_function. Note that this will require quite a bit of change, so feel free to change what's needed to achieve the necessary functionality. Please let Edwin or Rahul know how you plan on doing this since it can get a little tricky.

2. After having the functionality work, we will have to implement this change into the individual uses of FinishCode, such as src/components/binary-comps/BinaryCode.tsx.

3. You could then transition to implementing the front-end visual aspects:

Test Cases for each FinishCode

Intro Page: Factorial(n)
input = 5
expected = 120

input = 3
expected = 6

input = 0
expected = 1

Excursion 1: recurSum(n)
input = 5
expected = 15

input = 3
expected = 6

input = 1
expected = 1

---

This is a 🚀 Feature Request