Haiku Improved
Chrome Extension
Personal Project

Background

Throughout the six years I spent at my middle and high school, I grew intimately familiar with the ins and outs of the Learning Management System, Haiku Learning. Every day and night I'd go through the same routine of checking assignments, participating in online discussions, and submitting work on the site.

Design Process

There were so many small iconsistencies that annoyed me on a regular basis. The only way to open assignments was in new tabs. There was massive voids of unused space on the left and right. The main assignment feed was a small scroll box tucked at the bottom of the page. Not being able to change these myself or create my own LMS for my school, I decided to create a Chrome Extension. Originally for myself, later for others.

Haiku Improved Diagram

First thing's first: what elements to get rid of for more space. We can get rid of the header declaring the name of the user, as we already know our name and it shows up in two other elements of the page. This grants us more vertical room for the assignments. We can also get rid of the mission statement box for Pacific Ridge, as it's an unchanging and unimportant message. Pacific Ridge also doesn't utilize the Portfolio button and we're able to access it elsewhere on the page, so the button for that gets removed as well. Now the page looks like this:

Haiku Improved Diagram Updated

This gives us enough room to open assignments in the same window, by popping them up on the upper right side where the mission statement used to be. The assignment list is now nearly full height, allowing for an entire weeks worth of assignments to be displayed at once. Here are some more detailed design decisions:

Haiku Improved Design Changes

I wanted to provide clear visual/heirarchial differentiation between different assignments on the same day. Without it, I found myself unable to see what I needed to do at a glance. I was also able to enlarge the font size and remove the journal icon that most students didn't even realize stood for anything. For the classes, my primary goal was simply to create enough horizontal space for the full class names to be displayed. Here is what these change look like when put together:

Haiku Improved Final Comparison

The extension is currently used by hundreds of students at both my school and at different schools across the country and after 11 reviews currently has a nearly 5 star rating.

Here is the source code behind the extension:

Javascript (Injected)
CSS (Injected)
$(document).ready(function() {
  //Check if Events are loaded (They are slower to load than rest of page)
  var reload = false;
  var calendarLength = 0;
  var onClickLoadFunction = '';
  //Runs the first assignment check and replace on page load
  contentLoadCheck();

  $(document)
    .on('click', '#portlet_calendar_load_next', function() {
      reload = true;
      contentLoadCheck();
    });

  $(document)
    .on('click', '.content td', function() {
      contentLoadCheck();
    });

  $(document)
    .on('click', '.item_description a', function() {
      contentLoadCheck();
    });

  function contentLoadCheck() {

    var pageLoadCheck = setInterval(function() {

      var newCalendarLength = $('.calendar_day')
        .length;
      //First part of if statement checks for loaded on original page load and calendar load
      //Second part of if statement checks for loaded on 'view next 7 days'
      //Becuase the 'view next 7 days disappears and immediately decreases length by 1
      if ((newCalendarLength != calendarLength && !reload) || (newCalendarLength > calendarLength && reload)) {

        calendarLength = newCalendarLength;
        //Functions executed after the detection of the load:

        //Makes it so 'Next 7 Days' triggers content checks:
        var onClickLoad = $("#portlet_calendar_load_next a")
          .attr("onclick");
        $("#portlet_calendar_load_next")
          .html("View Next 7 Days");
        $("#portlet_calendar_load_next")
          .attr("onclick", onClickLoad);

        //Makes all tasks open on the same page:
        $(".list_item .item_description a")
          .each(function() {
            $(this)
              .attr("onclick", "TB_dclick(this,event)");
          });

        //Ends the loop checking for the content load:
        clearInterval(pageLoadCheck);

        //Resets the variable to allow for different load types:
        reload = false;

      }

    }, 50); //End set interval check

  } //End content load function declaration

});