HTML5 Local Storage Database - SOLVED!!

So as I was saying in my last post, I was stuck trying to figure out why my code to create a table in a html5 local storage database.
Well yesterday, I managed to work it out! It turns out it was pretty simple (of course, these things always turn out to be super simple and you feel stupid for being so stuck on it haha).
I based my code on this example I found here: http://www.redrobotzoo.com/posts/html5-local-storage-and-local-databases-tutorial/
I scoured google to find a straightforward example, which was so painful! Like this one, http://www.html5rocks.com/en/tutorials/webdatabase/todo/, is terrible. It says "Simple Todo List" so you think ooh yay! but gosh it was so difficult to understand what each part and variable was for!
And my biggest problem was that every time I copied the code and modified it to test it, the database would stop working.
Anyway, after hours of headache and re-starting, I managed to figure out what was what, thanks to redrobotzoo's detailed commenting and use of jquery for simplification.
But the problem I still had with redrobotzoo's code was that the database was being created but not the table. My code for "CREATE TABLE IF NOT EXISTS" wasn't creating a table!
Turns out, I just needed to put it all in one line where redrobotzoo concatenated the line for some reason.
eg:
This didn't work:
tx.executeSql('CREATE TABLE IF NOT EXISTS test ('
                           + 'personId INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,'
                           + 'personName VARCHAR(255),'
                           + ');',[],nullData,errorHandler);
But this did:
tx.executeSql('CREATE TABLE IF NOT EXISTS local_ranking(nameId INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,username VARCHAR(255))'
,[],nullData,errorHandler);

I am so happy now that it works! Now our app has a local ranking table :D

CS Unveiled Event and Testing on Android tablet

Monday was our department's event called CS Unveiled, where they explained to guests about the programs and facilities at our department.
My team and I were also there to present what our project was so far.
Here's a picture of us :)

As you can see, I am holding a tablet device..... with our app on it!!!!

Our professor gave each team an android tablet to carry our testing on different devices and so I used Phonegap, a great tool for porting web-based applications into different platforms including iOS, Android, Windows, Blackberry...

Phonegap Build is very efficient and easy to use. I just had to zip the folder containing all our html/javascript/css/image files and upload it onto Phonegap Build and it builds your app for different platforms xD

Here are some tips for the minor problems I encountered:
- don't use hydration for simple testing purposes (our app wouldn't load properly with hydration)
- make sure your index.html is in the main folder that you zip and not in a folder within that folder e.g. we had our index.html in a folder called html with all the other html files. It's better to have an index.html that links to a main.html in the html folder. (http://community.phonegap.com/nitobi/topics/app_dies_on_startup_connection_to_the_server_was_unsuccessful)

Now I'm working on creating a local storage database on html5 but it's really difficult... I don't know why but I keep getting an error that the database doesn't exist even though I have "CREATE TABLE IF NOT EXISTS" in my code! :(

Anyway, here are the more close up pictures of our app on the tablet :)

Hehe, it feels so precious when you've put in so much effort! My babyyyyyy haha Can't wait to see it completed :)

Wireframe for App

I just updated the iCodon app blog! Today's post was about how the User Interface of the app matches the Use cases that I drew up towards the beginning of the project.
I made a whole bunch of wireframe diagrams on my iPad to show all the screens of the game so here they are and if you want to read further explanation about it, do check out my post on the iCodon blog here.