The main change for the web interface is to redo the schedule system used. As of right now, there is a grid of checkboxes, which is not that pleasant to look at or use. Because this is the largest change, I decided to start with it and move on to easier things. The link below is to view the first schedule I created. The idea is that there will be a week-view calendar. The user can click on a time block that they are available, and when the user does this, a pop-up window will appear. In this box, the beginning time that the user clicked on will appear in the first box. In the second box, a list box will be populated with ending values, but to reduce user error, the list box is populated with times starting half an hour after the beginning time. When the user clicks Submit, the pop-up window would close, and the time frame entered would be highlighted.

In this first schedule, the layout looked good, and I was able to pass the time values between the two windows. I also programmed a mouse event that highlighted the time block where the mouse was. I had not yet programmed the schedule to highlight the time frame entered. At this point in time, I was just setting up the layout and getting it to pass the values between the two windows. I had been programming this schedule with Mozilla Firefox as my web browser, but I decided I should check it in Internet Explorer. When I did this, it was completely different. This can be seen by opening the link below in IE.

Schedule Not Working in IE

After researching the differences between Firefox and Internet Explorer, I found that IE doesn't recognize setAttribute(). In Firefox, I used this to set the styles and mouse events of the table, which worked great, but in IE, it didn't work. I had to redo them in the format that IE recognized. An example of this is "Cell Name".onclick = function(){function name}. Using Firefox, I would just do "Cell Name".setAttribute("onClick","function()"). I had to do similar formatting to adjust the styles. The schedule below is the corrected version of the first. It should look the same in IE and Firefox.

Pop-up Type Schedule

I had Ted look at the schedule at this point, and he thought it was looking good. His only concern was how I was going to get the values to pass back to the main window and highlight the time frame without reloading the window. I began brainstorming ideas on how I was going to go about this. I decided to run my ideas by Dr. Blahnik to get his input. At this time, he brought it to my attention that many users, especially those using IE, have pop-up blockers enabled. His concern was that my pop-up window to input the ending value would get blocked for some of the users. I had not thought about this at all, so I tested it from my computer using IE. I found that it was blocked, and I had to allow pop-ups for the site to get it to appear.

I realized that I had a major concept problem, so I went back to the "drawing board" to design something new for this purpose. I decided it would be easier for the user if everything was on the same screen anyways. I also decided that if I could get the users to input their availablitly times in one place, they wouldn't have to scroll up and down the page to click on time blocks. To accomplish this, I added a form above the schedule where the user can select the day, beginning time, and ending time. If they click Add, the time frame they entered is highlighted. If they click delete, the time frame is deleted from the schedule. This method gives the interface streamlined, user-friendly design. The user no longer has to scroll up and down on the screen to click on time blocks. Everything is now done through the form on the top of the screen. This schedule can be viewed by clicking the link below.

**Update (2-23-2009): I met with Dr. Pankratz, and he suggested that the screen looked busy or cluttered because of the time values inside each cell. The more I looked at it, the more I realized he was correct. To fix this, I took the time values out of each cell and put in a new column to the left. This column has the time values, but only the beginning time values are present. By having the time values stacked, it is apparent which time frame the user is intending to click. This made the screen look even less cluttered, and I was able to reduce the size of each cell reducing the size of the schedule overall.

Drop-down Form Schedule

**Update (2-23-2009): I spoke with Professor Rohm to have her help me with the permissions to the Tutor database. While I was there, I asked her to look at the scheduling system I had been developing. She thought that the user's natural instict would be to click somewhere in the schedule itself. I had thought about this before, but I wasn't sure if it would be that much easier for the user. I decided to try to make another schedule with Drag capability. The idea in this schedule is that the user can click on the time block where their availability will start and drag it to whenever it would stop. For this, I had to program it so the user can't highlight sideways though. Each time frame must run up or down. I also had to put a method for the user to delete availability time frames that they have already entered. For this, all they have to do is click on a time frame that is already selected/highlighted, and drag the mouse back over it. This will erase that time frame and allow them to enter something else there. This schedule can be seen by clicking the link below.

Click & Drag Schedule