HTML5 Picture Quiz Tutorial

Creating a mobilefriendly picture quiz using HTML5 a tutorial from flashbynight.com

What you will learn:  

how to build a simple picture matching quiz as a web page basic techniques and technologies used in HTML5

Prerequisites: 

basic knowledge or experience with HTML or Javascript will be helpful

Required time: Approximately 2 hours Info This will be a great project for anyone starting out in HTML5 who wants a simple and fun project to build. How about we make a picture matching quiz! We can make it easy to extend and add questions to and we can even make sure it will work on a mobile phone. And if you just want to grab the source code without following the tutorial, then that’s fine, too.

You can view a working example at http://flashbynight.com/tutes/pixquiz/example/

and download the completed source files at http://www.flashbynight.com/tutes/pixquiz/source.zip

An online version of this tutorial is available at: http://www.flashbynight.com/tutes/pixquiz

Step 1 – Setting up the HTML document Although you could use Dreamweaver or similar software, to create an HTML document, you don’t need any special software, you can simply use any text editor such as Textpad or Wordpad. Open your text editor and type:

This is the way that we begin all of our HTML5 documents. Now let’s fill out the rest of the document: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

HTML5 Picture Quiz Sample HTML5 Picture Quiz

Believe it or not, that’s our whole html document, except for one line which we will add later to make it mobile-friendly. The line controls what is shown on the browser tab as the title or description of the page. [3]. The next line tells our page to look for a document called ‘main.css’ which will hold all of our style information (background colors and so on). [4]. The first line tells the page to look for a JavaScript file called ‘jquery’. This is a standard JavaScript ‘extension’ widely used by developers to make JavaScript more powerful. We will not need to write this file ourselves. [5]. The second line tells the page to look for a JavaScript file called ‘controller.js’. This is the file we will use to control the quiz interactivity. [6]. The next few lines, in the of the page name ‘div’s or dividers that we will use to hold the page content. The ‘topbar’ will hold our page title. The ‘spacer’ div will make space on our page. ‘navContent’ holds two containers:

‘game1’ which will hold the current question and ‘game2’, which will hold the next question. [8-15]. Notice that most divs have an id, a unique identifier. One of them has a class name instead of an id name. That means we may use it more than once. Save the document as index.html. Test it out by opening it in a browser (rightclick and choose Open With and choose a browser). Obviously, there will not be much to see yet.

Step 2 – Project management So we know that we will need the following files to build our project: index.html, which we have already done. main.css, which will hold the style information jquery.js, which will enhance standard JavaScript controller.js, which will control the quiz We will also need images, since this is a picture quiz project, and we will need a JSON file to hold our questions. Don’t worry, just like the html, css and js pages, we can write a json file using any text editor.

Step 3 – Build a question database Create a file in your text editor named activity.json. Then open it up and type in the following: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

{"quizlist":[ { "question":"Which picture shows a lion?", "option1":"lion.png", "option2":"tiger.png", "option3":"cheetah.png" }, { "question":"Which picture shows a labrador?", "option1":"labrador.png",

11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.

"option2":"beagle.png", "option3":"poodle.png" }, { "question":"Which picture shows a meerkat?", "option1":"meerkat.png", "option2":"chipmunk.png", "option3":"squirrel.png" } ]

This is a JSON file and it holds data in groups. We can use it to hold our question database. You’ll notice that it is easily readable by either machine or human. Each JSON element holds a question and three options, which are references to pictures in this case. The first option should always be the correct answer. Later, if we wish to change or add any questions, this is the only file we will need to modify, apart from making the relevant pictures available. That means our quiz can be recycled and can even be edited by someone with very little technical expertise. * Note that you will need to make sure that you stick very carefully to the format. A missing or extra comma, for example, can cause problems. Save the file and continue.

Step 4 – Gather assets From the JSON file, we see that we will have three questions and we will need three images for each, in png format (jpg or gif format will also work). For standardisation, we want each picture to be 80x80 pixels. Different sizes will work, but will look odd on the page and may mess up the display on a smallscreen mobile device. You can obtain the images used in our sample here: http://www.flashbynight.com/tutes/pixquiz/source.zip

To make things easy for ourselves, we will put all the images in a folder called img. When you upload the quiz to a website, the folder structure must be maintained. In other words, you will need to upload the entire folder. The other asset that we need is our JQuery file. You can either get it from the source files in the link above or if you want the latest version, you could download it from jquery.com. I am using version 1.9.1. If you use a later version, be sure to shorten the name to jquery.js

Step 5 – Build a style sheet We will use a CSS file to control the look and feel of our quiz. Later if we need to modify the look and feel, we need only modify the CSS file. Create a document entitled main.css and open it with any text editor. 1. 2. 3. 4. 5. 6.

html, body { margin: 0; padding: 0; background-image:url(greybg.png); font-family: Arial, Helvetica, sans-serif; }

This tells us that we will use a background image called greybg.png as the background for the entire page. (It is a small image which will repeat itself; make sure to get it from the source files and place it in your project folder.) Then unless we override it, we will use Arial font, or Helvetica or sans-serif if Arial is not available. We set margin and padding to 0 so that the page will not have any extra spacing. 1. 2. 3. 4. 5. 6. 7. 8.

#navContent{ margin:auto; width:800px; height:400px; position:relative; overflow:hidden; }

9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.

#game1{ margin:auto; width:800px; height:400px; right:0px; position:absolute; } #game2{ margin:auto; width:800px; height:400px; right:-800px; position:absolute; }

navContent will be our outer container, holding game1 and game2, which will contain the current and next questions. We want our quiz to be 800 pixels wide, 400 pixels in height and centered horizontally on the page (margin:auto). Anything that ‘sticks out’ of this area will be hidden (overflow:hidden). ‘game2’ will begin outside of this area (right:800px) and hence will be hidden. In CSS, we refer to an ID name by a hashtag (#) and we refer to a class name by a dot (.). Remember, we expect to reuse class names for multiple elements, but the ID name should refer to a unique element. Some standardised elements (body/html) are referred to directly. Let’s continue: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

.questionText{ font-size:18px; color:#FFF; } .pix{ width:80px; height:80px; margin:15px; float:left;

11. 12. 13. 14. 15. 16. 17.

border: 5px solid white; cursor:pointer; } .pix:hover{ border:#FC0 solid 5px; }

We define our question text font-size and color (#fff is white). If you need a reference for color codes, try colorpicker.com We want our pictures to be 80x80 pixels. We need a margin of 15 pixels just to space them out. We should show them side-by-side (float:left) with a white border. We should show a pointer so that the user knows they are clickable (cursor:pointer). When the user mouses over a picture, the border should turn yellow, for a nice effect. Now for a couple of miscellaneous items: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

#topbar{ height:100px; margin:auto; margin-top:50px; color:#FFF; font-size:36px; font-family:Arial, Helvetica, sans-serif; width:800px; } .spacer{ height:30px; }

‘topbar’ will hold our title, which you can check looking back at the HTML file. ‘spacer’ simply adds a little space between the title and the beginning of the quiz.

Although we are not reusing ‘spacer’, we define it as a class because we might reuse it in other projects. A good designer always produces recyclable content and CSS files are very easy to reuse. Let’s finish off our CSS: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.

.feedback1{ width:150px; padding:5px; font-size:30px; color:#FFFFCC; background-color:#009900; font-family: Arial, Helvetica, sans-serif; text-align:center; position:absolute; top:170px; } .feedback2{ width:150px; padding:5px; font-size:30px; color:#FFFFCC; background-color:#CC3300; font-family: Arial, Helvetica, sans-serif; text-align:center; position:absolute; top:170px; }

We will use ‘feedback1’ and ‘feedback2’ to style two messages: CORRECT and WRONG depending on whether the user gets the question right or not. You can see that the only difference between the two styles is that one has a green background [6] and the other has a red background [18]. We will position the messages 170 pixels from the top of their container (top:170px). That will do for the CSS for now. We will add some more later to ensure the quiz works on a mobile phone.

Step 6 – Creating the JavaScript code Well, so far we’ve done a lot of work and we have little to show for it! We’d better remedy that. Create a document called controller.js, save it and open it with a text editor or other program. 1. $(document).ready(function () { 2. 3. 4. });

This is how we begin and all of our code will fall between these two lines. It basically says that we will do the following as soon as the document is ‘ready’ in the browser. We’ll begin by defining the various variables we will need to use: 1. 2. 3. 4. 5. 6. 7.

var var var var var var var

questionNumber=0; questionBank=new Array(); stage="#game1"; stage2=new Object; questionLock=false; numberOfQuestions; score=0;

We will always try to keep our variables ‘human and machine readable’. For example, we can see the variable numberOfQuestions refers to the number of questions. Following this principle makes it really easy to read your code. An array is a series of variables. For example, if a=["tiger","lion","panther"] then a[0] is tiger, a[1] is lion and so forth. ‘stage’ and ‘stage2’ are objects that we will use to refer to the containers for the current and next questions. Right then, we need to get the data from our JSON file into a useable format in controller.js. Here’s how:

1. $.getJSON('activity.json', function(data) { 2. 3. for(i=0;i