Exam Instructions

Exam_instructions

User Manual:

Open the PDF directly: View PDF .
Page Count: 5

MIS 3690 Web Technologies - Babson College

Exam – Summer 2017

This is an open-book, open-notes, open-web examination. However, you can not use email or IM, and

you may not communicate in any way with other people during the course of this exam. The exam is

worth 100 points. You have 105 minutes to complete this examination.

How to start:

Please fork the base repository for this exam. Then add instructor (zli@babson.edu ) as collaborator on

GitHub for that repository. Download this folder to your computer and open the folder using VSCode.

How to turn in:

1. Commit and push your completed code to GitHub repository.

2. Create a pull request to the upstream repository.

3. Zip all the files into a zip file, named <yourbabsonID>_exam.zip. Upload it to Blackboard. In the

comment area on Blackboard, specify the URL of your exam GitHub repository.

The exam has a total of 5 questions. Two of the questions require you to create a web page using HTML

and CSS. The other three require you to create the specified functionality using JavaScript. The template

for each question is provided to you with the names index.htm, Q2.htm, Q3.htm, Q4.htm and Q5.htm.

Please do not change the names. Once you have tested the files and uploaded it, please write down the

time-stamp on the repository below your signature. Do not do anything that might change/modify the

time-stamp of this folder on the GitHub.

Honor Code:

I pledge my honor that I have neither received nor provided unauthorized assistance during the

completion of this work.

Your Name: ____________________________ Signature: _____________________

Time: ________________________

Question 1 – index.htm (23 points)

Use the file index.htm to create the following (see figure below – the border shown is for reference only

to show how the entire page looks like. It does not exist on the web page.)

• Lists (4 points)

o Create an ordered list with 4 items, Question 2, Question 3, Question 4 and Question 5.

o Within the ordered list for Question 2, create an unordered list with 2 items, Retina

Display and Criticism.

• Hyperlinks (2 point)

o Hyperlink Question 3 to Q3.htm.

o Hyperlink Question 4 to Q4.htm.

o Hyperlink Question 5 to Q5.htm.

o Retina Display must be linked to the “Retina Display” section on Q2.htm. Similarly,

Criticism must be linked to the “Criticism” section in Q2.htm. Details on Q2.htm

come later on. See bullets 5 and 6 in Q2.htm

• Styles (2 point each unless specified otherwise)

o Use internal styles to use “square” as the bullet for the un-ordered list.

o Use internal styles to use “lower-roman” alphabets for the ordered list.

o Set the background color of this entire section (not including the heading –see figure

above) to silver.

o Set the font-color for this entire section to olive (including the hyperlinks).

o Set the font to cursive, 1.5em, and italicized.

o When you mouse-over the hyperlink, its background must change to orange. It must

have no background when the mouse is removed.

o Set the white space on the right and left of the silver area to 250px each.

o Set the silver space on the left of the list as 200px; top and bottom as 20px;

Question 2 – Q2.htm - Retina Display (27 points)

Format the content provided together with the image provided (separately) to look like the image shown

below. The image does not show ALL of the web page, just as much as you need to see to understand the

structure/format. The last paragraph is not shown entirely. Use Q2.htm to complete this question.

• Construction (2 points each)

1. The main title Question 2 uses <h1>

2. The secondary titles (the Retina Display and Criticism) use <h2>

250px

200px

3. The image should be added in the spot indicated by the place holder <add image here>.

The image must be positioned to the right (as shown) with the text flowing around it (as

shown). Please note that the image shown below is not the complete Q2.htm – only the

top half is shown.

4. The image (as a whole) must be hyperlinked to https://www.apple.com

5. Hyperlink the “Retina Display” in the ordered list created in index.htm above to

the “Retina Display” section.

6. Hyperlink the “Criticism” in the ordered list created in index.htm above to the

“Criticism” section.

• Styles – (2 points each unless specified otherwise)

o (1 point) The image must have a space of 10px between the image and its surrounding

text on the top, left, and bottom.

o (1 point) The image width is 25% of its original width.

o The entire section including the main title all the way to the end of the second paragraph

must have a background color of “yellow”.

o The paragraph uses a cursive font. The paragraph is 85% of the width of the page.

Justify the text when aligning the text in the paragraph.

o The white space on either side of the yellow area is 250px each. (If you assume that the

borders -on the right and left shown above - are the edges of the web page, the white

space is what is between the yellow edge and the border).

o The yellow space on the left of the text is 135px. The yellow space to the top of the main

title is 10px.

o (3 points) All three titles (the main title and the two secondary titles) have a white

background. The yellow colored space on the right of these titles is 700px.

o Pick any three occurrences of the acronym “PPD” in the first paragraph above and set

the font color to red.

Please refer to the instructions in the Q3.htm (20 points), Q4.htm (20 points) and Q5.htm (10 points +10

extra points) for answering the next three questions.

250px

135px

Make sure the exam folder has the following files:

1. index.htm

2. Q2.htm

3. Q3.htm

4. Q4.htm

5. Q5.htm

6. retinadisplay.jpg

7. celtics.png

8. patriots.jpg

Exam Instructions