Smarter General Catalog Browsing

Two-sentence description

An educational program’s course requirements can be daunting, especially when you don’t know what a particular requirement is. The solution: course information available with one click for any course without ever leaving the General Catalog program description page!

Background

Whether a student is considering aeronautical and astronautical engineering or zoolology, educational programs listed in the UW’s General Catalog have many admission and graduation requirements. Knowing the difference between MATH 125 and MATH 126, for example, usually required the student to open a new browser window to look up those courses’ details (perhaps using the Course Catalog search I wrote?). Or, what about if a student wanted to know in which quarter the course would next be offered?

With this less-than-optimal user experience in mind, and knowing that class information was available through the UW’s Student Web Services (SWS) initiative, I came up with a way to provide any course’s details right in the page with just a click. Not only did this enhancement provide valuable information, it allowed for styling the courses with CSS to alleviate the “wall of gray text” effect the General Catalog program descriptions had.

Skills and technologies

The biggest issue in this project was the data set: the UW General Catalog consisted of over 150 program description. Each description is a static HTML file, and while I had recently cleaned the markup, introduced stylesheets, and separated content into tabs, the course references themselves were not marked up. With dozens or even hundreds per file, manually adding markup to them that could be styled and hooked onto with jQuery just wasn’t feasible. Luckily, I know a thing or two about regular expressions.

I devised a regular expression (with the help of a couple of online tools) that would parse the content of the page looking for courses, as defined by up to six all capital letters (with zero or one spaces or ampersands) followed by a space and three digits. Once I had that regular expression (which looks like this: /\b([A-Z]{1}([A-Z\s]|\x26amp;|\x26){0,4}[A-Z]{1})\s([0-9]{3})\b/), I used jQuery to wrap the course in an anchor, and used the regular expression matching groups to add attributes, such as the curriculum abbreviation and course number, to that anchor. In turn, clicks on this link was intercepted by jQuery and a call made to the SWS Course resource to retrieve details for the course. (I was again able to re-use my PHP classes to access the SWS.)

To display course details, I installed the excellent jQuery plug-in BeautyTips and tweaked its display with nice CSS eye-candy like text shadows on link hover. And I used some date math to write a PHP function to determine what the UW’s next registration quarter would be so I could generate links to the proper time schedule entry.

Also, this project was the first in which I realized the value of minifying my javascript code to reduce page download time. It’s really quite trivial to do thanks to tools like JScompress.com.

Take aways

What struck me most after completing this project is the well… coolness of being able to “progressively enhance” a set of existing data: in this case, static HTML files. By adding a layer of javascript and some regular expression magic, I could solve a real usability issue for wide swath of users. Sure, there are lots of other ways this particular issue could have been solved (such as implementing a real content-management system for the General Catalog), but that was not practical given the budgetary and manpower constraints faced in our office. This was a no-cost project with only some man-hours invested. And that is truly the best project: one that achieves a goal within the client’s constraints.