Our First Mobile App for Learning Python - Soon Ready

Our company's (ByTheMark, that is) first mobile application is getting closer to publishing. It is a quiz game for learning and testing Python programming knowledge. Name of the app is Quiz & Learn Python.

The game asks questions ranging from simple concepts to more advanced tricks in Python programming.

The player has four lifelines at her disposal: remove two incorrect answers, skip the question, stop time and debug the program. The last one is what I think makes this game different from a typical quiz with questions about programming. Below is an image from the debugger.

The game will be soon available for iPhone, other platforms possible later. You can test Quiz & Learn Python online. On the linked page, you can also register for our newsletter to be notified when the game is ready!

DeviceOrientation event and device orientation

I've been building an HTML5+JavaScript demo for using the device orientation and device motion events for an educational application. The article "This End Up: Using Device Orientation & Device Motion" on HTML5 Rocks does a great job explaining how to work with these events. In my case, I'm controlling a ball based on the device orientation (you know, like in a labyrinth type game). This is easy to do with HTML5 device orientation events. So, what I do is register an event handler for the ondeviceorientation event:

window.addEventListener("deviceorientation", orientationHandler, false);

The handler simply stores the values from the event for later use:

function orientationHandler(eventData) {
  tiltLR = eventData.gamma;
  tiltFB = eventData.beta;

The gamma and beta attributes of the event object give the left-right and front-back rotation angles. Based on these values, the position of the ball can be updated (tiltLR is change of x-coordinate, tiltFB y). For the iPad, I've divided them by 3 to get a decent speed. Note, that I'm simplifying things here and not considering the fact that Firefox has an event of their own. Read the linked article for details.

Now all goes well until the user turns the phone/tablet on its side or upside down. Now the ball moves in weird directions. The simple fix to this (which I'm sure I'll forget soon, hence the blogpost) is to check window.orientation and change the values accordingly. The value of window.orientation will be 0 when the device is in its' normal orientation, -90 when rotated on its' right side, 90 on left side and 180 when upside down. So, to take this into account and get the x and y coordinate changes:

var orient = window.orientation;
if (!orient || orient === 0) { // normal portrait orientation
dx = tiltLR;
dy = tiltFB;
} else if (orient === -90) { // landscape, rotated clockwise
dx = -tiltFB;
dy = tiltLR;
} else if (orient === 90) { // landscape, rotated counterclockwise
dx = tiltFB;
dy = -tiltLR;
} else if (orient === 180) { // portrait, upside down
dx = -tiltLR;
dy = -tiltFB;

This works and the ball moves in a natural way relative to the browser window. Still, it is difficult to control it when the window gets rotated. Eventually, I'd like to disable rotation of the browser window. Is there any way to do it with HTML/CSS/JS? Or is this one of those things that require wrapping the webapp into a native application?

Finally, my use case for this: I'm building an interactive exercise for learning the binary search tree search that uses the deviceorientation event. After testing this on iPad, I ran into the problem described. More on the exercise later :)