Inspiration

As a student I've experienced many late nights, chipping away at challenging homework or lab assignments. During times like those, I often found myself wishing that I had a way to chat easily and efficiently with other people who were working on the same problems as I.

Solution

Whereas Blackboard is no-communication, and whereas Piazza is slow and deliberate ask-and-reply, ClassChat brings to students the missing communication channel, namely one which is instant, casual, and built to be easy to use and integrated right into all of the Piazza and Blackboard-based course pages that you already use. Every class page has a corresponding chat room in which anyone can chat, or if you wish you can start a private conversation with another user. It's implemented as a Chrome extension, so may run on any platform on which the Google Chrome browser runs.

The extension is currently completely functional on Piazza and Ted course pages. General Blackboard support is coming very soon (see "Remaining tasks" below).

A much further reach than just one school

The vast majority of courses at UC San Diego utilize Piazza and/or Blackboard, so any kind of student in any major may benefit from ClassChat. But the extension has use far beyond the reach of San Diego. Many colleges and universities in the nation and even the world use Piazza and Blackboard, and those students have just as much use for ClassChat as do our local students. Rather than limit myself to the roughly 30,000 students at UCSD (source), ClassChat is of use to many of the 21 million nationwide (source), and that's in the United States alone.

Implementation

ClassChat is built as an extension to the Google Chrome browser. Extensions are zipped packages of HTML, CSS, and JavaScript code that augment existing web pages and do small tasks that work largely in the background. The core of the chat is powered by Kiwi IRC, a free and open source web IRC client. For each page of interest--in our case pages hosted on Piazza, Ted, and the Kiwi IRC--the extension embeds a bit of JavaScript that manipulates the DOM of each respective page. These bits of JavaScript are called content scripts, and run in a protected context such that one content script cannot access the JavaScript variables of another content script or those of the page in which it is embedded; it merely has access to the DOM of its respective page.

On Piazza and Ted course pages, the Kiwi IRC client is embedded in an iframe. The stock Kiwi client's UI has a few elements that have to do with more technical features of IRC. My philosophy is that I want the fact that this extension is powered by an underlying IRC connection to be invisible to the user. That sort of detail is extraneous to the casual user, and it being present would exclusively cause confusion. Therefore, all UI elements that are specific to IRC (such as channel operator status, server messages, etc.) are redacted from the UI via JavaScript and MutationObservers.

The content script that runs on Kiwi needs to know to which IRC channel it will connect (all ClassChat channels are on the Freenode IRC network). In a perfect world, Kiwi's content script could inspect the DOM and the URL of the parent page, i.e., the course page, to gather some info that uniquely identifies the course. This isn't possible, however, because as previously stated, content scripts cannot "see" into any context other than the one in which they are running.

To overcome this, some message passing was required. Upon being loaded, the Kiwi client page asks the ClassChat extension for a course ID. ClassChat then requests that information from the active tab, which is the course page, and the course page's content script replies with the determined course ID. The course ID is different for each vendor; for Piazza, it is the alphanumeric string seen in the URL of the class page; for Ted, it is a combination of the second-level domain of the URL (e.g., the "ucsd" in "ted.ucsd.edu") and the class title that is the header of the menu on the left side of every class page. Currently, IRC channel names are of the form #classchat-<course ID>.

Remaining tasks

The stickleriest stickler on this project has been getting the Chat menu item to appear on Piazza's "Resources" page. That page loads in a different, very peculiar way compared to the other two ("Q&A" and "Statistics"), and it will take some more experimentation with Chrome's debugger and with script load time to get the button to load reliably on the "Resources" page.

Additionally, the extension currently only supports Piazza and UCSD's Ted Blackboard. What this really means is that the Blackboard content script only is run on pages hosted on the ted.ucsd.edu domain. I need to implement some code that detects if an arbitrary page is a Blackboard course page. This shouldn't be challenging, as any Blackboard page has some metadata in the HTML head which indicates it as being so. Consequently, this feature will be completed before general public release in a week or two.

Reflection

This project was a great challenge for me, and I am very proud of what I've accomplished. First of all, this Project of the Month competition occurred during a busy time of the academic year, so almost all progress on this project was made during the last two weeks of the month. Going into it, I knew basic HTML and CSS, and no JavaScript. Coming out of it, I've been able to discuss with friends and recruiters concepts like asynchronicity, message passing, callbacks, closures, the loveliness that is jQuery, and more. And most important to me, I feel like I've made something that is of tremendous use to myself and many, many other students.

Near-term plans

Over the next week I will release ClassChat into a private beta to test among some classmates of mine. I will also reach out to some friends at other universities to get them to test it with their Blackboard installations (there are various versions of Blackboard, and it may be the case that the code that I've written only works for a very particular version). Once thoroughly tested, I will iron out any remaining bugs, make a GitHub repository for the project, and start spreading word of the app among UCSD students. It's my hope that it will be a valuable tool for many people, helping them collaborate and succeed in their classes.

Built With

• chrome
• javascript
• jquery
• kiwi-irc