CSCE 590: Problem Set 2

Figure 1:Mockup of the GUI. Note that it shows only one class but the user should be able to pick as many classes as he wants, even if they overlap. Click to see the full-resolution version.

Weekly Class Viewer

For this problem set you will implement a client-side only JavaScript program for interactively viewing classes on a weekly schedule. Figure 1 is a quick and dirty drawing I made to illustrate what I want, more or less.

The idea is that students will use your application to see how their schedule will look as they pick their classes for the semester: do the classes overlap? do I have enough time to get from one class to the next? do I have time to grab lunch? etc. The top part of the screen shows the user the classes that USC is offering with a checkbox next to each one. When the user clicks on the checkbox for a class then that class automatically appears on the weekly schedules shown on the bottom of the screen.

I am not sure how the top half of the screen should look. We offer a lot of classes so it is impossible to fit them all in one screen. The mockup shows one possible way to handle this by using a tab for each department. But, I don't think this will work because there are too many departments. So, I leave it up to you to figure out a pleasing design. At worst (or, least?) you can just list all classes in a long list and provide a scroll bar, such minimal effort is enough for a C, but no more.

The schedule at the bottom should list each class along with its building number. It should be clear when two classes overlap.

When the student is done he can press the print button which will give him a page with only the classes he has chosen, including section numbers, and his weekly schedule.

Its all about the div's

You can get started now (before we cover JavaScript) by building a mockup of the page in XHTML/CSS. I suggest you use divs with absolute positioning to achieve the placement of the classes. I think that using a table for the schedule will be much more complicated (think about it).

The data

Glenn Ford from the registrar's office has kindly supplied me with a spreadsheet of this Spring's classes. You will use this data for your project. Note, however, that you will probably want to get the data in a more usable format, say XML or JSON, to make it easy to use in your program. Luckily, Jason Dew wrote a perl script csv2json.pl which turns that spreadsheet (well, its csv version) into JSON springClasses.js.

It's all JavaScript

The whole application should be one page of XHTML/CSS with your JavaScript providing all the user interaction, including the print. You can load multiple JavaScript files, as well as the data file(s).

Extra Credit

There are many obvious improvements to this system. Some of the ones I can think of are:

1. Add links to the class homepages.
2. Add links from the buildings to our USC map
3. Add links to the ratemyprofessor.com page for that professor.
4. Use the student's chosen classes to generate an iCal file the student can add to his calendar.
5. Let the user add his own activities to the calendar. Let these be shared via ical.
6. Let the user show iCal feeds (I guess you would have to filter for weekly recurring events).

Submission Instructions

As will all the problem sets, you will hand them in using our department's dropbox.