Online Office Hours Queue

About

Online-OH-Queue is a web app for hosting online office hours. Students have the ability to sign up with a question and TAs can view the order of students signed up and answer their questions in a first in first out basis.

Table of Contents

Features
Setup
Office Hours Queue Setup
Admin Panel
Teaching Assistants
Pages
Students
Development
API

Features

• API backend
• Ability for students to edit and delete their own questions
• Administrative control over queues, users, and questions
• Average wait time for office hours queues
• Comprehensive TA answering page
• DDOS/brute force protection
• Easy deploy with one button Heroku deployment
• Email verification
• Mobile and desktop display support
• Modern frontend written in React
• Password reset
• Real time updates to office hours queues using sockets (no need to refresh)
• Statistics about students, TAs, and traffic
• Strongly Tested (> 100 Tests cases and > 90% code coverage)
• Summaries for TAs preparing for their office hours
• Support for any number of office hours queues
• Support for email registration only in a school domain
• Support for holding users to one question per queue
• Theme customization via environment variables

Setup

Heroku

To setup Online-OH-Queue, press the button above that will create a heroku application. Make sure you have a heroku account so you can make the website.

Upon clicking on the button, you will be prompted to enter information about the instance of Online-OH-Queue. Below are the highlighted areas of interest for setting up the office hours queue:

App Name

Enter the name of the heroku app. This will become your domain for the herokuapp. For example, if your app name is cisohqueue, then your website will be cisohqueue.herokuapp.com.

Configuration Variables

These variables will make your instance of Online-OH-Queue unique to your course. You must enter information for each field. Enter reasonable values for each field. This web app is not prepared to handle ridiculous inputs to its configuration variables. Each field is described below:

COURSE_TITLE

This is the name of the corse.
Example: CIS 121

DEFAULT_FROM_EMAIL

This is the email address that is the sender for all site wide emails Example: cis121oh@gmail.com

DOMAIN_NAME

This is the name of the website URL you will be running the website on. Include the full name as if you were entering it into a web browser. Exclude any http or https
Example: cisohqueue.herokuapp.com or ohqueue.com

EMAIL_HOST

This is the mame of the email host you will be using. Email hosting is important because password reset and account activation emails are all sent through an email host. The default value is the host for sendgrid.
Example: smtp.sendgrid.net

NOTE: If you choose to use sendgrid, which we recommend, once you create an account, navigate to app.sendgrid.com/guide/integrate/langs/smtp and you will see the fields Server, Username, and Password which all correspond to the three email configuration variables that you will have to set.

EMAIL_USERNAME

Username for your email provider
Example: apikey

EMAIL_PASSWORD

Password for your email provider

FAVICON_URL

Link to a .ico file for the site favicon

MAX_WAIT_TIME

The maximum time that will display for average wait time in queues.

OFFICE_HOURS_URL

URL to office hours schedule.

PRIMARY_THEME_COLOR

By default, the Online-OH-Queue comes with a blue color theme. This can be changed. This configuration variable represents the main color of the website. You must enter a valid hex color with the hashtag. If you do not want to deal with this, then leave it to the default value (the blue).
Example: #445B73

QUEUE_TIME_ZONE

This field tells the server which timezone it should operate in. The default value is America/New_York which represents New York time. A full list of all the timezones can be found here: Time Zones
Example: America/New_York

SECRET_KEY

This is automatically generated so you do not need to worry about it.

START_OF_WEEK

This is the day of the week that starts the office hours weekly cycle. In other words, this value represents the day of the week when office hours start getting questions about a different homework or problem set. An example would be if homeworks were due on a weekly basis on Sunday, then Monday would be the start of the week with respect to office hours.
Example: Monday

Deploying the Application

When you enter everything, click Deploy App. Then click Manage App to do some additional set up.

Create the superuser

Each instance of the application needs to have a superuser or an admin to make other users admins and other users TAs. To create the first superuser, navigate to the drop down menu in the top right labeled more. Select the run console option and enter the following command:
python manage.py createsuperuser
You will then be prompted to enter the information for this account. The username can be whatever you want. Usually, it is a good idea to make it the same as your email. Once it says that the superuser was created successfully, you can exit the console window. Do not lose this information.

Changing the Heroku Plan

You will likely need at least a hobby plan to be able to handle the traffic of your course. You can do so by going in the resources tab and clicking Change Dyno Type to Hobby. It will cost 7 dollars a month.

You may also consider changing the plan for the Redis server. The Redis server is responsible for the sockets and updating the website without the need to refresh. The free version supports 20 concurrent connections. Upgrading to 15 dollars a month will allow 40 concurrent connections. You may do this under the resources tab in Heroku. Under Add-ons, select Heroku Redis and select Premium 0.

Changing the Site Name

We need to tell the server what domain we are using so it can properly send password reset and account confirmation emails. First, navigate to /admin and enter the credentials of the superuser you just created.
Next, on the left hand side, click on Sites. Then, click on example.com. Change both fields to match what you put for the DOMAIN_NAME configuration variable from earlier including the preceding http:// or https://. Finally, click Save

Next, you will need to set up Office Hours Queues. See the next section regarding that set up.

OHQueueSetUp

Online-OH-Queue supports the creation of multiple queues. To create a queue, navigate to /admin, log in with the superuser credentials you created earlier or with another admin account.

Then, click on + Add in the OHQUEUE section.
Ignore all fields except the ones mentioned below:
Enter a name for the queue. This name will be visible to all students.
Enter a description for the queue. This description will be visible to all students.
Times Open Section:
These fields are used to specify when the queue is open for students to ask questions. You must enter a string in the following format for each field:
Example: 2:00pm-4:00pm;5:00pm-8:00pm
In the queue above, office hours are held 2pm to 4pm and 5pm to 8pm on the day that the value is entered.
Notes on the format:
If you are not holding office hours on a day, then leave the field blank.
When specifying times, use the format above: hour:minuteam/pm. First indicate the hour. Next, a colon followed by the minutes. Next, either am or pm. The dash indicates a time range. So in the case of 2:00pm-4:00pm the queue remains open from 2pm to 4pm. Simply typing 2pm-4pm will crash the app. You must include the minutes.
A semicolon followed by another time range is used if the queue is not open during a continuous time interval. See the value above for an example
Failure to adhere to the time convention will make the Office Hours Queue not appear or may even bring up a failure error on the office hours page!

The field show_ewt is a boolean field. When set to true, the queue will display the estimated wait time. When false, it will not.

Click save in the bottom right corner when done.

Admin-Panel

In /admin you can also do the following:

Make users TAs and Admins

To that, navigate to the users section. Select the user who you wish to be a TA. Click the checkbox that says Teaching Assistant then click save in the bottom right corner.

To make a user an admin, you do the same process except check the superuser_status box.

Make or manage office hours queues

See the OHQueueSetUp section above.

Extra Notes

Do not worry about the Auth Token section.

Teaching-Assistants

As a teaching assistant, you will have two main pages to visit: /summary and /answer.
The summary page gives you all the questions asked in the weekly office hours cycle. You can use this to better prepare for office hours.
The answer page allows you to view all the queues in the queues. Answer questions in the queue which means to remove students from the queue. Finally, you have the power to manually open and close queues, ignoring the predefined schedule. TAs can also delete questions from queues.

Students

Students can login or signup at /. Once logged in, they can view all the queues at /. The page will allow users to ask questions on any of the queues. Students may only ask one question. Therefore, once students ask their question, the option to ask another question will disappear. Students have the ability to edit their question along with deleting it.

Pages

This section describes each page and what it offers.

/
The root directory is either a landing page for users to sign up or log in if the user is not authenticated. Or the page serves as a listing of available office hour queues if the user is authenticated.
/login
Where the user logs in.

/signup
Where the user makes an account

/admin
Administrative portal. Only admins can see the portal. Here admins can create and manage office hours queues and change the permissions of users.

/summary
This page will display all the questions asked in the office hours cycle week. If you are a TA, questions will appear. If you are not a TA, no questions will be populated.

/<queuename>/ask
Ask a question for the given queue. Only authenticated users can do this. In addition, users can only ask one question at a time across all queues.

/answer
This page is only visible to TAs. It allows you to view all queues in a queue and "answer" questions which will remove students from the queue. You also have the option to close and open queues manually.

/statistics
This page is only visible to admins. It displays statistics regarding queues, students, and TAs.

Development

To develop and debug Online-OH-Queue, do the following steps:

1. Install Redis: Redis install guide
2. In a separate terminal window run: redis-server. It should be running on port 6379. The app will not work if it is not running on port 6379
3. Make sure you have node and npm installed
4. Make sure you have a python 3 version installed
5. Clone the repository: git clone https://github.com/mike2151/Online-OH-queue.git
6. Go into the directory: cd Online-OH-queue
7. Optionally set up a virtualenv to develop this app
8. Run pip install -r requirements.txt
9. Run npm install
10. Navigate to ohq/settings.py and set the DEBUG variable at the top of the file to True
11. Run npm run build
12. Run python manage.py makemigrations
13. Run python manage.py migrate
14. Run python manage.py runserver
15. Create a super user: python manage.py createsuperuser and then navigate to /admin. See the instructions in set up above.

An instance of Online-OH-Queue should be running in port 8000

Notes About Development: In development, emails are sent in the terminal so do not expect any emails to end up in your inbox.

If you make any changes to the UI, you must run npm run build in order for the changes to be visible. The app compiles react and then serves the compiled react.

When you push to github, make sure that the .keep files remain in build/static/css and build/static/js You should run touch build/static/css/.keep ; touch build/static/js/.keep before you commit to make sure the files are there. Deleting the .keep files will cause the production version of the app to fail.

API

The following describes the endpoints for the API:

Get Website Theme

Gets the theme and other variables like the course name for the website

URL	/api/v1/theme/
HTTP Methods	GET
Permission	Any
Response Formats	JSON
Parameters	Name Default Description Example Values

Register User

Register a user for the site

URL	/api/v1/users/register/
HTTP Methods	POST
Permission	Any
Response Formats	JSON
Parameters	Name Default Description Example Values email Required School email of the user bob@seas.upenn.edu first_name Required First name of the user bob last_name Required Last name of the user smith password Required Password of the user password123

Login User

Logs in a user to the site

URL	/api/v1/users/login/
HTTP Methods	POST
Permission	Any
Response Formats	JSON
Return	Returns token , an authentication token for the user on success
Parameters	Name Default Description Example Values email Required School email of the user bob@seas.upenn.edu password Required Password of the user password123

Is User a TA

Returns whether or not the user is a TA

URL	/api/v1/users/is_ta/
HTTP Methods	GET
Permission	Any
Response Formats	JSON
Return	Returns whether or not the current authenticated user is a TA
Parameters	Name Default Description Example Values

Keeps Office Hours Queue Open

Keeps Office Hours Queue Open

URL	/api/v1/queue/open/
HTTP Methods	POST
Response Formats	JSON
Permission	TA
Parameters	Name Default Description Example Values queue Required Name of the office hours queue 2 Minute Question Queue

Closes Office Hours Queue

Closes Office Hours Queue

URL	/api/v1/queue/close/
HTTP Methods	POST
Response Formats	JSON
Permission	TA
Parameters	Name Default Description Example Values queue Required Name of the office hours queue 2 Minute Question Queue

Ask A Question

Creates a question for the office hours queue

URL	/api/v1/queue/<name>/ask
HTTP Methods	POST
Response Formats	JSON
Permission	Authenticated
Parameters	Name Default Description Example Values name Required - URL parameter Name of the office hours queue 2-minute-office-hours-queue description Required The question itself (limited to 280 chars) Question.

Edit A Question

Edits a question

URL	/api/v1/queue/question/<question_id>/edit
HTTP Methods	POST
Response Formats	JSON
Permission	Owner of question
Parameters	Name Default Description Example Values question_id Required - URL parameter Question id 5 description Required The question itself (limited to 280 chars) Question.

Get Current Office Hour Queues

Returns all of the active office hours queues along with their question

URL	/api/v1/queue/list/
HTTP Methods	GET
Permission	Authenticated
Response Formats	JSON
Return	Returns list of office queue objects
Parameters	Name Default Description Example Values

Get Current Office Hour Queues - TA

Returns all of the active office hours queues with more details for the TA

URL	/api/v1/queue/list_ta
HTTP Methods	GET
Permission	TA
Response Formats	JSON
Return	Returns list of office queue objects
Parameters	Name Default Description Example Values

Answer a question

Answers a question

URL	/api/v1/questions/answer
HTTP Methods	POST
Permission	TA
Response Formats	JSON
Parameters	Name Default Description Example Values queue Required Name of the office hours queue that the question is in 2-minute-office-hours-queue question_id Required Primary key of the question 5

Delete a question

Deletes a question

URL	/api/v1/questions/delete
HTTP Methods	POST
Permission	TA or user who posted
Response Formats	JSON
Parameters	Name Default Description Example Values question_id Required Primary key of the question 5

Question Details

Gets the details regarding a question

URL	/api/v1/questions/detail/<question_id>
HTTP Methods	POST
Permission	User who posted
Response Formats	JSON
Parameters	Name Default Description Example Values question_id Required Primary key of the question 5

Current Week's Questions

Gets the current week's questions at office hours to help TA's prepare for office hours

URL	/api/v1/summary/
HTTP Methods	GET
Permission	TA
Response Formats	JSON
Return	Returns list of questions
Parameters	Name Default Description Example Values

Number of Questions per Student

Gets the number of questions asked by each student

URL	/api/v1/stats/frequentasker
HTTP Methods	GET
Permission	Admin
Response Formats	JSON
Return	Returns JSON, keys are student emails, values are #questions
Parameters	Name Default Description Example Values

Number of Answers per TA

Gets the number of questions answered by each TA

URL	/api/v1/stats/frequentanswer
HTTP Methods	GET
Permission	Admin
Response Formats	JSON
Return	Returns JSON, value field of JSON: array of objects, each object has 'email', 'fname' (first name), 'lname' (last name), and 'count' (# of questions) field
Parameters	Name Default Description Example Values

Time Series of a Student's Questions

Gets the number of questions asked by a particular student on each day

URL	/api/v1/stats/<email>/questions/
HTTP Methods	GET
Permission	Admin
Response Formats	JSON
Return	Returns JSON, 'value' field of JSON: keys are date strings, values are #questions
Parameters	Name Default Description Example Values

List of Students Signed Up

Gets a list of all the students who have signed up for the office hours queue

URL	/api/v1/stats/getstudents/
HTTP Methods	GET
Permission	Admin
Response Formats	JSON
Return	Returns JSON, 'value' field of JSON: array of emails of students (strings)
Parameters	Name Default Description Example Values

Traffic at Each Office Hours Time Slot

Gets the number of questions asked at each hour of office hours

URL	/api/v1/stats/traffictime/
HTTP Methods	GET
Permission	Admin
Response Formats	JSON
Return	Returns JSON, 'value' field of JSON: keys are timeslot strings, values are #questions
Parameters	Name Default Description Example Values