User Interface Study Guide for EOC
You need to add the same CSS style to your images, headings and paragraph text on a Web site. Which CSS entry could accomplish this task? • #p{text-align: right;} • p.right {text-align: right;} • .right {text-align: right;} • #right{text-align: right;}
.right {text-align: right;}
Kenna is preparing to validate several new pages for her company's website. Which element determines the code version or specification that the validator will use to check the webpages code? • <meta> • <html> • <!DOCTYPE> • <link>
<!DOCTYPE>
Winnie wants to add a link to a mobile website that users can click to send a text message. What is the HTML to do this? • <a href="sms:18005551212">Text Us Now!</a> • <a sms="18005551212">Text Us Now!</a> • <a text="18005551212">Text Us Now!</a> • <a href="text:18005551212">Text Us Now!</a>
<a href="sms:18005551212">Text Us Now!</a>
You are creating an HTML5 form field with the autocomplete feature. When a user enters the letters "Uni" into the field, you want an autocomplete feature to complete the phrase "United States." What HTML5 element performs this task? • <output> • <keygen> • <datalist> • <range>
<datalist>
You are updating your company site's code to HTML5, starting with the home page. Which new HTML5 structure element should you use for the top portion of the page, where you will place the company logo and description? • <main> • <article> • <nav> • <header>
<header>
Which choice lists the new HTML5 structure elements? • <header>, <footer>, <body>, <nav>, <section>, <article> and <aside> • <head>, <!DOCTYPE>, <main>, <div>, <blockquote>, <table> and <div> • <header>, <footer>, <main>, <nav>, <section>, <article> and <aside> • <!DOCTYPE>, <html>, <body>, <div>, <CSS>, <link> and <table>
<header>, <footer>, <main>, <nav>, <section>, <article> and <aside>
Which of these will apply a mobile-specific set of styles that will only display when the page is viewed on a device with a maximum screen width of 320 pixels? • <media href="mobile.css" rel="stylesheet" type="text/css" device="screen and (max-width: 320px)"> • <link href="mobile.css" media="stylesheet" type="text/css" rel="only screen (max-width: 320px)"> • <link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)"> • <link href="mobile.css" rel="stylesheet" type="text/css" media-type="(maximum-width: 320px)">
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)">
Which code correctly links a webpage to an external stylesheet? • style {type="text/css" rel="stylesheet" href="css/main.css";} • <style type="text/css" href="css/main.css" /> • <link rel="stylesheet" type="text/css" href="css/main.css" /> • link {rel="text/css" href="css/main.css";}
<link rel="stylesheet" type="text/css" href="css/main.css" />
Jorge has created an external style sheet named main.css and now he wants to associate this stylesheet with an HTML document. Which line of code will connect an HTML document to a stylesheet? • <style type="text/css" href="main.css"/> • <link rel="text/css" type="stylesheet" href="main.css"/> • <style link="stylesheet" href="main.css"/> • <link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Your company uses a custom font for the company Web site. To add the custom font to your department's intranet Web site, which at-rule is correct? • @font-face {font-family: customfont; src: url("../media/customfont.ttf");} • @font-family {name: customfont; src: url("../media/customfont.ttf");} • @font-family {font-face: customfont; src: url("../media/customfont.ttf");} • @font-face {name: customfont; src: url("../media/customfont.ttf");}
@font-face {font-family: customfont; src: url("../media/customfont.ttf");}
What term describes a named set of JavaScript statements that performs a task or calculates a value, can be used multiple times, and can be processed or invoked by other parts of the script? • An event • A parameter • A function • An object
A function
You are designing a Web page. You want to position an image so it appears to float above the document and can be repositioned as needed. Which CSS positioning scheme can accomplish this task? • Static • Absolute • Fixed • Relative
Absolute
Picturesque, a furniture dealer, uses background music on its website in order to create a pleasant shopping experience for the customer. The Picturesque web developer wants to allow site users to stop the music or change its volume with audio controls. The developer knows that he must use the HTML5 <audio> element. What code should he add to the webpage to ensure that customers with modern browsers can adjust the music? • Add autoplay="autoplay" to the <audio> element • Add loop="loop" to the <source> element • Add controls="controls" to the <audio> element (correct answer, your response) • Add autoplay="autoplay" to the <source> element
Add controls="controls" to the <audio> element
Which of these best describes the relationship between a JavaScript function and a method? • All functions are methods but not all methods are functions. • Methods are deprecated in favor of functions in JavaScript. • All methods are functions and all functions are methods. • All methods are functions but not all functions are methods.
All methods are functions but not all functions are methods.
Hamlet is coding a webpage using HTML5 and CSS3 and wants to make an image blend into the page background, giving it a sense of transparency. What should he do? • Apply the HTML box-shadow attribute in the <img> element. • Apply the CSS transparency property to the image. • Apply the HTML clear attribute in the <img> element. • Apply the CSS opacity property to the image.
Apply the CSS opacity property to the image.
Which of the following statements about JavaScript arguments is correct? • Arguments are pieces of data that the function receives and manipulates from outside the function. • Arguments exist only for the life of the function. • A maximum of 10 arguments can be used to perform a function's task. • Arguments are contained within parenthesis and separated by semicolons.
Arguments exist only for the life of the function.
Which code is missing as the first line in the manifest file below? CACHE: index.html styles.css actions.js banner.jpg • MANIFEST • CACHE MANIFEST • #CACHE MANIFEST • #MANIFEST
CACHE MANIFEST
Which of these delivers style instructions based on the capabilities of a device, such as screen width? • CSS3 media queries • HTML5 type attribute • HTML5 rel attribute • CSS3 media properties
CSS3 media queries
In JavaScript, you need to convert a string value into a numeric value for the purpose of calculations. What JavaScript technique can perform this conversion? • Pass by reference • Casting • Floating-point calculation • Operator precedence
Casting
Each element on a webpage is surrounded by a number of rectangle boxes that can be configured using CSS. Which choice correctly identifies the boxes included in the CSS Box Model? • Content, header, padding, margin, border • Border, margin, padding, aside • Header, footer, padding • Content, padding, border, margin
Content, padding, border, margin
Caroline is upgrading her companies website. She inserts the following HTML5 code block to place a video in the About Us page: <video width="360" height="270" controls="controls" poster="image.png"> <source src="video.mp4" type="video/mp4" /> Your browser does not support the HTML5 video element. </video> Which code should Caroline add to this code block to ensure that the video file can be accessed by all browsers and devices that visit the site? A. <source src="video.wav" type="video/wav" /> B. <source src="video.webm" type="video/webm" /> <source src="video.wav" type="video/wav" /> C. <source src="video.ogg" type="video/ogg" /> D. <source src="video.webm" type="video/webm" /> <source src="video.ogg" type="video/ogg" /> • A • B • C • D
D
Simone is in charge of her company's website. Her boss wants a "one site fits all" solution that will reliably display on most or all computer devices. Which two technologies would be accomplish this? • HTML5 and Flash • HTML5 and XHTML • HTML5 and JavaScript • HTML5 and CSS3
HTML5 and CSS3
What method for validating user input as it is entered before the form is submitted? • Inline validation • Code validation • Server-side validation • Pogo-sticking
Inline validation
You are creating an HTML5 form. You need numbers and dates to be submitted in a specific format. Which technique accomplishes this task? • formaction • Inline validation • Semantic input types • formmethod
Inline validation
Mannie wants to add rounded navigation menus and buttons to the front-end design for his company's website. He plans to use CSS3. What would he have needed to use prior to CSS3 to accomplish the same effect? • Java or images • JavaScript or HTML • JavaScript or images • HTML or Java
JavaScript or images
Orion is creating a webpage using HTML and CSS. He wants the page layout to transition to any device and any size that users make the browser window. Which page layout method should he implement in order to control the placement of page elements while meeting his design requirements? • Fixed-width layout • Liquid layout • Transitional layout • Absolute layout
Liquid layout
The following code produces an unexpected mathematical result. Which type of error is present in the code? var x = 80; var y = 100; var total = 2; var average = x + y / total; document.write(average); • Run-time error • Logic error • Load-time error • Syntax error
Logic error
You are updating a Web page from HTML 4.01 to HTML5. When you upload the page to the W3C validator, you receive a large number of errors. The errors surprise you because you consider yourself an HTML5 expert. What is the first thing you should check? • Make sure the <!DOCTYPE> declaration is correct for HTML5. • Make sure the style sheet is referenced properly. • Make sure any HTML5 APIs are coded correctly. • Make sure to use a supported HTML5 browser when validating.
Make sure the <!DOCTYPE> declaration is correct for HTML5.
Your company is considering whether to create a mobile Web site or a mobile app. What is a benefit of creating a mobile Web site instead of a mobile app? • Mobile apps can increase your potential market because people can easily locate an app using Web search engines. • Mobile Web sites often use special features of the phone itself. • Mobile Web sites are easier to develop because they are often written with HTML5. • Mobile Web sites require different versions for iOS, Android and Windows Phone
Mobile Web sites are easier to develop because they are often written with HTML5.
Which of these is true about mobile websites and mobile apps? • Mobile apps run within a mobile device browser. • Mobile websites are easier to create than mobile apps. • Mobile websites are more expensive to develop than mobile apps. • Mobile websites are created with programming languages such as Objective-C.
Mobile websites are easier to create than mobile apps.
You are creating an HTML5 form and you need users to enter their phone numbers. Which line of code from an HTML5 form allows this task? • Mobile:<input type="phone" name="mobile"> • Mobile:<input type="number" name="mobile"> • Mobile:<input type="tel" name="mobile"> • Mobile:<input type="range" name="mobile">
Mobile:<input type="tel" name="mobile">
You are developing an application using an HTML5 API. The application requires employees to enter their sales numbers. This process can take over an hour. Which HTML5 API would ensure that employees can enter all their data, even if the Internet connection goes down? • Drag and Drop • Offline AppCache • Canvas • Geolocation
Offline AppCache
Webpages should be aesthetically please, easy to read and easy to navigate. This is why page layout is important. What should you do to improve your page layout? • Include multiple topics on each page. • Provide detailed text on the home page explaining the site's content. • Provide content that is clear and concise. • Include video to relay your message as much as possible.
Provide content that is clear and concise.
What is the difference between responsive web design (RWD) and mobile web design? • RWD pages adjust on-the-fly to any device, whereas mobile design simply creates a smaller, simpler version of the page. • Mobile design gives the page simpler, cleaner navigation, whereas RWD sites display the same navigation as the full site on a desktop browser • RWD optimizes the site for display only on small screens, whereas mobile design optimizes the site for any screen size • Mobile design pages load faster, whereas RWD pages take longer to load because elements must be resized before displaying.
RWD pages adjust on-the-fly to any device, whereas mobile design simply creates a smaller, simpler version of the page.
Ryder and his team are redesigning their companies website. Ryder reviews the updates that his team is making at work and is impressed by the advanced animation content on the training pages. Later that day, he reviews the website on her tablet, but the animations do not display. Which solution can fix this problem? • Re-create the animations using HTML5, CSS and JavaScript. • Create new animations without using HTML5, which the tablet does not support. • Re-create the animations using Flash and JavaScript. • Configure the HTML5 and CSS animations for mobile devices.
Re-create the animations using HTML5, CSS and JavaScript.
Victor created his website so that it uses the responsive design techniques for grid-based layout and resizable images in order to to ensure that his site will display correctly on all desktop browsers and mobile devices. What else should he use as part of a responsive design? • Standard page structure elements, including <header>, <footer> and <article>, because older devices will display content in the structure elements correctly. • Static pixels for all content positioning. • Smaller fonts for all body text, to ensure it will appear correctly on smaller screens. • Relative units, such as percentages, for positioning page elements.
Relative units, such as percentages, for positioning page elements.
Titus has been asked to create a mobile website for the Golden Harris Company. Which two things should he consider for that are specific to designing a mobile website? • Resolution size and compelling content • Immediate access and easy navigation • Smaller screen sizes and touchscreen use • Usable content and touchscreen use
Smaller screen sizes and touchscreen use
Kari has never written HTML5 code before. She is concerned that web forms with the new HTML5 elements and attributes may not display correctly in all browsers. What is the best way to ensure that the forms do display correctly? • Check online resources for HTML5 browser support. • Test the form in multiple browsers to check for compatibility issues. • Validate your markup using the W3C validation service • Instruct users to download and install a specific browser to view the form.
Test the form in multiple browsers to check for compatibility issues.
Which of these is the most important step to complete prior to publishing a website? • Register the site's domain name with the W3C. • Check functionality of internal links with the W3C markup validator. • Test the site on various devices and platforms. • Validate 2D and 3D graphics using http://get.webgl.org.
Test the site on various devices and platforms.
Webpages that use the Offline AppCache API must point the HTML pages that will be cached to a manifest file. Which HTML element do you add the manifest attribute to? • The <meta> element • The <body> element • The <!DOCTYPE> element • The <html> element
The <html> element
The web developer for Sanderson Acres has converted all of the company's Flash files to MP4 files, however, the company's target audience is slow to transition to HTML5-compliant web browsers. The web developer wants to inform visitors if their browsers do not support the provided video format. Which HTML5 code should he insert in the video page to display a text notice in place of the video if it is not supported? • The type attribute • The <source></source> tags nested in the <video> element • The <video></video> tags • The poster attribute
The <video></video> tags
Subsonic, Inc. is a startup business that develops board games. Its marketing department is focused on advertising a game called "Zombie Survival" through a mobile website. They want users to be able to play the game without using any browser plug-ins. The product page for the game must dynamically draw the game characters when the page loads. Which approach best uses the resources on visitors' devices to accomplish this? • The <video> element • The Canvas API • A Java applet • Flash animation
The Canvas API
Which JavaScript feature can be used to send a HTTP request to a web server? • The XMLHttpRequest object • The HTTPrequest function • The history.pushState method • The handleFileSelect event handler
The XMLHttpRequest object
Hermani is creating a mobile website but is having a problem with content getting pushed off the screen at smaller resolutions. What is the most likely cause of this issue? • The use of relative measurement units for layout and image sizes • The use of responsive web design to adapt to smaller screens • The use of pixels to specify fixed sizes for elements • The use of flexible-sized elements using percentages
The use of pixels to specify fixed sizes for elements
Which new HTML5 form feature previously required scripts? • Methods for creating remote databases • Mechanisms for sending e-mail messages • Buttons for clearing form data • Tools for validating user input
Tools for validating user input
Which of these is an important consideration for building websites that will be used by mobile and handheld device users? • Touchscreen keyboards allow mobile device users to enter information faster so you can collect more detailed data. • Web forms designed for small mobile device screens should look exactly like the full-site version to avoid confusion. • Users should never be expected to enter data in a web form using a mobile device. • Touchscreen keyboards and small mobile device screens make it more difficult for users to enter information.
Touchscreen keyboards and small mobile device screens make it more difficult for users to enter information.
Bruno is updating his company's website using HTML5 and CSS3. He needs to make several changes, including adding a drop-shadow effect to all <h1> headings on the site. What should he do? • Use an image editor to create graphics for all <h1> elements on the site. • Use JavaScript to insert the drop-shadow behind the <h1> elements on the site. • Use the CSS3 text-emphasis property inline for all <h1> elements. • Use the CSS3 text-shadow property to style the <h1> elements.
Use the CSS3 text-shadow property to style the <h1> elements.
Brent is creating a website for his company. When the website loads, he wants the audio file to begin and continue until the user leaves the page. Brent's audio files are MP3 and WAV formats. What must he do to ensure that this feature works on his site? • Use the HTML5 <audio> element with the type and autoplay attributes. • Use the HTML5 <audio> element with the loop and autoplay attributes. • Use the HTML5 <audio> element with the src, controls and loop attributes. • Use the HTML5 <audio> element with the src and controls attributes.
Use the HTML5 <audio> element with the loop and autoplay attributes.
Which values are used to orient an object in a CSS3 3D transformation? • X-axis, Y-axis and Z-axis • X-axis, Y-axis and height • Horizontal coordinates, vertical coordinates and size • Horizontal coordinates, size, width and timing
X-axis, Y-axis and Z-axis
What is toUpperCase() an example of in JavaScript? • an argument. • casting. • a calling statement. • a built-in function.
a built-in function.
What type of effect is the @keyframes rule used to define? • 3D transformations • transitions • 2D transformations • animations
animations
Nova is creating a web form where one of the form elements should be activated when the webpage loads. Which HTML5 attribute should she include on that element? • placeholder • autofocus • required • selected
autofocus
Which HTML5 global attribute is often used with elements in a web form? • autofocus • label • challenge • novalidate
autofocus
Sam wants to create smooth buttons for his webpages easily and quickly. Which CSS3 property rounds the corners on the elements that he uses for the buttons? • border-image • border-radius • border-box-shadow • border-style
border-radius
Janice is a recently hired web designer who is familiarizing herself with the current code for a website. She encounters the following code but does not know what the pattern checks for. What does it check? <input type="text" pattern="\d{5}"> • a price • a country code • digits • a date
digits
Sharon wants to set an HTML element on her webpage so that it can be dragged on the screen by the user. What attribute and value should she use? • draggable="true" • dragover="yes" • draggable="draggable" • drag="true"
draggable="true"
The latest version of CSS, CSS3, allows web designers to use custom fonts through the @font-face rule. Which properties are required for @font-face? • font-style and src • font-family and src • font-size and font-family • font-stretch and font-size
font-family and src
You are using the HTML5 <button> element to create a Submit for a form. You need to specify where to send user input when the form is submitted. Which attribute will accomplish this task? • formtarget • formaction • formmethod • formenctype
formaction
What method creates an object to provide the properties and methods for working with elements on a HTML5 canvas? • fill() • beginPath() • getContext() • stroke()
getContext()
What CSS should you use to implement fluid images on a mobile-friendly website? • img { max-width: 100em; } • img { max-width: 100px; } • img { max-width: 100pt; } • img { max-width: 100%; }
img { max-width: 100%; }
You are tasked to create a transparent version of the company logo to include on the Web site. What CSS code would make the logo image most transparent? • img {opacity: 0.4;} • img {opacity: 1.0;} • img {transparency: 0.4;} • img {transparency: 1.0;}
img {opacity: 0.4;}
You want to use CSS3 to select every <img> element on a Web page whose src attribute value ends with ".png". Which CSS code accomplishes this task? • img:last-of-type • img[src^=".png"] • img[src$=".png"] • img[src*="images"]
img[src$=".png"]
Which CSS code should be set for images on a webpage in order to keep them from exceeding the width of a mobile device screen? • max-width: 100pt; • max-width: 100px; • max-width: 100%; • max-width: 100em;
max-width: 100%;
Which choice below indicates examples of built-in JavaScript objects? • prompt, alert, document • alert, window, document • prompt, navigator, document • navigator, window, document
navigator, window, document
Which attribute disables user input validation when a form is submitted? • autocomplete • formaction • novalidate • formnovalidate
novalidate
Which JavaScript event handler is designed to process radio or checkbox object events? • click • submit • onsubmit • onclick
onclick
You have created an HTML5 Drag-and-Drop API for your department's intranet Web site. Employees will upload their weekly reports using this feature. In the draggable element of your application, what event listener must you add to trigger the drag event? • draggable="true" • dragover • ondragstart • drop
ondragstart
Jared is examining the following code. <img id="logo" src="images\logo.gif" alt="Logo" draggable="true" ondragstart="drag(event)" width="202" height="89"> Which part of the code refers to the event listener that indicates that the image can be dragged on the screen? • ondragstart="drag(event)" • id="logo" • draggable="true" • src="images\logo.gif"
ondragstart="drag(event)"
Which part of the following code is used to call the function? <!DOCTYPE html> <html lang="en"> <head> <title>Inventory</title> <script> function myFunction(){ alert("The HTML page has loaded."); } </script> </head> <body onload="myFunction();"> </body> </html> • This code does not include a calling statement. • alert("The HTML pae has loaded."); • onload="myFunction();" • function myFunction(){
onload="myFunction();"
Which of the following choices uses the correct syntax for a CSS rule in an external style sheet? • p {text-align:center; color:red;} • p text-align=center; color=red: • p {text-align:"center"; color:"red";} • {p: text-align:center; color:red;}
p {text-align:center; color:red;}
Which HTML5 attribute would you use with the <input> element to ensure that users enter their data using the correct format for a field such as a phone number? • pattern • required • value • placeholder
pattern
Which global attribute can be used to make a text box display an example of the expected input before the user starts typing? • required • label • value • placeholder
placeholder
What are gender, name and age examples of in the following JavaScript code? var child1 = {gender: "male", name: "Samuel", age: "7"}; var p = document.getElementById("children"); p.innerHTML = "My first child is a " + child1.age + " year-old " + child1.gender + " named " + child1.name + "."; • properties • objects • parameters • values
properties
Which HTML5 input type is displays an option as a slider? • search • slider • range • number
range
Which shape does the canvas API support? • rectangle (correct answer) • none of these • circle • polygon
rectangle
Which HTML5 attribute should you use on a forms elements in order to ensure that the user enters all of the information on a form before it can be submitted? • placeholder • value • disabled • required
required
Which of the following CSS3 properties is used to control the way that certain elements fit into a specific area? • box-sizing • appearance • resize • outline-offset
resize
Which CSS positioning scheme represents the default or normal layout of elements on an HTML page? • absolute • fixed • relative • static
static
Which CSS3 effect causes an element to change from one style to another when a user selects or hovers over it? • 3D transformation • 2D transformation • transition • animation
transition
You want to change an element from one style to another style. The transition will be triggered when an image is selected by the end user. Which CSS3 transition properly accomplishes this task? • transition-property: width 3s, height 3s, transform 3s; • transition-duration: width 3s, height 3s, transform 3s; • transition: width 3s, height 3s, transform 3s; • transform: transition(180deg);
transition: width 3s, height 3s, transform 3s;
Which JavaScript statement assigns the value "negative" to the variable sign if the number is less than 0? • var sign = (number == 0) ? "negative" : "positive"; • var sign = (number < 0) ? "negative" : "positive"; • var sign = (number =< 0) ? "negative" : "positive"; • var sign = (number > 0) ? "negative" : "positive";
var sign = (number < 0) ? "negative" : "positive";
Which code should be used to create an XMLHttpRequest object? • var xmlhttp = "new" "XMLHttpRequest()"; • var xmlhttp = XMLHttpRequest(); • var xmlhttp ="XMLHttpRequest"()"; • var xmlhttp = new XMLHttpRequest();
var xmlhttp = new XMLHttpRequest();
The Geolocation API can be used to retrieve periodic updates about the current geographic location of a user's device. Which method is used for this? • watchPosition() • clearWatch() • getContext() • getCurrentPosition()
watchPosition()
Which CSS property should you use to specify the stack order of an element in a navigation menu that overlays the webpage? • z-index • opacity • box-sizing • resize
z-index