HTML5 Test 2017 Upwork Test Answers

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

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


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


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


5. Which HTML5 doctype declarations are correct?

Answers:

• <!doctype html>
• <!DOCTYPE html>
• <!DOCTYPE HTML5>
• <!DOCTYPE HTML>



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




8. True or false:

JavaScript objects can be stored directly into localStorage.

Answers:

• True
• False


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


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


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


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


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


15. Can we store JavaScript Objects directly into localStorage?

Answers:

• Yes
• No


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



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


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

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

Answers:

• onerror
• onended
• onloadeddata
• onemptied



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

Answers:

• now
• 2013-05-30
• 2013-30-05
• today


21. Which of the following input element variations will show a numeric keypad in mobile browsers?

Answers:

• <input type=»text» pattern=»[0-9]*» />
• <input type=»number» />
• <input type=»text» keyboard=»numeric» />
• <input type=»text» keyboard=»number11″ />


22. How can audio files be played in HTML5?

var sound = new Audio(«file.wav»);

Answers:

• sound.begin();
• sound.resume();
• sound.start();
• sound.play();


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

Answers:

• CCTV
• MPEG 4
• Ogg
• 3GPP


24. What is the proper syntax for a line break tag as W3C specs defines?

Answers:

• <br>
• <br/>
• <br />
• All of these.

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

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

27. 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».


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



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


30. Which of the following are possible ways to make the browser automatically adds new images and discards deleted images with server-side events in HTML5?

Answers:

• Long Polling Ajax Requests
• Server-sent Events
• WebSockets
• JavaScript objects on the client via JSON.parse().













First