HTML5 Application Development Fundamentals
If a ball is drawn onto a canvas at positions x,y, which three statements are true when the ball is visible within a rectangle of dimensions top, bottom, left and right?
(x > top AND x < bottom) AND (y > left AND y < right) (x > top OR x < bottom) AND (y > left OR y > right) (x < top AND x > bottom) OR (y > left AND y < right)
What is the output of the following HTML 5 snippet? <ol> <li>Red</li> <li>Blue</li> <li>Green</li> </ol> <ul> <li>Train</li> <li>Plane</li> <li>Boat</li> </ul>
A numbered list of colors and a bulleted list of transport types
cloneNode()
Can create a copy of any element that can be placed anywhere within the document
insertBefore()
Can insert an element immediately before another element as a sibling
insertAdjacentHTML()
Can insert nodes as a child or sibling of another element
replaceChild()
Can substitute one for another in the document object model
VALUE
Defines the default for an input box
TYPE
Defines the input data format
WBR
Defines the preferred location for a wordbreak or hyphen to aid formatting
Properties
DisplayName, Publisher DisplayName, Description and Logo
Your web application needs to determine if updated files are currently being downloaded from the server hosting the application. You add the following code to your application: Window.applicationCache.addeventlistener("EVENT", Function(e) { Alert("New or updated file Downloading"); }, False); Which event should you use to detect that a download of a new or updated file from the server is occurring? (Substitute the word "EVENT" width the appropriate word.)
Progress
Which two HTML5 tags are related to formatting content in a table?
Tbody Thead
You need to create a gradient background to a Hypertext Markup Language (HTML) 5 element for the Mozilla Firefox browser. The gradient should contain three colors: bright red at the top left, bright green 60% toward the bottom right, and bright blue at the bottom right. The gradient should be along a precise 45 degree angle. Which of the following Cascading Style Sheet (CSS) propety declarations will generate the desired appearance?
background-image: -moz-linear-gradient(-45deg, rgb(255,0,0), rgb(0,255,0) 60%, rgb(0,0,255));
You use the following code to make a Geolocation request of the browser: navigator.geolocation.getCurrentPosition(gotPositionSuccess, gotPositionFailed); How do you display the current altitude in meters to the user
function gotPositionSuccess(coordinates) { var altitude = document.getElementById("altitude"); altitude.innerHTML = coordinates.latitude; }
You have a Hypertext Markup Language (HTML) 5 table that needs to be temporarily invisible to the user every time a specific function executes. Which line of code will achieve this?
document.getElementById("lableld=true")
You are designing a form for an online sales store and need to provide a means of cryptographically identifying and securing the user session while users are connected to the site. The web site itself has SSL in place, but there is no capability for individual user certificates. What HTML5 feature can you use to provide this capability?
Use the <keygen> element
You have an English-language Hypertext Markup Language (HTML) application that uses a Cascading Style Sheet (CSS) grid for layout. Which CSS property should be set to the value "stretch" to make an HTML element fill the width of a cell in the grid?
grid-column-align
Which Cascading Style Sheet (CSS) property declaration should you use if you want a Hypertext Markup Language (HTML) element to show scroll bars if the content does not fit tin the bounding box?
overflow: auto;
You use the following code to run a JavaScript script: var w = new Worker("myScript.js"); In the file myScript.js, which method should you call to send the results back to the calling script?
postmessage
key(arg1)
Can be used with the length property to iterate all stored keys
createElement()
Can build any new element in code by using the document object
You have a Hypertext Markup Language (HTML) p element that is too narrow for the intended layout. It has the following Cascading Style Sheet (CSS) computed style: margin: 5px; border-width: 5px; padding: 20px; outline-width: 5px; width: 470px; Which two CSS properties can you set 10px so that the total box model width of the paragraph will equal 500px?
margin border-width
You need to fade the foreground color of a hyperlink when the user points the cursor to it. You should use Cascading Style Sheet (CSS) styles that support the Google Chrome browser. Which of the following CSS properties is required?
-webkit-transition-duration
What is the maximum package size for a published Windows Store application?
2048 MB
Your Hypertext Markup Language (HTML) application uses a flexbox to arrange three div elements. The first two div elements have a box-flex Cascading Style Sheet (CSS) property set to the value 20. The third div element should use 50% of the parent containers width. what value should you use for the box-flex CSS property for the third div element?
40
What is the recommended size of a touch target on a Windows 7 phone application?
9 mm square
Review the code snippet below: <!DOCTYPE html> <html> <body> <details> <summary>Opening Text Sample</summary> <p>The quick brown fox jumped over the lazy dog</p> </details> </body> </html> To force the details panel to open automatically, <detail> tag needs to be modified. Which two lines can be used to modify the <details> tag? (Each correct answer presents a complete solution. Choose two.)
<details open> <details open="open">
Which two HTML5 items should be used to construct a global navigator for a web site? (Choose two.)
<nav> element href attribute
You have a JavaScript function that alters the contents of a "div" element. The function is called from a file called "dynamic.js". How do you load "dynamic.js" from the header?
<script type="text/javascript" src="dynamic.js" defer="defer"></script>
Review the code snippet below: (Line numbers are included for reference purposes only.) 1 <>canvas id='mySampleCanvas' width='200' height='100' style='border:1px solid #c3c3c3;'></canvas> 2 <script type='text/javascript'> 3 var c=document.getElementById('mySampleCanvas'); 4 var ctx=c.getContext('2d'); 5 ctx.beginPath(); 6 ctx.arc(70,50,15,0,Math.Pi,true); 7 ctx.closePath(); 8 ctx.fill(); 9 </script> What object is drawn by the code on lines 5 through 8 of the snippet?
A filled semi-circle
What is the navigator.getUserMedia method used for?
Accessing streaming multimedia hardware such as audio, video, and web camera hardware of the device
getItem(arg1)
Can be used instead of a property to retrieve the value assigned to the key
COL
Can be used to define dimensions and colors within a table
setItem(arg1, arg2)
Can be used to store strings only
Which HTML element can be used to format multiple sections of a table to set, for example, background colors across two columns?
Col
Visual Elements
Default Title, Logo, Background Color and Splash Screen
Capabilities
Declare access to protected resources
Extension
Declares something the app can be associated with and the default handler for
To load all of the data from a local file into memory using JavaScript, which type of object should you use?
FileReader
MARK
Highlights a text block
You need to call a JavaScript function called "updateDetails" every time the user makes a selection in a drop-down list box with the id attribute set to "ProductList". What should you do? (Each correct answer presents a complete solution. Choose three.)
In JavaScript code that executes after the document is loaded, use the statement document.getElementById("ProductList").addEventListener("change", updateDetails); In the Hypertext Markup Language (HTML) element definition, add the attribute onchange="updateDetails();" In JavaScript code that executes after the document is loaded, use the statement document.getElementById("ProductList").onchange = updateDetails;
You are designing an HTML5 application that needs to support revisits to a web site where a user can work with a Microsoft Office document or other downloaded file type. Each file may be up to a couple of megabytes in size and needs to persist in a storage location so that it is accessible to all browser windows on the same client PC. you need to determine what data storage to use. Which option should you choose?.
LocalStorage
You want to enable touch based user input in a Hypertext Markup Language (HTML) 5 application. You want to handle touch gestures without performing tracking and arithmetic calculations on individual touchpoints. You need to support Internet Explorer 10. Which event should you handle?
MSGestureChange
You have a Hypertext Markup Language (HTML) 5 application designed to run on Microsoft Internet Explorer 10. You need to program your application to handle mouse, touch, and pen input. Which event should your JavaScript code handle to process a mouse click or a touch- or pen-tap?
MSPointerDown
Which attribute can be used to control the output medium for which a video is intended? For example, if the developer wanted to ensure that a different video file was loaded based on the available screen resolution of the user's browser..
Media
identity
Name, version, publisher, proc architecture and resume identity for the package
What is the observed behavior of the following HTML5 snippet? <!DOCTYPE html> <title>Video</title> <video controls autoplay> <source src="videos/movie1.wbm" type="video/webm"> <source src="videos/movie1.ogv" type="video/ogg"> </video>
Only the first movie that is compatible with the browser is downloaded and played
If your published application has more than one package, for example, an application that supports more than one processor type, three elements of the application manifest file must be identical. One of them is Package\Capabilities. What are the other two?
Package]Dependencies Package\Resources
Which attribute of the video element can be used to ensure that the video player displays a static image while the video is downloading?
Poster
localStorage
Provides storage that persists until the browser cache is cleared
sessionStorage
Provides storage that persists until the browser window is closed
Footer
Section of a document where one would expect to find information such as copyright data and author contact information
You are designing an HTML 5 application that needs to implement an online bookstore, allowing users to have multiple shopping baskets, one per browser window. Baskets may be turned into orders individually, potentially with separate shipping and payment information per order. The requests may be submitted in parallel from different browsers on the same client PC. You need to determine what data storage to use. Which option should you choose?
SessionStorage
While debugging an HTML5 touch-enabled application using the Visual Studio touch screen simulator, you need to test the swipe behavior of an object on the screen. Which simulator interaction mode should you use to simulate a swipe gesture?
Single finger touch
Which of the following statements about the Cascading Style Sheet (CSS) Template Layout Model are true?
Special-Purpose values are used for the display CSS property The layout is composed of rows and columns The display regions can be sized proportionally or absolutely
Method
Specifies how the form will be submitted
Novalidate
Specifies that the form does not need validation
STEP
Specifies the legal number intervals
MIN
Specifies the lower end of a numeric range
MAX
Specifies the upper end of a numeric range
Action
Specifies where the form data will be sent when submitted
Target
Specifies where the response to a post should be displayed
BDI
Tags a text block as possibly beiing formatted in a different direction to the rest
When using Cascading Style Sheet (CSS) 3-dimensional transformation, which transform function or property is required to make "close" objects appear large in the Safari browser?
The -webkit-perspective property
The globalCompositeOperation defines how images placed on a canvas will interact when they share the same canvas areas. Which statement describes the Destination-in operation?
The destination image is displayed where both source and destination are opaque. Other regions are transparent.
You have a JavaScript function that posts the data from a Hypertext Markup Language (HTML) 5 form to your server using the following code: var form = document.getElementById("theForm"); form.submit(); Which of the following are true?
The form will be submitted synchronously All select elements on the form will be submitted to the server
The globalCompositeOperation defines how images placed on a canvas will interact when they share the same canvas areas. Which statement describes the Lighter operation?
The sum of the source image and destination image is displayed. Color values approach 1 as a limit
What is the observed behavior of the following HTML5 snippet? <!doctype html> <title>Audio<title> <audio controls> <source src='videos/audio1.ogg' /> <source src='videos/Audio1.mp3' /> </audio>
The two audio tracks may be downloaded, but only the first track that is compatible with the browser is played.
What is the name of the procedure by which the operating system terminates an application process when the user navigates away from the application?
Tombstoning
Which Touch gesure on Windows Phone 7 is used to simulate a traditional right-click operation with a mouse?
Touch and hold
You have a JavaScript function that is passed as a FileReader Object. In the function, you call the FileReader's readAsArrayBuffer method. To process the file contents as an array of bytes, which type of object should you create?
UintBArray
Tap
Used to emulate a left mouse click
Pinch
Used to minimize content
Hold
Used to provide contextual menus similar to a right mouse click on a PC
Pan
Used to reorder items in a list
To execute JavaScript as a background (asynchronous) task, which Hypertext Markup Language (HTML) 5 Application Programming Interface (API) should you use?
WebWorker
Which three statements are true regarding a Windows Marketplace Application Submission? (Choose three.)
You must have a package upload control defined. You must supply an application name. Copyright and trademark information must be included.
From the sample HTML below, choose which answer can replace the "XXX" pattern to ensure that only three non-international letters are accepted for submission on the form: Country code: <input type="text" name="country-code" pattern="XXX">
[A-Za-z]{3}
From the sample HTML below, choose which answer can replace the "XXX" pattern to ensure the only three non-international letters followed by three numbers are accepted for submission on the form. Country code: <input type="text" name="country-code" pattern="XXX">
^([A-Za-z]){3}([0-9]){3}$
Your Hypertext Markup Language (HTML) 5 applicaftion needs to determine the motion of the device vertically, horizontally, and front-to-back. You program the application to handle the window.devicemotion event. In your event handler, which event properties do you need to process?
acceleration.x acceleration.y acceleration.z
You need to draw an image thumbnail into a canvas at one-eight the original dimensions of 400 pixels height by 600 pixels width. What code should you use?
context.drawImage(imageElement, 0, 0, 75, 50);
You need to draw a solid blue rectangle onto a canvas. What code should you use?
context.fillStyle = "blue"; context.fillRect(0, 0, 50, 50);
Review the code snippet below: 1 function rotateRect() 2 {var canvas = document.getElementById("MyCanvas"); 3 if (canvas.getContext) 4 {var ctx = canvas.getContext("2d"); 5 ctx.clearRect(0,0,canvas.width,canvas.height); 6 //Rotate 5 degrees 7 draw(); 8 }} What is the correct code sample to include at line 6 to rotate the canvas by 5 degrees?
ctx.rotate(5 * Math.Pi/180);
Your JavaScript function needs to create a new cookie for the current document. The cookie should be called "name" and the value is already stored in a variable called "name". This cookie must expire in one hour. It must overwrite any existing cookie called "name". What should you do?
document.cookie = "name=" + name + ";max-age=3600";
Which two attributes can you use to ensure the data in the form is sent to the correct target defined by the button clicked?
formaction action
You have a Hypertext Markup Language (HTML) 5 application that uses a grid layout. Your layout requires three columns. The first and last column should be 100 pixels wide, and the middle column should have 100 percent of the remaining width. Which Cascading Style Sheet (CSS) property definition will satisfy these requirements?
grid-columns: 100px 100fr 100px
You have a Hypertext Markup Language (HTML) 5 application that uses the following Cascading Style Sheet (CSS) grid-based layout: #grid { display: grid; grid-columns: 1fr "content-col" 2fr 1fr; grid-rows: fit-content "content-row" 1fr "footer-row" fit-content; } Which of the following CSS property declarations will position an element in the second and third columns of the second row? (Choose all that apply.)
grid-row: 2; grid-column: "content-col" end; grid-row: 2; grid-column: 2; grid-column-span: 2;
Your Hypertext Markup Language (HTML) 5 application contains many lengthy technical words that include the ­ HTML entity reference. Which Cascading Style Sheet (CSS) property declaration instructs the browser to hyphenate the words at the point of the entity reference?
hyphens: manual
In Microsoft Internet Explorer 10, which one of the following elements may specify the -ms-flow-into Cascading Style Sheet (CSS) property to define a named flow for a region-based layout?
iframe
Name
is the name of the form
What can you use to provide a selection choice for an input box?
list attribute
Which of the following will access the browser's Geolocation capabilities once, calling the function "gotPosition" when successful?
navigator.geolocation.getCurrentPositioning(gotPosition)
You have a Hypertext Markup Language (HTML) page that uses region layout. Under some circumstances, the content overflows the region and causes rendering problems with the remaining content on the page. Which Cascading Style Sheet (CSS) property declarations will force a clean break at the end of the final element in the region chain?
region-overflow: break; overflow: hidden;
you need to draw onto a Hypertext Markup Language (HTML) 5 canvas element named "theCanvas" by using JavaScript. What code should you use?
var content = document.getElementById("theCanvas").getContext("2d")
You make an asynchronous request to the server using the XMLHttpRequest object. The response from the server is the following text: { "confirmationNumber" : "X100094C" } You want to process this data using a JavaScript object. What should you do?
var obj = JSON.parse(responseText);
In an English-language Hypertext Markup Language (HTML) application, which of the following values for the box-orient CSS property will result in a vertically stacked flexbox? (Each correct answer presents a complete solution. Choose two.)
vertical block-axis
Your Hypertext Markup Language (HTML) 5 application needs to determine at which angle the device is inclined relative to a flat position. Which events should your application handle?
window.deviceorientation window.MozOrientation
You want to gradually and smoothly change the position of a div element over a period of 1500 milliseconds. What method should you use?
window.requestAnimationFrame
You need to increase the width of the space between words on a Hypertext Markup Language (HTML) document. Which Cascading Style Sheets (CSS) property should you use?
word-spacing
You need to make an asynchronous Ajax request to the server to fetch a product description contained in the "product-c.txt". You have already completed the following code: var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 & readystate.status == 200) { document.getElementById("productDescription").innerHTML = xhr.responseText; } } what block of code should you write next?
xhr.open("GET", "product-c.jpg", true); xhr.send();