LearnFlow

Explore the docs »
Report Bug
Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Element expenation
• MongoDB schema
• Python Route
5. Contact
6. License

About The Project

LearnFlow is the new way to learn programming through flow chart. LearnFlow is a project developed for a modern Web Technologies course, attended at University of Naples "Parthenope". A demo of the project and a video (mock-idea) has been presented at the Hackathon "Gamification in Programming Education".

Built With

This project was built using various programming lenguages, technologies, frameworks and libraries.

Client-Side

• HTML and CSS with Bootstrap for a better wab app approach experience
• JavaScript as scripting lenguage to make a dynamic page and handle of events (such us button click, page reload, etc...)
  • JQuery as JS library to help and simplify the manipulation and management of DOM standing the browsers compatibility "write less do more".
  • AJAX for the creation of interactive web applications, based on an exchange of data in the background between web browsers and, thus, allowing the dynamic updating of a web page without reloading by the user.

Server-Side

• Pyton choice as a server-side scripting tool was motivated considering the typical architecture of a current web application using flask.
  • Flask it is a microframework for the realization of web apps which it is possible to return the output of the function associated with a specific url in the form of html, string or json using jinja2 as the template engine
• MongoDB it is a non-relational dbms oriented to documents for data storage.
  • PyMongo library to link with the DB to python/flask we use the

Getting Started

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• Web Browser to show the application wab

Install a browser such as Chrome, Edge or Firefox

• Pyhton to start a local server

To install python follow this link To manipolate better the code we raccomand PyCharm

Installation

1. Clone the repo on a specific folder

$ git clone https://github.com/velvi-stud/LearnFlow

2. Activate the virtual environment python (venv)

$ .\venv\Scripts\activate

Eventually, you can find all libreries listed into file "requirement.txt" in a folder

$ pip install -r requirements.txt

3. Make sure your internet connection is on (for DB connection) and start Flask (on port 5000)

$ flask run -p 5000

4. After that the terminal will show you an address (usually 127.0.0.1:5000), where you can copy and paste into url bar of the browser. That link will show you the web app FlowChart.

Usage

When web app is open you can see the index page that show you a brief introduction on the purpose of LearnFlow and can allow you to start learning how algorithm works through flow charts. If you already logged, you will see directly the main game page, otherwise you have to sing in or sing up to be identified. When you are in a main game page you can see various information:

• User profile that show you actual level and score done
• Rank list that show a list of users with the highest score
• Levels to complete
  • Each level will be divided into three parts:
    • Theory
    • Multiple choice questions
    • Flow chart to compose To unlock levels you have to achieve score reachable compiling the exercise.

Element explanation

MongoDB schema

The Database used LearnFlow_mongoDB is composed by two collection

• LF_login is the first element of collection that store the login data such as:
  • Email
  • Username
  • Password
• LF_user_info is the second collection and it's used to store user game info:
  • Username
  • Level
  • Score

Python Route

Routes decorator used in python are used for:

• @app.route('/') return the main html page (index.html)
  
  
• @app.route('/registration', methods=['POST', 'GET']) route used to return registration page and logic behind it. If sent data are valid, those will be stored into database and user will be redirected to a login page, otherwise will return registration page with the error message.
  
  
• @app.route('/login/', methods=['GET', 'POST']) route used to return login page and logic behind it. to return the page main game page in case of success and user data info are saved into session otherwise return login page with the error message.
  
  
• @app.route('/MainGame/', methods=['GET', 'POST']) route used to return main game page and logic behind it. If user is already logged (session variables are setted) then return main game page, otherwhise the user will be redirected to login page
  
  
• @app.route('/logout') routes used to clear session variables and redirect to login page
  
  
• @app.route('/update_data/<username>/<lvl>/<pnt>', methods=['POST']) it is a route used to update user data on database
  
  
• @app.route('/get_top', methods=['GET']) route used to return a json file containing the users with the highest score
  
  
• @app.route('/exercise_flow_chart/<pt>/<pnt>', methods=['GET']) route used to return the flow chart exercise page included the json exercise (in case of user already logged in, otherwise will redirect to login)
  
  
• @app.route('/exercise_multiple_question/<pt>/<pnt>', methods=['GET']) route used to return the multiple choice exercise page included the json exercise (in case of user already logged in, otherwise will redirect to login)
  
  
• @app.route('/theory/<pt>', methods=['GET']) route used to return the theory page (in case of user already logged in, otherwise will redirect to login)
  
  
• @app.route('/end_exercise/<pnt>', methods=['GET']) route used to return the endig exercises page that show the points done making exercises and the actual score (updated)

Contact

Romeo Velvi - [email protected]
Pasquale Casoria - [email protected]
Crescenzo Bencivenga - [email protected]

Project Link: https://github.com/velvi-stud/LearnFlow-v2

License

Apache license 2.0