COMP 101 Exam 1 Fall 2015 Answer Sheet
advertisement
COMP 101 Exam 1 Fall 2015 Answer Sheet
Grading
We made some adjustments to the grading. The first 4 questions were graded on a 7 point
basis and the next 9 were based on 8 points, totaling 100 points. The final 2 questions were
graded on a 5 point scale, offering 10 points of extra credit. Your grade, however, could not
exceed 100 points.
The comment in Sakai, gives you the points you earned on each question in order. This sheet
gives you the correct answers and information about grading details. If you wish to see your
exam, contact the professor. This requires significant work to reassemble from the pieces, so
please only request if you are going to use it.
There will be a review session to go over the details of the exam. Time and date to be
announced.
(Note that you cannot cut and paste elements from this sheet and expect them to run as the
double quotations are not the correct characters.)
1. (7 points) Write the correct CSS to center all h1 headings.
h1 {
text-align: center;
}
The first 2 questions were to contrast the way that you center text and a complete element. No
partial credit for this first one.
2. (7 points) Write the correct CSS to center all images with a width of 500px.
img {
width: 500px;
display: block;
margin-left: auto;
margin-right: auto;
}
margin: auto; was accepted. Wrong selector -1, missing width -3, missing display -2.
3. (7 points) Write a syntactically correct head that will validate properly for a web page that is to
have a title on the tab that reads “Volcanoes” and uses a stylesheet in the same folder named
volcanoes.css.
<head>
<title>Volcanoes</title>
<meta charset=”UTF-8”>
<link href=”volcanoes.css” rel=”stylesheet” type=”text/css”>
</head>
This question is about the correct content in head. Missing end head tag -1, closing meta or link
tag -1, missing any of the 3 tags no credit. If you did not include type=, we did not deduct.
1
COMP 101 Exam 1 Fall 2015 Answer Sheet
4. (7 points) Write the required link statement and CSS needed to use the google font Gloria
Hallelujah as the default font for a page.
<link href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet'
type='text/css'>
body {
font-family: 'Gloria Hallelujah';
}
This question was focused on the need to add both a new stylesheet and to identify how that
font is to be used. Adding the link does not use the font anywhere and using a font that is
unknown will not work. The two elements are both available on the google fonts site. Both
elements are necessary for credit. Including the secondary font in the css was fine. Correct css
property and value with the wrong selector -1. If you used a different font family but everything
else was correct, we gave you full credit.
5. (8 points) You have an image, named ClickHere.jpg, that you want
to use as a link. You can assume that it is appropriately sized and
that it is in the same folder as the page on which it is being used.
It is to be inside a div. When clicked it is to take the user to the
UNC home page.
You are to write all the HTML tags needed to create the div and
the link. Remember that capitalization matters, the link is to
follow class rules about where it is to open, and the HTML must be able to be validated.
<div>
<a href=”http://www.unc.edu/” target=”_blank”>
<img src=”ClickHere.jpg” alt=”button”>
</a>
</div>
This question address the use of an image as the means to access a hyperlink and the correct
way to go to an external link. Missing an end tag -1. Incorrect format for the external reference
-2. Not opening the link in a new tab -2 no img used, but text replaced -2. No img or text -5. No
alt -2
2
COMP 101 Exam 1 Fall 2015 Answer Sheet
6. (8 points) Add class definitions and appropriate CSS to the following snippet to make the
paragraph about UNC lightblue and the paragraph about State red.
<p class=”UNC”>
UNC was chartered in 1789,
giving it claim to being the oldest public university in the country.
</p>
<p class=”State”>
NC State was founded as a land-grant college in 1887 as the
North Carolina College of Agriculture and Mechanic Arts.
</p>
p.UNC {
color: lightblue;
}
p.State {
color: red;
}
This question addressed the use of classes. Solutions that added additional HTML -5. Use of id
(# ) in css and class in html -1. Incorrect syntax for identifying a selector with a class -2. Invalid
colors -1. No properties defined in css -3. css and html not properly connected -2
7. (8 points) Given the public_html folder shown in these two snapshots from Filezilla, you are to
write the HTML link statement that you would use to connect the extra.html file to the
all_sites.css stylesheet. The link statement must be exactly correct, including capitalization.
In words, public_html has a file called all_sites.css and a folder called exam1. The folder called
exam1 has a file called extra.html.
<link href=”../all_sites.css” rel=”stylesheet” type=”text/css”>
The specific intent of this question was to reference a file in a containing folder. This is a
common requirement when there are multiple sites that share images or css. Moving the file
would solve the problem, but did not address the question. Missing the ../ -4. Forms such as
exam1/all_sites (if you did move it, you would not use the folder name) and
public_html/all_sites (public_html should never appear anywhere) were 5-6 point penalties.
3
COMP 101 Exam 1 Fall 2015 Answer Sheet
8. (8 points) Given that there are three h2 tags on the current page, write the HTML for a nav
section that contains an unordered list pointing to the three h2 tags. The text for the links
should be “Who?”, “What?” and “Where?”.
<h2 id=”who”>Who</h2>
<h2 id=”what”>What</h2>
<h2 id=”where”>Where</h2>
<nav>
<ul>
<li><a href=”#who”>Who?</a></li>
<li><a href=”#what”>What?</a></li>
<li><a href=”#where”>Where?</a></li>
</ul>
</nav>
This question was about the use of anchor points. Main deductions were if that format was not
correct. Single points off for not putting it in a nav, using ol instead of ul, or using incorrect id
names.
9. (8 points) Without any change to the HTML, write the CSS that will left justify the paragraph in
main and make the paragraph in footer right justified and italics.
<main>
<p>This is the main paragraph.</p>
</main>
<footer>
<p>This is the footer paragraph.</p>
</footer>
main p {
text-align: left;
}
footer p {
text-align: right;
font-style: italic;
}
This question is about using context for selective formatting. Using main and footer as classes 1. Using main and footer instead of p within that context was accepted since there were no
other elements shown in the html. Using p and footer was -4 as the p would take precedent
over the footer formatting. Use of the direction attribute was -2 as it would not work properly.
4
COMP 101 Exam 1 Fall 2015 Answer Sheet
10. (8 points) Given the public_html folder shown in these two snaphots from Filezilla, you are to
write the HTML img statement that you would use in lab.html to display ISLAND.PNG. The img
must be correctly formatted, including capitalization and must be able to be validated.
In words, public_html has two files called lab.html and lab.css. It also has a folder called pix that
includes the file called ISLND.PNG.
<img src=”pix/ISLND.PNG” alt=”island”>
The specific intent of this question was to reference a file in a subfolder. Putting images in a
subfolder is a common practice when there are a lot of pictures. Moving the file would solve
the problem, but did not address the question. Incorrect src using public_html -2, extra / before
pix -1, no alt -4 .
11. (8 points) You are working on a website with three pages: cats.html, manx.html, and
siiamese.html. All are in the same folder. Both manx.html and siamese.html have two anchor
points defined: one id is “history” and the other is “pictures”. You are on the cats.html page and
you want to create 3 hyperlinks:
1) To the top of cats.html, using the text “top” as the link
2) To the top of manx.html, using the text “manx” as the link
3) To the pictures anchor point of siamese.html, using the text “photos” as the link.
You are to write the correct HTML for these three links. Do not worry about how the links are
included in the page – just write the three tags that will create these links. Remember that
capitalization must be correct.
<a href=”#”>top</a>
<a href=”manx.html”>manx</a>
<a href=”Siamese.html#pictures”>photos</a>
This question is addressing multi-page site navigation. The first link is to the top of this page.
You can use the # to get to the top or the full page name. The second link is a simple reference
to another page and the last one is to an anchor point on another page. Grading was 3 points
for one correct, 6 for 2, and 8 for all 3. 2 point deduction if open in a new tab. Note, by the
way, that the history id was a superfluous piece of information.
5
COMP 101 Exam 1 Fall 2015 Answer Sheet
12. (8 points) You want to have two boxed paragraphs (that is, they have visible borders) that follow
one another. Without any changes to the HTML. write the CSS that will format them so that the
border (which is to be 2px wide, black and solid) is 25px away from the text, there is 50px
between the two boxes, but the boxes extend the entire width of the page.
The HTML that you are formatting is simply
<p>paragraph 1</p>
<p>paragraph 2</p>
And the output will basically look like
p{
border: 2px solid black;
padding: 25px;
margin-bottom: 50px;
}
This question is addressing borders, margin, and padding. Because the paragraphs were to span
the full page, you do not want any left or right margin (default is 0). You only want to change
the bottom margin. Loss of 2 points if you changed all margins to 50px, changed the HTML,
wrote CSS for a selector other than p, or if you used any of the required elements.
13. (8 points) Given the following HTML and CSS, add a single CSS selector that creates a first letter
of the paragraph in main that is 24pt and a first letter of the paragraph in footer that is 16pt.
<main>
main p {
font-size: 12pt;
}
footer p {
font-size: 8pt;
}
<p>This is the main paragraph.</p>
</main>
<footer>
<p>This is the footer paragraph.</p>
</footer>
p::first-letter {
font-size: 2em;
}
The intent here was to write a SINGLE selector that would double the size of the first letter for
both paragraphs. You could do it using either 2em or 200%. Half credit if you wrote two
selectors and gave specific sizes. Loss of 1 point if you used extraneous tags or properties.
6
COMP 101 Exam 1 Fall 2015 Answer Sheet
14. (5 points, extra credit) You are to write the CSS selector that creates a gradient background for a
complete page with the top of the page being Carolina blue and the bottom of the page being
white.
body {
background: linear-gradient (#7bafd4, white);
background-repeat: no-repeat;
}
The goal here was for you to use the linear-gradient property and to look up the code for
Carolina blue. There are a number of different variants of linear-gradient. This is the simplest
version. You received full credit if you did not include background-repeat, but it is required to
get the correct effect. The linear gradient itself actually creates an image that will be repeated
without it. You lost 1 point if you did not have it in a format that would be a full background
page. Some of you found examples using html instead of body and that is okay. Others found
an example that gave you the correct css in a selector for an id: that is not okay.
15. (5 points, extra credit) You are to write the CSS that turns a div into a blue right triangle using
only borders. The div should be 300px wide and 300px tall.
div {
width: 0px;
border-bottom: 300px blue solid;
border-left: 300px transparent solid;
}
There are a lot of ways of doing this, but the fundamental concepts are as follow: you start with
a div that has no content and no dimensions. (You only have to set the width, since it would
default to 100% but the height is computed based on the content.) Padding by default is also 0,
so the border is all that is going to show. If I just have the bottom border at 300px solid blue, it
would be 300px high and 0px wide. When I add a left border of 300px, both of the borders
stretch to the size of the adjacent border. If both of them were blue I would therefore have a
300px blue square. By changing the color of one of them (say to red), I will have the square half
blue and half red, split along the diagonal. It I split along the diagonal because that is where the
borders actually meet. To produce a right triangle, I simply hide one of those borders, using
transparent, clear, or the background color. You were given 4 points if you got a triangle and 2
points if you got some shape. You lost a point if there was clearly extraneous content that you
copied without understanding.
7
