HTML5 Test

1. Assuming that some text needs to be written on an HTML5 canvas, select a replacement for the commented line below:

<canvas id="e" width="200" height="200"></canvas>

<script>

  var canvas = document.getElementById("e");

  //insert code here

  context.fillStyle = "blue";

  context.font = "bold 16px Arial";

  context.fillText("Zibri", 100, 100);

</script>

Answers:

• var context = canvas.getContext();

• var context = canvas.getElementById("context");

• var context = canvas.getContext("2d");

• var context = canvas.getElementById("2d");

2. What is the role of the <dfn> element in HTML5?

Answers:

• It is used to define important text.

• It is used to define computer code text.

• It is used to define sample computer code.

• It is used to define a definition term.

3. The following are valid use cases of client file/directory access in HTML5, except:

Answers:

• Drag and drop files from the desktop

• Full file system access

• Use of the HTML5 File API

• Use of files as HTML5 input types

4. How does a button created by the <button> tag differ from the one created by an <input> tag?

Answers:

• An input tag button can be a reset button too.

• A button tag button can be a reset button too.

• An input tag button can include images as well.

• A button tag can include images as well.

5. What is the difference between Server-Sent Events (SSEs) and WebSockets in HTML5?

Answers:

• WebSockets can perform bi-directional (client-server and vice versa) data transfers, while SSEs can only push data to the client/browser.

• SSEs can perform bi-directional (client-server and vice versa) data transfers, while WebSockets can only push data to the client/browser.

• WebSockets and SSEs are functionally equivalent.

• None of these.

6. How can an HTML5 canvas size be changed so that it fits the entire window?

Answers:

• #myCanvas {height: 100%; width: 100%;}

• <script type="text/javascript"> function resize_canvas(){ canvas = document.getElementById("canvas"); if (canvas.width < window.innerWidth) { canvas.width = window.innerWidth; } if (canvas.height < window.innerHeight) { canvas.height = window.innerHeight; } } </script>

• It depends upon the complexity of the canvas, and the frequency of redraws.

• Calling the JavaScript getWidth() function.

7. Assuming that some text needs to be written on an HTML5 canvas, select a replacement for the commented line below:

<canvas id="e" width="200" height="200"></canvas>

<script>

  var canvas = document.getElementById("e");

  //insert code here

  context.fillStyle = "blue";

  context.font = "bold 16px Arial";

  context.fillText("Zibri", 100, 100);

</script>

Answers:

• var context = canvas.getContext();

• var context = canvas.getElementById("context");

• var context = canvas.getContext("2d");

• var context = canvas.getElementById("2d");

8. Which of the following video file formats are currently supported by the <video> element of HTML5?

Answers:

• CCTV

• MPEG 4

• Ogg

• 3GPP

9. Consider the following JavaScript code:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("img");

Which method will correctly draw an image in the x=10, y=10 position?

Answers:

• ctx.drawImage(img,10,10);

• context.drawImage(img,20,10,10,10);

• context.drawImage(img,10,20,10,10,20,20,10,10);

• All of these

10. How can audio files be played in HTML5?

var sound = new Audio("file.wav");

Answers:

• sound.begin();

• sound.resume();

• sound.start();

• sound.play();

11. You want to create a link for your website allowing users to email the webmaster. How will you implement this if the webmaster's email address is webmaster@xcompany.com?

Answers:

• <a href="mailto:webmaster@xcompany.com">webmaster</a>

• <a href="webmaster@xcompany.com">webmaster</a>

• <a http="mail:webmaster@xcompany.com">webmaster</a>

• <mail http="send:webmaster@xcompany.com">webmaster</mail>

12. Which of the following are sample use cases for HTML5 web workers?

Answers:

• Polling URLs in background

• Syntax highlighting without blocking code editing capabilities in online IDEs

• Motion tracking input in realtime with a video element

• All of these.

13. You are writing the code for an HTML form and you want the browser to retain the form's input values. That is, if a user submits the form and presses the browser's back button, the fully populated form is displayed instead of a blank form. Which of the following HTML 5 attributes will you use?

Answers:

• accept

• autofocus

• autocomplete

• formtarget

14. Which of the following video tag attributes are invalid in HTML5?

Answers:

• play

• loop

• mute

• pause

15. Which of the following statements are correct with regard to the <hr> and <br> elements of HTML5?

Answers:

• The <hr> element acts in the same way as the tab key and the <br> element acts in the same way as the shift key.

• The <hr> element is used to insert the horizontal line within the document and the <br> element is used to insert a single line break.

• The <hr> element is used to put a line across the page and the <br> element acts in the same way as a return/enter key press.

16. The following link is placed on an HTML webpage:

<a href="http://msdn.com/" target="_blank"> MSDN </a>

What can be inferred from it?

Answers:

• It will open the site msdn.com in the same window.

• It will open the site msdn.com in a new window.

• It will open the site msdn.com in a frame below.

• It will not be clickable as it is not formed correctly.

17. Which of the following examples contain invalid implementations of the ampersand character in HTML5?

Answers:

• foo & bar

• foo &0 bar

• foo &0; bar

• foo&&& bar

18. Which of the following <link> attributes are not supported in HTML5?

Answers:

• sizes

• rev

• rel

• charset

19. Which event is fired when an element loses its focus in an HTML5 document?

Answers:

• onfocus

• onload

• onblur

• onselect

20. Which of the following statements regarding WebSockets is true?

Answers:

• It communicates with the server with only the data required by the application.

• It lowers the latency of connections for interactive web applications.

• It scales better and consumes less server resources than HTTP AJAX/long-poll.

• All of the above.

21. Which of the following is a possible way to get fullscreen video played from the browser using HTML5?

Answers:

• <object> <param name="allowFullScreen" value="true" />

• <video allowFullScreen="true">

• <video height="100%" width="100%">

• None of these.

22. Consider the following items of a <select> list:

<option value="89">Item 1</option>

<option value="90">Item 2</option>

Which of the following values would be passed on by clicking the submit button on selecting Item 2 from the list?

Answers:

• 89

• 90

• Item 1

• Item 2

23. Which of the following are the valid values of the <a> element's target attribute in HTML5?

Answers:

• _blank

• _self

• _top

• _bottom

24. Which method of HTMLCanvasElement is used to represent image of Canvas Element?

Answers:

• toDataURL()

• saveAsImage()

• saveFile()

• exportImage()

25. Can we store JavaScript Objects directly into localStorage?

Answers:

• Yes

• No

26. When does the ondragleave mouse event get fired in HTML5?

Answers:

• It gets fired when an element has been dragged to a valid drop target.

• It gets fired when an element leaves a valid drop target.

• It gets fired at the end of a drag operation.

• It gets fired while an element is being dragged.

27. Once an application is offline, it remains cached until the following happens (select all that apply):

Answers:

• The application cache is programmatically updated.

• The application cache gets automatically cleared by the browser.

• The manifest file is modified.

• The user clears their browser's data storage for the site.

28. What is the internal/wire format of input type="date" in HTML5?

Answers:

• DD-MM-YYYY

• YYYY-MM-DD

• MM-DD-YYYY

• YYYY-DD-MM

29. Which of the following is not a valid syntax for the <link> element in HTML5?

Answers:

• <link rel="icon" href="abc.jpg" sizes="16x16">

• <link rev="stylesheet" href="abc.css" type="text/css" target="_parent">

• <link rel="alternate" type="application/pdf" hreflang="fr" href="manual-fr">

30. What does P2P streaming mean when web applications establish a P2P HTTP connection using HTML?

Answers:

• It means that streaming of a voice/video frame is direct, without using any server between them.

• It means that streaming of a voice/video frame is first between one peer to the server then the server to another peer.

• Communication does not rely on a shared relay server in the network.

31. Which of the following will detect when an HTML5 video has finished playing?

Answers:

• var video = document.getElementsByTagName('video')[0]; video.onended = function(e) { }

• var video = document.getElementsByTagName('video')[0]; video.onPlayend = function(e) { }

• var video = document.getElementsByTagName('video')[0]; video.onPlayFinish = function(e) { }

• var video = document.getElementsByTagName('video')[0]; video.onPlayBackended = function(e) { }

32. Which of the following methods can be used to estimate page load times?

Answers:

• Using _gaq.push(['_trackPageLoadTime']) with Google Analytics.

• Using the Navigation Timing JavaScript API.

• Page load times cannot be estimated.

• Using built-in JavaScript methods.

33. Which of the following are valid ways to associate custom data with an HTML5 element?

Answers:

• <tr class="foo" data-id-type="4">

• <tr class="foo" id-type="4">

• <tr class="foo" data-id_type="4">

• All of the above.

34. Which method of the HTMLCanvasElement is used to represent an image of a canvas element?

Answers:

• toDataURL

• toImageURL

• saveAsPNG

• saveAsJPEG

35. Which of the following is the correct way to store an object in localStorage?

var obj = { 'one': 1, 'two': 2, 'three': 3 };

Answers:

• localStorage.setItem('obj', obj);

• localStorage.setItem('obj', JSON.stringify(obj));

• localStorage.setItem('testObject', JSON.parse(testObject));

• localStorage.setItem(obj);

36. Which of the following code is used to prevent Webkit spin buttons from appearing on web pages?

Answers:

• input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

• input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

• noindex:-o-prefocus, input[type=number] { padding-right: 1.2em; }

• input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; padding-right: 1.2em; }

37. Which of the following will restrict an input element to accept only numerical values in a text field?

Answers:

• <input type="text" pattern="[0-9]*" />

• <input type="number" />

• <input type="text" pattern="\d*"/>

• <input type="text" pattern="number"/>

38. Which of the following is the correct way to display a PDF file in the browser?

Answers:

• <object type="application/pdf" data="filename.pdf" width="100%" height="100%"/>

• <object type="application/pdf" id="filename.pdf" width="100%" height="100%"/>

• <input type="application/pdf" data="filename.pdf" width="100%" height="100%"/>

• <input type="application/pdf" src="filename.pdf" width="100%" height="100%"/>

39. Which of the following is the best method to detect HTML5 Canvas support in web browsers?

Answers:

• isCanvasSupported()

• !!document.createElement("canvas")

• !isCanvasSupported()

• !!window.HTMLCanvasElement

40. Which media event is triggered when there is an error in fetching media data in HTML5?

Answers:

• onstalled

• onwaiting

• onsuspend

• oninvalid

41. Which of the following is the correct way to check browser support for WebSocket?

Answers:

• console.log(WebSocket ? 'supported' : 'not supported');

• console.log(window.WebSocket ? 'supported' : 'not supported');

• console.log(window[WebSocket] ? 'supported' : 'not supported');

• console.log(window['WebSocket'] ? 'supported' : 'not supported');

42. Which of the following shows correct use of client-side data validation in HTML5, on username and password fields in particular?

Answers:

• <input name="username" required /> <input name="pass" type="password" required/>

• <input name="username" validate="true"/> <input name="pass" type="password" validate="true"/>

• <input name="username" validate/> <input name="pass" type="password" validate/>

• There is no way to implement client-side validation for the username and password fields in HTML5.

43. Which of the following is not a valid attribute for the <video> element in HTML5?

Answers:

• controls

• autoplay

• disabled

• preload

44. Which of the following is the correct way to store an object in a localStorage?

Answers:

• localStorage.setItem('testObject', JSON.stringify(testObject))

• localStorage.setItem('testObject', testObject)

• localStorage.add('testObject', testObject)

• localStorage.addItem('testObject', testObject)

45. Which of the following is the correct way to play an audio file in HTML5?

Answers:

• var snd = new Audio("file.wav"); snd.play();

• <audio controls> <source src="file.ogg" type="audio/ogg"> <source src="file.mp3" type="audio/mpeg"> </audio>

• <source src="file.mp3" type="audio/mpeg">

• All of these.

46. Which HTML5 doctype declarations are correct?

Answers:

• <!doctype html>

• <!DOCTYPE html>

• <!DOCTYPE HTML5>

• <!DOCTYPE HTML>

47. Which media event will be fired when a media resource element suddenly becomes empty?

Answers:

• onerror

• onended

• onloadeddata

• onemptied

48. Which of the following HTML5 features is capable of taking a screenshot of a web page?

Answers:

• Server-Sent Events

• SVG

• Canvas

• Web Workers

49. Which of the following are true about the ARIA role attribute in HTML5?

Answers:

• Every HTML element can have an ARIA role attribute specified.

• Every HTML element is required have an ARIA role attribute specified.

• The attribute must have a value that is a set of space-separated tokens representing the various WAI-ARIA roles that the element belongs to.

• There is no ARIA attribute called "role".

50. True or False:

HTML5 Canvas can be used to create images.

Answers:

• True

• False

51. Which following are valid default values for the <input type="date"> HTML5 element?

Answers:

• now

• 2013-05-30

• 2013-30-05

• today

52. True or false:

JavaScript objects can be stored directly into localStorage.

Answers:

• True

• False

53. What is the limit to the length of HTML attributes?

Answers:

• 65536

• 64

• There is no limit.

• None of these.

54. Which is the standard method for clearing a canvas?

Answers:

• context.clearRect ( x , y , w , h );

• canvas.width = canvas.width;

• context.clear();

• All of these.

55. In HTML5, which of the following is not a valid value for the type attribute when used with the <command> tag shown below?

<command type="?">Click Me!</command>

Answers:

• button

• command

• checkbox

• radio

56. Which of the following attributes gets hidden when the user clicks on the element that it modifies? (Eg. hint text inside the fields of web forms)

Answers:

• autocomplete

• autofocus

• placeholder

• formnovalidate

57. What is the purpose of the <q> element in HTML5?

Answers:

• It is used to define the start of a term in a definition list.

• It is used to define attribute values for one or more columns in a table.

• It is used to define the start of a short quotation.

• It is used to define what to show browsers that do not support the ruby element.

58. Consider the following items of a <select> list:

<option value="89">Item 1</option>

<option value="90">Item 2</option>

Which of the following values would be passed on by clicking the submit button on selecting Item 2 from the list?

Answers:

• 89

• 90

• Item 1

• Item 2

59. Which of the following is the best method to store an array in localStorage?

Answers:

• var localStorage[names]=new Array(); localStorage.names[0]=prompt("New member name?");

• var names = []; names[0] = prompt("New member name?"); localStorage["names"] = JSON.stringify(names); var storedNames = JSON.parse(localStorage["names"]);

• Storage.prototype.setObj = function(key, obj) { return this.setItem(key, JSON.stringify(obj)) } Storage.prototype.getObj = function(key) { return JSON.parse(this.getItem(key)) }

• localStorage.setItem('names_length', names.length); localStorage.setItem('names_0', names[0]); localStorage.setItem('names_1', names[1]); localStorage.setItem('names_' + n, names[n]);