Scribd
Upload
42 views11 pages

Midterm Solution PDF

This document is a sample solution for a midterm examination in Systems and Computer Engineering, covering topics such as HTML, CSS, JavaScript, and PHP. It includes multiple-choice questions, coding exercises, and explanations of concepts related to web development. The examination was conducted in Fall 2016 with a duration of 80 minutes and involved 48 students.

Uploaded by

imanw7sen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views11 pages

Midterm Solution PDF

This document is a sample solution for a midterm examination in Systems and Computer Engineering, covering topics such as HTML, CSS, JavaScript, and PHP. It includes multiple-choice questions, coding exercises, and explanations of concepts related to web development. The examination was conducted in Fall 2016 with a duration of 80 minutes and involved 48 students.

Uploaded by

imanw7sen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Sample Solution to Midterm

EXAMINATION
FALL 2016

DURATION: 80 Minutes No. Of Students: 48

Department Name & Course Number: Systems and Computer Engineering


SYSC 4504: Distributed Network Processing

Course Instructor (s): Thomas Kunz

AUTHORIZED MEMORANDA :
Randy Connolly and Ricardo Hoar, Fundamentals of Web Development,
Pearson 2015, ISBN-10: 0-13-340715-2, ISBN-13: 978-0-13-340715-0

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 x pages + cover
page = _x__ 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:

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 not contradict the question), write it at the start of the solution, and answer
the question. Do not ask questions 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 will be confirmed, but no additional
explanation of the question will be provided.
Question 1: HTML and CSS (10 marks)

Multiple Choice. Choose the single best answer!

1. Choose the true statement below.


a. The content that displays in the browser is contained in the head section.
b. The content that displays in the browser is contained in the body section.
c. Information about the web page is contained in the body section.
d. All of the above are true.

Answer (1 mark): b

2. Choose the special character that is used to indicate a blank space.


a. ␣
b.  
c. ©
d. none of the above

Answer (1 mark): b

3. Choose the preferred tag pair to use when emphasizing text.


a. <i>…</i>
b. <strong>…</strong>
c. <em>…</em>
d. none of the above

Answer (1 mark): c

4. Choose the preferred tag pair to use when displaying important text in bold font.
a. <bold>…</bold>
b. <strong>…</strong>
c. <big>…</big>
d. none of the above

Answer (1 mark): b

5. Choose the best-designed link from below.


a. <a href="news.htm">Click to read our important news!</a>
b. Click to read our <a href="news.htm">important news!</a>
c. <a href="news.htm">Important News</a>
d. <a href="news.htm">Click here to read our important news</a>

Answer (1 mark): c
6. Cascading Style Sheet rules are comprised of:
a. Selectors and Declarations
b. Properties and Declarations
c. Selectors and Attributes
d. None of the above

Answer (1 mark): a

7. When CSS is coded in the body of the web page as an attribute of an HTML tag it is called
________.
a. Embedded
b. Inline
c. External
d Imported

Answer (1 mark): b

8. Select the items below that can be used as a CSS Selector.


a. an HTML element
b. a class name
c. an id name
d. All of the above

Answer (1 mark): d

9. To apply a style to a certain group of elements on a web page, configure a CSS _____________.
a. group
b. id
c. class
d. None of the above

Answer (1 mark): c

10. Select the code below that uses CSS to configure an id named “footer” that configures small,
italic text.
a. #footer { font-size: small; font-weight: italic;}
b. .footer{ font-size: small; font-weight: italic;}
c. .footer { font-size: small; font-style: italic;}
d. #footer { font-size: small; font-style: italic;}

Answer (1 mark): d
Question 2: Forms and Tables (10 marks)
Create a simple HTML document that creates a table as shown in the figure below.

Answer (10 marks):


<!DOCTYPE html>
<html lang = "en">
<head>
<title> A simple table </title>
</head>
<body>
<table>
<caption> Tree Characteristics </caption>
<tr>
<td rowspan = "2" colspan = "2"> </td>
<th colspan = "4"> Tree </th>
</tr>
<tr>
<th> Pine </th>
<th> Maple </th>
<th> Oak </th>
<th> Fir </th>
</tr>
<tr>
<th rowspan = "4"> Characteristic </th>
<th> Average Height (feet) </th>
<td> 55 </td>
<td> 50 </td>
<td> 50 </td>
<td> 65 </td>
</tr>
<tr>
<th> Average Width (inches) </th>
<td> 18 </td>
<td> 26 </td>
<td> 24 </td>
<td> 28 </td>
</tr>
<tr>
<th> Typical Lifespan (years) </th>
<td> 150 </td>
<td> 230 </td>
<td> 310 </td>
<td> 135 </td>
</tr>
<tr>
<th> Leaf Type </th>
<td> Long needles </td>
<td> Broadleaf </td>
<td> Split leaf </td>
<td> Short needles </td>
</tr>
</table>
</body>
</html>
Question 3: JavaScript and DOM (20 marks)
1) Assume we have the following HTML document that provides a number of radio buttons to
select one of 5 color choices. Write JavaScript code (which would be used in the separate file
midterm.js) that will:
a) Register event handlers for the CLICK event on each radio button
b) The event handler will display the selected color each time a radio button is selected

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Midterm Question </title>
<script type = "text/javascript" src = "midterm.js" >
</script>
</head>
<body>
<h1> Choose your favorite color </h1>
<form id = "colorsForm">
<p>
<label> <input type = "radio" name = "colorButton" value = "red" /> Red</label>
</p>
<p>
<label> <input type = "radio" name = "colorButton" value = "blue" /> Blue </label>
</p>
<p>
<label> <input type = "radio" name = "colorButton" value = "green" /> Green</label>
</p>
<p>
<label> <input type = "radio" name = "colorButton" value = "yellow" /> Yellow</label>
</p>
<p>
<label> <input type = "radio" name = "colorButton" value = "orange" /> Orange</label>
</p>
</form>
</body>
</html>

Answer (10 marks):

Window.onload = function() {
var dom = document.getElementById("colorsForm");
dom.elements[0].onclick = colorChoice;
dom.elements[1].onclick = colorChoice;
dom.elements[2].onclick = colorChoice;
dom.elements[3].onclick = colorChoice;
dom.elements[4].onclick = colorChoice;
}
function colorChoice () {
var color;
// Put the DOM address of the elements array in a local variable
var radioElement = document.getElementById("colorsForm").elements;
// Determine which button was pressed
for (var index = 0; index < radioElement.length; index++) {
if (radioElement[index].checked) {
color = radioElement[index].value;
break;
}
}

// Produce an alert message about the chosen color


switch (color) {
case "red":
alert("Your favorite color is red");
break;
case "blue":
alert("Your favorite color is blue");
break;
case "green":
alert("Your favorite color is green");
break;
case "yellow":
alert("Your favorite color is yellow");
break;
case "orange":
alert("Your favorite color is orange");
break;
default:
alert("Error in JavaScript function colorChoice");
break;
}
}
2) State whether each of the following is true or false. If false, explain why.

a) A document’s DOM tree represents all of the nodes in a document, as well as their
relationships to each other.

Answer (1 mark): True.

b) Every XHTML element in a page is represented by a DOM tree.

Answer (2 marks): False. Every element is represented by a DOM node. Each node
is a member of the document’s DOM tree.

c) A text node cannot have child nodes.

Answer (1 mark): True.

d) The document node in a DOM tree cannot have child nodes.

Answer (2 marks): False. The document is the root node, therefore has no parent
node.

e) The createElement method creates a new node and inserts it into the document.

Answer (2 marks): False. The createElement method creates a node, but does not
insert it into the DOM tree.

f) The insertBefore method is called on the document object, taking a new node and an existing
one to insert the new one before.

Answer (2 marks): False. insertBefore is called on the parent.


Question 4: PHP (10 marks)
1. With PHP you can:
a) create dynamic web content
b) read and write to databases or files on the server
c) animate an element on your page directly as a consequence of user actions
d) both a and b
e) none of the above

Answer (1 mark): d

2. What will be the output of the following PHP code?

<?php
$states = array("Canada" => array( "population" => "35,000,000", "capital" => "Ottawa"),
"France" => array( "population" => "64,600,000", "capital" => "Paris")
"Germany" => array( "population" => "82,600,000", "capital" => "Berlin") );
echo "population=" . $states["France"]["population"] . " capital=" . $states["Germany"]["capital"];
?>

a) Nothing (syntax error)


b) population=64,600,000 capital=Paris
c) population=64,600,000 capital=Berlin
d) population=82,600,000 capital=Berlin
e) population=82,600,000 . capital=Berlin

Answer (1 mark): a (comma missing after “Paris”)

3. What will be the output of the following PHP code?

<?php
$abc = 100;
echo 'Value of abc = $abc';
?>

a) Nothing (syntax error)


b) Value of abc = abc
c) Value of abc = 100
d) Value of 100 = 100
e) Value of abc = $abc

Answer (1 mark): e
4. What will be the output of the following PHP code?

<?php
$abc = 10;
function calculate($param) {
return $param + $abc;
}
echo calculate(30);
?>

a) 10
b) 20
c) 30
d) 40
e) 3010

Answer (1 mark): d
NOTE: actually there will be an error/warning raised, as $abc is NOT in scope within
calculate. So to return 40, we would need to add a line “global $abc;” before the return
statement. So I will accept 30 as a proper answer as well.

5. Which one of the following is the correct PHP to output a message to a web page:
a) Echo "Hello";
b) echo "hello"
c) echo 'hello';
d) echo hello;
e) none of the above

Answer (1 mark): c
NOTE: at least c was the expected answer. It turns out that a or b would also work: keywords
in PHP are not case sensitive, and you can ignore the ; particularly when the statement is the
last one.

6. When we say that PHP variables are “dynamically typed” we mean that
a) PHP variables operate your keyboard for you
b) It doesn’t matter where the PHP code is typed on the page
c) A variable type can be an integer, then later a string, and then later an object (for instance)
d) A variable type cannot be changed after a variable is initialized
e) PHP variable processing happens sequentially

Answer (1 mark): c
7. Write an HTML document that includes an anchor tag that calls a PHP document called
greeting.php. Also write the called PHP document which returns a randomly chosen
greeting from a list of five different greetings. The greetings must be stored as constant strings
in the script. A random number between 0 and 4 can be computed by invoking the function
rand(0, 4)

Answer (4 marks):
HTML Document:
<!DOCTYPE html>
<html lang = "en">
<body>
<a href = "greeting.php"> Please give me a greeting </a>
</body>
</html>

greeting.php:

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Random Greeting</title>
<meta charset = "utf-8" />
</head>
<body>
<?php
$greetings = array("Hello!", "Hej!", "Hallo!", "Hola!",
"Bonjour!");
$sub = rand(0, 4);
print "$greetings[$sub]";
?>
</body>
</html>

You might also like