inwonakng / surveygenerator Goto Github PK

Semantic web application in collaboration with IBM that extended MIT’s moral machine by allowing users to create and answer ethical questions with the utilization of machine learning microservices

Python 34.18% HTML 1.63% CSS 10.62% JavaScript 52.85% Dockerfile 0.72%

machine-learning django react mit rpi ibm watson moral ethical pwa

surveygenerator's Introduction

Survey Generator

Development setup

Requirements:

MySQL (docker is fine)
python3 (venv usage is heavily encouraged)
npm

VSCode is the recommended editor for this project.

please DO NOT use git through the command line. This will be painful for everyone

Installation (backend only)

Backend only

Since custom package and specific package version are used in this project, we recommend using venv for development so your local python env won't be polluted.

Configure MySQL

Using Docker (recommended)

docker build -t reactapp -f Dockerfile .

docker-compose -f docker-compose.dev.yml up -d

This command will run a latest mysql w/ combination root/password on 127.0.0.1:3306 and phpmyadmin on 127.0.0.1:8088. You may use this web interface to manage the database.

Remove/Recreate Mysql

docker-compose -f docker-compose.dev.yml down

And recreate using the first command.

Manually installing and setting up MySQL

linux:

sudo apt install mysql-server

If you install the server any other way and are prompted with a password, leave the field blank. If you set the password, you may not need to do the step below.

Fixing privilege

After running MySQL with admin priveges (sudo), run the following queries to reset the root password.

DROP USER 'root'@'%';
CREATE USER 'root'@'%' IDENTIFIED BY '';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;
CREATE DATABASE mysqldb

venv

You should always use venv! This will help us isolate the dependencies of our project to make for easier installation

Before you start the setup, make sure you are inside the 'backend/' directory. If not, make sure to add your venv directory to the gitignore file.

python3 -m venv venv

The above command will generate venv under current directory

Enter Virtualenv

source venv/bin/activate

<venv>\Scripts\activate.bat

<venv>\Scripts\Activate.ps1

On windows, try to stick to powershell, which is the default vscode terminal.

You should now see (venv) in front of your command ine

Exit Virtualenv

deactivate

Dependencies

python3 -m pip install -r requirements.txt

before you runs this commmand, run which python3 (bash) or where python3 (windows) to make sure that you are installing to your venv!

Add new dependency

After adding new dependency, run the following command to lock requirements.txt

pip freeze > requirements.txt

Database setup (backend only)

After model changes (backend changes that need to be reflected in the database)

migrate the latest model changes to the database by running the following commands

python manage.py makemigrations
python manage.py migrate

If you run in to errors, either go in the docker shell or command line and run the following query to reset the database

DROP DATABASE surgey_generator_db; CREATE DATABASE surgey_generator_db;

Migration & Start Server

cd ethicssite
python3 manage.py migrate
python3 manage.py createcachetable

and start server by

python3 manage.py runserver

Installation & Run (frontend only)

Frontend only

Head to the root of the project and run the following:

npm install
cd src
npm run start

surveygenerator's People

Contributors

Watchers

surveygenerator's Issues

Survey Taking page

Page for the user to take a survey.

Each page contains a question and the following options.

For score inputs to the survey, use slider bars for now
(this should be a separate component. We want to allow the user to change different inputs later on)

S3 IT Deployment

Utilized for storing PDF documents and other information

Logo

I can splurge some $$ on a logo b/c why not?

GitHub Actions

tbd

My Survey Details page

This is the page that a user is taken to when they pick a survey from My Surveys page.

Will have statistics about the page, as well as downloadable information.

ChartJS goes here! (again, should be separate components, we want user to be able to switch to different types of charts/data)

POST - Create Survey

When a survey is submitted, create the model object in the backend.

The response that'd be received from the frontend looks like this:
(can also be viewed here)

{
        "prompt": "This is a test",
        "survey_title": "Test Survey",
        "user": {
            "username": "user",
            "email": null,
            "creation_time": "2021-06-17T01:55:02.146779Z"
        },
        "number_of_answers": 0,
        "creation_time": "2021-06-17T01:59:37.595032Z",
        "questions": [
            {
                "question": "Assign scores to the options",
                "options": [
                    {
                        "name": "Option 1",
                        "text": "A car",
                        "score": null
                    },
                    {
                        "name": "Option 2",
                        "text": "A boat",
                        "score": null
                    }
                ]
            }
        ]
    }

Netlify Deployment

Frontend code should be ran on a Netlify instance

Settings

User settings can be changed here

For now:
Allow user to change/choose which information to share with the application

Name
Institution
Email
Phone (?)

Sign Up

Username - Required
Email - Required
Password - Required
Password Confirmation - Required
Phone Number - Optional

WebAIM Evaluation

Always always always, make sure there are no contrast errors/other errors

Tool:
https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

View taken surveys

Example for old app:

This functions the same as the 'surveys' or 'my surveys' page. For now clicking each survey does not have to lead to anything

Surveys

View all surveys

Green - Surveys that haven't been completed by the logged in user
Red - Surveys that have been completed by the logged in user
Black - Surveys that have been hidden by the logged in user

Redis - Cache

Caching

Survey Creation Page

Page for creating survey!
First finish vanilla text input
i.e.:
Question 1: 'What car?'
Option 1: 'Black car'
Option 2: 'Red car'
..
Question 2: 'What food?'
....

etc

Then do 'feature based' input
This is a bit more complicated

First input: list of features an option should have
Using this list of features, create input for each feature value

ex:
list of features: 'Age' 'Gender' 'Height' ...

Q1: Who would you hire?
Option1: 'Age':14, 'Gender':'Male', 'Height':71
Option2: 'Age':54, 'Gender':'Female','Height':60
....

https://dribbble.com/search/login

Administrative Dashboard

Administrative dashboard for school administrators/IBM researchers/developers

Redis - Message Brokerage

Message brokerage

Data compression
Monthly emails
SMS texts

Fetching (GET)
Storing (POST)
Updating (PATCH)
Deleting (DELETE)

Get all surveys
Get all user-made surveys (for /mysurveys)

Create Survey page

Page for creating survey
Necessary inputs:

Title
Description
Option inputs -> Allow adding more options

The buttons on above title (generate/set my own) are not needed

Left column:

Home
My Surveys
Forum
Settings

Middle column:
Contains the content of a specific page (home/my surveys/forum/settings)

Right column:

Trending questions
Ask your question
Help us improve
System notifications

Job Queue

Data compression
Monthly emails
SMS texts

IMGIX Integration

Optimization and ease

Documentation

As more developers come in or if we need to pass this onto some other entity, it'd be beneficial for the other party to have some form of documentation to setup the server and frontend instances