# Final project: Fun with Chinese (FWC)

Group Members: Beikun Ma, Ivy Wu, Bill Wang;

---

**Codepen project url:https://codepen.io/bw2703/collab/qBPmNRb**

:::info
This website is about teaching the fundamentals of Chinese language to pre-K Children (Chinese is not their first language). We'll also introduce the engaging content about Chinese culuture and history to stimulate their rudimentary interest about Chinese learning. Users can subscribe to our website to get updates. Users can also register the class for their children through our website.
:::

## Problem

**Target audience**
- Our target audience is the first generation of the Chinese immigrants. The majority of these immigrants' children would choose English as their first language and in oroder to fit in the local culture and traditions, it is likely that they would have limited amount of time to systematically study Chinese.

**Learning difficulties**
- In the Chinese learning market of the US, well-experienced Chinese teachers are expensive to hire, while the teachers that volunteered to teach students are usually mediocre as well as lacking sufficient teaching experience.
- Another issue is that the Chinese teachers do not possess strong English speaking abilities, causing a potential communication barrier when teaching the non-native Chinese speakers Chinese.

## Solution

- We've been seeking opprotunities to address the issue, and now the time has come. It is our honor to present the Fun with Chinese (FWC) Website.From our FWC website, the second generation of the Chinese immigrants will learn from three well-experienced, native-speaking Chinese teachers that graduated from one of the world's most prestigious instituions - Teachers college, Columbia University.

## Major Components and Functions of FWC
**Introduction**
- Present the essentials of the website and address the necessity of Chinese learning as well as demonstrate basic information about learning content, faculty information and so on.

**Curriclum**
- The curriculm incorprates the detailed information of the courses that we will be teaching.
- Learning environment
- Our learning environment is exceptional. Differ from the traditional method, teachers are required to do everything. In our mode, teachers are solely responsible for the teaching content. There will be two additional roles in our classroom: administrator and mentor. The administrator will be responsive for creatinga a supportive learning enviroenment, ensuring the parent that the student is on the right track as well as trivialities such as taking roll calls. The mentor on the other hand is to build up solid, firm realtionship with the students and solve any potential psychological problems that the students might have.

**Finding the optimal instructor**
- If parents are interested in register the class for their children, they will first fill out some application form so that we can find the most suitable instructor for the child. They can do it easily by clicking on the "Find my instructor" button on the middle part of the website, the button will become another color, then the form will pop up, which allows the parents to fill in the information of the child, include **Kid's Age, Kid's gender, Do you speak Chinese with your child, is your kid highly motivated, Does your kid have any learning difficulties, Is your kid sensitive, How often do you want your child to have Chinese classes, What format do you want the lesson to be?**
- After filling out the information on the form, the data will be submitted to the database for the FWC staff to see.
- We used the Boostrap `classes` to design the registration form.

**Matched instructor**
- Each instructor in our group have a different specialization, background and personality. Ivy is the only female in FWC, she is gentle and kind, spcializes in teaching Chinese character, Chinese pinyin, Chinese listening. Michael have a psychlogy background, so he is proficient in dealing with children with learning difficulties and sensitive learners. Bill is smart and have deep knowledge of Chinese culture, so the children that are highly motivated will be his students. We have set a series of methods that will be discussed in the next session to find the most optimal teacher once the parents submitt the form.
- There will be three `Matched cards` in the program. We have used `style.display = "none"` to hide the cards, when a child found a matched instructor, we used the `remove` method to reveal the best-match.

**"Find My Correct Instructor!" application form**
- **_Kid's Age, Kid's gender, Do you speak Chinese with your child, is your kid highly motivated, Does your kid have any learning difficulties, Is your kid sensitive?_**
- These are input that let the users to type in the basic characteristics of their children. We've used the javascript to determine which instructor will be the best fit based on the these charateristics. These characterisitics will be saved in the databse as 'strings'. We used the `Document` method `getElementById` to select elements based on the ID that matches the corresponding string. Then we created a `Function` `calculateScore` to calculate the `score` that determines the specific instructor based on the information that the parents provided. If they select their preference of the instructor to be female, the `Matched card` will be Ivy since she is the only female on the team. The higher the score, the more demanding the child (more likely to be either have learning difficulties or highly sensitive), so if the`score` >2,the instructor is bill,`score` >= 6, the instructor will be Michael. If the `score` is below 2, the parents will be alerted that their information provided is insuffcient for the system to find the best-match, and ask them to provide as much information as possible.

- **_How often do you want your child to have Chinese classes? What format do you want the lesson to be?_**
- These are two questions using the `select` function to let the users choose the answer, which help the teachers to know the children better in order to select courses for the children. The data will be saved as `number`.
- **How often do you want your child to have Chinese classes?**
- *Once per week* has the value of 1, *Twice per week* has the value of 2, *More than three times a week* has the value of 3, and *Everyday* has the value of 4
- **What format do you want the lesson to be?**
- This question will ask the mode of preference (online/ in-person/ hybrid).
- **_Kid's gender_**
- This question in the form used `radio` function, which answer boy will be saved as teh value of 1, and girl will be saved as 2 in our database.

**Take a Quiz!**
- We have designed a quiz to test the prior knowledge of the student. In this section, the student is requried to answer a total of 6 questions relating to Chinese culture, characters, translation. The `Function` `getInfo` is designed to calculate the score for the quiz. Each correct answer will result in a 1-score increase in `score`. After finishing each question, the student can click the `Check` button to see if his answer is correct. The`document`method`getElementById` is applied. If the answer is correct, the `correct` element will increase by one.

**Get to know our teachers**
- In this section, we used `grid system` to layout teacher's profile.For the picture, we use ⅓ space (4-column) and ⅔ space(8-column) for the introduction text. It allows users better understand and read our teacher’s information. We also used`br` and `hr` to bring a better vision layout which makes each profile has an “individual” section.

**Footer**
- The footer is very straightforward where we put our name and email address there in case they may need to contact us for more information. We apply `a href`element there so the user can send the email to us just by clicking the link.
- **Subscribe**
- The subscribe section used form action:`input: text` to complete the subscribe process. The users need to fill out the text form (first, last name, and email) as the requirement to click the button and submit their information to our database.

**Side bar**
- The social media side bar use serval `a href` elements to represent each social media icon, the position is also `fixed` so we can constantly promote our social media to users and gain more attention and followers if they are interested in our program.

## Challenges
- A few challenges were faced when doing the project, one was that we were having difficulties implementing the CSS rules and turning the page to a more aligned and consistent theme, either the color does not match the background and elements or the font size/family do not match the overall webpage visually. We later solved this challenge by sorting HTML classes and applying certain CSS rules to each class which made the overall style into a green-white-based color theme.
- Another challenge was the teacher introduction section where we wanted to make each teacher “stands out” from other teachers and make each information section “individual”, we tried just using `div` and `span` in the beginning, but they did not work very well and present what we want. Then we tried to use the `gird system` to better layout this section and also use elements like `br` to make each teacher’s profile separate from others and `hr` to separate the name/school from self-introduction.

## What did we learn
- There were lots of takeaways that we have gained from this project. One significant takeaway is that when creating and designing a webpage, the first and most important thing is to have the layout ready. This is to say, you should have a mindset about how many main sections this webpage should have (e.g. intro section, profile section, subscribe section, registration section…) and understand the parent-child relationship between them. By doing this, you can just start coding from top to bottom without making significant changes in the middle of the road which could make a big mess and affect the entire webpage.

## Future Plan
- In the future, we will add more functions to the website, to get more interactions from users and bring more information to users through those interactions. This will allow us to persuade users to register for the class or subscribe to the newsletter.
- Another key point is that we will make the registration process simpler and straightforward for users so they can complete the registration quickly and efficiently while filling out all information that we may need for future use.
- In addition, we would try to recruit more talented instructors to our group so that more people can benefit from our program. We also would expect to widen our target audience circle, we would hope that anyone is interested in learning Chinese can join our program.
- We would like to add more applicable animation by using the javascript to enhance the visual effects, such as pop-ups, sliding, fading effects.
- Last but not least, the overall CSS style could be improved and we can re-design or enhance the webpage theme including each element/section which make the information transition easier and quicker to the users so they do not have to just read the text, but also have a better visual and graphic information processing (which is quicker than reading).