Upwork HTML5 Test

1. 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.

2. 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");

3. 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.

4. 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.

5. 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

6. 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

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

Answers:

• _blank

• _self

• _top

• _bottom

8. 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.

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

Answers:

• toDataURL()

• saveAsImage()

• saveFile()

• exportImage()

10. Can we store JavaScript Objects directly into localStorage?

Answers:

• Yes

• No

11. 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.

12. 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.

13. 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

14. 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">

15. 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.

16. 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) { }

17. 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.

18. 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.

19. 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.

20. 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.

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

Answers:

• toDataURL

• toImageURL

• saveAsPNG

• saveAsJPEG

22. 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);

23. 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");

24. 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; }

25. 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"/>

26. 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%"/>

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

Answers:

• isCanvasSupported()

• !!document.createElement("canvas")

• !isCanvasSupported()

• !!window.HTMLCanvasElement

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

Answers:

• onstalled

• onwaiting

• onsuspend

• oninvalid

29. 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');

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

Answers:

• CCTV

• MPEG 4

• Ogg

• 3GPP

31. 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.

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

Answers:

• controls

• autoplay

• disabled

• preload

33. 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

34. 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)

35. How can audio files be played in HTML5?

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

Answers:

• sound.begin();

• sound.resume();

• sound.start();

• sound.play();

36. 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.

37. Which HTML5 doctype declarations are correct?

Answers:

• <!doctype html>

• <!DOCTYPE html>

• <!DOCTYPE HTML5>

• <!DOCTYPE HTML>

38. 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>

39. 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.

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

Answers:

• onerror

• onended

• onloadeddata

• onemptied

41. 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

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

Answers:

• Server-Sent Events

• SVG

• Canvas

• Web Workers

43. 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".

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

Answers:

• play

• loop

• mute

• pause

45. True or False:

HTML5 Canvas can be used to create images.

Answers:

• True

• False

46. 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.

47. 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.

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

Answers:

• now

• 2013-05-30

• 2013-30-05

• today

49. True or false:

JavaScript objects can be stored directly into localStorage.

Answers:

• True

• False

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

Answers:

• 65536

• 64

• There is no limit.

• None of these.