CP3101B Mid Semester Test (Open Book)

S2 AY2014/15

Tuesday, 03 March 2015, 10.05-10.505am
Venue: LT19

Weightage: 16% of the course

My Matriculation Number: _______________

The marks for each question is as indicated and the total for this test is 80 points which will be scaled to 16% afterwards.

  1. (Easy? 10 marks; negative marking is used: -1 mark for each wrong answer capped to 0)
    Web programming is full of geeky jargons.
    What do these abbreviations stand for?
    One example has been given in the table below, please follow that format.

    NoAbbreviationStands For
    1AJAXAsyncronous Javascript And Xml
    2CSSCascading Style Sheets
    3DNSDomain Name System(erver)
    4DOMDocument Object Model
    5DTDDocument Type Definition
    6HTMLHyperText Markup Language
    7HTTPHyperText Transfer Protocol
    9JSONJavaScript Object Notation
    10PHPPHP Hypertext Preprocessor
    11RFCRequest For Comments
    -SVGScalable Vector Graphics
    12URLUniform Resource Locator
    13W3CWorld Wide Web Consortium
  2. Grading Remarks: Hardest abbreviations: DTD (see HTML lecture) and RFC (see HTTP lecture), minor issues (see your individual script later) are mostly forgiven, average: 6.97/10.00 (69.7%), that is, about 3 blanks/mistakes per student. PS: I was informed that DNS actually stands for Domain Name SYSTEM, not Domain Name Server, and thus we append the word "Server" to say DNS Server, the last 'S' is not 'Server' but 'System'... As the mistake is from my side, I will accept both version.

  3. (8 marks, 1 mark for the meaning, 1 mark for the action)
    What do these HTTP response status codes mean and what should you do upon receiving them?
    Please assume that your role is a web application developer who is currently testing your web application.
    One example has been given in the table below, please follow that format.

    NoHTTPMeaningYour Action
    1200OKYour webpage is loaded correctly, check other aspects of your web application
    2401UnauthorizedRe-enter correct credentials to pass HTTP Basic Authentication to load your web application
    3403ForbiddenCheck file permission settings of your web application files
    4404Not FoundCheck if the URL is entered correctly or check if the file name is setup correctly
    5500Internal Server ErrorCheck the server internal error log
  4. Grading Remarks: Very surprising bloodbath... :( ... Too many students leave HTTP response status codes 401 and 403 blank, and a few still leave response status code 500 blank although you must have seen it many times during Lab4+5..., see Lab0 FAQ (404, 403), this example (401), and Lab4 FAQ (500), average: 4.28/8.00 (53.5%).

  5. (22 marks; grading scheme to be determined after seeing students' answers)
    You are given the following simple HTML5 document with internal CSS3 styling rules below:

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8">
    <title>The CATS</title>
    .body { background-color: green; }
    #special { border: 1px solid black; border-radius: 50px; }
    #special p { font-size: 150px; text-align: right; }
    #special #test { display: none; }
    table { width: 300px; margin-left: auto; margin-right: auto; border-collapse: collapse; }
    th, td { width: 150px; border: 1px solid; padding-left: 50px; }
    td.ta { background-color: black; color: white; }
    #photo { position: fixed; top: 100px; left: 100px; }
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    // see the next question below
    <div id="special">
    <p style="text-align: center;">CP3101B is <span id="test">not </span>special
    <tr><td>1</td><td class="lec">Steven</td></tr>
    <tr><td>2</td><td class="ta">Peter</td></tr>
    <tr><td>3</td><td class="ta">Yang Shun</td></tr>
    <img id="photo" height="100px">
    Copyright CP3101B S2 AY2014/2015

    According to your current understanding of HTML5 and CSS3, draw your best possible rendering of that HTML5 document in the box below (assume it is a web browser tab of size 1024x768 pixels):

    What Steven is looking for (9 categories, -2 marks for each mistake found):

    1. The title is correctly drawn
    2. The background color of body is NOT green as there is no HTML element with class ".body"
    3. "CP3101B is special" with VERY big font (big is relative, Steven will accept sufficiently "BIG" font size) is centered, the span with text "NOT" should not appear
    4. The special div has a thin black border with rounded corner (IGNORED: the border should span the entire width of the web browser tab, not just surrounding the text)
    5. Table is centered, contains 4 rows and 2 columns (IGNORED: with funny padding-left), "Peter" and "Yang Shun" are with black background and white text
    6. Image img has no initial source file, so it is blank, but it is positioned at coordinate (100, 100)
    7. Two horizontal rules
    8. One ordered list with two elements
    9. Footer element is just like a standard paragraph with special semantic
  6. Grading Remarks: I am grateful that only a few popular web browsers are available in the WWW out there otherwise none of the web application developer will have confidence what his/her web application looks like on client's web browser... average: 14.14/22.00 (64.3%), i.e. around 4 errors out of 9 categories above. So try to increase your familiarity with HTML5 and CSS3, the language of the web, so that you can design interactive, dynamic, useful web applications with JavaScript+PHP/other backend manipulation.

  7. (20 marks)
    Now suppose we add the following piece of JavaScript code (assume that jQuery library have been properly referenced and loaded) in the script section of the header of the HTML5 document above.
    Please write comments directly in the box below to explain what does each of these JavaScript lines is doing.

    $("#special").css("background-color", "red");
    $(function() {
      if (!localStorage.getItem("hasgreetuser")) {
        alert('Hi new visitor, welcome :)');
        localStorage.setItem("hasgreetuser", "true");
      $(".ta").on('mouseover', function() {
      // mouseout: triggered when the mouse pointer is no longer over the HTML element
      $(".ta").on('mouseout', function() {
        $("#photo").attr("src", "");
    function photo(thehtml) {
      var transformed = thehtml.replace(/ /g,'')
                               .toLowerCase() // hopefully the method name toLowerCase is obvious
                               + ".jpg";
      $("#photo").attr("src", transformed);

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

    1. The background color of the div with id #special should NOT be red as it is executed before that div #special is even created
    2. Alert 'Hi new visitor, welcome :)' will only appear once, when there is no 'hasgreetuser' variable in the user's localStorage
    3. TA photo (excluding Steven) will appear on mouse over of the corresponding td element and disappear on mouse out
    4. The file names for TA photos are lower case, no space, and with .jpg extension

    You can also see this page in action here.

  8. Grading Remarks: Amazing that more than half of the class did the classic JavaScript DOM manipulation mistake (by saying that the div element with id "special" will have red background color) despite my repeated warnings (e.g. see JavaScript lecture and Lab2). This is "number one" JavaScript debugging headache for newbies that consumed so many debugging hours. I better take your 5 marks out from this midterm test now rather than most of you spending countless hours debugging why your JavaScript code does not modify the DOM...., average: 14.60/20.00 (73.0%), i.e. mostly that classic DOM manipulation error.

  9. (20 marks)
    We have the following short PHP script stored in http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php

    if (isset($_GET["pro"])) // hopefully the function name and its meaning is obvious
      $pro = $_GET["pro"];
      $pro = "";
    $con = array(
      array("B", "D", "H"),
      array("A", "C", "F"),
      array("E", "G", "J"),
    $ans = 0;
    $i = 0;
    while ($i < strlen($pro)) {
      if ($pro[$i] < 'A' || $pro[$i] > 'J')
        exit("Sorry, unsupported");
      for ($j = 0; $j < 4; $j++)
        for ($k = 0; $k < count($con[$j]); $k++)
          if ($pro[$i] == $con[$j][$k])
            $ans += ($j+1);
    echo $ans;

    Explain in details on what happen when we type in the following URLs to your web browser:

    1. http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php

      You should only see 0 echoed to the screen as $_GET["pro"] is not set, so $pro is set to empty string so the while loop is never executed and $ans remains at 0.

    2. http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php?hm=EASY

      Again, $ans remains at 0 as $_GET["pro"] is not set, so $pro is set to empty string (we set parameter 'hm', which is not used).

    3. http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php?pro=EASY

      'S' is not between ['A'..'J'] so the message "Sorry, unsupported" is shown. 'Y' is also not between ['A'..'J'] but the PHP script has terminated by then as we check from left to right.

    4. http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php?pro=DIE

      'D' is found in row 1, 'I' is found in row 4, and 'E' is found in row 3, so total $ans = 1+4+3 = 8.

    5. http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php?pro=DIE&msg=AH

      The parameter 'msg' is not used so the answer should be the same as above.

    6. Grading Remarks: Most people got this part OK, common minor mistakes: Answering 5 (from 0+3+2 = 5) instead of 8 (1+4+3 = 8), still printing ans = 5 for 'EA' and not realizing that function 'exit' stops PHP script and not like a 'break' command from a while loop, average: 16.52/20.00 (82.6%) or about 1 wrong out of 5 sub questions as I decide each sub-question worth the same = 4 marks.

    Grading Remarks: In overall, this first CP3101B midterm test under myself turns out not too be that easy, maybe 'medium' (so most likely I will not increase the difficulty rating of my planned final exam paper by much). At this stage of semester (Week7), not many of you are comfortable enough with HTML5 and CSS3 code yet. So try to increase your familiarity with these language of the web. Notice that I have not ask harder questions about JavaScript+PHP (I only ask "code comprehension" only) and have not ask anything about SQL. Expect them to appear in harder form during final exam.

    Btw, the average score for this test is: 56.50/80.00 (70.6%), my favorite number 7 :), with standard deviation of plus minus 8 (i.e. majority of you has score in range = [48.5 .. 64.5]).

    I now learn a new technique to make my test have average around 70 regardless it is a slightly harder or slightly easier test: Simply leave the grading scheme for several questions open until seeing students' answers.