The Karma Project: Code Less, Teach More

June 16, 2009

canvas – js interaction

Filed under: News — subzero @ 11:23 am


I have been working on “Quadrilaterals” activity from OLE Nepal.

here is the flash version:

go to
choose something like “3″ (on the top)
choose the first button on your right
click on the activity’s image (wait, it’s loading)
click on title
click on the “2” button

and here is the Karma version (under development):

Working with it I found troubles and… yes, solutions, also I got some new ideas, lets start:

There is one little (big) difference between “Quadrilaterals” and “Can and Can’t“: buttons.
“Can and can’t”: I used the jQuery click event to handle clicks on the div html tag for the white row.
“Quadrilaterals”: I’ve implemented a solution based on canvas, these are images that behave as normal buttons. The advantage is that it permits interaction between code and mouse events (i.e. mouseup, mousedown, mouse over). Disadvantage: the click area is limited to a specific region (circles for now).

There are some other things that we have to improve:

  • TextFields (I would like something like flash one, maybe it’s too much)
  • draw rectangles, circles, etc.. It’s posible with the actual js code, but It would be really good to write less do more.
  • to separate the code and the design of the buttons (from now Karma buttons).
  • layers? well… div is the unqiue way, so something like Karma.addLayer( "layer"); would be useful

I’m working around all this, so keep tuned, there is a lot more to see 😉



  1. Hi!

    playing with the quadrilaterals application I found some bugs. When I tried to draw a triangle using four lines it says nothing, however it should show the alert for the wrong answer. let me explain you:

    1. I put the cursor in the center and click
    2. move up and click
    3. move right, down and click.
    4. move down, left and click.
    5. move up and click.

    This is a figure of four lines, but it’s a triangle.

    I hope you fix it.

    Comment by Yuram — June 21, 2009 @ 6:31 am

  2. Hi again:

    playing and playing again I found other bug, I can draw several lines in the same point:

    The application said me nothing and I think this figure is fine. However it should me show me error message.

    I hope you solve this other bug.

    Comment by Yüram — June 21, 2009 @ 6:44 am

    • hi Yüram

      thanks for your feedback,
      It’s done, now it works 🙂

      this version is under development, so I have not coded some parts yet..
      anyway, if you found other bugs please tell me



      Comment by subzero — June 21, 2009 @ 11:12 am

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at

%d bloggers like this: