No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 2 commits ahead, 5 commits behind tgturner:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Welcome to KitHub

Check out the live demo here

Gradebook overview:

Click on the "Gradebook" link in the navbar to get to the gradebook app. Here you can find everything you need to keep track of classes and grades. Add a course by clicking the "add course" button. After adding a course, students, and assignments, click in a cell in the spreadsheet to edit a student's score on an assignment. Scores default to "-1", indicating that a score should not be considered in calculations of a student's or assignment's grades.

Add a few students and scores, then click on an assignment's name in the header of the table. A modal window will appear with information about the assignment. From here you can also apply a curve to an assignment's scores. Choose between two different types of curves and watch the data visualizations change in real time as you modify a curve. To save a curve on an assignment, click the "Apply Curve" button. Clicking the assignment name or points possible will allow you to change these values.

Visualizations of each student's grades are viewable in the modal opened by the "Details" link in the rightmost column in the table. You can also add notes on a student. Now click on the "Gradebook" link in the navbar to return to the course list page. Hover over the icon of a line graph to see a visualization of class performance over time. If a class did exceptionally well or exceptionally poorly on an assignment, you should be able to see it from here and apply curves appropriately. Grades in the line graph are calculated after the curve, so your changes will be immediately apparent. On the page for an individual course, you can send emails to students who are failing by clicking on the "Notifications" button.

Gradebook tech

KitHub is designed for teachers. It is a platform for sharing and colloborating on lesson plans, an online gradebook that includes tools not just for tracking student scores, but also visualizing class data and applying grading curves, and finally a scheduling tool for assigning lessons to different class periods. It consists of three separate AngularJS apps backed by a Ruby on Rails API.

Lesson plans

Each user can post any number of lesson plans, formatted in Markdown. A user can create a new blank plan, or, if preferred, upload a Word document that will be converted.

On the lesson plan page, users may click 'Edit' to alter the contents of the plan, change attributes, and upload additional materials associated with the project. Clicking the 'Save' button commits the changes. On the settings page, a user may delete the lesson or download a copy as a Word document.

Users may also find the lesson plans of others users and fork them. After making edits, these changes may submitted to the original lesson owner, who can then accept or reject the changes. (These contributions are noted on a user's home page.) When the original lesson changes, teachers who have forked that lesson will be prompted to accept or reject the changes in their own copy.


The gradebook displays a list of courses for the teacher. Hovering the mouse over a course displays a graph of the average grade for each assignment. A teacher can add new courses by clicking the "Create new course" button.

Clicking a summary shows the course's page. A user can click the title of the course to see graphs for data about the course. A teacher may also add students and assignments to the course. Once an assignment is added, clicking its name at the top of the column will bring up data about that assignment and allow a curve to be applied.

The 'Notifications' button allows the teacher to send out emails to students who have a particularly high or low average.

Courses Page


This page has a list of the courses added in the gradebook. The 'Edit Course Days' button allows a teacher to set the start and end dates for the course and the days of the week the class will meet. Once dates are set, the 'Add Lesson Plans' button brings up a calendar page. Here, lesson plans you have added may be dragged onto a calendar day to assign the lesson to that particular date.

Technical Highlights

Converting A Word Document

Uploading on the front end is done using the Angular Upload library. Once a file is verified as the correct MIME type, it is sent in a request to the Rails API, which uses the uploaded temporary file and Pandoc, a command line interface conversion library uploaded to Heroku as a buildpack, to produce a Markdown version of the file. This version is saved as the contents of the new lesson plan. Finally, a lesson plan JavaScript object is returned to the front end Angular app.

Uploading and downloading additional materials

Kithub uses the ng-file-upload directive to upload profile photos, lesson plans and additional materials. Photos and additional materials are attached to Rails models using the paperclip gem and stored in AWS. When a user downloads a lesson, the lesson plan markdown file is converted to word, saved as a tempfile and then sent from Rails to the browser for downloading.

Contributions Calendar

The contributions calendar uses three custom directives to form the grid. A contributions service populates an index table on the front-end and serves that data to each square in the calendar. For each user, the service calculates the maximum daily contribution value and uses that to construct a color scale that starts at dark green and gets lighter for each quartile, down to gray for 0 contributions.

Contributions Calendar

Pull Requests

With Kithub, teachers can collaborate with each other on their lesson plans by submitting Github-style "pull requests" to other teacher's lesson plans. By integrating the JS Diff library, we display deletions and additions to both the pull requestor and the pull requestee. The original lesson plan owner then has the option to accept or reject changes to their master copy of the lesson plan. The owner can accept or reject all changes or pick and chose specific portions to accept. Once a user has accepted a pull request to their copy of the lesson plan, those changes are immediatley be reflected in their lesson. Collaborating on lesson plans has never been easier!

New Pull Request

View Pull Requests

Create Syllabi

The syllabi feature allows users to add lesson plans to their courses. The feature allows users to set start dates, end dates, and meeting days for their courses, which then creates a list of days that the course meets. The feature then uses the angular drag-drop library to let the user move lesson plans to a day their course meets. Upon dropping a lesson plan on a scheduled day, the updates are saved on the front-end and an AJAX call is made through Restangular to save the addition on the server.

alt text

###Gradebook Updates Bringing the tradional gradebook into the 21st century, teachers can update their gradebook in nearly any way. Any changes to the gradebook sends an AJAX request to our API, and the changes are instantly reflected on the user side. Teachers may also notify students via email about individual assignments or overall score of the class, as well as if their students are failing(under 60%) or doing expetional well(over 90%). The emails are sent using Restangular post requests to Rails. Utliziing Rail's ActionMailer and with the help of SendGrid, emails are delivered instantly.

Courses Page

Data Visualizations

The grade book data visualizations are built with angular-chart and Chart.js. The graphs are populated by pulling data using multiple custom services, allowing teachers to visualize student progress and assess overall grades throughout the course. Teachers are then able to implement curves on data visualizations to determine best scores for the class.

![alt text]( “Implementing a Flat Curve“)