CM1605: Web Technology

School School of Computing

Course BSc (Hons) Artificial Intelligence and Data Science
Stage 1
Academic Year 2020
Semester 2
Date 5th August XXXX
Start Time 14:30
End Time 16:30
No. of Pages (including cover sheet) 17

Instructions to Candidates

You are advised (but not required) to spend the first ten minutes of the examination
reading the questions and planning how you will answer those you have selected.

This examination paper comprises 2 sections:

Section A (40 Marks) – 20 Multiple Choice Questions (Answer all questions)

Section B (60 Marks) – Answer all questions

THIS PAPER MUST NOT BE TAKEN OUT OF THE EXAMINATION ROOM

DO NOT TURN OVER THIS PAGE UNTIL THE INVIGILATOR INSTRUCTS YOU TO DO SO

Special Stationery (if applicable)

You may make use of a non-programmable calculator in this exam.
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

Section A – Multiple Choice

Answer all questions in this section.
Each question is followed by 4 possible answers. On your answer paper, write the letter of the
answer you think is correct. Each correct answer is worth 2 marks. No mark will be deducted if
the question is not answered or incorrect.

Question 01 (2 marks)
A HTML bulleted list starts with:
A. <ol>
B. <ul>
C. <dl>
D. <li>

Question 02 (2 marks)
Which would correctly make a table cell extend down three rows?
A. <td span=”3”>
B. <td colspan=”3”>
C. <td extend=”3”>
D. <td rowspan=”3”>

Question 03 (2 marks)
What is the correct HTML for creating a hyperlink?
A. <a url="mylink.html">My link</a>
B. <a href="mylink.html">My link</a>
C. <a>mylink.html</a>
D. <a link="mylink.html">My link</a>

Question 04 (2 marks)
Which HTML form control element is NOT correct?
A. <input type=”email”>
B. <input type=”submit”>
C. <input type=”text”>
D. <input type=”textarea”>

Page 2 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

Question 05 (2 marks)
Which selector applies a CSS rule to all elements?
A. * { }

B. # { }

C. . { }

D. None of the above

Question 06 (2 marks)
To position an element to the right in its container in CSS, what of the following is valid?
A. display:right;

B. float-right:0px;

C. right-float:0px;

D. float:right;

Question 07 (2 marks)
How could you stop content wrapping around a floated element?

A. Use a <p> tag

B. Use a <br> tag

C. Use a CSS float

D. Use a CSS clear

Question 08 (2 marks)

Which of the following will return a random number between 1 and 59 inclusive?

A. lotteryNum1 = Math.floor(Math.random() * 59) + 1;

B. lotteryNum1 = Math.floor(Math.random() * 60);
C. lotteryNum1 = Math.floor(Math.random() * 59) ;
D. lotteryNum1 = Math.floor(Math.random() * 59 +1) ;

Page 3 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

Question 09 (2 marks)
After running following lines of code, which of the following is true?
var names =[];
names.push(“Joe”);
names.push(“Jack”);
names.push(“William”);

A. The array names contains ["Joe", "Jack", "William"];

B. The array names contains ["William", "Jack", "Joe"];
C. The array names contains [JoeJackWilliam]
D. The array names contains [WilliamJackJoe]

Question 10 (2 marks)
Consider this section of HTML code: Which JavaScript instruction will insert the value of the
variable userNumber1 between these opening and closing span tags?

<span id="num1"></span>

A. document.getElementById("num2").innerHTML = userNumber2;
B. document.getElementById("userNumber2").innerHTML = num2;
C. document.getElementById("num2").innerHTML(userNumber2);
D. document.getElementById("userNumber2").innerHTML(num2);

Question 11 (2 marks)
Which of the following devices translates hostnames into IP addresses?

A. DNS Server
B. Hub
C. Firewall
D. DHCP Server

Question 12 (2 marks)
What is the second level domain in http://www.google.com?

A. .com
B. google
C. www
D. //www

Page 4 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

Question 13 (2 marks)
Which statement is false about the application layer in N-Tier client server architecture?

A. N-tier architectures is divided in to four different tiers.

B. The “N” in the name n-tier architecture refers to any number from 1.

C. N-Tier architectures are called as multi-tier architectures

D. N-tier architectures are scalable, secure, flexible and easy to manage

Question 14 (2 marks)
Which of the following buttons will call the function checkOrder when clicked and will not
'submit' the form in JavaScript?
A. <button onClick="checkOrder(this.form)" type="button">
B. <button onClick="checkOrder(this.form)" id="button">
C. <button onClick="checkOrder(this.form)" value="button">
D. <button onClick="checkOrder(this.form)" class="button">

Question 15 (2 marks)
Consider the following code, in JavaScript which of the following answers will allow us to change
the background color of all paragraph to pink?
<p id=”id2”>Hello World !</p>
<p>Hello Again</p>

A. document.getElementsByTagName("p").style.backgroundColor = "pink";
B. var allPTags = document.getElementsByTagName("p");
for (var i=0; i<allPTags.length; i++ ) {
allPTags[i].style.backgroundColor = "pink";
}
C. p.style.backgroundColor = "pink";
D. document.getElementById("p").style.backgroundColor = "pink";to JavaScript!

Page 5 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

Question 16 (2 marks)
Consider the code: myTimer = setTimeout("endQuiz()", 2000);
Which of the following answers are correct?

A. endQuiz will be called after a delay, and it is not possible to cancel the function call
B. endQuiz will be called after a delay, and you can cancel the function call with the code:
clearTimeout("endQuiz()");
C. endQuiz will be called after a delay, and you can cancel the function call with the code:
clearTimeout(myTimer);
D. endQuiz will be called after a delay, and you can cancel the function call with the code:
clearTimeout("endQuiz()", 2000);

Question 17 (2 marks)
When using CSS to add a border to a HTML table, how do the borders appear by default?

A. border-collapse: collapse
B. border-collapse: separate
C. border-collapse: none
D. border-collapse: solid

Question 18 (2 marks)
Where is the padding in the CSS Box Model?

A. Between the content and border

B. Between the border and margin
C. Outside the margin
D. Outside the border

Question 19 (2 marks)
How can you display <li> elements to display horizontally?
A. li { display : block; }
B. li { display : inline; }
C. li { display : none; }
D. li { display : fixed; }

Page 6 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

Question 20 (2 marks)
What will happen if the user enters a name and surname in the appropriate text fields and then
presses the submit button?

<form action="some_page.php">
Name: < input type="text" >
</form >
< form action="some_page.php" >
Surname: < input type="text" >
<input type="submit" >
</form >

A. The data entered in the name field will be submitted to 'some_page.php'

B. The type="submit" is incorrect
C. The data entered in the surname field will be submitted to 'some_page.php'
D. The data entered in both the name and surname fields will be submitted
to 'some_page.php'

(Total 40 Marks)

Page 7 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

Section B – Case Study

Question 21

You have been given the web page of an intelligent Orchid plant ordering displayed in Appendix
B. This is an intelligent web application which suggests suitable orchid’s plants based on different
weather conditions. The system collects the information of the user’s preference and predicts
orchid’s plants suitable for the given conditions. The user will have to provide the preference of
the temperature, orchid species and seasons using a criteria form. The criteria form has the
following compulsory field’s temperature, orchid species and the season. When the “Get Orchid”
button is clicked validateForm(this.form) function will be called. The function then checks
whether the temperature, orchid species and seasons and terms and conditions are checked. If
not, it will provide a popup message that says please enter compulsory fields indicate that the
user must read and accept the terms and conditions in case they have not ticked the terms and
conditions box. If all fields are entered and checked, the system prompts a successful message
“Results submitted”. This system provides an interface purchase the predicted orchids based on
its colors (White, Purple, Yellow) and No of stems. The user is able to add an additional message
and request a clay pot if needed.

The html code snippets and useful JavaScript functions are given in Appendix A.
The webpages of the application are provided in Appendix B.

1. The Title of the web page “Welcome to Orchid Garden” is a Level 1 heading, it is displayed
using the font style Helvetica and font size is 38px and color black. The text is aligned as
centered. Write the CSS code to add above styles to h1 header. Use the HTML element as the
selector.
(5 Marks)

2. The terms and conditions text acts as a link. It does not have underlined effect, when you
hover around the links, it turns to hot pink color. Write CSS code add above styles to the terms
and conditions link. Use HTML elements as the selector for links.
(5 Marks)

3. Write a JavaScript function which validate the criteria form for compulsory fields and prompt
a messages for successful form submission. Use HTML code of the criteria form provided in
Appendix A.
(18 Marks)

function validateForm(formRef){

Page 8 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

4. When the “Place Order” button is clicked yourOrder(this.form) function will be called.
Complete yourOrder(this.form) based on below requirements. Use HTML code of the order
form provided in Appendix A.
(22 Marks)

function yourOrder(formRef) {

}
 The available orchids are:
o White orchid image: white.jpg (default color)
o Purple orchid image: purple.jpg
o Yellow orchid image: yellow.jpg
 Costs per number of stems:
o One stem = £0 (default price)
o Double stems = £5
o Triple stems = £8
 Adding a clay pot is will add £5 to the total price.
 The total price will be shown in the text field “Total Orchid Price” read only field.
 A pop up box will give with the details of the order and total price for confirmation
in below format upon placing the order.
o If the note is not provided, the pop up box will contain below information

Eg:“ You have ordered a white triple stem orchid with no message. Your total bill is £33”

o If the note is provided, the pop up box will contain below information
Eg:“ You have ordered a white triple stem orchid with message : need wrapping included. Your
total bill is £33”

5. Write down the JavaScript conditional statements which can be used to check whether the
cart is empty within function yourOrder(this.form). Selecting an option from the stems is
compulsory.
(3 Marks)

6. function yourOrder(this.form) will be called whenever you change the stem options . Fill the
below blanks in JavaScript statement which uses AddEventListerner method.
(3 Marks)

Page 9 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

document.getElementById(“1._________”).addEventListener(“2.__________”,function() {
yourOrder (3._____________ });

7. When the reset button is clicked, the function resetOrchids() will be called. The orchid images
will be reset to No image.

(4 Marks)

(Total 60 Marks)

Appendix A

 Function to retrieve the checked value in a radio array

function getRadioValue( radioArray ) {
var i;
for ( i = 0; i < radioArray.length; i++ ) {
if ( radioArray[ i ].checked ) {
return radioArray[ i ].value;
}
}
return "";
}

 Function to retrieve the selected option in a drop down list

function getSelectedValue( selectList )

{
return selectList[ selectList.selectedIndex ].value;
}

 Function to retrieve the selected text in a drop down list

function getSelectedText( selectList ) {
return selectList.options[ selectList.selectedIndex ].text;
}

 HTML Code for criteria form

<div id="detailsForm">
<form>
Temperature of the region
<input type="radio" name="temp" id="F75" value="75F" checked>
<label for="F75">75F</label>
<input type="radio" name="temp" id="Abv75" value="Above75F">
<label for="Abv75">Above 75F</label>

Page 10 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

<span class="spacing"></span>
<br/><br/>
<label for="orchidspecies">Orchid Species</label>
<select name="orchidspecies" id="orchidspecies">
<option value="Please Select">PleaseSelect</option>
<option value="Active">Flickingeria</option>
<option value="Moderate">Dendrobium</option>
<option value="Light">Cuthbertsonii</option>
</select>
<label for="seasons">Seasons</label>
<select name="seasons" id="seasons">
<option value="Please Select">PleaseSelect</option>
<option value="Summer">Summer</option>
<option value="Autumn">Autumn</option>
<option value="Spring">Spring</option>
</select>
<br><br/>
<label for="conditions" class="conditions"><input type="checkbox"
name="conditions" value="Checked" id="conditions">I have read and
accept the <a href="conditions.html">terms and conditions</a></label>
<input type="button" value="Find Orchid"/>
<input type="reset" value="Reset"/>
</form>
</div>

 HTML code for order Form

<div class="labelOrder">Your Order:
<div class="product" id="order">
<form>
Select Color:
<br/>
<input type="radio" name="orchidColor" id="white" value="white"
checked>
<label for="white">White</label>
<input type="radio" name="orchidColor" id="yellow" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" name="orchidColor" id="purple" value="purple">
<label for="purple">Purple</label>
<br/><br/>
<label for=" stemOptions "></label>
No of Stems:
<br/>
<select name="stemOptions" id="stemOptions">
<option value="Please Select">PleaseSelect</option>
<option value="singleStem">Single Stem</option>
<option value="doubleStem">Double Stem £5</option>
<option value="tripleStem">Triple Stem £8</option>
</select>
<br/><br/>
<label for="message">Add a Note:</label> <input type="text"
id="message" name="message"/>
<br/><br/>
<label for="needPot">Add a clay pot </label><input type="checkbox"
id="needPot" name="needPot"/>
<br/><br/>

Page 11 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

<label for="totalPrice">Total Price : </label><input type="text"

id="totalPrice" name="totalPrice"/>
<br/>
<input type="button" value="Place Order"/>
</form>
</div>
</div>

Appendix B

Home Page

Page 12 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

When any of the compulsory fields are not filled (Orchid Species, Temperature, seasons), the
following warning message will be given upon submission of the user preference form.

Page 13 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

When the terms and conditions are not ticked following warning message will be given upon
submission of the user preference form.

When all fields are filled, the system will give below information message “Results submitted”
and the orchids will be suggested.

Page 14 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

When user selects the stem options, adding a note and the total price will be displayed in a
read only area as shown below.

When you click on the “Place Order” button the following message will be shown.

Page 15 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

If No message is given following message will be given

Adding clay pot will add another £5 to the total bill

Page 16 of 17
Module Code: CM1605 Exam Period: Aug 2020
Module Title: Web Technology

When the Reset button is clicked, the images boxes will be emptied.

END OF QUESTION PAPER

Page 17 of 17