IT 202 Instructor J. McHugh Student Name __________________________________ Midterm exam No notes, no laptops, no textbook. Total points: 125 points Some problems may have more than one correct answer – in which case circle all correct choices. Enter Letter for choice or fill in or circle if True or false. 1. [2 pts] If the DOCTYPE for an HTML page uses strict HTML does the following body element trigger a validation error? <body> <p> Hello </p> </body> Yes No In strict HTML text has to be inside a block element like p, so this is not an error. 2. [2 pts] Is the title element of an HTML page required in strict HTML? Yes No The title element is always required in both strict and loose HTML, as well as in XHTML. 3. [2 pts] Other than the src attribute, which other attribute(s) is (are) required in an HTML image img tag? (a) Height and Width (e) None of these (b) height & width (c) alt (d) href (c) Alt is required, the others are not. Href is not even used in the image tag; it occurs in the hyperlink tag <a. If height and width are used then it's best to apply them through a style rule rather than as attributes. 4. [2 pts] If the HTML page x.html lies in a directory ABC and has a hyperlink to an image pict.gif in subdirectory XYZ of ABC, then the hyperlink value should be: (a) (b) (c) (d) (e) href = "XYZ/pict " href = "/XYZ/pict " href = "/XYZ/pict.gif " href = "../ABC/XYZ/pict " None of these (e) The choice (c) is close but the leading slash causes as error since it refers to the root directory – for example the C drive. The correct answer is XYZ/pict.gif without the slash -- which leads to none of these. Also, the file reference must include the file extension, in this case .gif, so all the answers without this are wrong. 5. [2 pts] Is the following reference to a file x.htm a syntactically correct hyperlink reference assuming the file is in the same directory as the HTML page containing the link? <a href="x.htm" /> results </a> True False The extension .htm is an alternative valid extension for an HTML file. 6. [2 pts] What HTML special character code represents the symbol for approximate equality ≈ ? &asymp; 1 This entity representation was emphasized in the solution to Assignment 01. 7. [2 pts] What is the name of the consortium that defines and controls standards for HTML? W3C The World Wide Web Consortium W3C established HTML standards. 8. [2 pts] What HTML code based on HTML lists is displayed as: (a) <ol> <li> #. A <li> #. B </ol> (b) <ul> <li> A </li> <li> B </li> </ul> (c) <ul> <ol> A </ol> <ol> B </ol> <ul> 1. A 2. B (d) <ol> <li> A <li> B <ol> (e) None of these (a) has an incorrect # notation while (b) uses un-ordered lists. (c) mixes up ordered and unordered lists and the <li> elements in (d) are not closed – so the answer is (e). 2 9. [2 pts] In Windows, the number of bytes allocated on disk to a file of size 33.75 kilobytes is: (a) 33.75 KB (b) 34.0 KB (c) 33 KB (d) 36.0 KB (d) Windows allocates file space on disk in multiples of 4K, so 36K is the answer. 11. [2 pts] Which of the following are not valid attributes in strict HTML? (a) alt (b) <h1> (c) src (d) href (e) bgcolor (b) & (e) <h1> is an element not an attribute and bgcolor is a deprecated attribute so it is not allowed in strict HTML. 12. [2 pts] The HTML code: <p> The Cat and the Fiddle ! </p> will be displayed by a browser as: (a) The Cat and the Fiddle ! (b) The Cat and the Fiddle ! (c) The Cat and the Fiddle ! (d) None of above (c) Paragraphs <p> squeeze out extra blanks and newlines so the answer must be (c). 13. [2 pts] An HTML page without a DOCTYPE statement cannot be validated. True False The DOCTYPE statement identifies the type of HTML used and so is necessary to determine what HTML standard to use to validate the page. 14. [2 pts] An HTML page with a .txt extension will display as text, rather than as HTML tags interpreted by the browser. True In desktop environment as text, but when downloaded as HTML, so either is OK. False 15. [2 pts] HTML is which of the following kinds of languages: (a) markup language (b) procedural language (c) scripting language (d) none of these (a) Procedural languages are those like C for writing algorithms. Scripting languages are those like Perl used for special purposes and they are not usually compiled. Markup languages describe the appearance of text, like HTML does. 16. [2 pts] If an HTML page lacks a DOCTYPE statement then a browser will interpret it in quirks mode, which means the browser reverts to a default way of interpreting the page. 3 If the browser cannot identify the type of HTML used it reverts to an earlier more primitive version of HTML under what is called quirks mode. 17. [2 pts] Circle any places where there are errors in the following HTML hyperlink element: <a src = "pict2.html > Image </a> src & missing " Hyperlink elements use href to identify the resource to be linked to, not the src attribute which is used in image tags. There is also a closing double quote missing after the filename. 18. [2 pts] Suppose an HTML file on an Apache web server has an image tag whose source attribute refers to a file "pict.PNG" in the same directory. Does this reference work correctly if the file name is actually pict2.png? Yes No Apache works in a Unix environment and Unix, unlike Windows, is case sensitive, so it would not recognize an incorrectly capitalized extension. 19. [2 pts] The fact that an image file named pict2.PNG of dimensions 1000 by 1000 pixels and a bit depth of 24 bits has a stored image of less then 37 Kilobytes reflects a process called data compression Compression algorithms shrink the size of data files by eliminating redundancies in the file contents. Compressed files not only save space, they also transmit faster. 4 20. [2 pts] The combination of a web browser, web server, and a background database is called an: (a) (b) (c) (d) SQL database Relational database URL 3-tier architecture (d) These are the three classic components of a 3-tier architecture used for web applications. 21. [2 pts] Which HTML Form attribute identifies the program on a web server that must be executed in order to process the Form data? action The action attribute is the only attribute actually required in the Form element and it identifies the script program on the server that is expected to process the Form data. 22. [2 pts] A server-side program which uses data sent from an HTML Form identifies the data based on the value of which Form attribute: (a) name (b) value (c) id (d) none of these (a) The program must know the name of the data as declared on the HTML Form. The value could actually be empty but if the program tries to access Form data with the wrong name it will cause a program run-time error. 23. [2 pts] What is the default HTTP method assumed in an HTML Form: (a) (b) (c) (d) GET method Depends on the browser URL POST method (a) The default HTTP method for an HTML Form is the GET method. POST is an alternative but is not the default. 24. [2 pts] What PHP function retrieves the value of data sent from an HTML Form: (a) submit (b) $_GET (c) SELECT (d) GET (b) The PHP method that picks up the data sent from a Form is $_GET["x"} where x is the name of the HTML field whose data is retrieved. Select is an SQL command for retrieving data from a database. The submit is the HTML Form element that causes Form data to be sent to the web server. 5 25. [2 pts] The PHP statement: print "exit<br>" ; sends the string "exit<br>" to a: (a) network printer ( b) browser (c) database (d) none of these (b) The prints sends the string to the browser which interprets it as HTML. 26. [2 pts] If the statement: mysql_connect($hostname, $username, $password) or die("Fail to Connect"); fails to connect to the indicated database, then the PHP program (a) (b) (c) (d) closes the database sends the message to the browser and stops execution sends the message to the browser and continues execution restarts the database (b) If the connection fails then the PHP program stops execution because of the die clause, which also sends a message to the browser that requested the program. 27. [2 pts] Which of the following PHP instructions is used to execute an SQL statement in a PHP program: (a) mysql_connect (b) Insert (c) mysql_query (d) mysql_select_db (c) The mysql_connect command connects to a database based on its parameters. The mysql_select_db command selects which database of the user to access. Insert in an SQL command. The command mysql_query is used to submit SQL commands like Insert to a database. 6 28. [2 pts] The code in a PHP program whose execution is requested by an HTML Form can be viewed in a requesting browser after it is received using View > Page source: True False No. The program is run on the server and only its results, not its actual code, is sent to the browser. 29. [2 pts] A PHP program can either send data to a browser or communicate with a database but it cannot do both in the same program: True False As the intermediary between the browser and the database, the PHP script can do both. It has print and $_GET commands for example to interact with the browser. It has the various database commands like mysql_connect and mysql_query to interact with the database. 30. [2 pts] Which of the following are invalid PHP variables: (a) amount (b) $x (c) $amount (d) all of these (a) PHP variables begin with $ so (a) is invalid. 31. [2 pts] Which of the following statements inserts data into a table B with two text fields Name and Major. Assume the value of $x = 'cs'. (a) (b) (c) (d) (e) mysql_connect ( "INSERT INTO B VALUES ( 'mike' , 'cs' )" ); mysql_connect ( "INSERT INTO B VALUES ( mike , $x )" ); mysql_query( "INSERT INTO B VALUES ( 'mike' , 'cs' )" ); mysql_select_db( INSERT INTO B VALUES ( "mike" , "cs" ) ); none of these (c) Only mysql_query is used to execute an SQL command like Insert. 32. [2 pts] If you have a file named x.txt lies in a directory ABC directly under your public_html folder and your UCID account is mm23, then the URL needed to retrieve that file is: (a) (b) (c) (d) http://web.njit.edu/~mm23/ABC/x.txt http://web.njit.edu/~mm23/public_html/ABC/x http://web.njit.edu/~mm23/ABC/x http://web.njit.edu/~mm23/public_html/ABC/x.txt (a) (a) is correct. (b) and (c) both omit the file extension so they do not work. (d) explicitly refers to the root public_html folder which is always implicitly assumed and not explicitly stated. 7 33. [2 pts] The PHP code that uses data from an HTML Form must know the name of any Form data it needs in order to retrieve it: True False This is the same as question (22). 34. [2 pts] A .php file cannot contain HTML tags -- except as part of PHP print statements. True False The PHP code segment can only contain HTML tags inside a quoted string of a print statement. But the PHP file itself can contain HTML tags outside the <?php --- ?> tags. 35. [2 pts] (a) (b) (c) (d) (e) What is the value of the following formula: Math.floor ( Math.random( ) ) ? zero one unknown random decimal unknown random whole number none of above (a) Math.random( ) is a decimal between 0 and 1. Math.floor removes the decimal part of a number. So in this case, the result is always 0. 8 36. [2 pts] Which of the following formulas will randomly pop-up the colors red, blue or green from the Javascript array var A = [ 'red', 'blue', 'green', 'cyan' ]: (a) (b) (c) (d) (e) k = Math.floor ( 3*Math.random( ) ) ; alert(A[k]) k = 3* Math.floor ( Math.random( ) ) ; alert(A[k]) alert ( A [ 3*Math.random( ) ] ) alert ( A [ 3*Math.random ] ) none of above (a) The three colors mentioned occupy locations 0, 1 and 2 in the array A [ ]. The formula in (b) just gives 3*0 or 0 (refer to the explanation in question (35)). The formulas in (c) and (d) give decimal numbers which are not whole numbers as they must be to use for an array index. The expression in (a) makes k = 0, 1 or 2, which works correctly with the A[k] reference. Code For questions: 37 - 40 The Javascript function below is for questions 37-40x. The element with id=3 is a div tag. var A = [ 'red', 'blue', 'green', 'cyan' ] function f ( ) { M=5 ; N=4 //Line ** s = "<table border=2 >" for ( k =1; k <= N; k++ ) { p = Math.floor ( N*Math.random ( ) ) document.getElementById(3).style.color=A[p] s= s + "<tr>" for ( i=1; i<= M; i++ ) { s = s + "<td>hello</td>" } //Line * s = s + "</tr>" } s = s + "</table>" document.getElementById(3).innerHTML = s } -- Questions 37 – 40 -- refer to the Code shown. 37. [3 pts] Which of the following best describes the color(s) of the text in the table generated by the sample code on exit from the function f ( ): (a) cyan, because N is 4 (b) last random color picked in outer loop (c) different randomly picked colors from array A for each row of table (d) none of above (b) 9 Every time the first two lines of the innermost for-loop are executed, the color of the text for the entire div container with id=3 is reset to some random color. Each of these changes over rules previous such changes so it is the last time through that determines the color. 38. [2 pts] Which of the following changes to the Line * will make the text in each table cell red: (a) (b) (c) (d) (e) s = s + "<td style = \"color: A[1] \" >" s = s + "<td style = \"color: A[0] \" > s = s + "<td style = \"color: " + A[0] + " \" > " s = s + "<td bgcolor =\"red\" />" choices (a) and (d) are both correct (c) (d) is wrong because bgcolor, which is deprecated anyway, refers to the background color not the text color. The reference A[1} in (a) would refer to 'blue' in any case, since array indices start from 0. (b) is wrong because if you include a variable like A[0} directly inside quotes, the browser just uses the characters A[0], not the value of A[0]. That leaves (c) which is correct. The backslash notation \" lets you use a quote inside a quote (because the two outermost quotes are required). The A[0] in (c) is placed outside the quotes and its value is concatenated with the rest of the HTML string. 39. [2 pts] What will be output to the div element with id=3 if we change last line in function f to: document.getElementById(3).innerHTML = "s" (a) (b) (c) (d) the div contents will be set to the value of s the div contents will be set to the letter s cannot tell because the contents of s have random characteristics none of above (b) Putting s in quotes merely makes the letter or character s the output. 40. [2 pts] What code is generated in the string s if we change Line ** in f ( ) so: M=1 ; N=1 (a) <table border=2 ><tr><td>hello</td></tr></table> (b) <table border=2 color=A[p] ><tr><td>hello</td></tr></table> (c) <div id=3><table border=2 ><tr><td>hello</td></tr></table> </div> (d) <div><table border=2 ><tr><td>hello</td></tr></table> </div> (e) none of above (a) The loops are executed once, so one cell and row are created. The color style code does not create any visible attribute. The div does not occur because that is merely where the string is placed; it is not part of the generated code. 10 Code For questions 41 - 45 Questions --- refer to the following Javascript functions: function f( ) { v = new Date ( ) x = v.getSeconds ( ) //Line * document.getElementById(1).value = x y = document.getElementById(2).value if (x==y && x!=0) { document.getElementById(2).value="" playSound (3) } setTimeout ("f( )" , 1000) //Line ** LINE (1) } function playSound (p) { var x = document.getElementById(p) ; function stop Sound (p) { var x = document.getElementById(p) ; x.Play ( ) x.Stop ( ) } } Assume the HTML body is as follows (the Form tag is omitted for convenience but assume the body still behaves as expected): <embed src="flourish.mid" autostart=false width=0 height=0 id=3 > <input type = "text" id=1 /> <input type = "text" id=2 /> <input type="button" value="Stop " onclick="stopSound ( 3 )" /> -- Questions 41 – 45 -- refer to the Code shown. 41. [2 pts] If Line * is replaced by: x = v.getMilliseconds ( ) (which returns the current milliseconds of the Date object) then which of the following is true: (a) (b) (c) (d) (e) the timeout delay at Line ** should be set to 500 the text field with id=1 is too small to contain the milliseconds after a few iterations the Date object v will be refreshed every millisecond the current milliseconds will be updated every millisecond in the text field with id=1 none of above (e) This merely gives the correct milliseconds but only once a second -- not every second. The change does not affect the rate at which the Date object is sampled, just what value we pick from the Date object. It does not make sense to sample the milliseconds if we only do so once a second. 42. [2 pts] Given the original code for f, in the course of 5 seconds f will be executed approximately: (a) once (b) 5 times 11 (c) 5000 times (d) depends significantly on whether an alarm occurs (e) none of above (b) The function f( ) is executed recursively on a delay of one second repeatedly. So it will be executed 5 times in five seconds. 43. [2 pts] Given the original code for f, if the alarm in field 2 is set for 10, then how many times between seconds 10-20 [including 10 and 20] will the function playSound (3) be executed: (a) (b) (c) (d) (e) once eleven times 11,000 times ten times none of above (a) The function playSound is executed when the current seconds matches the alarm time. Thus it would be executed at time 10 only. Of course the music that is started by the function at that point continues to play until it is stopped. 44. [3 pts] If the following two statements are added to the code for f ( ) after Line ** setTimeout ("alert('Hello')" , 3000 ) alert ("Bye") LINE (2) LINE (3) then the first two popup messages displayed after f starts executing will be: (a) (b) (c) (d) (e) Hello Hello Bye Bye Hello Bye Bye Hello none of above (b) The alert in Line (2) is executed 3 seconds after Line (1) but the setTimeout on Line (2) is executed immediately. It schedules the postponed execution of the alert('Hello') for 3 seconds. The alert('Bye') on Line (3) is executed immediately after the setTimeout instruction – without delay, so the first message popup is 'Bye'. Because of Line (1), the function f ( ) recurs after one second and so this happens before the alert ('Hello') has had a chance to execute. Thus the second time alert('Bye') executes is one second after its first time, and before the alert('Hello') scheduled for second three. Thus 'Bye' is also the 2nd popup message. So the answer is (c). 45. [2 pts] Given the original code for f, if autostart is set to false in the embed tag, will the music play when the alarm condition in text field 2 matches the current time in seconds? Yes No The Play( ) method overrides the initial values for autostart. 12 46. [2 pts] Which of the following style rules makes the color of the background of a table cell, with id =1, be red: (a) (b) (c) (d) (e) th { backgroundColor: red ; } th { color: red ; } th { color: "red" ; } th { document.getElementById(1).color = "red" } none of above (e) Neither (b) nor (c) work because the property color applies only to text not to the background color of an element. The term backgroundColor is not the accurate way to spell a style property, which are spelt with dashes, not with the internal capitalization characteristic of Javascript. The correct property in (a) would be background-color. (d) is wrong because it uses a Javascript statement in a style rule. 13 47. [2 pts] Which of the following connects an HTML page to an external style sheet named page.css: (a) <link type="text/css" rel= "stylesheet" href="page.css" > (b) <style type="text/css" rel= "stylesheet" src ="page.css" > </style> (c) <style type="text/css" rel= "stylesheet" href="page.css" > </style> (d) none of above (a) The link element refers to the external style sheet. The style element is for defining style rules internal to the HTML page. 48. [2 pts] If a style rule has the name or identifier .ABC then which of the following makes a correct reference to this rule: (a) <th attribute="ABC" > contents </th> (b) <th class=".ABC" > contents </th> (c) <th> class=".ABC" <span> Contents </span> </th> (d) <th style="class: ABC" > contents </th> (e) none of above (e) Classes are referred to in elements they apply to by quoting the style rule name, but without the dot. Thus class="ABC" would create a correct version of (d). 49. [2 pts] Which of the following styles make the HTML body element's font size be 14pt and font type be Arial: (a) <body style="font: 14pt ; type:Arial" > (b) body { font-family: Arial ; fontSize: 14pt ; } (c) body { font: 14pt solid Arial } (d) none of above (d) (a) is wrong because type is not a valid property. (b) is wrong because fontSize is not a valid property (that would be font-size). Only Javascript uses this internal capitalization mode of spelling – not style properties. The format in (c) is like a shortcut notation used for border properties. As written it does not apply to font properties. 50. [2 pts] An HTML page cannot refer to more than one style sheet. True False A page can refer to multiple style sheets with different >link tags. The style sheets could have different rules. If some rules overlap than the browser resolves the conflicts by picking the highest priority rule. 51. [2 pts] A cascading style sheet can be used by more than one HTML page. True False This is one of the key purposes of style sheets since it allows all the HTML pages on a web site to share the same styles and a common look that has been carefully designed. 52. [2 pts] Which of the following makes a cell span an entire row of a table with 4 columns. (a) rowspan = 4 (b) <span width=5> cell contents </span> (c) span { colspan:4 ; } (d) <th colspan = 5> (e) none of above (d) 14 (d) is almost correct but uses 5 rather than 4. The rowspan attribute is for cells that span more than one row, not for a cell that spans more than one column. 53. [2 pts] Which of the following style rules makes a div element into a black bordered square of size 100 by 100 pixels: (a) (b) (c) (d) (e) div { width=height:100px ; border = 2px ; solid ; black } <div id=1 border=2px style="width:100px" > </div> div { width=100px ; height=100px ; border=2px black} div { width:100px ; height:100px ; border: 2px solid black } none of above (d) (d) is correct. (a) and (c) both use an = symbol which is not allowed in a style rule. (b) uses attributes and also omits a color. 15 54. [2 pts] Which of the following is a valid HTML radio element: (a) (b) (c) (d) <input name="A" <input name="B" <input radio="A" <input radio="A" type="radio" type="radio" type="input" type="input" value="1" value="1" value="1" value="2" <input name = "A" type="text" value="1" <input name = "A" type="text" value="1" none of above /> French /> English /> French /> English /> French <br> /> English <br> (d) A radio element has type="radio" and the names are the same, though the values should be different. None of these elements satisfy these requirements. 55. [2 pts] Which of the following will make the enclosed text red: (a) (b) (c) (d (e) <span class="red" > contents </span> <color = red> contents </color> div { color = red ; } <div color: red > contents <div> none of above (e) (a) is incorrect because "red" is not a defined style rule or class. (b) is wrong because color is not a tag. (c) is wrong because color is a property but not an attribute which is how it is used here. (d) is wrong because the correct format would be style="color: red". 56. [2 pts] Which of the following HTML elements will cause the google search engine to process the data from a Form: (a) <a href = "google.com/search" > Google </a> (b) <form method="GET" action="google.com/search" > (c) <a href = "google.com/ " > Google </a> (d google.com.search?hl=english&q=data (e) none of above (b) The Form action attribute identifies the program search (and in this case the web site google.com the Form data is sent to. 57. [2 pts] An HTML Form sends its data to an: (a) AFS account (b) web server (c) MySQL database (d query string (e) none of above (b) A web server. The AFS environment contains the file system that includes the public_html folder that the web site files are contained in. The query string sent by browser includes the data sent to the web server. 16 58. [2 pts] A style element like img { height:80px ; width:100px ; } can be used to define the height and width of an image in an HTML page: (a) (b) (c) (d (e) Only if it is included in the image tag itself Only if the image dimensions match the dimensions in the style rule Only if the image is in a subdirectory of the HTML page Only if the class parameter is used none of above (e) The indicated style rule can apply to any image element. No class attribute is needed in the img element because the identifiers for the rule is img and so automatically applies to img elements. 59. [2 pts] There can be only one HTML Form on an HTML page. True False There can be multiple Forms on a page, but only one can be submitted at a time since each submit button will submit its own Form's data and identify its own action. 60. [2 pts] Div elements can act as containers for multiple block level elements: True False Div elements are containers. They can be given a style that applies to whatever other elements they contain. They can also be manipulated by a Javascript by being given an id. They can contain any kind of block elements like tables or other div elements. 61. [2 pts] The rgb notation rgb(255,255,255) represents white. True False The values represent the intensity of activation of the three color elements in each pixel.. A zero means no activation. A 255 is full activation. A full mixture is red, green and blue output yields white. No activation makes the pixel dark or black. 62. [2pts] A MySQL database can be concurrently accessed by multiple web pages. True False The database can be accessed concurrently by multiple HTML pages. This is of course a necessity for any database that has to operate in a web environment since there are many different browsers accessing the site with the database. 17 Code For questions: 37 - 40 The Javascript function below is for questions 37-40x. The element with id=3 is a div tag. var A = [ 'red', 'blue', 'green', 'cyan' ] function f ( ) { M=5 ; N=4 //Line ** s = "<table border=2 >" for ( k =1; k <= N; k++ ) { p = Math.floor ( N*Math.random ( ) ) document.getElementById(3).style.color=A[p] s= s + "<tr>" for ( i=1; i<= M; i++ ) { s = s + "<td>hello</td>" } //Line * s = s + "</tr>" } s = s + "</table>" document.getElementById(3).innerHTML = s } 18 Code For questions 41 - 45 Questions --- refer to the following Javascript functions: function f( ) { v = new Date ( ) x = v.getSeconds ( ) //Line * document.getElementById(1).value = x y = document.getElementById(2).value if (x==y && x!=0) { document.getElementById(2).value="" playSound (3) } setTimeout ("f( )" , 1000) //Line ** } function playSound (p) { var x = document.getElementById(p) ; function stopSound (p) { var x = document.getElementById(p) ; x.Play ( ) x.Stop ( ) } } Assume the HTML body is as follows (the Form tag is omitted for convenience but assume the body still behaves as expected): <embed src="flourish.mid" autostart=false width=0 height=0 id=3 > <input type = "text" id=1 /> <input type = "text" id=2 /> <input type="button" value="Stop " onclick="stopSound ( 3 )" /> 19