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.
Features
Setup
Office Hours Queue Setup
Admin Panel
Teaching Assistants
Pages
Students
Development
API
- 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
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:
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.
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:
This is the name of the corse.
Example: CIS 121
This is the email address that is the sender for all site wide emails
Example: [email protected]
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
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.
Username for your email provider
Example: apikey
Password for your email provider
Link to a .ico file for the site favicon
The maximum time that will display for average wait time in queues.
URL to office hours schedule.
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
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
This is automatically generated so you do not need to worry about it.
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
When you enter everything, click Deploy App. Then click Manage App to do some additional set up.
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.
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.
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.
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.
In /admin you can also do the following:
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.
See the OHQueueSetUp section above.
Do not worry about the Auth Token section.
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 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.
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.
To develop and debug Online-OH-Queue, do the following steps:
- Install Redis: Redis install guide
- 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 - Make sure you have node and npm installed
- Make sure you have a python 3 version installed
- Clone the repository:
git clone https://github.com/mike2151/Online-OH-queue.git - Go into the directory:
cd Online-OH-queue - Optionally set up a virtualenv to develop this app
- Run
pip install -r requirements.txt - Run
npm install - Navigate to
ohq/settings.pyand set the DEBUG variable at the top of the file toTrue - Run
npm run build - Run
python manage.py makemigrations - Run
python manage.py migrate - Run
python manage.py runserver - Create a super user:
python manage.py createsuperuserand 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.
The following describes the endpoints for the API:
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 |
|
Register a user for the site
| URL | /api/v1/users/register/ |
||||||||||||||||||||
| HTTP Methods | POST | ||||||||||||||||||||
| Permission | Any | ||||||||||||||||||||
| Response Formats | JSON | ||||||||||||||||||||
| Parameters |
|
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 |
|
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 |
|
Keeps Office Hours Queue Open
| URL | /api/v1/queue/open/ |
||||||||
| HTTP Methods | POST | ||||||||
| Response Formats | JSON | ||||||||
| Permission | TA | ||||||||
| Parameters |
|
Closes Office Hours Queue
| URL | /api/v1/queue/close/ |
||||||||
| HTTP Methods | POST | ||||||||
| Response Formats | JSON | ||||||||
| Permission | TA | ||||||||
| Parameters |
|
Creates a question for the office hours queue
| URL | /api/v1/queue/<name>/ask |
||||||||||||
| HTTP Methods | POST | ||||||||||||
| Response Formats | JSON | ||||||||||||
| Permission | Authenticated | ||||||||||||
| Parameters |
|
Edits a question
| URL | /api/v1/queue/question/<question_id>/edit |
||||||||||||
| HTTP Methods | POST | ||||||||||||
| Response Formats | JSON | ||||||||||||
| Permission | Owner of question | ||||||||||||
| Parameters |
|
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 |
|
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 |
|
Answers a question
| URL | /api/v1/questions/answer |
||||||||||||
| HTTP Methods | POST | ||||||||||||
| Permission | TA | ||||||||||||
| Response Formats | JSON | ||||||||||||
| Parameters |
|
Deletes a question
| URL | /api/v1/questions/delete |
||||||||
| HTTP Methods | POST | ||||||||
| Permission | TA or user who posted | ||||||||
| Response Formats | JSON | ||||||||
| Parameters |
|
Gets the details regarding a question
| URL | /api/v1/questions/detail/<question_id> |
||||||||
| HTTP Methods | POST | ||||||||
| Permission | User who posted | ||||||||
| Response Formats | JSON | ||||||||
| Parameters |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|