It’s All About the Grades-Tracking Schedules,Assignments, and Grades on a School Site (Part III)

Trudy HutzlerGuest Author:  Trudy Hutzler

Welcome to the third installment of the series on my School Site and how we put it all together.  In this post we will walk through how we track the grades, because at the end of the day all it is all about the grades.  For tracking grades, the school interface was often inaccurate with some classes included assignments not yet due as zeros until an actual grade was entered; others would be late but not counted until an actual 0% was entered, and so on.  We needed a way to track and calculate her grades so we could monitor her progress.  Not just tracking the grade for the individual assignments, but for the class average, the grades for the grading period and the year overall.  Finally we wanted to make it easy for us, as parents, to get the update on her grades at a glance.Now before we go any further, my daughter has asked me to again state that no actual grades were used in the making of this demo.  All grades and classes have been changed to protect the innocent.

Home Page

The All Grades tab shows the grades for each class in one place.  Any assignment that is past its due date is grouped by Class and the assignment grades for each class are averaged.  Although, since some assignments are weighted heavier than others this is not entirely accurate it does give us an overall idea of how she is doing grade wise.

All Grades Tab on Home Page

All Grades Tab on Home Page

To see the class grade average and individual assignment grades, you know for deciding if she can go out with her friends, or take a mental health day, you click on the Class to expand the node.

The Math, English, History, PE, and Science tabs, on the home page, simply list out all the assignments for that class, for the current quarter.  When my daughter is working in a particular subject she can see everything that was assigned and work on it all at once to save time.

Science Tab on Home Page

Science Tab on the Home Page Displays Current Grades for this Class

I also added a Legend at the bottom of the page to help other users, like my Husband, to know what all the different colors and symbols mean.

Lists

All of the final assignment grades are recorded in the Assignment List.  The problem was we had decided we would only track one quarters worth of assignments at a time to keep the assignment lists from being an overwhelming mess of information.  So I needed a way to track the final grades for each class for each quarter, semester, and the year overall.  To do this I created a new list called Grades.

Grade List

Grades list shows all final grades for the year to date

I explained above that some grades are more heavily weighted than others and so the grade average was not exactly correct, but at some point needed to track the actual final grades.

I enter in her final scores from her report card, and the list calculates the rest averaging the two quarter grades to get the semester grade, and all quarters to get the year overall.  Now you won’t need to track grades in your workplace, but what about other performance indicators, percentage of tasks completed on time, or percentage of returned or defective parts?  You can use your own imagination on how something like this might work for you.

Finally to keep everyone in the loop on where my Daughters grades stand I post an abbreviated view of the grades on the home page for quick reference.

Image Rotator and Grade Summary

The image rotator and grade summary view from the homepage

Now did you notice the picture of the waterfall above the grades summary view for the homepage?  It is a picture of the Kent State University campus.  Kent is one of the colleges my daughter is considering. We also wanted the site to be as attractive in form, and it was useful in function so we added the image rotator solution to the home page.

I created a picture library to hold the pictures I wanted to show in the image rotator web part, and every 5 seconds the image changes to display the next picture in the library.  Now for this demo I used pictures of the Kent State campus, but my daughter can change these and show pictures of friends, cartoons or comics, whatever she wants.  This just gives the page a little visual appeal.  I have been known to place Calvin and Hobbes Snowmen comics in a rotator part during periods of time when we are having a lot of snow storms, or other holiday cartoons, and so on.  This helps to draw users to the page, and gets them clicking around and using the site.  So never underestimate the power of visual appeal.

Well now you have seen our School Site, and seen how we combined individual solutions to make a user-friendly, visually appealing solution.  From here we are going to roll up our sleeves and get down to the nitty-gritty of exactly how we created each part of the solution.

My hope is that something that I have done will help spark your imagination and start you thinking about ways that you can use these solutions in new and exciting ways.

A School Site to Track Schedules, Assignments and Grades (Part II)

Guest Author: Trudy Hutzler

Welcome to part two of the School Site Overview.

In the last article I gave you some background about why we created the School Site, and I showed how we tracked classes. In this article we start to get into more of the fun stuff as I walk you through how we track homework and assignments.

The Home Page

Again starting on the Home Page, where we have used Easy Tabs version 5 to organize our data, I want to start with the “All Assignments” tab. Here is a list of all assignments that are due for the current quarter and their status.

This shows whether an assignment is submitted, late and by how many days, or how many days until it is due. To evaluate how many days till due, or late against the due date I used Christophe’s new Countdown/Countup formulas.

The priority of the assignment is indicated by the font color of the Assignment Title. I used the Color Coded Calendar tool from the SharePoint Users Toolkit for this piece and just tweaked it a little for my use.

The progress % is a visual indicator showing the percentage of the assignment that has been completed. It moves from Red to bright green as it moves across the bar. The actual color changes in 10% increments.

With online classes, it is not unusual to have classes with over 100 students, so as you can imagine it sometimes takes the teachers a while before they grade all those assignments and post the grades. Until they are all graded the assignment remains blank or at 0% making it hard to know if the assignment was submitted and being graded or was late. So we added the Submitted field so we as parents know if the assignment was submitted, and my daughter can be sure she didn’t forget to turn in the assignment after she completed her work, which if you have teenagers you know can happen a lot.

The Due Today and Due This Week tabs are pretty self-explanatory they are filter views of the Assignments list which list all assignments that are due. The image below shows the Due This Week tab.

The Late Assignments tab is another filtered view which gives us a list of all assignments that are past their due date, and have not been marked as submitted.

The List

As I said in my last article the Lists are the real work horse of the School Site and the Assignments List is really the nerve center for the whole site, everything else is just for support of this one list. In this list all homework assignments for the current quarter are tracked, and the grades recorded. We even track how many days until it is due, or how many days an assignment is late. We also provide access to any links needed to complete the assignment, and scheduled time for completing the work. It all happens here, and it all gets integrated from here as well.

Keeping track of the assignments is only one part of process; you also need to manage your time so that you can actually get the work done and submitted.  But as we all know clicking around between your to-do list and your calendar is a pain, even for the most disciplined of us, but especially for a teenager.  I knew if it wasn’t easy to move between assignment list and calendar and somehow tie the two together it wouldn’t be long before my daughter gave up and went back to her old tried and failed methods of doing her work.   So we needed to find a way to connect her Assignments list with the Schedule calendar.  You may remember the Schedule calendar from the last article.

This calendar color codes the entries by changing the background color according to the category you choose.  If you look at the figure above you will see some of the entries have a green background, another entry has a red background, and so on.  When you create a calendar entry there is a Category field where you can choose a category like “Holidays-No School” which would give the entry a green background and “Report Periods” which would give the entry a red background.  The category you choose will determine the background color of the calendar entry.

But that’s not all, if you call in and order in the next 30 minutes you will also receive the added feature of the Assignment List integration.  You can link your calendar event with an item in your assignment list by using a hyperlink that when clicked will open up the view list item dialog box from the Assignments list.

 Let’s say you are checking out your schedule in the calendar and see an assignment you are supposed to be working on, but can’t remember what it is you were supposed to do for the assignment.  If you open the calendar event, it will look something like the figure below.   You can now scroll down to the Assignment field and click on the hyperlink, which for this example is titled “Assignment 4”.  

This will open the View list item dialog box for this homework assignment from the Assignments list, which you can see in the figure below.  The Assignment List item will even open in a new window so you don’t have to navigate back to the Calendar page again. 

But wait that’s still not all, did you notice the Assignment Page link at the top of the calendar page?

Click that link and go straight to the All Tasks view of the Assignments List, as shown in the figure below.

The All Task, as seen above, is the default view for this list. Notice that in this view we are using the Title field that is linked to the edit dialog box. This gives us quick access to edit the item and update its information. We can easily see how much progress has been made on the assignment by the progress bar. If you click on any of the links in the Scheduled column it will open the dialog box for the calendar item associated with this assignment.

So if you need to reschedule your time to work on the assignment or extend it to another day you can do so easily from the list item itself without having to navigate away from the page. But what if no work time has been scheduled for this item yet? No problem, to schedule time to work on this item, simply select the assignment in the list, hover your mouse over the title of the item then click on the down arrow to open the drop down list item menu. There we have added a new action called Schedule Work using SharePoint designer.

Click on Scheduled work and you will be redirected to the Schedule Calendar where you can schedule time to complete this assignment. Then simply hit the back button on your browser, or click on the Assignments Page link at the top of the page to return to the Assignment list. Finally notice the last column Late Status, this is our newest addition to the site and is based on the Countdown/Countup Formulas Christophe debuted in his blog not long ago. Once I saw them I just had to have them, and Christophe was kind enough to let me beta test them. I of course altered them just a tiny bit to better fit my purposes. The formula you are seeing in this view is the system time formula; I will show you the Internet Time formula in just a little bit. I have used both for demonstration purposes.

So basically that is the list, I have used views to change the way the list looks and functions based on what I needed to accomplish. For example, to track late assignment I created the Late Assignment view that you saw on the Late Assignment tab on the home page. Or I have created a calendar view to show when each assignment is due on a calendar. Some views have a few more visual indicators, like the Details view.

I wanted to be able to see which assignments were more heavily weighted and therefore, should have a higher priority, but I didn’t want to add another column when I was already struggling to keep all the information from running together in a hodge podge. So I made a dual purpose field that would display the Title of the assignment and then color code its priority level by changing the color of the font. May not be real fancy, but it is effective.

Remember when I told you we would be seeing the Internet Time based countdown/countup formula later, well here is in the IsLate column. If you need to create more visual impact this is the one for you, it combines the countdown/countup information with an icon image to really get your attention. I also tweaked this formula a tiny bit to make it more suitable for my needs, mainly by changing the text.

As I have said before replace classes with projects, assignments with milestones, and grades for progress or performance indicators and you can see how these same concepts can be adapted to the business world.

In my next post I will cover how we track grades, because in the end it’s all about the grades.

Coming soon on Path to SharePoint

No post in more than a month, this had never happened since I started this blog in 2008! Yes, starting my new company, traveling across the US, and the tax return have taken their toll…

Mind you, the blog still remained very active, with more than a hundred comments posted in the past month. But now it’s about time I add new content. So what’s coming next?

My next tutorial will be about countdowns/countups. I already published a live demo in February. If you can’t wait, head out for the SharePoint User Toolkit, a first countdown-countup page is already posted there! (and remember to send me some feedback)

I am also working on the Easy Tabs v 5.1. One of the most common request is to have more branding options (colors, hover effects, etc.). I already made a leap forward between v4 and v5.0, and I hope to bring some more improvements soon. I already published an example of custom style (including a live demo), but the release of Internet Explorer 9 changes the game (for example IE 9 natively supports rounded corners, no need for workarounds).

In March, I spoke at the San Diego SharePoint User Group. After I clean up my slides, I’ll post them, along with some interesting Q&As from the session.

I also have a couple projects with my new company, User Managed Solutions LLC. In particular I am working on a new online training offer for this Fall – more details coming in May!

Last, but not least, I am honored to welcome guest blogger Trudy Hutzler for a series on creating a “school site”. Trudy is a Senior Technical Architect for AT&T Hosting and Application Management, and a contributing author for the Mastering SharePoint Foundation 2010 book. As this blog is user focused, she is not going to talk about her experience on SharePoint 2010 migrations, but about a custom site she built for her daughter who attends school online. Stay tuned!

Live demo: countdown/countup

Countdowns, and generally speaking comparisons with Today’s date,  have been a recurring theme on my blog.

SharePoint 2010 hasn’t brought much improvement to the “Today” issue, so the workarounds published on my blog in 2008 remain a good reference, either the one I wrote for Data View Web Parts or Alexander Bautz’ follow up article for list views.

A year ago, I blogged about two other solutions, one relying on jQuery, the other on Flash and ClockLink.com (the demos are not active anymore).

Today I am showing two new examples that are much simpler than the previous ones. The live demo is here:
http://sp2010.pathtosharepoint.com/Portfolio/Pages/Countdown.aspx

Why much simpler? Because the only thing you need in the page is my Text to HTML script – the exact same that is used for color coding calendars. The calculated column will take care of all the rest (for example the formula to calculate the difference between target date and Today, or the color selection).

Note that there’s a key difference between the two examples: the “Countdown” column relies on the local time of your computer, while the “TimeAndDate” column pulls today’s time from TimeAndDate.com. In the past, I have already highlighted this important choice (for example, don’t use the local computer time if you’re building an auctions site!).

The drawback of this new approach is redundancy – the current date is calculated for each item. So I would recommend to only use it for views with few items.

You’ll notice that the column filters also render the HTML (cf. above screenshot). That’s because the page uses a custom version of my Text to HTML. It is still work in progress, so please don’t copy this script!