HTML5

Question 1

What is the section tag used for?

Answer 1

It is typically used to contain a blob of data. It is usually only used if the data would have a natural heading. The spec says that a section should usually be identified by having a heading (h1-h6) as a child of the section element.

Question 2

What are the two elements used when quoting text?

Answer 2

< q> and <blockquote>

Question 3

What is the difference between a block element and an inline element?

Answer 3

Block elements are always displayed as if they have a linebreak after them, inline are displayed inline with text.

Question 4

What do you call an element with no content?

Answer 4

A void element (br element for example)

Question 5

HTML has ordered and unordered lists - are there any others?

Answer 5

yes, definition lists. 
< dl>
  <dt>Definition term</dt>
  <dd>Definition Description</dd>
< /dl>

Question 6

What is nesting?

Answer 6

When separate HTML elements are included within each other.

Question 7

Is the img tag a block or inline element?

Answer 7

inline block (i.e. it is inline, but has some behaviors of block elements)

Question 8

What role does the h1, h2 etc tags play in SEO?

Answer 8

The higher numbers (i.e. h1) have a higher priority in a search engine result - prioritising sections of page based on heading numbers

Question 9

What is SEO?

Answer 9

Search Engine Optimisation

Question 10

How do you configure an “a” element to make a link open in a new window?

Answer 10

Use the “target” attribute - to make it ALWAYS open in a new window, use the value “_blank”.

Question 11

What is responsive web design?

Answer 11

When a web layout automatically conforms to a devices screen / limitations through use of CSS

Question 12

What tag do you use to make sure the web page starts at the right scale for a device?

Answer 12

< meta name=”viewport” content=”width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0” />

Question 13

What do you use to ensure IE 7 and 8 can deal with HTML5 tags?

Answer 13

HTML5Shiv

Question 14

How do you make your website use a specific CSS style sheet based on device?

Answer 14

Use the media attribute on the link tag..

< link rel=”stylesheet” type=”text/css” media=”only screen and (min-width:50px) and (max-width:500px)” href=”css/screen_layout_small.css” />

Question 15

What would be a cause for fonts getting progressively bigger throughout a page?

Answer 15

Not closing off h1 (h2 etc) tags. Opening the tag tells the browser to increase the font, closing it tells it to decrease - not closing means it’s additive.

Question 16

What does the canvas tag look like?

Answer 16

<canvas></canvas>

Question 17

How do you obtain a 2d context for a canvas?

Answer 17

var canv = document.getElementById("canvas");
var context = canv.getContext("2d");

Question 18

How would you fill the background of a canvas with the color blue?

Answer 18

(Having obtained a 2d context and a handle to ‘canv’)

context. fillStyle = “blue”;
context. fillRect(0, 0, canv.width, canv.height);

Question 19

What is one significant difference between declaring a function and assigning a function to a variable?

Answer 19

If the function is simply declared, the order that it is called (i.e. before it is declared in code) does not matter. However, if it is assigned to a variable, the function is only parsed in the second pass of the compiler - and will therefore cause an error if the function is called before it is declared (via the variable).
foo();
var foo = function() {}
// ERROR!

Question 20

How do you load a sprite?

Answer 20

var image = new Image();
// Then set the src attribute
image.src = 'nameoffile.png';

Question 21

How do you draw a sprite?

Answer 21

using the context
Game.context.drawImage();
// There are a large number of params for this

Question 22

How do you create a new drawing state?

Answer 22

Game.canvasContext.save();

Question 23

How do you remove an existing drawing state?

Answer 23

Game.canvasContext.restore();

Question 24

How would you translate a sprite (in a new drawing state)?

Answer 24

Game.canvasContext.translate(100, 100);

Question 25

What steps would you use to translate and draw a sprite using draw states?

Answer 25

Game.canvasContext.save();
Game.canvasContext.translate();
Game.canvasContext.drawImage();
Game.canvasContext.restore();

Question 26

When passing data as a parameter - what is the syntax for passing a struct like data structure?

Answer 26

function_name({ x: 100, y: 200 });

This is an object literal and lets you reference it by..
param_name.x
param_name.y

Question 27

How do you create an audio object to play an mp3 music track?

Answer 27

Game.music = new Audio();
Game.music.src = "mymusic.mp3";

Question 28

Given an initialised music clip - how do you play the music?

Answer 28

Game.music.play();

Question 29

Given an initialised music clip - how do you change the volume of the music?

Answer 29

Game.music.volume(0.4);

from 0 - 1

Question 30

There are two parameters that give position in a mouseMove handler - what are they?

Answer 30

pageX and pageY

clientX and clientY

Question 31

What is the difference between pageX and clientX?

Answer 31

clientX (parameter passed in a mouseMove handler) doesn’t take into consideration scrolling.

Question 32

What is the difference between Math.atan and Math.atan2 ?

Answer 32

Math.atan2 takes two parameters (the adjacent and opposite lengths) and returns and returns the equivalent in radians of 90 degrees). It is useful because the two parameters allow the function to detect whether a value of 0 was passed (not possible with atan) and gives an appropriate value.

Question 33

What steps would you use to translate, ROTATE and draw a sprite using draw states?

Answer 33

Game.canvasContext.save();
Game.canvasContext.translate();
Game.canvasContext.rotate();
Game.canvasContext.drawImage();
Game.canvasContext.restore();

Question 34

When you receive an event for a mouse button press, there are three possible values for evt.which. What are they?

Answer 34

left button = 1
middle button = 2
right button = 3

Question 35

What is the issue with spreading your classes across multiple files?

Answer 35

There is no simple way to enforce loading in order to preserve dependencies. Therefore you need to write a script that will load the files / and wait until it has finished before loading the next one. (such as LABjs)