Sample Solution to Midterm

EXAMINATION
FALL 2019

DURATION: 90 Minutes No. Of Students: 106

Department Name & Course Number: Systems and Computer Engineering

SYSC 4504A: Fundamentals of Web Development

Course Instructor (s): Thomas Kunz

AUTHORIZED MEMORANDA :
Randy Connolly and Ricardo Hoar, Fundamentals of Web Development, 2nd Edition,
Pearson 2017, ISBN-10: 0134481267, ISBN-13: 978-0134481265 (or first edition), as book only, no e-book.

Students MUST count the number of pages in this examination question paper before beginning to write, and
report any discrepancy to a proctor. This question paper has 8 pages + cover page = _9__ pages in
all.

This examination question paper may not be taken from the examination room.

In addition to this question paper, students require: an examination booklet no

Scantron Sheet no

Name:

Student Number:

Question 1: ______ / 6 Exam questions will not be explained, and no hints will be
given. If you think that something is unclear or
Question 2: ______ / 15 ambiguous, make a reasonable assumption (one that does
not contradict the question), write it at the start of the
solution, and answer the question. Do not ask questions
Question 3: ______ / 5 unless you believe you have found a mistake in the exam
paper. If there is a mistake, the correction will be
Question 4: ______ / 5 announced to the entire class. If there is no mistake, this
will be confirmed, but no additional explanation of the
Question 5: ______ / 9 question will be provided.

Total: _______/ 40
Question 1: Browser Diversity (6 marks)
As discussed in class, when authoring web content for a general audience, the author should consider that his/her pages
will be accessed by a wide variety of browser, on a range of different devices/platforms.
1. Explain what issues may raise

Answer (2 marks):
Primarily, as web designer you will not have control over the browser a user will use to access your content. As
highlighted a few times in the course, different browsers do not implement the same consistent subset of HTML 5, not
all browsers support JavaScript, and some devices may use a mouse and keyboard, while others primarily use a touch
screen display. Other possible differences are the size of the display screen and/or the area used by the browser’s
canvas.

2. Explain a few possible approaches to solving the identified problems

Answer (2 marks):

 Dealing with different levels of HTML compliance: either assume a lowest common denominator and provide
many features through low-level JavaScript code, or design your content utilizing the latest and greatest features,
but provide sensible fallbacks for browsers that lack such support. This is one reason to use frameworks such a
jQuery, which provide workarounds for known browser “deficiencies” or lack of support.
 Dealing with different screen sizes/resolutions: utilize relative sizing whenever possible, rather than absolute units
 Absence of JavaScript support in a browser: ensure that page provides core functionality, in the extreme case
provide a separate set of web content written for such devices (which the server can return based on the header
field that identifies such browsers).
 Mouse and Keyboard vs. Touchscreen Display: in essence, register event handlers for both mouse and
touchscreen events, to allow a user to interact with a page either way. If you know your web content is accessed
primarily by devices without a (hard) keyboard, you may want to reduce the information a user has to type,
guiding the information exchange more with choices that can be touched/selected. But even such devices typically
have a (soft) keyboard that allows for text input, and we usually do not edit large text documents through a web-
based interface.
3. Assume now that you are asked to author content for a corporate intranet, i.e., only employees of a specific company
will access your page(s), using equipment provided and maintained by a corporate IT department. In designing your
web content, would you have to consider the same issues that arise when authoring content for (potentially) the whole
world? Or are there any simplifying assumptions you would be justified in making.

Answer (2 marks):
In such a controlled environment, life becomes simpler for the author of web content. If the company provides the
user equipment, it will ensure a certain amount of uniformity in both hardware capabilities (mouse vs. touchscreen,
size of display) and software (what browser to use, and what version). Even if not all devices have to be exactly the
same, the amount of variability will be reduced. This reduces the above complexities, as the web page designer now
can safely assume a certain amount of commonalities (or only a limited number of variations) among all browsers
accessing the content.

As a side note, in a world where companies support a BYOD (Bring Your Own Device) policy, this “advantage” is
lost again. Of course, this allows a user more freedom/comfort in the choice of his/her IT device, which is
advantageous in other ways.
Question 2: HTML Tables and Forms (15 marks)
Write the complete HTML markup that would generate the input form shown below. Note that the fields in the form are
arranged in a table to line up the entries nicely.
LEFT BLANK FOR EXTRA SPACE

Answer (15 marks):

!DOCTYPE html>
<!-- popcorn.html
This describes popcorn sales form page>
-->
<html lang = "en">
<head>
<title> Popcorn Sales Form </title>
<meta charset = "utf-8" />
</head>
<body>
<h2> Welcome to Millenium Gynmastics Booster Club Popcorn
Sales
</h2>

<form action = "">

<p>
<!-- Text widgets for name and address -->

<label> Buyer's Name: &nbsp;

<input type = "text" name = "name"
size = "30" /> </label>
<br />
<label> Street Address: &nbsp;
<input type = "text" name = "street"
size = "30" /> </label>
<br />
<label> City, State, Zip:
<input type = "text" name = "city"
size = "30" /> </label>
<p />

<!-- A table for item orders -->

<table>

<!-- First, the column headings -->

<tr>
<th> Product Name </th>
<th> Price </th>
<th> Quantity </th>
</tr>

<!-- Now, the table data entries -->

<tr>
<td> Unpopped Popcorn (1 lb.) </td>
<td> $3.00 </td>
<td> <input type = "text" name = "unpop"
size ="2" />
</td>
</tr>
<tr>
<td> Caramel Popcorn (2 lb. cannister) </td>
<td> $3.50 </td>
<td> <input type = "text" name = "caramel"
size = "2" />
</td>
</tr>
 <tr>
<td> Caramel Nut Popcorn (2 lb. cannister) </td>
<td> $4.50 </td>
<td> <input type = "text" name = "caramelnut"
size = "2" />
</td>
</tr>
<tr>
<td> Toffey Nut Popcorn (2 lb. cannister) </td>
<td> $5.00 </td>
<td> <input type = "text" name = "toffeynut"
size = "2" />
</td>
</tr>

</table>
<p />

<!-- The radio buttons for the payment method -->

<h3> Payment Method: </h3>

<p>
<label> <input type = "radio" name = "payment"
value = "visa" checked = "checked" />
Visa
</label>
<br />
<label> <input type = "radio" name = "payment"
value = "mc" /> Master Card
</label>
<br />
<label> <input type = "radio" name = "payment"
value = "discover" /> Discover
</label>
<br />
<label> <input type = "radio" name = "payment"
value = "check" /> Check
</label>
<br />
</p>

<!-- The submit and reset buttons -->

<p>
<input type = "submit" value = "Submit Order" />
<input type = "reset" value = "Clear Order Form" />
</p>
</form>
</body>
</html>
Question 3: CSS (5 marks)
The HTML document below displays a number of paragraphs. Each paragraph has instructions about its styling, and the
image below also shows how each paragraph is supposed to appear. Write the CSS style commands that would have to be
include in the document (in place of “Your Answer Would Go here”) to complete this document. You can use color
code/value #C0C0C0 to generate the grey tone shown in this picture.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Margins and Padding </title>
<meta charset = "utf-8" />
<style type = "text/css">
YOUR ANSWER WOULD GO HERE
</style>
</head>
<body>
<p>
Here is the first line.
</p>
<p class = "one">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [margin = 15px,
padding = 15px]
</p>
<p class = "two">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [margin = 5px,
padding = 25px]
</p>
<p class = "three">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [margin = 25px,
padding = 5px]
</p>
<p class = "four">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [margin = 25px,
no padding, no border]
</p>
<p class = "five">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [padding = 25px,
no margin, no border]
</p>
<p>
Here is the last line.
</p>
</body>
</html>
Answer (5 marks):

p.one {margin: 15px;

padding: 15px;
background-color: #C0C0C0;
border-style: solid;
}
p.two {margin: 5px;
padding: 25px;
background-color: #C0C0C0;
border-style: solid;
}
p.three {margin: 25px;
padding: 5px;
background-color: #C0C0C0;
border-style: solid;
}
p.four {margin: 25px;
background-color: #C0C0C0;}
p.five {padding: 25px;
background-color: #C0C0C0;
}
Question 4: JavaScript (5 marks)
Write down the output that is generated by the following JavaScript code:

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Parameters </title>
<meta charset = "utf-8" />
<script type = "text/javascript">
// Function params
// Parameters: ?????
// Returns: nothing

function params(a, b) {
document.write("Function params was passed ",
arguments.length, " parameter(s) <br />");
document.write("Parameter values are: <br />");

for (var arg = 0; arg < arguments.length; arg++)

document.write(arguments[arg], "<br />");

document.write("<br />");
}
</script>
</head>
<body>
<script type = "text/javascript">
// A text driver for params
params("Mozart");
params("Mozart", "Beethoven");
params("Mozart", "Beethoven", "Tchaikowsky");
</script>
</body>
</html>

Answer (5 marks):

Function params was passed 1 parameter(s)

Parameter values are:
Mozart

Function params was passed 2 parameter(s)

Parameter values are:
Mozart
Beethoven

Function params was passed 3 parameter(s)

Parameter values are:
Mozart
Beethoven
Tchaikowsky
Question 5: Web Page Design (9 marks)
In dealing with input forms, we repeatedly stressed that different fields may need to have consistent values. For example,
when a user enters an address, the possible choices of province or state are conditional on the country. As another
example we used in class, payment choices may depend on the region in which a customer resides. As a running design
theme, a webpage should be designed to either prevent a user from entering inconsistent information or validate the input
to inform a user of inconsistent choices. In the following examples, we will use the case of payment choices being
dependent on the customer’s region. We have three region: United States, Europe, and China. Each region has a number
of possible payment options, as follows:
1) United States: Visa, MasterCard, Amex
2) Europe: Bitcoin, PayPal
3) China: WeChatPay, AliPay
We will provide the user with a page that allows the user to select one of the regions using radio buttons. We will also
provide a <select> input field where the user can choose a payment option.

1. Assume the following design: the initial webpage has the radio buttons, but an empty <select> element. Once the
user completes the form and selected a region, he/she submits the form. The server recognizes the absence of a
payment option and returns a new page to the user, which looks almost identical to the previous form, with all user
input filled in already. In addition, the <select> element now has a valid list of payment options from which the
user can choose. What are the pros and cons of this approach?

Answer (3 marks):
The design facilitates that the user selects a consistent payment option, in particular if we also prevent the user from
changing the region on the second form. It is not very responsive, as the user will have to wait for another round of
interactions with the server before completing the form. While waiting for the response from the server to the first
form, the screen will blank out and be redrawn, further limiting the user experience.

2. Describe up to three alternative ways of solving the same problem. Briefly sketch your proposed solution, and discuss
the advantages and disadvantages of each.

Answer (3 marks):
i. Provide a form that has all possible payment options listed in the <select> element. There is a good chance
that the user makes an inconsistent choice, so we should register an event handler on the submit button to
check/enforce consistency. Allows for a fast and smooth interaction with the user.
ii. Provide a form with an initially empty <select> element. Register event handlers on the radio button, as
soon as the user selects a region, populate the <select> element with the corresponding payment options,
along the lines of the example of Figure 9.14 in the textbook. Will ensure that the user only enters consistent
information, requires JavaScript and a somewhat complex programming logic to be downloaded from the
server. Provides a smooth user experience.
iii. Provide a form with an initially empty <select> element. Register event handlers on the radio button, as
soon as the user selects a region request the list of valid payment options from the server using AJAX. Once
the response is received, use the information to create a <select> list. Similar to the previous solution, this
ensures that the user only is presented (and can therefore choose) consistent information, but it now requires
an additional interaction with the server. As this interaction is asynchronous, it will be less disruptive for the
user than the solution outlined in part 1.

3. Now assume that the dependent choices are NOT static (as in the above example), but could change at relatively short
timeframes. For example, the radio button allows you to select among one of a number of currently traded stocks on
the TSX. Once a user selects one of stocks, the select field would allow a user to request more information about one
of the trades that occurred that day (up to the time of the user’s request). Would any of your previous design choices
now be more attractive than before?
Answer (3 marks):
Options (i) and (ii) in the previous part work well when the set of choices is static. When the dependent choices
change over time, both would suffer from caching: the code to generate the <select> element would, at best, reflect
the state of trades at the time the page was downloaded initially. To get a more accurate view of what trades have
occurred up to “now”, some interaction with the server would be required. That could be in the form indicated in part
1, or preferably be done using AJAX, as discussed in (iii).