WordGo-Janpanese Learning Website

My Approach: A language learning website that designs a learning and review plan for each user. Social functions available for users to learn together. Fun quiz to help learning

Features:
1.Remember: 
        Generate a list of words every day according user's plan
        Vocab Flash Cards with dynamic interactions
        Special algorithm to decide the frequency of appearance of eacy word
2.Share & My Profile:
        Social blogs with Posts, Comments, Follow System
        Profile showing the user's posts, personal information, language level and current word lists

3.Quiz:
        10 random multiple choices with time limit
        allow user to review the wrong words later

4.My Word:
        users can manage their own word lists by adding new word, and adapting
        the rank of exited words.

Tech Used:
        Python-flask, SQLAlchemy, JavaScript, html
        more specific modules listed in /requirements/common.txt

Whole Structure

1. Immediate Interaction:
        Interaction helps learning. SO there are many interactive interactions in my App.
        The content and structure of html page will change according to user's actions. 
        This is based on real-time Ajax messages and JQuery element selecter.

2. Front-End UI Design:
        Thanks Materialize! This is awesome!
        I also changed some design in the orginal Materialize.css to make it easier to use
        for my own web. (Chanage the default color set, button set and etc.)
        I also add some features provided only in Bootstrap.


3. Back-End:
        Flask: 
            The way that Flask use decoraters to mark routes is so smart:))))
        SQLAlchemy:
            SQLAlchemy helps me to write pythonically instead of writing directly in SQL
            the structure it self is complicated. More details available when comes to 
            specific features.

Remember:

database structure: User <-related-> DailyPlan --record--> wordlist_id
                    User <-related-> WordList --record--> Vocabulary_id
                    familiary recod: wordlist.rank
                    learnt record: dailyplan.mark

Front-End:  
    1. change the content of html (show/hide word cards) :                             
            JQuery to get change the attributes of html dom

    2. move to next word
            using JavaScript to keep track of the user's choice to see if they know the word
            send the user's choice to bankend via Ajax
            get the back response data from the backend
            call JQuery function to change the innerHTML of html dom into the new data got from the backend
Back-End:
    1. makeSpecific plan:
            when everyday first login, call makeDailyPlan --> planNewWord, planOldWord
            first check if the user has got a plan in DailyPlan model
            if not, count the number of old and new words
            choose old words from the user's own wordlist
            choose new words from the public Vocabulary database
            record the plan
    2. using mark to mark if the user has finished the study
    3. while user clicks different buttons in the front-end, it will trigger 
       different functions that will modify the database.( upgrade, downgrade, mark)
    4. if mark.count()==user.plan(), user has finished today's study

Share & My Profile:

This part is mostly based on "Flask Web Development"
But there are some adaptions

DataBase Structure: User <-related-> Role, Posts, Comments
                    Follow <-related-> Follow


Front-End:
    1. adapted macros and quick-form structure for better and easier UI
            the grammar of macro seems quite different from the other languages. For 
            example, loops cannot get values out side itself, which means it is difficult
            to keep track of a changing variable on the page. 
Back-End:
    1. Basic SQL adaptions based on the messages sent from the front-end/

Quiz:

front-end JS structure: click-->right/wrong--askToMove-->nexQustion

Front-End:
    1. timer: 
            based on JS timing API learnt from W3school, I can call some functions 
            directly. So when time is out, it will stop timing and call the moveon JS funtion
    2. hightlight indicater:
            JQuery changes the style of "clicked" dom
            Basically, the algorythm here is to compare the innerHTML of the clicked object
            with  the hidden answer. If it is the same, set the  background color to green and red otherwise. When the timer is set to the default value, the Jquery will set all
            the style back to white.
    3. QuizResult and further review:
            if the user fail to provide the right answer, the Jquery will add current word 
            to a hidden class in the page with a href that will call "Add" function,
            which adds the word to My Word.
Back-End:
    1. All the questions are randomly generated
           Query 4 words from the public Vocabulary and assign their meanings to A,B,C,D
           and choose one word ramdomly as the question, send the question and choices to the template in JSON form. 
    2. Users can add their mistakes to their own lists at the end of the quiz.

My Words Front-End: 1. arrows changing the rank bind 'click' and functions from Javascript so that the Ajax can send right data to the back-end. 2. using sub-nav bar with two tabs to switch between AddWord and MyWord still some Jquery and html magic 3. submit new word self-defined Flask-wft quick forms Back-End: 1. According to the request, the back-end will adapt the database filtered by the wordid

What's next for WordGo-Janpanese Learning Website

 1. Better database management
 2. Machine Learning Algorithm 
 3. Better User Experience

Built With

• materialize
• python