CENTENNIAL COLLEGE PROGRESS CAMPUS

Fall 2019 Written Test 2

COURSE: COMP213 - Web Interface Design

Student Name:
Student Number:

This test is closed book. You have 1 hour to complete this test.
Answer all the questions using your scantron form.

1. What is the term used to describe image file that contains multiple small graphics?

a. thumbnail image

b. sprite

c. image link

d. viewport

2. Choose the example below of a descendant selector that configures the anchor tags within the

element assigned to the content id.

a. #content a

b. .content a

c. a#content

d. content#a

3. The _______ pseudo-class configures the styles that will apply when the mouse is placed over a hyperlink.

a. :hover

b. :click

c. :active

d. :over

1
4. _________ flow displays the elements on the page in the order they appear in the web page source code.

a. default

b. source code

c. browser

d. normal

5. Use ___________ positioning to slightly change the location of an element in relation to where it would

otherwise appear when rendered by a browser.

a. absolute

b. static

c. relative

d. fixed

6. The CSS to create the class called myfloat that floats to the right of the other page content, has a 10px mar-

gin, and a solid border is:

a. .myfloat { float:right; margin:10px; border: 1px solid #000000; }

b. #myfloat { right:float: margin 10px; border: 1px solid #000000; }

c. .myfloat { float:right; 10px:margin; border: 1px solid #000000; }

d. .myfloat { float:right; margin:10px; border: on; }

7. Use ___________ positioning to configure the location of an element to remain the same and to not move

even when the web page is scrolled within the browser viewport.

a. absolute

b. static

c. relative

d. fixed

2
8. Use the _______________ property to eliminate the bullets from an unordered list.

a. bullet-image

b. list-style-none

c. list-style-type

d. list-style-image

9. Use ____________ positioning to precisely configure the location of an element outside of normal flow.

a. absolute

b. static

c. relative

d. fixed

10. The _______ pseudo-class configures the styles that will apply when a hyperlink is clicked,

a. :hover

b. :click

c. :active

d. :over

11. If an element is configured with ___________ the other content on the page will appear to its left.

a. position: left;

b. position: relative;

c. float :left;

d. float: right;

3
12. __________________ will cause an object not to display.

a. display: block;

b. display: 0px;

c. display: none;

d. display: fixed;

13. Use the ________ property along with the left, right and/or top property to precisely configure

the position of an element.

a. position: absolute;

b. position: relative;

c. position: float;

d. absolute: position;

14. Use the ________ or _______ property to clear a float.

a. float or clear

b. clear or overflow

c. position or clear

d. overflow or float

15. From the choices below select the correct order to code CSS pseudo-classes.

a. link, hover, visited, active

b. hover, link, active, visited

c. link, visited, hover, active

d. link, hover, active, visited

4
16. Which value for the display property is useful when configuring horizontal navigation within an

unordered list?

a. none

b. block

c. inline

d. fixed

17. Select the example below that could be used to clear a right float.

a. clear: right;

b. clear: left;

c. right: clear;

d. overflow: right;

18. Select the example below that configures a container to clear all floated elements that are within

the container.

a. clear: both;

b. overflow: all;

c. overflow: auto;

d. clear: all;

19. Select the property that is useful to remove the underline from a hyperlink.

a. font-style

b. underline

c. text-decoration

d. u

5
20. The _______ pseudo-class configures the styles that will apply for a hyperlink that has not been visited by

the user.

a. :unvisited

b. :link

c. :visited

d. :new

21. When used as a selector in CSS, the _______ character represents the universal selector.

a. #

b. &

c. *

d. /

22. Use the _______ attribute in the HTML link element to associate a web page with a style sheet for print-

ing.

a. media="print"

a. out="printer"

b. media="paper"

c. media="screen"

23. The _______ property configures the stacking order of a positioned element on a web page.

a. z-index

b. stacking

c. display

d. stack

6
24. CSS Flexible Box Layout is best suited for:

a. flexible one-dimensional layouts

b. flexible two-dimensional layouts

c. changing the stacking order of elements

d. floating layouts

e.

25. CSS Grid Layout is intended for:

a. flexible one-dimensional layouts

b. two-dimensional layouts

c. changing the stacking order of elements

d. floating layouts

26. Use the ________ property to configure a flex container.

a. order

b. container

c. display

d. flex

27. When using flexbox layout, the main axis is the

a. direction of the flow

b. direction of the wrap

c. height of the flex container

d. beginning of the flex container

7
 28. When using flexbox layout, setting justify-content: space-between; will configure the following:

a. Flex items begin at main start with no space between them.

b. Flex items are centered with equal empty space between.

c. Flex items begin at main start and end at main end with equal empty space between flex

items.

d. Flex items are evenly distributed in the flex container with space before the first flex item and

after the last flex item.

29. When using flexbox layout, the flex property

a. configures a flex container

b. configures the amount of space a flex item takes up and how much it will shrink or

grow

c. configures the space between flex items

d. configures the direction of the flow

30. The ________ meta tag configures scale and dimension on mobile web page display.

a. flexible

b. viewport

c. fragment identifier

d. media query

31. A ______ determines the capability of the mobile device, such as screen resolution, and directs browsers

to CSS.

a. flexible image

b. viewport

c. media query

d. feature query

8
 32. The ______ property configures a grid container.

a. container

b. grid

c. flex

d. order

33. When using grid layout, grid _____ delineate grid rows and grid columns.

a. gaps

b. lines

c. cells

d. orders

34. When configuring flexbox or grid layout, the ______ property can be used to change the sequence of the

flex items or grid item on the page.

a. gap

b. fr

c. skip

d. order

35. A hyperlink with the _____ scheme may cause a web browser on a mobile device to initiate a phone call.

a. phone:

b. sms:

c. tel:

d. mobile:

9
36. When configuring a grid layout, the flex factor unit

a. directs the browser to configure a flex container

b. directs the browser to not display the item

c. directs the browser to allocate a fractional part of the remaining space.

d. directs the browser to configure a flex item

37. Components of responsive web design include:

a. fluid layout, flexible images, media queries

b. valid syntax, embedded CSS, media queries

c. fluid layout, valid syntax, embedded CSS

d. flexible images, media queries, valid syntax

38. Use the expression ___________________ in a media query to target devices with screens up to 480 pix-

els in width.

a. (width: 480px)

b. (max-width: 480px)

c. (min-width: 480px;)

d. (size: 480px;)

39. Use the ______ value for the CSS display property to configure an element to not display.

a. block

b. none

c. 0

d. hide

10
40. The purpose of the ____________ element is to provide a method for a browser to display dif-

ferent images depending on specific criteria indicated by the web developer.

a. media

b. target

c. picture

d. sizes

41. The purpose of the imagd element’s ______ attribute is to provide a method for a browser to

display different images depending on specific criteria indicated by the web developer.

a. picture

b. srcset

c. sizes

d. media

42. Configure a _______ property on a grid item to configure the area in rows that is reserved for

the item on the grid.

a. grid-gap

b. grid-rows

c. grid-template-rows

d. display

43. The _______ property informs the browser to provide empty space or gutters between grid

tracks.

a. grid

b. grid-gap

c. grid-gutter

c. grid-template

11
44. The file extensions .avi, .m4v, and .ogv are used for:

a. audio files

b. video files

c. Flash media files

d. none of the above

45. The file extensions .wav, .mp3, and .ogg are used for:

a. audio files

b. video files

c. Flash media files

d. none of the above

46. Select recommended usability and accessibility practices:

a. use video and sound whenever possible

b. supply text descriptions of audio and video files that appear in your web pages

c. never use audio and video files

d. none of the above

47. JavaScript can be described as:

a. an object-based scripting language

b. a markup language

c. an HTML5 element

d. none of the above

12
48. Use the _______ attribute on a video element to display user controls for the video player.

a. poster

b. player

c. controls

d. image

49. Use the _______ attribute on a video element to display an image that represents the movie.

a. poster

b. player

c. controls

d. image

50. In terms of copyright, Fair Use is determined to be

a. The use of a copyrighted work for purposes such as criticism, reporting, teaching, scholarship, or

research.

b. The use of anything you find on the Web

c. Copying other’s music and fairly distributing it to your friends

d. None of the above

13
51. The _______________ element was widely used but never part of the W3C standard until HTML5.

a. object

b. applet

c. embed

d. canvas

52. The _________ element is a void element that specifies a media file and a MIME type.

a. object

b. source

c. param

d. iframe

53. The _________ element provides for nested browsing.

a. object

b. source

c. canvas

d. iframe

14
54. The CSS3 _____________ property allows you to rotate, scale, skew, or move an element.

a. display

b. transform

c. transition

d. hover

55. The CSS3 _____________ property provides for changes in property values to display in a smoother

manner over a specified time.

a. display

b. transform

c. transition

d. hover

56. The _______________ element is a placeholder in which dynamic graphics can be configured.

a. video

b. script

c. embed

d. canvas

57. Use the ________ element to associate JavaScript with a web page.

a. object

b. script

c. embed

d. canvas

15
58. When coding an audio element, the code placed before the closing audio tag is considered to be:

a. invalid

b. fallback content

c. only available to browsers that support HTML5

d. required

59. Scenario: The Firefox browser is being used to display a web page with a video but no video controls dis-

play —only the poster image is shown. Read the following code snippet and select the reason for the incorrect

display from the choices below.

<video controls="controls" poster="sparky.jpg"

width="160" height="150">
<source src="sparky.m4v" type="video/mv4">
<source src="sparky.ogg" type="video/ogg">
<a href="sparky.mov">Sparky the Dog</a> (.mov)
</video>

a. The controls attribute should be controls=”yes”

b. There are too many source elements.

c. The file extension .ogg is incorrect.

d. The MIME type values are incorrect.

60. Select an advantage of displaying HTML5 video in a web page from the list below:

a. You need to create multiple video files in different formats.

b. No browser plug-in or player is needed.

c. All browsers play all video formats.

d. All of the above are advantages.

16
61. Select a disadvantage of displaying Flash media in a web page from the list below:

a. You need to create multiple video files in different formats.

b. No browser plug-in or player is needed.

c. Flash is supported in all browsers.

d. Flash is not supported on many mobile devices.

62. Select a transition-timing-function value which configures a transition effect that begins at a constant

speed and slows down at the end.

a. ease

b. linear

c. ease-in

d. ease-out

63. Scenario: The Internet Explorer 8 browser is being used to display a web page with an audio player but

the audio element displays nothing on the page. Read the following code snippet and select the reason for the

incorrect display from the choices below.

<audio controls="controls">
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
</audio>

a. The controls attribute should be controls=”yes”

b. There are too many source elements.

c. There is no fallback content to display for browsers that do not support the audio element.

d. The MIME type values are incorrect.

17
64. JavaScript can be described as:

a. an object-based scripting language

b. an easy form of Java

c. a language created by Microsoft

d. none of the above

65. _______ is a JavaScript library intended to simplify client-side scripting:

a. Ajax

b. jQuery

c. Flash

d. Java

66. Select the term below which is a protocol that provides a method for software components to communi-

cate, interact, and share data.

a. JavaScript

b. Application Programming Interface

c. Java

d. Canvas

67. Select the term below which names an HTML5 API that allows web page visitors to share their geo-

graphic location.

a. geodata

b. web storage

c. canvas

d. geolocation

18
68. When a browser supports the details and summary elements,

a. the initial display does not show the content contained within either the details and or summary elements.

b. the initial display shows only the content contained within the summary element.

c. the initial display shows only the content contained within the details element but not the summary ele-

ment.

d. the initial display shows the content contained within both the details and summary elements.

69. Select the term below which names an HTML5 API that is used in progressive web applications:

a. geolocation

b. service workers

c. web storage

d. canvas

70. Select the HTML code to configure a button that, when clicked, will automatically reset form

fields to their default values.

a. <input type="reset">

b. <input type="submit" value="Reset">

c. <reset>

d. <form action="reset">

19
 PART B
TIME ALLOWED: 2HRS
INSTRUCTIONS: You are allowed to use any resources of your choice.
(Open book)
Upload your file to the drop box named TEST2

1a) Create a Sign Up form as follows

20
b) On clicking on Next button it should display the following form

c) On clicking on Sign Up it should open a form as follows to confirm the submission

d) Use CSS property to enhance your form view.

21