The Karma Project: Code Less, Teach More

August 27, 2009

Chakra progress

Filed under: News — christophderndorfer @ 7:56 am

We’ve spent quite a bit of time thinking about, planning and implementing various ideas for the design of Karma’s menu which we’re calling "Chakra".

Just to see where we started let me show you the very first mockup I created several weeks ago:


Well, now that isn’t really pretty, is it? 😉

The next step were Bryan’s early Inkscape mockups that he discussed in more detail in this entry 2 weeks ago:


Now since then I’ve started to implement the design to be able to interact with it, test it on an XO-1 and just generally experiment with different layouts, colors, etc. OLE Nepal’s Content Design Coordinator Om has also be kind enough to spend some time discussing and designing various icons for various subjects with us. Needless to say the resulting icons are awesome!

Anyway, this is current state of things whereby we’ve now added a small navigation toolbar above the grade/subject/lesson selection area to indicate which subset of lessons the user is currently looking at – Grade 1 subject in this case. If you look closely you can also catch a small glimpse of the Chakra logo under consideration at the moment:)


Next time I’m going to talk about the design of the lesson navigation…


August 12, 2009

Building a Better Chakra — Some Ideas

Filed under: News — bryanwb @ 2:09 am

Please bear with my extremely limited skill with Inkscape. I have put together some ideas for the main menu of Karma. I recently read “The Design of Everyday Things” and it convinced me that I too can be a usability expert. Two points from “Design of Everyday Things” that really struck me are that 1) a beautiful design does not equal a usable one and 2) for certain types of tools, there should be one obvious way for the user to use the tool and other ways should be initially visible. Point #2 relates to what author Don Norman terms “affordances.”

Before I show you my crude designs, let’s take a look at what the current main menu, or “chakra“, for EPaath looks like. Please bear w/ me as the EPaath interface is entirely in Nepali and not English.

If you aren’t familiar with EPaath, it is a suite of learning activities that is in line with Nepal’s National curriculum, developed by OLE Nepal. We created these learning activities entirely in Adobe Flash. For a number of reasons, we have decided to move from Adobe Flash to the openweb technologies of html5, css, and javascript. Think of Karma is the OpenWeb son of EPaath. You can also think of Karma as Ruby-on-Rails for developing digital educational content.

Starting Page for EPaath

Starting Page for EPaath

EPaath has a very hierarchical information structure because it follows the Nepali national curriculum. I believe that most countries and schools will require and want something that follows their respective national curriculum very closely. The hierarchy starts with grades, then subjects, then month, and finally displays the available lessons according to the week of the year they should be presented in. Nepali teachers emphatically requested this last feature.

It has been our practice so far to include multiple grades in a single EPaath bundle. We do this so teachers only have to learn one interface and because often students want to look at material in grades above or below their own. For example, we often found 6th graders doing the material from grade 2. Conversely Grade 2 students often look ahead to the higher grades.

In the upper left-hand corner are buttons for each grade we currently support, in the right-hand side are buttons for the subjects Maths, Nepali, and English (Maths and Nepali are written in Nepali script). Just to the left of the subjects is a list w/ a black background. Each line in the list indicates a month and each icon on the line indicates a week. To work with EPaath, you must first click a grade, then a subject and then the weeks available for that course appear, or at least the ones that have been loaded in your particular EPaath bundle. Then you click on a week and icons for the lessons specific to that week appear. Click on an icon and then you finally get to do an EPaath lesson.

With all these steps, we have found that a number of teachers get lost during the process. And those teachers getting lost are the ones we most need to win over.

So I have been trying to think how we can both accommodate this complex hierarchy, which the teachers tell us they really, really like, and to make it easier to use. Let me be frank, I am much more focused on making Chakra usable to the teachers and less concerned that kids will find it confusing. In our experience, the kids master new, complex interfaces much faster than the teachers.

So we need an interface that can:

  1. accommodate a complex hierarchy
  2. straightforward to use
  3. accommodates an arbitrary number grades and subjects

We frequently need to show off EPaath to other NGOs and other government officials. When demonstrating EPaath, it is really nice to have one main interface to show off all the grades and subjects we have. Currently, we only cover three grades and three subjects but our current main menu will not be able to grow to 6-7 grades and 6+ subjects.


Above is my crude proposal to rework EPaath’s menu stage into what I call the “Chakra“. More specifically, this is Stage1 of Chakra. You may notice that this image looks a heck of a lot like the iPhone main menu. I really find the iphone’s main menu intuitive and I think that teachers might find Chakra intuitive as well. I want the icons for the classes to look like something you physically push, so they have to have a 3D effect. I like that the iPhone main menu is essentially a series of lists rather than hierarchical trees. I think a lot of people think in terms of lists rather than hierarchies, so I want Chakra to be a series of lists that you can work through very quickly.

The upper part are all buttons that take you to Stage2 of Chakra. The lower buttons control administrative functions. The “Student Profile” icon should lead the student to functions such as specifying their student ID and whatever configuration options we want to make available to students. “My Stuff” should take you a screen showing you the assessment results from various karma lessons you have completed. It should also store quick links, or tags, to particular karma lessons you have tagged.

The “About Karma” is a placeholder for a section about whichever organization has packaged your bundle of karma lessons. If Nigerian NGO named XYZ creates a bundle of karma lessons, they should use this section for their logo and take credit for creating the bundle. In my experiences with OLE Nepal, when we did not make it very clear that we created EPaath, other organizations (often uninvolved) were happy to claim full credit for creating them.

I have drawn Stages 2 and 3 of Chakra even more crudely than Stage 1. Below is Stage 2

The Second Stage

The Second Stage

For this stage I want to use a set of icons for the subjects. These icons shouldn’t have any text in them — unlike what I have done in this image. There should be an image in the icon that reflects the subject matter and looks like it should be pushed. A down arrow should appear if there are subjects than can fit “above the fold.” The arrow should only appear if there are additional subjects below the fold.

Last Stage of the Chakra

Last Stage of the Chakra

August 4, 2009

Karma Graphics Engine

Filed under: News — subzero @ 2:17 pm

Hi there

During last days I have been working on the Karma plugin (jquery.karma.js).

There’re a lot of questions of how to develop it, let’s start:

About the Canvas and layer support
There’re two options:

  1. Multiple canvases
  2. Each canvas as a single layer, each layer containing one single object (image, shape,…)

    • Pros:
    • Less cpu consumption than option 2.

    • Cons:
    • More memory consumption than option 2. Bemasc has noticed us about this: full-screen Browse resolution = 1200 x 900px. Canvas is 32 bits RGBA (4bytes). Then 1200 x 900 x 4 = 4.11 Mb per full-screen canvas. So imagine what is going to happen with 10 circles = 10 layers = 10 canvas.
      Also Bemasc has suggested to use scaling to reduce the size of the canvases.

  3. One single canvas
  4. All the objects will be rendered here, thus it’s necessary to have a “Objects tree” and render all the tree from time to time. This is the approach that uses Ilmari Heikkinen with Cake-js.

    • Pros:
    • Less memory consumption than option 1.

    • Cons:
    • More cpu consumption than option 1. Since it’s necessary to render all the tree.

To benchmark:
what is rendered faster on the XO: a full-screen size canvas or a medium-screen (full-screen/2) size canvas with x2 scaling?

Although the answer, I think the best option is number 2, since regardless of the size of the canvas it’ll come a moment when Karma will be devouring the XO (or any machine) memory 😦

About the Karma Objects
I’m talking about how to deal with Objects, we need to store what we draw, so we can use them on the future. Here’s a UML design about the actual Karma Objects, I have to say it’s alpha version and there are some JS features that I haven’t been able to put on the UML.


any suggestions?

Blog at