Scribd
Upload
3 views

Midterm2018.PDF

The document is a midterm examination for the course SYSC 4504A: Fundamentals of Web Development, conducted in Fall 2018. It consists of 4 questions covering HTML, CSS, JavaScript, and PHP, with a total of 40 marks. The exam is 80 minutes long and allows the use of a specific textbook, with instructions for students regarding the examination process and materials needed.

Uploaded by

imanw7sen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Midterm2018.PDF

The document is a midterm examination for the course SYSC 4504A: Fundamentals of Web Development, conducted in Fall 2018. It consists of 4 questions covering HTML, CSS, JavaScript, and PHP, with a total of 40 marks. The exam is 80 minutes long and allows the use of a specific textbook, with instructions for students regarding the examination process and materials needed.

Uploaded by

imanw7sen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Midterm

EXAMINATION
FALL 2018

DURATION: 80 Minutes No. Of Students: 87

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 7 pages + cover page = 8 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: ______ / 10 Exam questions will not be explained, and no hints will be
given. If you think that something is unclear or
ambiguous, make a reasonable assumption (one that does
Question 2: ______ / 10 not contradict the question), write it at the start of the
solution, and answer the question. Do not ask questions
Question 3: ______ / 10 unless you believe you have found a mistake in the exam
paper. If there is a mistake, the correction will be
announced to the entire class. If there is no mistake, this
Question 4: ______ / 10 will be confirmed, but no additional explanation of the
question will be provided.

Total: _______/ 40
Question 1: HTML (10 marks)
1. The HTML page below, when rendered by a browser, will display a table. Assuming that the browser uses
conventional default styles for the display, draw the resulting table.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

</body>
</html>
2. Add a drop down list with name="cars" to the form. Include the following options: "volvo", "ford", "fiat", and "audi".

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">

<input type="submit">
</form>

</body>
</html>

3. Set the display text of the <button> to: "Click Me!".

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Hello World!')">


</button>

</body>
</html>
Question 2: CSS (10 marks)
1. Change the color of all <p> elements, that are descendants of <div> elements, to "red".

2. Change the color of all <p> elements, that are immediate children of <div> elements, to "red".

3. Change the color of <p> elements, that are the adjacent (immediately following) sibling of a <div> element, to "red".

4. Set the background-color to "lightblue" for elements with a "target" attribute.

5. Set a solid border with the color "red", 5px wide, around elements with a "title" attribute containing the word "red".

6. For the HTML document below, determine the total height and width occupied by the <DIV> element.

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
width: 200px;
height: 100px;
padding: 35px;
border: 25px solid navy;
margin: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>
Question 3: JavaScript and DOM (10 marks)
1. Write a JavaScript function myFunction() that displays "Hello" in the inner HTML of an element with the ID "demo".

2. Using inline code, the <div> element should turn red when someone moves the mouse over it.

3. Use the getElementsByTagName method to find the first <p> element, and change its text to "Hello". Embed the
JavaScript code in a <script> element.

4. Use the eventListener to assign an onclick event to the button element below. Embed the JavaScript code in a
<script> element.

<button id=”demo’>Click me</button>

5. Write JavaScript code that creates a simple multiplication table, asking the user the number of rows and columns he
wants. The output should be properly marked up HTML, with a page that contains a title, similar to the screenshot
below (for 4 rows and 8 columns).
LEFT BLANK TO PROVIDE SPACE FOR ANSWER
Question 4: PHP (10 marks)
The HTML page below creates a form that allows a user to enter a number of items to be ordered from a garage. Upon
submitting the order, a PHP resource processorder.php is invoked on the server side that lists each item on the
order, totals it all up, and provides the total owed both before and after taxes (13% HST). A sample input and output are
provided below. Write the PHP file that generates this output. Assume that tires are $100 each, bottles of oil cost $10
each, and spark plus can be had for $4 apiece.

<!DOCTYPE html>
<html>
<body>
<form action="processorder.php" method="post">
<table>
<tr style="background: #cccccc;">
<th style="width: 150px; text-align: center;">Item</th>
<th style="width: 15px; text-align: center;">Quantity</th>
</tr>
<tr>
<td>Tires</td>
<td><input type="text" name="tireqty" size="3" maxlength="3" /></td>
</tr>
<tr>
<td>Oil</td>
<td><input type="text" name="oilqty" size="3" maxlength="3" /></td>
</tr>
<tr>
<td>Spark Plugs</td>
<td><input type="text" name="sparkqty" size="3" maxlength="3" /></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="submit" value="Submit
Order" /></td>
</tr>
</table>
</form>
</body>
</html>

Form.html

Output from processorder.php


LEFT BLANK TO PROVIDE SPACE FOR ANSWER

You might also like