Project URL:
For this prototype, we suggest using OSX with Chrome to access CheckMark.
We also tested with Windows and Chrome and that worked too.
Contributions:
Elisa
My work has been mainly on the calendar and the creation of events. I used the Fullcalendar library to create the base of the calendar and then worked on enabling event creation based on the students selected. For the creation of events I used the Datepicker and Timepicker libraries and worked on making the form look consistent with the rest of the webpage. I also made events editable, and added the possibility of deleting them. Events are represented in the calendar with three different possible colors. From the heuristic evaluation I found out that the meaning of the colors seemed confusing so I added a legend that can be hidden so that people who are familiar with the website can hide it. I also made the week and daily view selectable so that it is consistent with Google calendar. From the heuristics it also seemed confusing that you could select students while the form was opened, so I added an overlay which blocks everything which is behind the form while the form is open. I also changed my code in the index file to Jade instead of html, which we were using originally.
Other than the calendar I have also helped with choosing and adding images, and fixing small bugs with other parts of the website such as the grades page.
Danielle
Drawing inspiration from the heuristic evaluations, I aimed for simplicity in redesigning the aesthetic appearance and layout of the gradebook. I restructured a significant amount of the back-end to support user modification of gradebook entries and provided more affordances on the front-end for the user to identify the grade modification functionality. These changes provide a more dynamic experience by allowing the user to modify grades by simply clicking on the grade entry itself, entering a new score into a popover, and pressing "save." If the user enters an invalid grade, the popover closes. If the grade entered is valid, the gradebook reloads immediately with the newly entered grade incorporated into the total, average, and letter grade that displays. I also added user customization and feedback to sending grade reports, which treats assignments like attachments in email and allows for the optional inclusion of messages. Finally, I provided a legend that appears when the user presses the help icon, which maps the letter grades to the percentages, providing more information without sacrificing simplicity or adding clutter.
Marcus
My contributions to the project were largely in the formation of the overall interface's layout and representation. This included efforts in creating establishing a framework so that other parts of the application could determine which students were currently selected. In this, I also established the notification system so that when a parent messages the teacher, she is aware and notified and is able to correctly select the selection of students that would allow her to read messages. To allow for this interaction, I utilized socket.io within our implementation. In addition, I constructed a large majority of the backend and data model. Because we wanted our GR4 to be fairly well put together, we decided to have most of the "backend" established and integrated into parts of the code. The "backend" at this time was just a series of classes written in javascript that were loaded and allowed for other portions of the code to get and set certain data parts. In moving to node.js, we were able to reuse a lot of these classes and thus have it so that the other parts of our project did not have to be ported over to new backend services. This was a necessary optimization that required some foresight but improved the quality of both checkpoints in this project. I also had a small hand in the creation of the conversations of messages and the grades page.
Evan
I focused on the implementation of the message view and message functionalities. I based the design of the message view and conversation display on Facebook messages. The message view I created provides a display of relevant conversations and associated messages dynamically generated from the list of selected students and the selected conversation. The user controls include a textarea used to type the message, a couple boxes specifying sending preferences, and a send button. Users can then select conversations and send/view messages in the selected conversation. I also implemented several minor functionalities such as hovering over the conversation to see all participants, the affordance for which conversation is selected, enter to submit message, and shift&enter to create new lines (harder than expected) while typing a message. To implement the functionality of the view, I had to create data models for messages and change the student data model in GR4. I also had to add a couple functions to the backend to ensure that all messages were received by all clients using the service.