COMP 101 Spring 2017 Final Exam Section 1 Friday, May 5

Transcription

1 Name PID COMP 101 Spring 2017 Final Exam Section 1 Friday, May 5 This exam is open note, open book and open computer. It is not open people. You are welcome and encouraged to use all of the resources that you have been using all semester. You are to submit this exam through gradescope. Resubmissions have been enabled. Download the fillable pdf and add your name and PID. Save the file and then make sure that the save worked properly. Remember to save your work often and confirm that it is being saved. If you are having difficulty saving as a pdf, print the file but save it as a pdf. Each question is worth 10 points. You only need to answer 10 of the 12 questions. If you answer more than 10 questions, the highest 10 will be used. This is intended as a 75 minute exam, but you have 3 hours to complete it. By submitting this exam, you are pledging that you have neither given nor received unauthorized help.

2 Question 1: You are to complete the checkscore function, which converts your 0-20 score to a percentage amd prints a message Your grade is percentage%. But if your grade is less than 70%, it begins the message with You need to improve your grade. function checkscore(numgrade) { var percent = numgrade*5; var message = ""; // insert the conditional here message += "Your grade is "+percent+"%."; return(message); if (percent < 70) { message = "You need to improve your grade. ";

3 Question 2: You are to complete the displaytable function below. The table that is going to be displayed needs to include the table tags and a header row as well as the number of data rows passed as the parameter. You may not change the array that is given and you can add no more definitions. All you can do is write the correct return statement. It must be syntactically correct. The function already handles invalid inputs. For example, if the number 1 is passed to the function, the correct return would be <table><tr><th>school</th><th>mascot</th><tr><td>unc</td><td>ram</td></tr></table> function displaytable(rows) { var schools = ["<tr><td>unc</td><td>ram</td></tr>", "<tr><td>unc</td><td>ram</td></tr><tr><td>duke</td><td>devil</td></tr>", "<tr><td>unc</td><td>ram</td></tr><tr><td>duke</td><td>devil</td></tr><tr><td>ncsu</td><td>w olf</td></tr>"]; var headerrow = "<tr><th>school</th><th>mascot</th></tr>"; if (rows<1 rows>3) { return ("<p>invalid Table</p>"); else { // add non-error return statement here return("<table>"+headerrow+schools[rows-1]+"</table>");

4 Question 3: Write a complete JavaScript function called addlist that takes no parameters but builds the following list. Suitcase o Clothes for 10 days o Rain gear Back pack o Kindle o Water bottle It is to be used in the following HTML snippet: <button type=button onclick= document.getelementbyid( pack ).innerhtml = addlist(); > Add Family </button> <ul id= pack ></ul> You should assume that the proper CSS for formatting bullets already exists. function addlist() { var packinglist = <li>suitcase<ul><li>clothes for 10 days</li><li>rain gear</li></ul></li> ; packinglist += <li>back pack<ul><li>kindle</li><li>water bottle</li></ul></li> ; return (packinglist);

5 Question 4: It s not always clear how you should refer to a child. What is a preschooler? What is a preteen? The childterm function takes one parameter and returns the correct term to use for that age. The following table shows the term that should be returned. The way to read this table is that if the age is the high end of one term and the low end of the next one, you should use the second term. That is, if a 1 is passed to the function, it should return toddler, not baby. The function can ignore negative numbers. If the age passed is 12 or higher, it should return beyond the range. You are not to change any of the given function. function childterm(age) { var term; // insert conditional here return (term); if (age < 1) { term = baby ; else if (age < 3) { term = toddler ; else if (age < 5) { term = preschooler ; else if (age < 10) { term = child ; else if (age<12){ term = preteen ; else { term = beyond the range ; Age Term 0-1 baby 1-3 toddler 3-5 preschooler 5-10 child preteen

6 Question 5: You have a series of images that each need to be formatted differently with a different height. The following table shows the height that is to be used. image height <img src= cow.jpg alt= farm animal > 250px <img src= pig.jpg alt= farm animal > 300px <img src= goat.jpg alt= farm animal > 350px Write the CSS to set those heights without using any classes or ids. You can make no assumptions about where the images are used. img[src= cow.jpg ] { height: 250px; img[src= pig.jpg ] { height: 300px; img[src= goat.jpg ] { height: 350px;

7 Question 6: The function getselector takes as its one parameter a properly formatted CSS rule-set. Rule-set is the name for the selector and the declarations. That is, a properly formatted rule-set might be h1 {text-align: center; color: green; The function getselector will return just the selector. A selector can be a lot more than just a single tag: it can have a class or id associated with it, it can have context associated with, there can be multiple selectors and it can have pseudo elements associated with it. It is simply everything before the {. The getselector function is to return the full selector with any trailing blanks removed, For example, if the rule-set passed to the function is h1, h2, h3 {color: blue;, the function is to return h1, h2, h3. Write the JavaScript to implement this function. The function should work on any legal CSS rule-set. You can declare as many variables as you want (including 0). function getselector(ruleset) { var selector; // insert processing here return (selector); var curlypos = ruleset.indexof( { ); selector = ruleset.substring(0,curlypos); selector = selector.trim();

8 Question 7: Complete the body tag on the following HTML page to display a random picture in the img inside the figure with the id mainfig. You can assume that all formatting is set up in the css and that the referenced JavaScript file contains a function called coolimg that takes no parameters and returns a complete img tag. <! DOCTYPE html> <html lang=en> <head> <title>splashy Page</title> <meta charset= UTF-8 > <link href= splash.css rel= stylesheet type= text/css > <script src= splash.js type= text/javascript ></script> </head> <body> <figure id=mainfig></figure> </body> </html> <body onload= document.getelementbyid( mainpic ).innerhtml = coolimg(); >

9 Question 8: You have a web site that has a number of section tags in it. Inside each of these section tags are a number of paragraphs. Write the CSS that changes the first paragraph in each section to be bold and the last paragraph in section to be in italics. That is, the structure of each section is Section Bold paragraph Some number of regular paragraphs Italics paragraph End section You may not use and classes and other paragraphs (such as those not in a section) are not impacted and the CSS should not care about how many paragraphs are in the section section>p:first-child { font-weight: bold; section>p:last-child { font-style: italic;

10 Question 9: You are to complete the dressforsuccess function. The dressforsuccess function takes two parameters: the first is a string that is the color of the shirt, blouse, jersey, or dress to be worn. The second is an indication of how neat the wearer is. A negative number is bad, a positive number is good, and a zero is neutral. If the top is white and the wearer has a negative neatness rating, the function is to return the message Better not eat spaghetti tonight! In all other cases, it is to return Dinner at the Spaghetti Factory! function dressforsuccess(topcolor, neatness) { // insert conditional here if (topcolor == "white" && neatness < 0) { return("better not eat spaghetti tonight!"); else { return("dinner at the Spaghetti Factory!");

11 Question 10: You are to define the array that will allow the holiday function to convert the current month to its signature holiday. The month is returned from the standard getmonth function and the holidays are as follows: January February March April May June July August September October November December New Year s Day Valentine s Day St Patrick s Day April Fools Day Mother s Day Father s Day Independence Day First Day of Classes Labor Day Halloween Thanksgiving Christmas (Did you ever notice that there are no interesting holidays in August?) You are not to change anything in the function except to add the array definition. The definition must be syntactically correct. function holiday() { // add array definition here var today = new Date(); var month = today.getmonth(); return(holiday[month]); var holidayname = ["New Year's Day","Valentine's Day","St. Patrick's Day", "April Fools' Day", "Mother's Day", "Father's Day","Independence Day","First Day of Classes", "Labor Day","Halloween", "Thanksgiving", "Christmas"];

12 Question 11: When we write the time, we often use the format hh:mm. If the hour is only one digit, it looks pretty normal. But if the minutes are less than 10, it will look rather strange. You are to write a function that returns the current minutes always in a 2 digit format: that is 0-9 will be written as and all of the You are to write a function called get2digmins that retrieves the current time, extracts the minutes and returns a string that has the current minutes written as two digits. function get2digmins() { var mins2; // insert date processing here return (mins2); var d = new Date(); var m = d.getminutes(); if (m < 9) { mins2 = 0 +m; else { mins2 = m;

13 Question 12: You are to write the entire js file that is need to creat a function called nextsquare. nextsquare takes no parameters and each time it is called, it returns the next integer squared, that is, the first time it is called it will return 1 (1 squared), then 4 (2 squared), var lastsquare = 0; function nextsquare() { lastsquare = lastsquare +1 return(lastsquare * lastsquare);