(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.
| No | Abbreviation | Stands For |
|---|---|---|
| 1 | AJAX | Asyncronous Javascript And Xml |
| 2 | CSS | Cascading Style Sheets |
| 3 | DNS | Domain Name System(erver) |
| 4 | DOM | Document Object Model |
| 5 | DTD | Document Type Definition |
| 6 | HTML | HyperText Markup Language |
| 7 | HTTP | HyperText Transfer Protocol |
| 8 | JS | JavaScript |
| 9 | JSON | JavaScript Object Notation |
| 10 | PHP | PHP Hypertext Preprocessor |
| 11 | RFC | Request For Comments |
| - | SVG | Scalable Vector Graphics |
| 12 | URL | Uniform Resource Locator |
| 13 | W3C | World Wide Web Consortium |
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.
(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.
| No | HTTP | Meaning | Your Action |
|---|---|---|---|
| 1 | 200 | OK | Your webpage is loaded correctly, check other aspects of your web application |
| 2 | 401 | Unauthorized | Re-enter correct credentials to pass HTTP Basic Authentication to load your web application |
| 3 | 403 | Forbidden | Check file permission settings of your web application files |
| 4 | 404 | Not Found | Check if the URL is entered correctly or check if the file name is setup correctly |
| 5 | 500 | Internal Server Error | Check the server internal error log |
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%).
(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">
<head>
<meta charset="utf-8">
<title>The CATS</title>
<style>
.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; }
</style>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
// see the next question below
</script>
</head>
<body>
<div id="special">
<p style="text-align: center;">CP3101B is <span id="test">not </span>special
</p>
</div>
<hr>
<table>
<tr><th>No</th><th>Staff</th></tr>
<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>
</table>
<img id="photo" height="100px">
<hr>
<ol>
<li>A</li>
<li>B</li>
</ol>
<footer>
Copyright CP3101B S2 AY2014/2015
</footer>
</body>
</html>
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):
- The title is correctly drawn
- The background color of body is NOT green as there is no HTML element with class ".body"
- "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
- 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)
- 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
- Image img has no initial source file, so it is blank, but it is positioned at coordinate (100, 100)
- Two horizontal rules
- One ordered list with two elements
- Footer element is just like a standard paragraph with special semantic
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.
(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() {
photo($(this).html());
});
// 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):
- The background color of the
divwith id#specialshould NOT be red as it is executed before thatdiv #specialis even created - Alert 'Hi new visitor, welcome :)' will only appear once, when there is no 'hasgreetuser' variable in the user's localStorage
- TA photo (excluding Steven) will appear on mouse over of the corresponding td element and disappear on mouse out
- The file names for TA photos are lower case, no space, and with .jpg extension
You can also see this page in action here.
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.
(20 marks)
We have the following short PHP script stored in http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php
<?php
if (isset($_GET["pro"])) // hopefully the function name and its meaning is obvious
$pro = $_GET["pro"];
else
$pro = "";
$con = array(
array("B", "D", "H"),
array("A", "C", "F"),
array("E", "G", "J"),
array("I")
);
$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);
$i++;
}
echo $ans;
?>
Explain in details on what happen when we type in the following URLs to your web browser:
http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.phpYou 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.
http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php?hm=EASYAgain, $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).
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.
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.
http://cp3101b.comp.nus.edu.sg/~stevenha/midtest.php?pro=DIE&msg=AHThe parameter 'msg' is not used so the answer should be the same as above.
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.