Thursday, May 31, 2012

HTML5 Multiple Choice Quiz Tutorial

I remember when I started working with HTML5 and I was surprised I couldn't find a decent tutorial for making a simple MCQ quiz. So now that I've gotten more confident with the technology, I've decided to publish my own. Putting together a short quiz is an excellent project for someone starting off with a technology, and it's great for someone crossing over into HTML5 from Flash.

The tutorial is here: http://www.flashbynight.com/tutes/html5quiz/

And it includes all the code and artwork you need for the project.

UPDATE: I have produced a simpler version, see here: http://www.flashbynight.com/tutes/mcqquiz

and a version with pictures here: http://www.flashbynight.com/tutes/pixquiz

The new versions will work on phone screens too.

UPDATE 2: A version with a varied number of options:

example: http://flashbynight.com/tutes/mcqquiz/example2/
source: http://flashbynight.com/tutes/mcqquiz/example2/source.zip

Monday, May 14, 2012

HTML5 - Prevent that green highlight on an Android touch event

The Android operating system puts a green highlight around certain items when they are selected. Now, if you are creating, say, a quiz on the HTML5 canvas, you don't want that. What's more, I believe the iPad displays an orange highlight.

To get rid of all these nuisances, put this line of code in canvas element



-webkit-tap-highlight-color:rgba(0, 0, 0, 0);