Question 1

When a hover event is used to hide an object or display it, mobile browsers employ a double-tap event in which the _____ displays the page object.
A) first tap
B) second tap
C) title toolbar
D) texting event

Accepted Answer

The first tap in a double-tap event on mobile browsers typically simulates the hover event, displaying the page object before any further action (like navigating to a link) is taken with the second tap.

Question 2

Mobile devices have a _____ containing the entire content of the page, some of which may be hidden from a user.
A) layout viewport
B) navigating viewport
C) wireframe viewport
D) contextual viewport

Accepted Answer

The layout viewport contains the entire content of the page, including some parts that may not be visible to the user. The other options (navigating, wireframe, and contextual) do not accurately describe this feature of mobile devices.

Question 3

When a hover event is used to hide an object or display it, mobile browsers employ a _____ event.
A) double-tap
B) compilation
C) selection
D) highlight-text

Accepted Answer

Mobile browsers employ a double-tap event to mimic the hover event of desktop browsers. This is because mobile screens don't have a cursor, so the double-tap gesture is used to indicate a mouse hover action.

Question 4

The problem wherein the user needs to scroll vertically down the web page to view information on a mobile device can be resolved by using _____.
A) pulldown menus
B) navigation viewports
C) horizontal wireframes
D) contextual data

Accepted Answer

Pulldown menus allow the user to access information without the need for vertical scrolling. This can improve the overall user experience by making the website easier to navigate on a mobile device. Navigation viewports, horizontal wireframes, and contextual data may also be helpful in improving the user experience, but they do not directly address the problem of vertical scrolling.

Question 5

Identify the media query that applies style rules only to screens that are at least 300 pixels wide.
A) @media screen and (min-width: 300px) { style rules }
B) media screen and (@min-width: 300px) { style rules }
C) media screen and (least-width: 300px) { style rules }
D) @media screen and (@minwidth: 300px) { style rules }

Accepted Answer

The correct syntax for a media query that applies style rules based on minimum screen width is "@media screen and (min-width: [value]) {style rules}". Option A has the correct syntax with a minimum width of 300 pixels. Option B has the incorrect syntax with an unnecessary "@" symbol before "min-width". Option C has an incorrect property name "least-width". Option D has an incorrect syntax with an "@" symbol before "minwidth" and no ":" between the property and value.

Question 6

The _____ is a device feature that gives the ratio of the width of the display area to its height.
A) index-ratio
B) display-ratio
C) aspect-ratio
D) orientation-ratio

Accepted Answer

The aspect ratio is the ratio of the width of the display area to its height. It is commonly used to describe the dimensions of screens, such as computer monitors, TV screens, and mobile devices. For example, a screen with an aspect ratio of 16:9 is 16 units wide for every 9 units of height.

Question 7

Multiple media features can be combined using _____.
A) real-time operators
B) logical operators
C) relational operators
D) dimensional operators

Accepted Answer

Logical operators can be used to combine multiple media features. For example, using the AND operator to specify that a style should only apply if both conditions are true, or using the OR operator to specify that a style should apply if either condition is true.

Question 8

While creating a website for tablet design, to display the submenus horizontally rather than vertically, a style rule needs to be added to the tablet media query to _____.
A) display the submenus one after the other
B) float the submenus side-by-side
C) reduce the width of the submenu display bars
D) partially overlap the submenu titles

Accepted Answer

Adding a float property to the submenus in the tablet media query will allow them to display side-by-side horizontally.

Question 9

Identify the query that matches any screen device that also supports color.
A) @media screen and color { style rules }
B) media (@screen) and (@color) { style rules }
C) @media screen and @(color) { style rules }
D) @media screen and (color) { style rules }

Accepted Answer

The correct syntax for targeting screen devices that support color is "@media screen and (color) {style rules}". The word "color" should not be inside the parentheses. Therefore, option A is the correct query.

Question 10

Web pages are seen within a window called the _____.
A) wireframe
B) navigator
C) prototype
D) viewport

Accepted Answer

The window where a web page is displayed is called the viewport. The wireframe, navigator, and prototype typically refer to the design and development process of creating a web page, but not the window where it is ultimately viewed.

Question 11

For older browsers that do not support media queries, Cascading Style Sheets (CSS) 3 provides the _____ keyword to hide style sheets from those browsers.
A) initial
B) none
C) only
D) auto

Accepted Answer

The "only" keyword is used in conjunction with media queries to provide a fallback for older browsers that do not support them. By using "only", the style sheet is hidden from older browsers, which prevents them from trying to parse it and potentially breaking the design. Using "initial" or "none" would not provide this functionality, and "auto" is not a valid option in this context.

Question 12

To make the submenus in a tablet device overlay the page content, the submenus should be placed with _____.
A) relative positioning
B) z-index positioning
C) incremental positioning
D) absolute positioning

Accepted Answer

Absolute positioning allows the submenus to be positioned precisely on the screen, overlaying the page content.

Question 13

A mobile browser will interpret a _____ event as a tap event in which a user taps a page object.
A) block
B) compilation
C) selection
D) hover

Accepted Answer

A hover event is triggered when a user hovers a cursor over a page object, which is not relevant for mobile devices as they do not have a cursor. Instead, mobile browsers interpret a tap event as a user tapping a page object. Therefore, the answer is D, as a tap event is the most relevant event for mobile browsers.

Question 14

An alternative to direct testing of mobile interfaces on all mobile devices is the use of _____.
A) mobile device spurs
B) mobile device synchronizers
C) mobile device emulators
D) mobile device initiators

Accepted Answer

Mobile device emulators are computer programs or software that imitate the behavior of a mobile device on a desktop or laptop computer. They allow developers and testers to simulate a wide range of devices and operating systems without having to physically test on each individual device, thus providing cost and time efficiencies. Using mobile device emulators can also allow for easier debugging and identification of issues before testing on physical devices.

Question 15

Identify the media rule that must be included in a Cascading Style Sheet (CSS) file so that media queries can be used to associate specific style rules with specific devices.
A) #media devices { style rules }
B) &media devices { style rules }
C) @media devices { style rules }
D) *media devices { style rules }

Accepted Answer

The correct media rule to include in a CSS file in order to use media queries to associate specific style rules with specific devices is @media devices { style rules }. It is important to note that "devices" can refer to different attributes such as screen width, orientation, resolution, etc.

Question 16

Identify the selector that should be used to let a submenu remain visible even when the pointer moves away from the title and hovers over the non-visible submenu.
A) a.submenuTitle:hover+ul.submenu, hover: ul.submenu
B) a.submenuTitle:hover+ul.submenu, ul.submenu:hover
C) a.submenuTitle:hover+ul.submenu, *ul.submenu:&hover
D) a.submenuTitle:hover+ul.submenu, ul.submenu:@hover

Accepted Answer

The selector "a.submenuTitle:hover+ul.submenu" selects the submenu that immediately follows the hover on the title. Adding "ul.submenu:hover" selects the submenu itself and allows it to remain visible even when the pointer moves away from the title and hovers over the submenu.

Question 17

To target a device based on its features, identify the syntax used to add a feature and its value to the media attribute.
A) @media=" devices and|or ( feature:value )"
B) media=" devices and|or ( feature:value )"
C) media=" devices and&&or ( feature:value )"
D) media=" devices and|or (* feature:value )"

Accepted Answer

The correct syntax for targeting a device based on its features is "media" followed by the device type and the feature within parentheses with the syntax of "feature:value". The logical operators "and" and "or" can be used to group multiple features together. Therefore, option B is the correct syntax as it follows the correct structure.

Question 18

The _____ media type value for the media attribute is used for paged Braille printers.
A) braille
B) embossed
C) handheld
D) screen

Accepted Answer

The correct media type value for the media attribute used for paged Braille printers is "embossed." This value is specifically designed to target Braille printers, which emboss content onto paper for tactile reading.

Question 19

While creating a website for tablet design, to keep the submenus in their current position on a page, one needs to make each main list item a container for its submenu by setting its position property to _____.
A) relative
B) actual
C) logical
D) absolute

Accepted Answer

Setting the position property of a main list item to "relative" makes it a positioning context for absolutely positioned elements inside it, such as submenus. This keeps the submenus in their intended position relative to their parent list item.

Question 20

Identify the Cascading Style Sheet (CSS) rule that imports a file named screen.css only when a screen or projection device is being used.
A) @import url("screen.css") screen, projection;
B) #import url("screen.css") screen, projection;
C) @import url("screen.css") screen&
D) @import url("screen.css") *screen, *projection;

Accepted Answer

The correct CSS rule to import a file named screen.css only when a screen or projection device is being used is "@import url("screen.css") screen, projection;". Option A correctly uses the "@import" rule and specifies the media type as "screen" or "projection", indicating that the file should only be imported when displayed on those devices. Option B uses an invalid selector "#import" and option C uses an invalid delimiter "&". Option D uses an asterisk (*) before "screen" and "projection", which is not necessary in this context.

Quiz 5: Designing for the Mobile Web Tutorial

When a hover event is used to hide an object or display it, mobile browsers employ a double-tap event in which the _____ displays the page object.

Mobile devices have a _____ containing the entire content of the page, some of which may be hidden from a user.

When a hover event is used to hide an object or display it, mobile browsers employ a _____ event.

The problem wherein the user needs to scroll vertically down the web page to view information on a mobile device can be resolved by using _____.

Identify the media query that applies style rules only to screens that are at least 300 pixels wide.

The _____ is a device feature that gives the ratio of the width of the display area to its height.

Multiple media features can be combined using _____.

While creating a website for tablet design, to display the submenus horizontally rather than vertically, a style rule needs to be added to the tablet media query to _____.

Identify the query that matches any screen device that also supports color.

Web pages are seen within a window called the _____.

For older browsers that do not support media queries, Cascading Style Sheets (CSS) 3 provides the _____ keyword to hide style sheets from those browsers.

To make the submenus in a tablet device overlay the page content, the submenus should be placed with _____.

A mobile browser will interpret a _____ event as a tap event in which a user taps a page object.

An alternative to direct testing of mobile interfaces on all mobile devices is the use of _____.

Identify the media rule that must be included in a Cascading Style Sheet (CSS) file so that media queries can be used to associate specific style rules with specific devices.

Identify the selector that should be used to let a submenu remain visible even when the pointer moves away from the title and hovers over the non-visible submenu.

To target a device based on its features, identify the syntax used to add a feature and its value to the media attribute.

The _____ media type value for the media attribute is used for paged Braille printers.

While creating a website for tablet design, to keep the submenus in their current position on a page, one needs to make each main list item a container for its submenu by setting its position property to _____.

Identify the Cascading Style Sheet (CSS) rule that imports a file named screen.css only when a screen or projection device is being used.