CS3226 Web Programming and Applications
30% Theoretical Test (Open Book)

S2 AY2015/16

Tuesday, 29 March 2016, 10.05-11.35am (90 minutes) @ COM1-2-VCRm

My Matriculation Number: [A0][][][][][][][__]

The marks for each question is as indicated and the total for this test is 100 points which will be scaled to 30% afterwards.
For each question, please do not write more than the boxed space given.

(3 marks)
In your opinion, what are the top three (3) most important skills that a web programmer must have and why?

Any answer that makes sense will be accepted (and I am the one who judge this).
Steven's pre-test answers:

Ability to learn new techniques, relearn existing techniques, and unlearn outdated techniques.
Creativity and vision to see what is currently missing 'out there' and try to use your expertise to fill the gap.
Patience, motivation to build and grow this 'baby'.

Other good answers from students (not exhaustive):

Know many (programming) languages and web technology stacks.
Good time management as usually web application is a big project with long maintenance.
Know good and latest security practices.
Teamwork, communication skill, people management skill, as web application is usually a (big) group project across many developers/artists.

Grading Remarks: Is "Googling" a skill? OK 'lah'... Designing skill is more towards UI/UX developer and not the "programmer", but acceptable. Since I am using very lenient marking scheme, most students got 3/3 here.

(3 marks)
List down three (3) other international or local companites that has the Internet as their core business.
Your answer should exclude these popular companies: Amazon, Google, Facebook, Dropbox, and Twitter.

Any answer that makes sense will be accepted, e.g. those from this list. Most likely answers from students are eBay, Digital Ocean, Garena, let's see...

Grading Remarks: Additional common correct answers from students: Carousell, PayPal, Yahoo, Airbnb, Flipkart, Alibaba, GitHub, Zalora, Shopback... Note that "Youtube" is now a subsidiary of Google (no longer a standalone company) and "GrabTaxi" is now "Grab". Most students get 3/3 here.

(4 marks)
We often see this line inside an HTML file: <script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
Doing so requires one HTTP request to be sent to an external CDN web server http://code.jquery.com.
As jQuery is released under MIT license, we can also choose to copy jquery-2.2.2.min.js into our own web server.
Your webpage (index.html) requires jQuery and you are deciding between the two strategies above.
Which way is better/faster for any first time visitor to your index.html and why?

For first time visitor, using the (supposedly much faster and geographically disperse) Content Delivery Network (CDN) web server(s) will be much better as you do not really know where your visitors come from. Most CDN will optimize its delivery using the nearest web server to the requestor. For second visit onwards, most likely the difference will be minimal as the static content can usually be cached. PS: Using different server also increase the possibility for your web browser to do parallel download so this answer will also gets credit.

Grading Remarks: The class is roughly divided into two camps: Use CDN (4 points) versus Copy locally (only 2 points). Most of you think that copying locally is 'better' because that is an 'instant' reward during testing on local server. But for worldwide audience, it is always better to use CDN strategy.

(3 marks)
[Fictional scenario]: Suppose Steven forgets to renew the lease of domain name http://visualgo.net.
Typing http://visualgo.net in the web browser produces an error "visualgo.net's server DNS address could not be found".
He has to use VisuAlgo for an online algorithm quiz in a few minutes time (that one is written in PHP...).
Note: The web server that hosts VisuAlgo is still up and running.
Using your web programming knowledge, what do you think Steven will do to (temporarily) address this issue quickly?
Moreover, what is your advice to Steven about this issue?

Steven's action:

Reason:

Advice:

Use the direct IP address of the web server: http://128.199.88.135 to access the web server (no need to specifically mention this IP address as only a few of you realized that I have mentioned the IP address before in class, just say the concept will do). And knowing that it is stored in folder /var/www/html/visualgo, we can use http://128.199.88.135/visualgo/test.html to access the Online Quiz of VisuAlgo without the DNS server that maps http://visualgo.net to it. Anyway, try not to lose your important domain name. It is very dangerous... Note that using localhost is not possible as VisuAlgo Online Quiz is written in server-side script: PHP...

Grading Remarks: About 90% of students got this part correct. Any other strategy likely won't be doable "in a few minutes" time even for an experienced web programmer (I myself won't be able to do those alternative strategies). Bottom line: Never forget to renew your web application Domain Name if you really like it and want it to live long in the Internet...

(3 marks)
You monitor the 'network tab' of Google Chrome developer tool when loading http://visualgo.net. You notice that lots of resources (e.g. the PNG and GIF files) received HTTP status 304. Is this something that you have to be alarmed? Why?

Should you be alarmed? Yes/No (choose one)
Reason:

This is simply caching at work :), no need to worry.

Grading Remarks: Surprisingly, about 1/3 of the class got this question wrong for various reasons... HTTP status 304 was demo-ed during the Performance and Scalability lecture, on slide about caching.

(4 marks)
List down twenty (20) more web programming acronyms that you know.
The first five common acronyms have been given as an example.

HTTP HTML CSS JS PHP

1 2 3 4 5

6 7 8 9 10

11 12 13 14 15

16 17 18 19 20

List of possible answers (much more than 20) and greater than 13 from last year's midterm test :):
Networking stuffs: RFC, W3C, TCP, IP, WWW, DNS, URL, URI, DTD, XML, (10)
CSS stuffs: SASS, LESS, SCSS, (3, total 13)
JS stuffs: ECMA, DOM, AJAX, JSON, JSONP, (5, total 18)
Design stuffs: UI, UX, (2, total 20)
PHP stuffs: PDO (1, total 21)
MySQL stuffs: SQL, RDBMS, ACID, CRUD, (4, total 25)
Security stuffs: A1/AUTHN, A2/AUTHZ, SSL, OWASP, DoS, XSS, (6, total 31)
Performance stuffs: SVG, PNG, GIF, JPEG, (4, total 35)
Web server stuffs: LAMP, MEAN, CDN, (3, total 38)
Misc stuffs: I18N, L10N, SEO, (3, total 41)

Grading Remarks: See that I have listed more than 40 :O... Anyway since I have used this question twice in a row, it will be unlikely to reappear in CS3226 test next AY. Grading scheme: Up to 5 errors, -1 mark, Up to 10 errors, -2 marks, Up to 15 errors... -3 marks :(...

For question 7+8+9, you are given the following simple HTML5 document with a few internal CSS3 styling rules and uses jQuery:

<!DOCTYPE html>

<html lang="id">
<head>
<meta charset="utf-8">
<title>CS3226 Theoretical Test</title>
<style>
  .body { background-color: blue; }
  li.q { color: green; }
  .m { font: italic 100% "Comic Sans MS"; }
  div.s { border: 1px solid black; border-radius: 10px; padding: 20px; }
  .a, ul { color: red; }
  p .r { text-align: right; }
</style>

<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<script>
  $(".a").hide(); // hide the modal answers
  $(".r").hide(); // hide grading remarks
</script>
</head>

<body>
<canvas id='ctx' width='100px' height='120px' style='margin: auto; display: block;'>
</canvas>
<script>
  var ctx = document.getElementById("ctx").getContext("2d");
  // this is the space for your answer for question 9 (see below)
  // you can assume that this part is still blank for question 7+8
</script>

<ol>
  <li>
    <p class="q"><span class="m">(4 marks)</span><br>
    [Fictional scenario]: You want to build a web application to track banana consumption of NUS students...<br>
    </p>
    <div class="s">
      <p class="a">I will choose... Of course this answer has to be hidden from you all when I print this.</p>
      <p class="r">Grading Remarks: This is an open-ended question</p>
    </div>
  </li>
  <li>
    <p class="q"><span class="m">(3 marks)</span><br>
    [Fictional scenario]: Suppose Steven forgets to renew the lease of domain name http://visualgo.net.<br>
    </p>
    <div class="s">
      <p class="a">Use... Of course this answer has to be hidden from you all when I print this.</p>
      <p class="r">Grading Remarks: I hope most students got this one right</p>
    </div>
  </li>
</ol>
</body>
</html>

(12 marks)
According to your current understanding of HTML5+CSS3+JS (jQuery), try to emulate a web browser and draw your best possible rendering of that HTML5 document in the box below (assume that it is a web browser tab of size 1024x768 pixels).
If needed, You can use text to describe color.
Minor differences with the actual rendering done by Google Chrome are ignored.

What Steven is looking for (9 categories, -1 mark for each mistake found):

The title is correctly drawn
The background color of body is NOT blue as there is no HTML element with class ".body" (same trap as last year's midterm)
There is a pre-determined blank space for the Canvas of size 100x120px in the top center portion of the page, although not yet drawn
The questions are NOT in green as li.q is wrong, it should be li .q (class .q descendant of li element)
The marks are in italic and in Comic Sans style
There is a box with rounded corner for the answer space
The JavaScript (jQuery) fails to actually hide the answers and marking remarks as the DOM has not been loaded by the time head element is processed
The modal answers are in red
The grading remarks is NOT aligned to the right as there is a space between 'p' and '.r' (there is no class 'r' descendant of a paragraph 'p' element)

Grading Remarks: This kind of question have low score last year and similarly this year. It is a good question to differentiate students' understanding of HTML+CSS (this year plus a bit of jQuery). This "emulate a web browser" question will likely stay next AY.

(5 marks)
List down at least four (4) things that are "not good" in the given HTML5 file above.

What Steven is looking for (5 categories, -1 marks for each mistake found):

lang attribute of the HTML5 is 'id' (Indonesian) while the content of the HTML file are in English, this confuses search engine
jQuery can be loaded at the end of the body of the HTML file, not at the head for faster (non-render-blocking) performance
We need to wait until the DOM is fully loaded before hiding some parts of it, e.g. using $(function() {});
Anyway, it is better to set the style of the div.s to be 'display: none;' as default rather than loading jQuery and then dynamically hide it AFTER those answers are shown (briefly)
There are unnecessary CSS rules, like the color of ".body", "li.q", "p .r" (all are never executed)

Grading Remarks: Most students get 4/5 or 5/5 here. There are a few others acceptable answers.

After listening to lecture about website performance, you notice that our CS3226 class logo can actually be decomposed into simple elements that can be easily drawn using JavaScript code instead.
Please write a short JavaScript code to re-draw that logo on a 100x120 pixel HTML5 canvas as accurately as you can.

(8 marks)
FYI: The current PNG image file shown below uses 49841 Bytes and our modal answer is just 774 Bytes.
(For clarity, this image file will be projected to screen during the actual test).

<!--... other parts of the HTML file is the same as above... -->
<canvas id='ctx' width='100px' height='120px' style='margin: auto; display: block;'>
</canvas>
<script>
  var ctx = document.getElementById("ctx").getContext("2d");
  // write your code here


































</script>

Several ways are possible, as long as you can approximate the shape of the CS3226 class logo designed by Tay Yang Shun, you get the marks. Note that this logo is similar to HTML5, CSS3, JS standard logo :).

  ctx.font="24px Arial"; // The CS3226 text, 2 marks
  ctx.fillStyle = "black";
  ctx.fillText("CS3226", 8, 18);

  ctx.fillStyle = "green"; // The shield, 2 marks
  ctx.beginPath();
  ctx.moveTo(5, 20);
  ctx.lineTo(95, 20);
  ctx.lineTo(85, 110);
  ctx.lineTo(50, 115);
  ctx.lineTo(15, 110);
  ctx.lineTo(5, 20);
  ctx.fill();

  ctx.fillStyle = "lightgreen"; // The inner shield, 2 marks
  ctx.beginPath();
  ctx.moveTo(50, 25);
  ctx.lineTo(90, 25);
  ctx.lineTo(80, 105);
  ctx.lineTo(50, 110);
  ctx.lineTo(50, 25);
  ctx.fill();

  ctx.font="70px Arial"; // The W (too lazy to model this properly), 2 marks
  ctx.fillStyle = "white";
  ctx.fillText("W", 19, 90);

Grading Remarks: Uh... 75% of the class gave me blank answer while the rest have either 1, 2, or 3 parts... the highest is around 6/8 if I remember correctly... So this tells me that most of you did our Lab3 by Googling :O...

(5 marks)
Given a snippet of an HTML file with Bootstrap grid system below, write the text that you will see on extra small device (<768px), small device (<992px), medium device (< 1200px), and large device!

<div class="container">
  <div class="row">
    <div class="hidden-xs hidden-sm hidden-md col-lg-2"><p>S</p></div>
    <div class="hidden-xs hidden-sm hidden-md col-lg-2"><p>T</p></div>
    <div class="col-xs-6  col-sm-4  col-md-3  col-lg-2"><p>E</p></div>
    <div class="col-xs-6  col-sm-4  col-md-3  col-lg-2"><p>V</p></div>
    <div class="hidden-xs col-sm-4  col-md-3  col-lg-2"><p>E</p></div>
    <div class="hidden-xs hidden-sm col-md-3  col-lg-2"><p>N</p></div>
  </div>
</div>

On extra small device:

On small device:

On medium device:

On large device:

Try it on bootstrap.html directly.

Grading Remarks: 95% students got all 4 texts correct.

(4 marks)
Suppose you have an account at a certain web application and you forget your own password after not using it for some time. Suppose that this web application has a "forget password" option. Upon entering your user id (you remember this one) and clicking 'help me recover my account' button, a new email appears at your email account and voila, your forgotten password is nicely written in that email for you. What is your opinion about this web application feature (open ended)?

It has a VERY BAD security... they clearly do not hash the users' passwords... very dangerous if the database is compromised...

Grading Remarks: 90% students recognized the danger. For the last 10%, you should not do this in your own app... including in your Q17 :O.

(6 marks)
You owns a Singapore-based company specializing in creating "medical tourist packages" for Indonesians who want to have medical checks in Singapore hospital(s) or clinic(s). Your company has built a web application for this purpose. You are the digital marketer of this company. Describe at least four (4) reasonable marketing strategy to make your web application known and used by the intended audiences.
Who is/are the intended audience(s):

What are your marketing strategies:

The audiences: 1). Indonesians who are seeking medical treatment in Singapore. 2). Indonesians in Singapore who has sick friend/relative back home. 3). Singapore based companies providing healthcare in Singapore (let's see how many of you miss "the other side" of this app?).
Some valid strategies: 1). Making English+Indonesian bilingual website. 2). Advertise in hospital of Indonesian big cities (not many can afford overseas medical healthcare). 3). Advertise to Singapore-based healthcare providers about 'special packages' for Indonesian customers so that you can put better contents/deals in your web app. 4). Indonesia is a Twitter nation, make sure you have Twitter tweet and also all sorts of Social Media buttons, e.g. see this. Any other valid strategies will be accepted.

Grading Remarks: Interesting answers: Hire family-friendly Indonesian celebrities to advertise your app :O. However, 90% of you did not realize that this kind of app has TWO side of users... the consumers (larger) and also the providers (smaller but important). You cannot have a good content (medical packages in this case) if you never advertise this in Singapore-based hospitals/clinics/doctors... I have seen advertisements like this in various hospitals here.

(5 marks)
A web application that is no longer maintained by its creator after its launch usually sees a trend of declining web traffic. Mention at least five (5) possible explanations of such phenomenon.

Possible answers: 1). It gets slower, 2). Its bugs are not fixed so it annoys its users, 3). It gets outperformed by similar or new competitor(s), 4). It has outdated content so no point revisiting, 5). Its domain name (or its web hosting) expires and thus it is no longer available, 6). It gets a security attack that renders it unusable anymore...

Grading Remarks: Some of you gave answers that are too far fetched, e.g. "the website design is bad"... how can you conclude that from the general question?

For question 14+15+16+17, you are given the following fictional scenario of a new web application:

Suppose a banana supplier company wants to create a campaign of eating bananas every Monday for about 600 NUS School of Computing participants (students and staffs). The campaign duration is between 1 April - 26 December 2016 (39 Mondays). Each Monday between 09.00AM-01.00PM (that is, either banana for breakfast or lunch), the company will sent their employees with packs of fresh bananas to NUS SoC. Only registered participants can join this simple challenge: On Monday, eat at least one and up to five real banana(s) in front of the company's designated official verifier and the verifier will update this record in a web-based system. The participant will only get paid (with lots more bananas) if they eat at least 35 bananas throughout this campaign (that is, ~90% completion rate). The company wants to get a target of 20 000 bananas eaten by NUS SoC participants throughout the campaign (it is possible, e.g. 600*39*90% > 20 000).

The overall completion rate of this eating bananas campaign has to be made viewable by general public. Additionally, each participant also given an account that they can use to access their individual completion rate of the campaign upon login. This web-based application has to be ready before the campaign starts, i.e. by 1 April 2016. New participant can join after the campaign starts as long as he/she is a verified NUS SoC student or staff. These new participants have to catch up by eating more bananas on the remaining Mondays if they start the campaign late. The latest they can join is Monday, 14 November 2016 (7 weeks before the end of campaign), otherwise they will not be able to complete the challenge.

Now build such an application... on paper!

(6 marks)
Use the space below to draw simple mock ups of the public, participant, admin views of this banana tracker application!
Please assume that each box is a 1280x800 web browser window.

index.php, Public view (has option to login or signup)	participant.php, Participant view (after login)

signup.php, Campaign Sign-up view	admin.php, Admin/Verifier view (after login)

Although open ended, the answers should more or less converge to these: Public view (total banana consumed so far out of 20 000), remaining campaign time left, option to login or signup, etc), Participant view (list of Mondays where he/she officially ate bananas, total bananas that he/she consumed during those mondays, his/her fraction of contribution to the overall campaign, etc), Campaign sign-up (name, NUS SoC email - for verification, preferred user id, preferred password - masked, retype password), Admin view (list of official participants, can search/select, can add new record (a Monday and amount of banana eaten), all other admin related views). See this for yourself. You can signup if you want :).

Grading Remarks: Some of you forget to give the overall completion rate in index.php (prior to login). Some of you give overly detailed admin-only data in the index.php (without login :O). Some of you did not have ways to verify NUS SoC identity (the easiest to use @comp.nus.edu.sg email address as verifier). Some of you have poor admin.php design (hard to update/view data).

(4 marks)
Suggest a domain name that you will choose for this web application and why do you choose that name?
For simplicity, let's assume that your chosen domain name is still available.

Domain name:

Reason:

Name that is short and has important keywords: 'nus', 'soc', 'banana', and/or 'consumption', and has current year '16' or '2016', maybe https://socbanana16.com (with https for extra layer of security :O).

Grading Remarks: Those without 'nus', 'soc', 'banana', missing '.com' or '.sg', or too long will have about 1 mark deducted.

(5 marks)
Such a web-application has to utilize a persistent database to record all these banana consumption of valid participants throughout the year. Please design the required database table(s) in MySQL format.

At the minimum, the application requires the standard USER table (userid--primary key, email, hashed-password, role) as in Security lecture and CONSUME table (userid, timestamp, amount), primary key is (uid, timestamp), allow the same userid to eat more than once, but on different date. So the following MySQL commands should suffice: CREATE TABLE USER(UID VARCHAR(20) PRIMARY KEY, EMAIL VARCHAR(30) NOT NULL, PWD VARCHAR(150) NOT NULL, ROLE INTEGER); and CREATE TABLE CONSUME(UID VARCHAR(20), TIMESTAMP DATE, AMOUNT INTEGER, PRIMARY KEY (UID, TIMESTAMP));

Grading Remarks: The smallest possible table that is sufficient is actually this CREATE TABLE MYONLYTABLE(EMAIL VARCHAR(30) PRIMARY KEY, PWD VARCHAR(150) NOT NULL, ISADMIN INTEGER NOT NULL, AMOUNT INTEGER NOT NULL);... That's it, EMAIL as the user id, ISADMIN to differentiate two roles: participant or admin, and the accummulated AMOUNT of banana eaten by this person (ignoring historical data).

(20 marks)
Such a web-application has to utilize a server-side script to access the database to compute/display/update the required information. Please write the required PHP scripts to access the database that you design in the previous question. As this is a written test where you cannot actually debug the PHP scripts, minor bugs in your PHP scripts will be ignored. Grading scheme for this last section will be determined only after seeing students answers.

common.php, write MySQL database connection and common MySQL queries (as PHP functions) here
<?php
index.php, utilize common.php when needed
<?php
participant.php, utilize common.php when needed
<?php
admin.php, utilize common.php when needed
<?php
signup.php, utilize common.php when needed
<?php

This question is the hardest and will be used to separate the potential A+ (or A) with the rest... You can try http://visualgo.net/cs3226/secret to get the idea. The full code may need more than 2 pages (can ask Steven for more empty papers) and unlikely to be written without bug on paper... :O. Steven himself uses more than 2 hours (maybe 3-4 hours coding from scratch) to iron out minor glitches although he is confident that the core functionalities (ignoring the lots of if-else checks) can be done very fast for those who are good with the main concepts of MySQL database manipulation with PHP.

Grading Remarks: Possible marks: 20 (perfect, nobody), 19 (very minor bugs), 16 (almost there), 12 (about 3 queries are right), 8 (about 2 queries are right), 4 (just database connection + 1 query), 2 or 1 (mercy, non blank), 0 (totally blank). Many students violated their own Q11 answers...

Grading Remarks: The average is 63.1/100, 7 points shy from my personal target of 70.0. The standard deviation is +/- 5.1, so there are lots of students around [58.0 .. 68.2]. The highest mark for Q17 that I said not doable perfectly in 90m by myself (if I have to do other questions too) is 19/20 :O (yes, got one of you who can write almost perfect answer on paper). The highest mark for Q7 is 6/8 (only missing a few details from the logo). But these two achievements came from two totally different students, i.e. those who spent lots of time in Q17 have weaker answers elsewhere and vice versa... The highest scorer is the third student with 81/100, but this student does not have the highest Q17 or Q9 :O...

CS3226 Web Programming and Applications 30% Theoretical Test (Open Book)

S2 AY2015/16

Tuesday, 29 March 2016, 10.05-11.35am (90 minutes) @ COM1-2-VCRm

My Matriculation Number: [A0][__][__][__][__][__][__][__] Show Answers and Grading Remarks and Statistics... :O

CS3226 Web Programming and Applications
30% Theoretical Test (Open Book)

My Matriculation Number: [A0][][][][][][][__]