oDesk HTML5 Test Ans 2015

·


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]);