CSCI311 Spring 2017 Final Exam Instructor: Sarah Carruthers

Transcription

1 CSCI311 Spring 2017 Final Exam Instructor: Sarah Carruthers Please ensure you have read and fully understood these instructions before proceeding. If you have any questions about this procedure, please ask before starting your exam. This exam consists of 6 Questions on 10 pages, and is marked out of a total of 36 marks. Please ensure that the exam is complete before beginning. You will answer all questions using a lab computer in Exam Mode. When complete, your work will be saved by the invigilator to a removable storage device. You must be logged using Exam Mode During the exam, you may not: access the network connect any devices to the computer at any time use any other digital devices During the exam, you may: use any notes or texts in paper format use any installed text editor(s) to write your answers open your html in any installed browser, and use the browser s built in Developer Tools Question your score marks Q1a: CSS 4 Q1b: JS 3 Q2a: PHP 4 Q2b: PHP 8 Q3: MySQL 3 Q4: MySQL/PHP 8 Q5: jquery 4 Q6: AJAX 2 Total 36 Page 1 of 10

2 Exam procedure: 1. Create a folder on the desktop. 2. Name this folder using your CSCI username. **You must save all files to this folder** 3. Complete all exam questions, naming all files exactly as specified in the exam. **Failure to do so may result in lost marks** 4. When the exam is complete, do not shut off or log off of the computer until after the invigilator has copied the folder you created (and only that folder) to a thumb drive. **Any files not in that folder will not be marked** Please answer all questions on the computer following the procedure described above. Be sure to include any work that you wish to be considered for partial credit. Unless otherwise indicated, comments are not required on the exam. Uncommented code that works correctly will be sufficient for full marks. However, comments may help you get partial credit on a problem if they help to show what you intended to do. Page 2 of 10

3 Q1a: CSS (4 marks) Write the answer to the following in the file Q1_userID.css (where userid is your CSCI userid) Write an external css file that does the following to the content of Q1.html (page 8, below): With a single css style rule, center the text of: o all paragraphs that are immediate descendants of a div Set the background colour of: o the div with id content to blue Set the font to comic sans, or sans serif as default for: o the paragraph that is the immediate sibling of a paragraph with class vital With a single css style rule, give only the following items a solid blue border 2 px wide: o heading with id myheading o div with class abc o text in a small element inside the paragraph Set the font size of all paragraphs to 12px for: o screens smaller than 500px Set the font size of all paragraphs to 30px for: o screens that are larger than 500px Assume that your css file is located in the same directory as Q1.html Q1b: JavaScript (3 marks) Write the answer to the following in the file Q1_userID.js (where userid is your CSCI userid) Write a JavaScript (no jquery permitted) function that does the following on Q1.html (page 8, below): The function is called myfunction() When the mouse enters the div with id content: o load the image in the file pic.jpg into the div with id xyz o assume that pic.jpg, Q1.html, Q1_userID.css (where userid is your csci user id), and your JavaScript file are located in the same directory Bonus: Add the following functionality without modifying Q1.html in any way, and using only JavaScript: o When the user clicks in the div with id content, the image you added above disappears. Page 3 of 10

4 Q2a: PHP (4 marks) Write the answer to the following question in the file Q2a_userID.php (where userid is your CSCI userid) Write a php function the meets the following specifications: function name: o generatehash parameters: o a password: $pw you may assume the value passed in is a string of length > 4 and < 20 and that it consists only of letters and numbers [a-za-z0-9] o an integer: $numtimes you may assume the value passed in is an integer value between 10 and 20, inclusive returns: o a hash of the password using the blowfish algorithm executed $numtimes You may assume you have access to the function generate_salt($length)which returns a pseudo random salt of length $length (like the function we defined in class). It is located in the file helperfunctions.php in the same directory as your file. Note: Recall that to use the blowfish algorithm k times we use the following format string passed to the crypt algorithm: $2y$k$. Page 4 of 10

5 Q2b:PHP (8 marks) Write the answer to the following in the file Q2b_userID.php (where userid is your CSCI userid) Write a complete and correct PHP program to generate a page with the following functionality: This php program will let a user see what a password might hash to if they were using blowfish running different numbers of times, using a pseudo-random salt. The form should let the user enter: o A password, consisting only of alphanumeric characters: a-za-z0-9 o A number between 10 and 20 o Hit submit button to submit the form Upon submission of the form, validate (see below) the input on the server side, and if valid, output to the user: o The password o The number they entered o The hash of their password generated using the function generatehash($pw, $numtimes) you created in Q2a. (You may assume that the function works correctly) Server-side validation and error handling: o You must validate both the password and number on the server to meet the specifications given above. o If either value fails validation, output a meaningful error to the user, and instruct the user to use the browser s built-in back button to try again. o On the server-side, you have access to the following php functions, located in the file helperfunctions.php located in the same directory as your files. (You do not need to write them. You can call them and assume they work correctly.): isalphanumeric($input): returns true if $input consists only of a-za-z0-9, and returns false otherwise. isinrange($num, $min, $max): returns true if $num is numeric, and $min <= $num <= $max, and returns false otherwise. For the following input: The output could look like: Page 5 of 10

6 Q3: MySQL (3 marks) Write the answer to the following in the file Q3_userID.sql (where userid is your CSCI userid) Write a MySQL query: The query should search a TV database (tables are given below) for all tv-series directed by Joss Whedon or Gene Roddenberry. The query returns only the names of the tv-series, in alphabetical order by name. Each tv-series should appear only once. Write only the MySQL query, no php or other code is necessary. These are the tables of interest in the TV database (only the first few records are shown for each table, many more records would be stored in each table): directors id first_name last_name Joss Whedon J.J. Abrams Gene Roddenberry tv_series id series_name year_started year_ended Firefly Star Trek tv_series_directors director_id series_id Page 6 of 10

7 Q4:MySQL & PHP (8 marks) Write the answer to the following in file Q4_userID.inc (where userid is your CSCI userid) For this question, you will write a php function that meets the following specifications The function takes as parameters: o a first name (string) o a last name (string) The function should: o create a connection to the database you may assume the existence of the following global variables: $username a valid username for the database $password the user s valid password $host the name of server on which the database is running $database the name of the database o validate the data non-empty (must contain at least one character after all whitespace is removed from front and back) non-null o safely insert the data into the tv_series table described above in Q3. no duplicates should be inserted assume that the names are both user-entered data (hint hint) o return true on success o return false on failure, including: failure to connect to the database invalid data duplicate entry Q5: jquery: (4 marks) Write the answer to the following questions in the file Q5_userID.js (where userid is your CSCI userid). Precede each answer with a valid JavaScript comment indicating which question is being answered on the following line. Assume you are working with the html in the file Q5.html (on page 9, below). 5 a) Write a jquery statement that will set the text colour of all paragraphs to blue. 5 b) Write a jquery statement that will wrap all paragraphs, individually and not as a group, in a div with the background colour set to red. 5 c) Write a jquery statement that will set the 1 st and 3 rd paragraphs in the div with class def to have a solid yellow border 1px thick 5 d) Write a jquery statement that will add an click event handler to paragraphs with an id so that when clicked, all paragraphs with class def are deleted. Q6: AJAX (2 marks) Write the answer to the following questions in the file Q6_userID.js (where userid is your CSCI userid) Using AJAX, load the titles from the file Q6.xml into an ordered list in the file Q6.html (both found on page 10) into the div with id fillerup. Both files are found below, and you can assume they are located in the same directory as your JavaScript file. You may use jquery or JavaScript (or both) for this solution. Page 7 of 10

8 Q1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>question 1</title> <link rel="stylesheet" type="text/css" href="q1_userid.css" /> <script src="q1_userid.js"></script> <!-- assume the file name above matches your file name --> </head> <body> <div class="abc"> <h1 id="myheading">this is a heading</h1> <div id="content" onmouseover="myfunction()"> <p>this sentence is very exciting</p> <p class="vital">this sentence is very important</p> <p>this sentence is rather trivial</p> <div id="bottom" class="abc"> <section> <h6>more stuff</h6> <p><small>copyright Me, Myself, and I 2017</small></p> </section> <div id="xyz"> <script src="./q1script.js"></script> </body> </html> Page 8 of 10

9 Q5.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>question 5: jquery</title> <script type="text/javascript" src="./jquery js"></script> <script type="text/javascript" src="./q5_userid.js"></script> </head> <body> <div id="main_content"> <div class="abc"> <p id="a" class="def">paragraph 1</p> <p id="b">paragraph 2</p> <p class="def">paragraph 3</p> <div class="abc def"> <h3>this is a heading</h3> <p id="a" class="def">paragraph a</p> <p id="b">paragraph b</p> <p class="def">paragraph c</p> </body> </html> Page 9 of 10

10 Q6.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ajax and XML</title> </head> <body> <h1>question 6</h1> <div id="fillerup"> <script src="./q6_userid.js"></script> </body> </html> Q6.xml: <movies> <movie> <title>the Hitchhiker's Guide to the Galaxy</title> <genre>sci Fi</genre> </movie> <movie> <title>terminator</title> <genre>sci Fi</genre> </movie> <movie> <title>a Fish Called Wanda</title> <genre>comedy</genre> </movie> <movie> <title>life of Brian</title> <genre>comedy</genre> </movie> </movies> Page 10 of 10