1

HONG KONG POLYTECHNIC UNIVERSITY
DEPARTMENT OF COMPUTING
COMP 5322 INTERNET COMPUTING AND APPLICATIONS
FINAL EXAMINATION
30 MAY 2020

NAME: _________________________
STUDENT ID: _________________________
SIGNATURE: _________________________


Instructions:
1. The time allowed is 2 hours.
2. This examination has two parts. The first part is an online examination. The
second part is an open-book examination.
a. The first part has 15 multiple-choice questions. Answer ALL the questions
via the Blackboard system.
b. The second part has 6 questions. Answer ALL the questions on the answer
sheet and finally upload answers via the Blackboard system.
3. Marks for each question are shown next to the question.



Q1-15 (30) Q16 (5) Q17 (15) Q18 (10) Q19 (10) Q20 (15) Q21 (15)







2
PART I: SHORT QUESTIONS (30 MARKS)

In this part, there are 15 multiple-choice questions. Answer ALL the questions directly on the
Blackboard system. You only have one chance to submit your answers. If you submit, you cannot
modify your answers anymore. You have 30 minutes to complete this part. You need to submit
your answers before the due time. You can start to answer Part II immediately after finishing all
Part I questions.

PART II: LONG QUESTIONS (70 MARKS)

In this part, there are 6 questions (Questions 16 – 21). Please answer ALL the questions on the
answer sheet. You need to submit your answers via the Blackboard by the end of the examination.

QUESTION 16 (5 MARKS)

Please write an appropriate HTML code to display different pictures for different devices or screen
sizes for achieving the responsive web design. Specifically, the following table lists the ranges of
screen width and the corresponding picture sources. For example, if the screen width is less than
400px, the image “extra-small.jpg” is shown; if the screen is equal or greater than 400px but less
than 600px, the image “small.jpg” is shown; and so on.

Screen width <400 >=400 & <600 >=600 & <800 >=800 &<1000 >=1500
Source extra-small.jpg small.jpg medium.jpg large.jpg extra-large.jpg





(Your code is here)





QUESTION 17 (15 MARKS)

You are required to design a PolyU logo, as shown in Figure 1, by using CSS. The logo is
composed of three components: the center, the right arc, and the left arc. Given the box models of
the three components as below, please fill in the remaining CSS code to construct the logo.
Particularly, the boxes for the right arc and left arc are rotated by -30 and 30 degrees respectively.
Notice it is NOT allowed to add, edit, and delete any HTML elements.



3
LOGO

Figure 1: PolyU Logo
Component CSS Box CSS Box Model
Center

Right Arc

Left Arc





30%
30%
100%
30
AAAB8HicbVBNSwMxEJ2tX7V+tOrRS7AIXiy7bUGPBS8eK9gPadeSTbN taJJdkqxQlv4KLx4U8erP8ea/MW33oK0PBh7vzTAzL4g508Z1v53cxubW9k5+t7C3f3BYL B0dt3WUKEJbJOKR6gZYU84kbRlmOO3GimIRcNoJJjdzv/NElWaRvDfTmPoCjyQLGcHGSg+X NfexT5gig1LZrbgLoHXiZaQMGZqD0ld/GJFEUGkIx1r3PDc2foqVYYTTWaGfaBpjMsEj2rN UYkG1ny4OnqFzqwxRGClb0qCF+nsixULrqQhsp8BmrFe9ufif10tMeO2nTMaJoZIsF4UJR yZC8+/RkClKDJ9agoli9lZExlhhYmxGBRuCt/ryOmlXK16tUr2rlxv1LI48nMIZXIAHV9CA W2hCCwgIeIZXeHOU8+K8Ox/L1pyTzZzAHzifP8rgj7U=
30
AAAB73icbVDLTgJBEOzFF+IL9ehlIjHxRHaBRI8kXjxiIo8EVjI7zMKE2 dl1pteEEH7CiweN8ervePNvHGAPClbSSaWqO91dQSKFQdf9dnIbm1vbO/ndwt7+weFR8fikZ eJUM95ksYx1J6CGS6F4EwVK3kk0p1EgeTsY38z99hPXRsTqHicJ9yM6VCIUjKKVOlX3oceEZ v1iyS27C5B14mWkBBka/eJXbxCzNOIKmaTGdD03QX9KNQom+azQSw1PKBvTIe9aqmjEjT9d3 DsjF1YZkDDWthSShfp7YkojYyZRYDsjiiOz6s3F/7xuiuG1PxUqSZErtlwUppJgTObPk4HQn KGcWEKZFvZWwkZUU4Y2ooINwVt9eZ20KmWvWq7c1Ur1WhZHHs7gHC7Bgyuowy00oAkMJDzDK 7w5j86L8+58LFtzTjZzCn/gfP4AYFKPfg==


4










QUESTION 18 (10 MARKS)

CSS means cascading style sheets. It is a language that describes the style of an HTML document
and how HTML elements should be displayed. Regarding CSS, please answer the following three
questions.

1) How do you understand the “cascading” in CSS? (3 marks)

2) What is the CSS box model? (4 marks)

3) How can we resolve the problem that some fonts used in CSS are not installed on the user's
computer? (3 marks)


QUESTION 19 (10 MARKS)

A web page with many images takes a long time to load and generates multiple server requests.
To reduce the number of server requests and save bandwidth, image sprites are used. An image
sprite is a collection of images put into a single image. Figure 2 shows an image sprite (named
“navsprite.png”). The sprite image contains 24 icons for 8 companies’ logos in 3 states: “disabled”
states (the first row), “inactive” states (the second row), and "active" states (the third row). The
size of each icon is 80 pixels times 80 pixels. The size of horizontal or vertical separators between
two adjacent icons is 50 pixels. Given the following HTML link snippets, please fill in the
remaining CSS code to construct three link buttons, which are navigated to Facebook, Google, and
LinkedIn websites respectively. You are required to 1) choose the most suitable icons for the three
buttons; 2) use the "disabled” icon for the Facebook, “inactive” icon for the Google, and “active”
icon for the LinkedIn. Figure 3 shows the final visual effect. Notice that the gray borders of the
image can be ignored.




5



Figure 2: Sprites Image


Figure 3: Final visual effect

• 
  


• 
  


• 
  

50px
50px
80px
50px
disabled
inactive
active
80px
80px
80px


6


QUESTION 20 (15 MARKS)

Figure 4 shows a performance analysis of the network data captured by the Firefox Network
Monitor when accessing our university web site (https://www.polyu.edu.hk). The monitor loads
the site twice: once with an empty browser cache, and once with a primed browser cache. This
simulates the first time a user visits your site and subsequent visits. Referring to the performance
report, please answer the following questions:

(1) How many HTT responses are received by the browser with or without cache from the server?
(5 marks)

(2) What is the average response time without the cache? (2 marks) How many bytes does the
cache mechanism can save? (3 marks)

(3) What measures can you take to speed up the loading process if you are the website developer?
(5 marks)


Figure 4: Network Performance








7



QUESTION 21 (15 MARKS)

JavaScript is the programming language of HTML and the Web. A JavaScript function is a block
of code designed to perform a particular task. Please write JavaScript code to accomplish the
following tasks:

1) Please print out all global variables whose names begin with the letter “x”, on the console. (5
marks)

2) What is the JavaScript Prototype? (5 marks)

3) What will the following code print out on the console? Please explain the reason. (5 marks)


var x = 3;
var foo = {
x: 2,
baz: {
x: 1,
bar: function() {
return this.x;
}
}
}
var go = foo.baz.bar;
console.log(go());
console.log(foo.baz.bar());







**END**



8
APPENDIX A
In this part, there are 15 multiple-choice questions. Answer ALL the questions directly on the
Blackboard system. You only have one chance to submit your answers. If you submit, you cannot
modify your answers anymore. You have 30 minutes to complete this part. You need to submit
your answers before the due time. You can start to answer Part II immediately after finishing all
Part I questions.

Instructions:
For Questions 1 – 15, there is only a single correct choice. The full mark of each question is 2
marks. You will get full marks if your choice is correct and get no mark otherwise.

1. How can you make a numbered list in HTML?
a)
b)

c)


d)


2. How many columns is the Bootstrap grid system based on?
a) 12
b) 3
c) 9
d) 6

3. In PHP, which of the following superglobal variables holds information about headers, paths,
and script locations?
a) $_SERVER
b) $_GET
c) $_SESSION
d) $_GLOBALS
4. In CSS, how to display a border like this:
The top border = 10 pixels
The bottom border = 5 pixels
The left border = 20 pixels
The right border = 1pixel?
a) border-width: 5px 20px 10px 1px;


9
b) border-width: 10px 1px 5px 20px;
c) border-width: 10px 5px 20px 1px;
d) border-width: 10px 20px 5px 1px;
5. Rearrange these steps in the correct order. 1. Connect to Database Server. 2. Close database
connection. 3. Execute SQL query. 4. Retrieve HTML form data. 5. Build SQL statement.
a) 1,4,3,2,5
b) 5,4,3,2,1
c) 3,4,5,2,1
d) 1,4,5,3,2
6. Which of the following CSS selectors is used to match the portion of an element that is selected
by a user?
a) : Selection
b) : Select
c) :: Selection
d) :: Select

7. Which of the following CSS statements can change the size of a font icon like Awesome font?
a) height: 20px;
b) size: 20px;
c) font-size:20px;
d) width: 20px;
8. Which of the followings are used to represent visited hyperlink and unvisited hyperlink?
a) :visited, :link
b) :clicked, :unclicked
c) :visited, :unvisited
d) :link and :unlink
9. Consider the HTML snippet, what is the margin between

and

?




10






Heading 1




Heading 2






a) 50px
b) 70px
c) 120px
d) 20px
10. Which of the following are correct ways of creating an array in PHP?
i) state[0] = "karnataka";
ii) $state[] = array("karnataka");
iii) $state[0] = "karnataka";
iv) $state = array("karnataka");
a) iii) and iv)
b) ii) and iii)
c) Only i)
d) ii), iii) and iv)
11. How can we center everything inside a container both vertically and horizontally?
a) .container{text-align:center; vertical-align:middle;}
b) .container{display:flex; align-items:center; justfy-content:center;}
c) .container{margin: auto auto;}
d) .container{margin: middle middle;}


11
12. What will be printed regarding the following PHP code?

$a = array(
true => 'b',
false => 'c',
0 => 'd',
1 => 'e',
'' => 'f'
);
echo count($a), "\n";

a) Error
b) 3
c) 4
d) 5
13. Which of the following will NOT be returned from the typeof() function in JavaScript?
a) object
b) undefined
c) null
d) function
14. What will be the final background-color of this div?




Title


a) Red.
b) Blue.
c) Purple.
d) Error.
15. What is the correct way to open the file “time.txt” as readable?
e) open(“time.txt”, “read”);


12
f) open(“time.txt”);
g) fopen(“time.txt”, “r+”);
h) fopen(“time.txt”, “r”);