CSS MIDTERM 481 I DID IT
1) Which element is complete? a. <p>Hello World</p> b. <p>Hello World<p> c. </p>Hello World</> d. </p>Hello World</p>
a
27) Which HTML element is a block element with no semantic meaning? a. div b. section c. span d. p
a
64) What is the CSS display property of<span>rainbow</span>? a. inline-block b. block c. inline d. list-item
a
71) Which declaration gives the div a bottom, red, 2.5 pixels wide, double border? a. div { border-bottom: 2.5px double red; } b. div { border: 2.5px double red; } c. div { bottom: 2.5px double-border red; } d. div { borderbottom: 2.5px double red; }
a
83) Which layout is used in this illustration? a. text-shadow: 10px -10px 0 blue; b. text-shadow: -10px -10px 0 blue; c. text-shadow: -10px 10px 0 blue; d. text-shadow: 10px 10px 0 blue;
a
23) Select the HTML special character that completes the abbreviation: AT_____T. a. && b. & c. ∧ d. &;
b
88) Why will this declaration not work? animation: linear 5s 3 alternate-reverse; a. There needs to be an 's' after the number '3' b. There is no setting called 'alternate-reverse' c. The animation name property is missing d. The animation-timing-function property has to follow 5s
b
94) Which variable declaration format is correct? a. favBand let = "Linkin Park"; b. let favBand = "Linkin Park"; c. let favBand: "Linkin Park"; d. favBand let: "Linkin Park";
b
30) Which element is a block element with semantic meaning, ideal for containing blog post content? a. div b. a c. article d. span
c
5) How do multiple spaces within a p tag display? a. As a double space b. As an error c. As a single space d. Exactly how it is written within the tag
c
67) Which code segment indents the paragraph 15 pixels and capitalizes the first letter of each word? <p>This will be 15 pixels indented and crossed out.</p> a. p { text-indentation: 15px; text-transformation: capitalize; } b. p { text-indentation: 15px; text-transform: uppercase; } c. p { text-indent: 15px; text-transform: capitalize; } d. p { text-indent: 15px; text-transformation: uppercase; }
c
75) What CSS defines a flex container? a. flex-container: 1; b. flex: 0 1 auto; c. display: flex; d. flex-basis: auto;
c
79) How many grid items are in this grid layout? dy { display: grid; grid-template-areas: "head head" "nav article" "foot aside"; } a. 4 b. 3 c. 5 d. 6
c
81) Which type of positioning does not scroll with the document? a. Relative b. Absolute c. Fixed d. Static
c
25) Which special character is used so<is not treated as part of the following tag? <p>0 < 4</p> a. 0 &lessthan; 4 b. 0 &<; 4 c. 0 &less; 4 d. 0 < 4
d
48) Which element properly follows the developer guidelines? a. <input type="password"/> b. <input type='password'> c. <input type=password> d. <input type="password">
d
52) Which CSS styling overrides the others when there is a style declaration conflict? a. One cannot override the others b. Embedded stylesheet c. External stylesheet d. Inline style
d
78) Replace the grid-column and grid-row declarations using grid-area. #grid-item-x { grid-column: 2 / 4; grid-row: 3 / 5; } a. grid-area: 3 / 5 / 2 / 4; b. grid-area: 2 / 3 / 4 / 5; c. grid-area: 2 / 4 / 3 / 5; d. grid-area: 3 / 2 / 5 / 4;
d
100) In JavaScript,5 + "5"evaluates to a _____. a. string b. number c. error d. object
a
11) A list within a list is called a(n) _____. a. nested list b. ordered list c. unordered list d. list
a
15) What are the errors in this line of code? <image src="http://example.com/my_face.jpg" "Selfie from Spain"> a. <image>should be<img>and thealtattribute is missing b. srcshould say search and thealtattribute is missing c. srcshould say source and thealtattribute is missing d. <image>should be<img>andsrcshould say source
a
17) What is the aspect ratio of an image? a. width:height b. height:width c. width + height d. height * width
a
20) Which fragment identifier links back to Africa in the code below? <h1 id="Africa">Africa</h1> <p>About Africa</p> <h1 id="Thailand">Thailand</h1> <p>About Thailand</p> <h1 id="Brazil">Brazil</h1> <p>About Brazil</p> <h3>Recap</h3> <p>Click on the country's name to read about it again.</p> <ul> <li><a _____>Africa</a></li> </ul> a. href="#Africa" b. href=Africa c. href= id="Africa" d. href="Africa"
a
26) Which HTML container is commonly used to house copyright information on a webpage? a. footer b. header c. section d. article
a
28) Which span container construct is correct? a. <span>According to Wikipedia, J.R.R. Tolkien's <u>The Lord of the Rings</u> is the second best-selling novel ever written.</span> b. <span>According to Wikipedia, J.R.R. Tolkien's <p>The Lord of the Rings</p> is the second best-selling novel ever written.</span> c. <span>According to Wikipedia, J.R.R. Tolkien's <div>The Lord of the Rings</div> is the second best-selling novel ever written.</span> d. <span/>According to Wikipedia, J.R.R. Tolkien's <u>The Lord of the Rings</u> is the second best-selling novel ever written.
a
32) When a user submits the following form with state set to Florida, and city set to Miami, what URL is sent to the server? <form method="POST" action="http://whereis.org/"> <input type="text" name="state"> <input type="text" name="city"> <input type="submit"> </form> a. http://whereis.org/ b. http://whereis.org/?state&Florida?city=Miami c. http://whereis.org/?city=Miami&state=Florida d. state=Florida&city=Miami
a
38) How are password fields protected when they are sent to a server upon form submission? a. by using HTTPS b. by using HTTP c. by using type="password" d. by using name="secret"
a
40) What is the preferred approach for using a widget that may not be currently available on all browsers? a. Use JavaScript if not available in HTML b. Always use JavaScript to create the widget c. Print an alternate message in HTML d. Print a warning message "browser not supported"
a
45) What is the best way to include interactive content on a web page? a. Use the src attribute to include a separate JavaScript file. b. Embed JavaScript directly into the HTML within the script tag. c. Use a JSON library. d. Don't use JavaScript in web applications.
a
50) Which guideline is violated in the following example:<input type="button" id="button1" name="button1" value="submit" /> a. Avoid self-closing tags b. Use double quotes c. Begin block elements on a new line d. Nothing is wrong according to the standard
a
6) The following paragraph breaks each sentence into a new line. Which code segment makes that possible? The sun is hot. The weather is humid. I feel like I am going to melt. a. <p>The sun is hot.<br> The weather is humid.<br> I feel like I am going to melt. </p> b. <p>The sun is hot.</p> <p>The weather is humid.</p> <p>I feel like I am going to melt.</p> c. <p><br>The sun is hot.</br></p> <p><br>The weather is humid.</br></p> <p>I feel like I am going to melt.</p> d. <p><br>The sun is hot.</br> <br>The weather is humid.</br> I feel like I am going to melt.</p>
a
60) Which CSS declaration makes the child of the paragraph blue? <p>This will be the <span>blue</span> paragraph.</p> a. p > span { color: blue; } b. p ~ span { color: blue; } c. p + span { color: blue; } d. p < span { color: blue; }
a
77) Using this code, how many rows does the grid have? <div id="grid-container"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div> <div>H</div> </div> #grid-container { display: grid; grid-template-columns: 40% 25% 10% auto; } a. 2 b. 1 c. 4 d. 8
a
82) Where is this element located relative to its default location? .element { position: relative; top: 100px; left: -50px; } a. 100 pixels lower and 50 pixels to the left b. 100 pixels lower and 50 pixels to the right c. 100 pixels higher and 50 pixels to the left d. 100 pixels higher and 50 pixels to the right
a
84) Shorten this declaration. #example { border-bottom-left-radius: 75px; border-bottom-right-radius: 30px; border-top-left-radius: 30px; border-top-right-radius: 75px; } a. border-radius: 30px 75px; b. border-radius: 75px 30px; c. border-radius: 75px 30px 75px; d. border-radius: 75px 30px 30px 75px;
a
9) What is the proper structure for creating a bulleted list? a. <ul> <li>England</li> <li>Japan</li> <li>Australia</li> </ul> b. <ol> <li>England</li> <li>Japan</li> <li>Australia</li> </ol> c. <list> <item>England</item> <item>Japan</item> <item>Australia</item> </list> d. <bullet> <item>England</item> <item>Japan</item> <item>Australia</item> </bullet>
a
90) Which transform declaration turns an object upside down? a. transform: rotate(180deg); b. transform: translate(100px, -100px); c. transform: scale(5, 0.5); d. transform: rotate(90deg);
a
92) When styling elements of a web form, which setting is defined for radio buttons and not for checkboxes? a. border-radius b. border c. box-shadow d. background-color
a
47) Which two elements do not require a closing tag? a. img, p b. img, br c. img, div d. br, p
b
51) What do the developer guidelines state regarding attribute names and tag names? a. Use uppercase on first character, then lowercase for the remainder b. Use all lowercase, no uppercase c. Use upper case or lower case, just be consistent d. Use quotes around both
b
53) The block of code below is an example of which CSS styling? <style> p { color: red; } </style> <body> <p>Hello World</p> </body> a. External b. Embedded c. Standard d. Inline
b
55) Which selector changes the paragraph's color? <p class="purple">The clouds are rolling in.</p> a. #purple { color: purple; } b. .purple { color: purple; } c. purple p { color: purple; } d. p purple { color: purple; }
b
57) Which code segment correctly attributes the classes, large, right, and sunflower to the image? <img src="#" alt="sunflower"> a. <img src="#" alt="sunflower" class="large, right, sunflower"> b. <img src="#" alt="sunflower" class="large right sunflower"> c. <img src="#" alt="sunflower" class="large" "right" "sunflower"> d. <img src="#" alt="sunflower" class="large", "right", "sunflower">
b
61) Which block of code selects the element containing the word "island"? <img src="oceanSunset.jpg" alt="sun setting over the ocean"> <img src="oceanSunrise.jpg" alt="sun rising over ocean on tropical island"> a. img[alt: "island"] b. img[alt~="island"] c. img[alt ^= "island"] d. img[alt = "island"]
b
63) #FFFFFFis the hexadecimal number for which color? a. Black b. White c. Red d. Blue
b
70) How does CSS styling affect the span element? <style> span { width: 25px; height: 35px; } </style> <body> <div>How does <span>width</span> and <span>height</span> affect the span?</div> a. Span elements become 25px wide and 35px tall b. Span elements remain the same because they are inline elements c. One element becomes 25px wide, one becomes 35px tall d. Span elements and div element become 25px wide and 35px tall
b
72) Which property:value centers an element horizontally within its parent element? a. padding: auto; b. margin: auto; c. margin: center; d. display: center;
b
86) Why would someone use CSS animations instead of JavaScript animations? a. Both older and modern browsers fully support CSS animations b. CSS animations can look and work better on computers with limited resources c. No technical skills are required to create CSS animations d. CSS animations offer full object-oriented functionality for complex applications
b
29) In the following snippet, the li element width _____. <section> </section> <p>some text</p> <ol> <li>the text</li> </ol> a. takes on the width of the section element b. uses the minimum width of the ol element c. takes on the width of the ol element d. takes on the width of the text
c
31) Given the following form, what is the request method? <form action="http://whereis.org/"> <input type="text" name="state"> <input type="text" name="city"> <input type="submit"> </form> a. No request is sent b. Post c. Get d. Request
c
34) When a user checks a single checkbox in a series of 4 checkboxes, how many items are sent to the server when the submit button is pushed? a. two b. four c. one d. zero
c
36) In the following snippet, what is the minimum number of items sent to the server when the submit button is pressed? <form> <input type="checkbox" name="checkbox" checked> <input type="radio" name="radio" value="1" checked> <input type="submit"> </form> a. 2 b. 0 c. 1 d. 3
c
44) What will happen when the following web page element loads into a browser? <SKIP src="https://example.com/my_interactive_content.js"> a. The browser does not recognize the src attribute b. The JavaScript file at the given URL is loaded c. The JavaScript file won't load due to a missing closing tag d. The browser doesn't recognize the script tag
c
49) Which element properly follows the developer guidelines to assign a concise boolean value to an attribute? a. <button type="submit" hidden=true>Submit</button> b. <button type="submit" hidden="true">Submit</button> c. <button type="submit" hidden>Submit</button> d. <button type="submit" hidden=0>Submit</button>
c
58) The universal selector is specified with _____. a. # b. . c. * d. ()
c
62) Which pseudo element selector changes the background color of text highlighted by the user? p_____ { background-color: grey; } a. ::after b. ::first-line c. ::selection d. ::before
c
68) Which code segment correctly uses the margin shorthand to assign the values to a div? bottom: 15px top: 10px left: 5px right: 20px a. div { margin: 10px 15px 5px 20px; } b. div { margin: 15px 10px 5px 20px; } c. div { margin: 10px 20px 15px 5px; } d. div { margin: 10px 5px 20px 15px; }
c
7) Why do web developers leave comments in HTML code? a. To make the code longer b. It is required c. To leave notes or reminders d. To pass HTML validation
c
73) What is an advantage of using fluid layout on a web page? a. Fluid layouts provide a horizontal scroll bar for easier navigation b. Fluid layouts don't waste visual real estate with unused white space c. Fluid layouts adjust the content of the page to better fit the screen d. Fluid layouts give web designers complete control over what the user sees
c
91) Which element is used to style a drop-down menu in web forms? a. input[select] b. input:select c. select d. input[type=select]
c
96) In JavaScript, multiple lines are commented out using _____. a. <!-- --> b. // c. /(*) (*)/ d. /*
c
99) Which compound assignment operator assigns numbers with 9? let numbers = 3; numbers _____ 3; a. += b. -= c. *= d. /=
c
2) _____ declares the document as HTML. a. <!doctype="html"> b. <!DOCTYPE=HTML> c. <DOCTYPE html> d. <!DOCTYPE html>
d
3) Which block of code will result in an error in the HTML validator? a. <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>My Page</title> <body> <p><em>Hi.</em></p> </body> </html> b. <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>My Page</title> <body> <p><b>Hi</b></p> </body> </html> c. <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>My Page</title> <body> <p><i><b>Hi</b></i></p> </body> </html> d. <!DOCTYPE html> <html lang="english"> <meta charset="UTF-6"> <title>My Page</title> <body> <p>Hi</p> </body> </html>
d
33) Which<label>tag correctly associates the label with the textbox? a. <label name="first">First name:</label><input type="text" id="first" name="first" > b. <label id="first">First name:</label><input type="text" id="first" name="first" > c. <label id="first">First name:</label><input type="text" for="first" name="first" > d. <label for="first">First name:</label><input type="text" id="first" name="first" >
d
37) What element creates a drop-down menu? a. <input type="select"> b. <dropdown> c. <input type="menu"> d. <select>
d
4) Which line of code displays: Hi! How are you? a. <p>Hi!</p> How are you? b. <p>Hi! How are you?<p> c. </p>Hi! How are you?<p> d. <p>Hi! How are you?</p>
d
41) What input type allows the user to slide a thumb left or right to choose a number? a. slider b. number c. picker d. range
d
65) Which code block uses the CSS variable--important-textto modify the color of the class important? <style> :root { --important-text: red; } </style> <body> <p class="special">This is not important.</p> <p class="important">This is important.</p> </body> a. p.important { color: var(important-text); } b. .important { color: var(important-text); } c. p { color: var(--important-text); } d. .important { color: var(--important-text); }
d
76) What is displayed on the web page with this code? <div class="container"> <div class="item">Right</div> <div class="item">Left</div> </div> .container { display: flex; width: 150px; justify-content: space-between; flex-direction: row-reverse; } .item { flex-basis: 25%; text-align: center; } a. Right Left b. Left Right c. Right [space here] Left d. Left [space here] Right
d
8) The _____ tag creates a numbered list. a. <l> b. <ul> c. <list> d. <ol>
d
80) What type of positioning does this element have? .element { top: 50px; left: 20px; } a. Relative b. Absolute c. Fixed d. Static
d
85) What is the result of this background setting? background: repeating-linear-gradient(blue, grey 5%); a. 5 vertical stripes b. 20 vertical stripes c. 5 horizontal stripes d. 20 horizontal stripes
d
87) What does this animation do to the object? #object { position: absolute; animation: slide 5s; } @keyframes slide { 0% { color:black; left:0px; top:0px; } 25% { color:blue; left:100px; top:0px; } 75% { color:red; left:0px; top:100px; } 100% { color:black; left:0px; top:0px; } } a. Starts in the top-right corner, moves the object down, then to the left, then up and to the right to return to the starting position b. Starts in the top-left corner, moves the object down, then up and to the right, then to the left to return to the starting position c. Starts in the top-right corner, moves the object to the left, then down and to the right, then up to return to the starting position d. Starts in the top-left corner, moves the object to the right, then down and to the left, then up to return to the starting position
d
89) What is the transition property of this object doing? #object { height: 50px; width: 50px; transition: width 10s; } a. Expands the width 10 times, to 500px b. Expands the width by 10px, to 60px c. Animates a width transition 10 seconds after the width is changed d. Animates a width transition that completes in 10 seconds
d
97) What is the correct format for logging "My favorite food is pizza."? let favFood = "pizza"; a. console.log("My favorite food is favFood.") b. console.log("My favorite food is" favFood.) c. console.log("My favorite food is " + "favFood.") d. console.log("My favorite food is " + favFood + ".")
d
98) x = 4 ** 4is the same as _____. a. x = 44 b. x = 4 * 4 c. x = 4 + 4 + 4 + 4 d. x = 4 (*) 4 (*) 4 (*) 4
d
13) Which attribute makes the data span 4 rows? a. <td rowspan="4"> b. <tr rowspan="4"> c. <td span="4"> d. <td row="4">
a
14) Which tag defines the table body? a. <tbody> b. <td> c. <body> d. <tb>
a
21) Which code segment below converts the following image into a link? a. <a href="http://www.artist.com/"><img src="vanGogh.jpg" alt="van Gogh self portrait"></a> b. <a "http://www.artist.com/"><img src="vanGogh.jpg" alt="van Gogh self portrait"></a> c. <img src="vanGogh.jpg" alt="van Gogh self portrait"><a href="http://www.artist.com/"></a> d. <a><img src="http://www.artist.com/" alt="van Gogh self portrait"></a>
a
56) The following code segment is an example of _____ selector. p span { background-color: blue; } a. descendant b. pseudo-class c. ID d. class
a
66) The<html>has a font size of 15px. A paragraph has the font size of 2.5rem. What is the paragraph's font size in pixels? a. 37.5px b. 17.5px c. 31px d. 35px
a
95) What is rainbow's data type? let rainbow = ["red", "orange", "green", "purple"]; a. Array b. Boolean c. String d. Object
a
10) What happens when type="i" is added to the<ol>tag? <ol type="i"> <li>Sam</li> <li>Mike</li> <li>Sandra</li> </ol> a. The numbers change to lower-case letters b. The numbers change to lower-case Roman numerals c. The numbers change to uppercase Roman numerals d. The numbers stay the same
b
12) <td colspan="2">What effect does the colspan have on the table data? a. The cell occupies 2 columns and 2 rows b. The cell occupies 2 columns c. The cell occupies 1 column and 2 rows d. The cell disappears
b
16) Which attribute displays text when an image cannot be viewed? a. src b. alt c. img d. style
b
18) What is most likely the file extension of the following orchid photograph? a. orchid.gif b. orchid.jpg c. orchid.png d. orchid.pict
b
19) The _____ attribute tells the browser where to go when a link is clicked. a. mailto: b. href c. https d. anchor
b
24) What is the correct HTML for forcing "75 mph" to always display on the same line? a. 75 mph b. 75 mph c. 75&space;mph d. 75&nospace;mph
b
46) What tag is used to add visual layout to a page? a. <p> b. <div> c. <SKIP> d. <style>
b
74) With flexbox, elements are laid out in a container and behave predictably when _____. a. the container uses floating elements b. the container is viewed on different screen sizes c. the elements are rearranged within the container d. the elements are moved to a different container
b
39) What input type forces the user to enter a valid date? a. month b. datetime-local c. date d. cal
c
42) If a web browser supports only ogg file format, which sound clip will be downloaded? <audio controls> <source src="audio.mp4">< source src="audio.ogg"><source src="audio.mp3"> </audio> a. audio.mp3 b. audio.mp4 c. audio.ogg d. audio2.ogg
c
43) Which attribute(s) is/are required to automatically play a<video>in all browsers? a. autoplay b. loop and autoplay c. muted and autoplay d. loop
c
54) What color font is the second paragraph inheriting? <!DOCTYPE html> <html lang="en"> <style> body { color: blue; } </style> <body> <p><span style="color: orange">Hello World</span>!</p> <p style="color: inherit">How are you?</p> </body> </html> a. Black b. Orange c. Blue d. Red
c
59) Which code segment correctly consolidates the selectors below? h2 { color: orange; text-align: right; } h5 { color: orange; text-align: right; } h6 { color: orange; text-align: right; } a. h2: h5: h6 { color: orange; text-align: right; } b. h2 + h5 + h6 { color: orange; text-align: right; } c. h2, h5, h6 { color: orange; text-align: right; } d. h2 h5 h6 { color: orange; text-align: right; }
c
69) _____ creates space inside the border, while _____ creates space outside the border. a. Content, padding b. Margin, padding c. Padding, margin d. Content, margin
c
93) What are the settings placed inside this element used for? input[type=radio] + label::before a. Remove the default radio button from the web form b. Place a custom radio button to the right of the label c. Place a custom radio button to the left of the label d. Make the radio button's label clickable
c
22) Adding atarget="_blank"attribute to a link results in a _____. a. blank page that opens in the same browser window b. link that opens in the same browser window c. blank page that opens in a new browser window d. link that opens in a new browser window
d
35) What radio button attribute is used to allow only one to be selected from a group? a. value b. id c. type d. name
d
