SEMESTER 1, 2013 EXAMINATIONS CITS3403 WEB AND INTERNET ...teaching.csse.uwa.edu.au/units/CITS3403/examinfo/exam13.pdf · CITS3403 WEB AND INTERNET TECHNOLOGIES ... DOM, Events 30

School of Computer Science and Software Engineering

SEMESTER 1, 2013 EXAMINATIONS

CITS3403 WEB AND INTERNET TECHNOLOGIES

FAMILY NAME: ____________________________ GIVEN NAMES: ______________________

STUDENT ID: SIGNATURE: ________________________

This Paper Contains: 16 pages (including title page) Time allowed: 2 hours 10 minutes

INSTRUCTIONS: Section A: (X)HTML, CSS, JavaScript, DOM, Events 30 marks Section B: Ruby and Rails 30 marks TOTAL MARKS: 60 marks Candidates must attempt ALL questions. The questions should be answered in the space provided in this examination paper. If you require more space please use the spare blank pages at the end of the paper. Clearly indicate which question you are answering. Pages used for working notes should be crossed and marked as “working”.

PLEASE NOTE

Examination candidates may only bring authorised materials into the examination room. If a supervisor finds, during the examination, that you have unauthorised material, in whatever form, in the vicinity of your desk or on your person, whether in the examination room or the toilets or en route to/from the toilets, the matter will be reported to the head of school and disciplinary action will normally be taken against you. This action may result in your being deprived of any credit for this examination or even, in some cases, for the whole unit. This will apply regardless of whether the material has been used at the time it is found. Therefore, any candidate who has brought any unauthorised material whatsoever into the examination room should declare it to the supervisor immediately. Candidates who are uncertain whether any material is authorised should ask the supervisor for clarification.

Supervisors Only – Student left at:

1ST SEMESTER EXAMINATIONSWeb & Internet Technologies 3403

2CITS3403

This page is for Examiner’s use only.

Listquestionsattempted

Examiner′suseonly


3CITS3403

Section A: XHTML, CSS, JavaScript, DOM and Events

1. (15 marks)

(a) Briefly discuss the benefits of HTML5’s <audio> and <video> elements.

(2 marks)

(b) Explain how CSS3 transition works.

(3 marks)

(c) List three main differences between the GET and the POSTmethods for the <form> element.

(3 marks)


4CITS3403

(d) Draw an example HTML tag hierarchy to explain the differences between the followingCSS contextual selectors.

h2 p {color:red}

h2>p {color:red}

(4 marks)

(e) What are the main components of DHTML? What role does the DOM play in DHTML?

(3 marks)


5CITS3403

2. (15 marks)

(a) HTML colours can be specified using hexadecimal codes. For example, #000000 is black,#488AC7 is steel blue. The format is six hexadecimal symbols following a leading hash(#) symbol. There are 16 hexadecimal symbols, 0-9 and a-f, note the letter symbols arenot case-sensitive.

Write a JavaScript function that takes only the implicit event as input. The statementfor accessing the element (assume a textbox) that triggers the function is provided. Thefunction should return a boolean to indicate if the textbox value represents a valid HTMLcolour. An alert window should pop up for an invalid colour code.

function validColour(event){

theElement = event.currentTarget; //Getting the textbox

}

(5 marks)


6CITS3403

(b) Give the following HTML document, write the JavaScript in dynamic.js and register.js,to dynamically generate text at different heading levels (e.g. <h1>, <h2>, <p>) with apair of specified background and foreground colours.

The screenshot shows the result after clicking the Go! button twice: first for Heading 1

and then for Paragraph.

The register.js code should make use of the validColour() function above to vali-date the colour input for both background and foreground, it should also do the batchprocessing to ensure that the form is only submitted when both colours are valid.

<html>

<head>

<title>Colour Contrast</title>

<script src="dynamic.js"></script>

</head>

<body>

<form id="myform">

<label for="background">Background:</label>

<input type="text" id="background"/>

<br/>

<label for="foreground">Foreground:</label>

<input type="text" id="foreground"/>

<br/>

<label for="content">Content: </label>

<input type="text" id="content" required/>

<br/>

<label for="element">Element:</label>

<select id="element">

<option value="h1">Heading 1</option>

<option value="h2">Heading 2</option>

<option value="p">Paragraph</option>

</select>

<input type="button" onclick="create()" value="Go!">

</form>

<script scr="register.js"></script>

</body>

</html>

Answer this Question on the Next Page ...


7CITS3403

Fill in the function template below with your code.

// dynamic.js

function create(){

}

// register.js

(10 marks)


8CITS3403

Section B: Ruby and Rails

3. (10 marks)

(a) In Ruby, what is the difference between single quoted and double quoted strings?

(2 marks)

(b) Explain how the Rails ORM layer does the object to relational database mapping. Listone feature in Rails ORM that reflects the Convention Over Configuration philosophy ofRails.

(4 marks)


9CITS3403

(c) What does the following code do? Explain the control flow between the iterator methoditerate() and the calling method.

def iterate(names)

puts "The list is:"

for name in names

yield name.capitalize

end

end

list = %W{alan bOb CATHY}

iterate(list) do |name|

puts name

end

(4 marks)


10CITS3403

4. (10 marks)

(a) What are the differences between the new and the create actions in a RESTful controller?Explain it from the model, view and routing perspectives separately.

(5 marks)

(b) Draw a diagram to explain step-by-step the communication between the model, the viewand the controller when a browser receives the url http://example.com/products/1/editfor a website created using the Rails framework.

(5 marks)


11CITS3403

5. (10 marks)

(a) Given a model with the following migration:

class CreateAccommodations < ActiveRecord::Migration

def change

create_table :accommodations do |t|

t.string :name

t.text :description

t.timestamps

end

end

end

For each accommodation, the client requires a unique name and a non-empty description.

Write the unit testing code to ensure correct implementation of the validation code.

If you do not know the coding, try to describe the unit testing process, reasonabledescriptions will get partial marks.

(4 marks)


12CITS3403

(b) Given the following client brief, in the space provided below, complete the validationsand associations in the following models.

The Web application is a tourism attraction management system. At any pointof time, the local government of each city has exactly one system administratorto manage the attraction list. Each administrator can only manage one city’sattractions. Each city has many attractions, and each attraction can only belisted under one city. Each attraction may have many registered travel agenciesand each travel agency can advertise many attractions.

• Each city must have a unique name.

• Each admin should have a unique username and a encrypted password.

• Each attraction needs to have a name and an optional description.

• Each travel agency needs to have a name and a valid Australian telephonenumber in the format of (09)9999 9999, where 9 represent a digit from 0-9,zero or one space in between, and other characters such as the parenthesesand 0 are mandatory.

class City

end

class Admin

end

class Attraction

end

class TravelAgency

end

(6 marks)


13CITS3403

EXTRA BLANK PAGE


14CITS3403

EXTRA BLANK PAGE


15CITS3403

EXTRA BLANK PAGE


16CITS3403

EXTRA BLANK PAGE

End of Paper

Documents

SEMESTER 1, 2013 EXAMINATIONS CITS3403 WEB AND INTERNET ...teaching.csse.uwa.edu.au/units/CITS3403/examinfo/exam13.pdf · CITS3403 WEB AND INTERNET TECHNOLOGIES ... DOM, Events 30