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.
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
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.
This is the email address that is the sender for all site wide emails
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
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.
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
Password which all correspond to the three email configuration variables that you will have to set.
Username for your email provider
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).
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
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.
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
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
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:
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!
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 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
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:
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.
Where the user logs in.
Where the user makes an account
Administrative portal. Only admins can see the portal. Here admins can create and manage office hours queues and change the permissions of users.
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.
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.
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.
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:
redis-server. It should be running on port 6379. The app will not work if it is not running on port 6379
git clone https://github.com/mike2151/Online-OH-queue.git
pip install -r requirements.txt
ohq/settings.pyand set the DEBUG variable at the top of the file to
npm run build
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
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
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 websiteURL
/api/v1/theme/HTTP Methods GET Permission Any Response Formats JSON Parameters Name Default Description Example Values
Register a user for the siteURL
/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 firstname.lastname@example.org 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
Logs in a user to the siteURL
/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 email@example.com password Required Password of the user password123
Returns whether or not the user is a TAURL
/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 OpenURL
/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 QueueURL
/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
Creates a question for the office hours queueURL
/api/v1/queue/<name>/askHTTP 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.
Edits a questionURL
/api/v1/queue/question/<question_id>/editHTTP 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.
Returns all of the active office hours queues along with their questionURL
/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
Returns all of the active office hours queues with more details for the TAURL
/api/v1/queue/list_taHTTP Methods GET Permission TA Response Formats JSON Return Returns list of office queue objects Parameters Name Default Description Example Values
Answers a questionURL
/api/v1/questions/answerHTTP 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
Deletes a questionURL
/api/v1/questions/deleteHTTP 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
Gets the details regarding a questionURL
/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
Gets the current week's questions at office hours to help TA's prepare for office hoursURL
/api/v1/summary/HTTP Methods GET Permission TA Response Formats JSON Return Returns list of questions Parameters Name Default Description Example Values
Gets the number of questions asked by each studentURL
/api/v1/stats/frequentaskerHTTP Methods GET Permission Admin Response Formats JSON Return Returns JSON, keys are student emails, values are #questions Parameters Name Default Description Example Values
Gets the number of questions answered by each TAURL
/api/v1/stats/frequentanswerHTTP 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
Gets the number of questions asked by a particular student on each dayURL
/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
Gets a list of all the students who have signed up for the office hours queueURL
/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
Gets the number of questions asked at each hour of office hoursURL
/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