GSoC Week 3 | UI changes

After a comfortable two weeks of mostly AJAXification, it was time I did something which truly resembled the title of the project. I started the week with some code changes from the browse courses branch and a mind to do some changes which would affect the UI directly. Going back to our original discussions during the community bonding period, we had decided that there were four areas of ATutor that urgently needed changes- the browse courses page, the help page, instructor's manage page and the main navigation system. I had done some basic changes to the browse courses page, so I decided to start on the navigation and help page.

Dropdown Menus:

First and foremost, I had to make sure that any dropdown menu I added had to be accessible. Screen readers must be able to read them out and keyboard only users must be able to tab through the menu. There are two variants that I chose from a list of accessible menus.

> Dropper Dropdown Menu:

I was instructed to use as little Javascript that I could, so I decided to give this CSS only menu a try. This is apparently called the world's most accessible dropdown menu. This uses CSS floats and margins to manipulate the visibility of the items. You can check the live demo and the explanation of the working of the menu.

There was one issue with this though. The menu items had a fixed width. If I made it too small, the text would overflow and if I made it sufficiently large, the dropdown menu would not fit in a netbook with a 1024px screen width. Also, ATutor uses fluid responsive design, so doing it with a fixed width didn't really appeal to me.

> Simply Accessible Dropdown Menu:

This one went one step ahead and solved the issue of accessibility by assigning aria roles to every single element in the menu. You can not only tab through the menu but use your arrow keys to navigate through them too, something which wasn't available in the CSS only menu.

You can find the two versions of the dropdown menus in [1] and [2].

Help Page

The next part was to change the look of the help page, which was basically a sea of li's! I divided the page into Help, External Help and Accessibility, giving anchors to each of them at the top. You can find the files at [3].

I plan to put a 'Back to the Top' link for that page, but I also need to make sure that it is accessible, which is why a fixed one would not really be a good idea. First thing next week, I would be looking into this.

In between these tasks, I also did some modifications to my browse courses code, making sure old versions of IE didn't give me any trouble!

git cherry-pick

During my work this week, I got to cherry-pick a commit from one branch to another. Although I had heard about it before, this was the very first time that I used it. Pretty cool feature in git which saves unnecessary time wastage (otherwise, I would have applied a diff file maybe...)!

The last thing that I want to emphasize is how Alex helped me modify two similar looking JS functions into one-

    var compareAny = function (string, substrings) {
        var length = substrings.length;
        for (var i=0; i<length; i+=1) {
            if (string.indexOf(substrings[i]) !== -1) {
                return true;
            }
        }
        return false;
    };
    var compareAll = function (string, substrings) {
        var length = substrings.length;
        for (var i=0; i<length; i+=1) {
            if (string.indexOf(substrings[i]) === -1) {
                return false;
            }
        }
        return true;
     };

Initially we came up with this (yes, bitwise operators exist in JS too!)

    var compareStrings = function (string, substrings, isAll) {
        var returnValue = isAll;
        $.each(substrings, function (index, value) {
            if !((isAll ^ (string.indexOf(value) === -1))) {
                returnValue = !returnValue;
                return false;
            }
        });
        return returnValue;
    };

But at last, this is what prevailed after consulting a comparison of $.each() and JS for loop!

   var compareStrings = function (string, substrings, logicalAnd) {
        for (var i=0, len=substrings.length; i<len; i+=1) {
            if ((string.indexOf(substrings[i]) >= 0) !== logicalAnd) {
                return !logicalAnd;
            }
        }
        return logicalAnd;
    };

That's all for now. I will keep this blog updated as I keep on changing more and more pages in ATutor and learning amazing stuff in the process!

[1] https://github.com/sdaityari/ATutor/tree/ui_dropdown

[2] https://github.com/sdaityari/ATutor/tree/ui_dropdown2

[2] https://github.com/sdaityari/ATutor/tree/ui_help