SCHOOL OF COMPUTING, ENGINEERING AND MATHEMATICS SEMESTER 2 EXAMINATIONS 2015/2016 CI135. Introduction to Web Development

Size: px

Start display at page:

Download "SCHOOL OF COMPUTING, ENGINEERING AND MATHEMATICS SEMESTER 2 EXAMINATIONS 2015/2016 CI135. Introduction to Web Development"

Alberta King
5 years ago
Views:

1 s SCHOOL OF COMPUTING, ENGINEERING AND MATHEMATICS SEMESTER 2 EXAMINATIONS 2015/2016 CI135 Introduction to Web Development Time allowed: TWO hours Answer: All FOURTEEN questions in section A (40%) All THREE questions in Section B (60%) Items permitted: A printed version of the Tutorial Workbook Items supplied: Electronic answer document Template files for Question 15 Source code for Question 16 Marks for whole and part questions are indicated in brackets ( ) CI135_2015/2016 Page 1 of 13 Printing date: 04 October 2016

2 Instructions 1. Note you are under exam conditions during the exam. You are not allowed to talk and you cannot leave during the first 30 minutes or the last 15 minutes. 2. Fill in the attendance slips. Make sure to provide your student number (on your student ID card), place number (e.g. exams123), course/module details, name and signature. 3. Open the answer document available at H:\CI135_<place number>\exam_answers.docx Hastings students should use the V:\ drive 4. Fill in your student number and place number at the top of the answer document 5. Save the answer document under the name <student number> in the same folder 6. Fill in your student number and place number at the top of your printed Tutorial Workbook. 7. Do not leave the exam room until your Tutorial Workbook and attendance slip has been collected by the invigilator. Section A (multiple choice) 8. Write your answer for each question into the Answer column. Only edit the Answer column, do not edit the grey columns. Section B 9. Use your preferred editor to develop the code for your answer. 10. Use the Firefox or Chrome browser to test and debug your code if you like. 11. Insert a screenshot of your solution into the answer space provided (e.g. by using the MS Word command Insert > Screenshot > Screen Clipping or by using the Print Screen keyboard button and the Paste command). Screenshots should be cropped as required and the positioning left as "In Line with Text". Only edit the Answer column, do not edit the grey columns. Note: Template files for Question 15 are available at H:\CI135_<place number>\question15\ Source code for Question 16 is available at H:\CI135_<place number>\question16\ Hastings students should use the V:\ drive CI135_2015/2016 Page 2 of 13 Printing date: 04 October 2016

3 Section A Attempt ALL questions in this section Question 1 Which one of the following statements is true about the class attribute? a) A class name must be unique in a web document b) A class name can be used any number of times in a web document c) A class attribute must be targeted by a CSS stylesheet selector d) A class is only useful for styling the HTML Question 2 Which one of the following statements is true about block-level and inline elements? a) A block-level element cannot contain other block-level elements b) A block-level element cannot be styled as an inline element c) An inline element cannot contain a block-level element d) An inline element cannot contain other inline elements Question 3 Which one of the following statements is true about the title element? a) The title element is displayed in the content of the web page b) A valid web document can have zero or more title elements in the head section c) A valid web document can have zero or more title elements in the body section d) A valid web document must have a title element in the head section Question 4 Which one of the following statements about the HTML5 <main> element is true? a) A web page can have zero or more <main> elements b) A web page must have exactly one <main> element c) A web page must have zero or one <main> element d) A web page must have one or more <main> elements CI135_2015/2016 Page 3 of 13 Printing date: 04 October 2016

4 Question 5 Which one of the following statements about the HyperText Transfer Protocol is true? a) An HTTP transaction consists of a pair of request and response messages b) More than one HTTP transaction is required to fetch a page containing images c) HTTP is a stateless protocol d) All of the above Question 6 Which one of the following statements about the HTML5 <header> element is true? a) The <header> element is a newer version of the <head> element b) A web page can have multiple <header> elements c) A web page can have only one <header> element d) A <header> element cannot be nested in an <article> element Question 7 Which of the following correctly includes a print stylesheet for an HTML page? a) <link rel="stylesheet" href="print.css" media="print" /> b) <link rel="print" src="print.css" media="stylesheet" /> c) <style rel="print" href="print.css" src="stylesheet"/> d) <style rel="stylesheet" link="print.css" media="print" /> Question 8 Which of the following statements about responsive web design is true? a) To be responsive a web page must have flexible images b) To be responsive a web page must have a fluid layout c) To be responsive a web page must be styled using CSS media queries d) All of the above CI135_2015/2016 Page 4 of 13 Printing date: 04 October 2016

5 Question 9 Consider the following HTML: 1. <nav class="global-nav"> 2. <ul> 3. <li>home</li> 4. <li>guide</li> 5. <li>contact</li> 6. </ul> 7. </nav> Which one of the following CSS selectors matches the <li> elements (highlighted in bold above) that occur within this specific <nav> element? a).nav li b).global-nav li c) li.global-nav d) #global-nav li Question 10 Consider the following CSS: screen and (min-width: 30em) { 2. body { 3. background-color: black; 4. } 5. } What types of device, and what are the capabilities of the devices targeted by this CSS media query? a) Any device with a screen width of 30 ems or more b) Computers, tablets or smartphones with a screen width of 30 ems or more c) Computer screens, tablets or smartphones with a viewport width of 30 ems or more d) Computer screens, tablets or smartphones with a viewport width of 30 ems or less CI135_2015/2016 Page 5 of 13 Printing date: 04 October 2016

6 Question 11 Consider the following folder structure: root index.html news images latest.html banner.png Which of the following would be the correct relative path to use to display banner.png in latest.html? a)../images/banner.png b) c)../root/images/banner.png d) images/banner.png CI135_2015/2016 Page 6 of 13 Printing date: 04 October 2016

7 Question 12 Examine the following JavaScript code: 1. var d = 2; 2. var n = 128; function half(x, y) { 5. var i; 6. for(i = 0; i < y; i++) { 7. x = x / d; 8. } 9. return x; 10. } n = half(n, 3); 13. console.log(n); What will be logged to the console when this script is run? a) The code contains a syntax error and wont execute b) 128 c) 64 d) 32 e) 16 f) 8 CI135_2015/2016 Page 7 of 13 Printing date: 04 October 2016

8 Question 13 Examine the following JavaScript code, contained in file script.js: 1. var spans = document.queryselectorall("span"); 2. console.log(spans.length); window.addeventlistener("load", function(){ 5. var span1 = document.queryselector("span"); 6. span1.textcontent = "Goodbye"; 7. }); And the following HTML: 1. <!doctype html> 2. <html> 3. <head> 4. <script src="script.js"></script> 5. </head> 6. <body> 7. <span>hello</span> <span>world</span> 8. </body> 9. </html> What will be logged to the console when this script is run? a) 2 b) 0 c) Hello World d) Goodbye World CI135_2015/2016 Page 8 of 13 Printing date: 04 October 2016

9 Question 14 Examine the following HTML: 1. <!doctype html> 2. <html> 3. <head></head> 4. <body> 5. <form name="myfrm" id="myfrm"> 6. <input type="password" name="pwd" id="pwd" /> 7. </form> 8. </body> 9. </html> Which one of the following lines of code could be used to get the user entered value contained in the <input> element on line 6? a) document.getelementsbytagname("input").value b) document.getelementbyid("pwd").value c) document.queryselectorall("#pwd").value d) document.forms["myfrm"].elements["pwd"].value e) Answers a) and c) f) Answers b) and d) CI135_2015/2016 Page 9 of 13 Printing date: 04 October 2016

10 Section B Attempt ALL questions in this section Question 15 (a) Write a function named divide that takes two arguments (x and y) and returns the result of dividing the first argument by the second argument. (b) Examine the following JavaScript code and answer each of the following: 1. var a = ["mary","bob"]; i. Write a line of code that inserts two elements "tom" and "jane" after the element "mary" and before the element "bob" ii. Write a line of code that adds the element "harry" at the end of array a iii. Write a line of code that logs the length of array a to the console. Note: you must not log a literal value but query the length of the array. (c) Write a function called validate that takes a single string argument. The function should return true if and only if the string starts with a "#" character followed by six (6) characters. E.g. validate("#123456")===true validate("#abcdef")===true validate("#ffffff")===true validate("ffffff")===false // Doesn t start with an # validate("#fffff")===false // Not long enough validate("#fffffff")===false // Too long (10 marks) CI135_2015/2016 Page 10 of 13 Printing date: 04 October 2016

11 Question 16 Examine the following HTML code, contained in file index.html: 1. <!doctype html> 2. <html> 3. <head> 4. <title>image Gallery</title> 5. <script src="script.js"></script> 6. </head> 7. <body> 8. <header> 9. <h1>image Gallery</h1> 10. </header> 11. <nav> 12. <ul id="images"> 13. <li> 14. <a href="img1.jpg" title="mixed fruit">fruit</a> 15. </li> 16. <li> 17. <a href="img2.jpg" title="blue flowers">flowers</a> 18. </li> 19. </ul> 20. </nav> 21. <img id="gallery" src="default.jpg" alt="gallery"/> 22. <ul id="viewlog"></ul> 23. </body> 24. </html> (question continues on next page) CI135_2015/2016 Page 11 of 13 Printing date: 04 October 2016

12 And the following JavaScript code, contained in file script.js: 1. window.addeventlistener("load", function() { 2. var i, links = document.queryselectorall("#images a"); 3. for(i = 0; i < links.length; i++){ 4. links[i].addeventlistener("click", function(evt){ 5. updateimage(this); 6. evt.preventdefault(); 7. }); 8. } 9. }); function updateimage(img) { 12. var href = img.getattribute("href"); 13. var target = document.getelementbyid("gallery"); 14. target.setattribute("src", href); 15. } (a) Extend the updateimage() function so that the alt attribute of the element with id="gallery" is changed to the clicked <a> element s title attribute text. (5 marks) (b) Further extend the updateimage() function so that it creates a list item (<li>) element containing the title text from the clicked link. This should be appended into the element with id="viewlog". Your answer must not use the innerhtml property. (15 marks) CI135_2015/2016 Page 12 of 13 Printing date: 04 October 2016

13 Question 17 (a) Write a sample XML document that represents a friend list. A friend list contains many friends. Friends have a first and last name, an address and multiple phone numbers. Phone numbers can be of type home, work or mobile. Make sure your friend list holds at least two friends. (10 marks) (b) Consider representing the information contained in a shopping cart. A shopping cart has many items. Each item has a name, id and quantity. An example of this is shown in the following XML document: 1. <cart> 2. <item id="f997"> 3. <name>bacon</name> 4. <quantity>1</quantity> 5. </item> 6. <item id="f998"> 7. <name>beans</name> 8. <quantity>3</quantity> 9. </item> 10. </cart> Write a JSON document that could be used to represent the same information. (10 marks) CI135_2015/2016 Page 13 of 13 Printing date: 04 October 2016

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks