Question 1 A certain coach company has the following ticket pricing policy. Children under 5 years old, and people who are 70 years old or more, travel for free. Otherwise, people who are under 16 years old travel for half price. Everyone else pays the full price for tickets. The company has started to implement an online facility to advise on these charges. The interface looks like this: The associated XHTML code is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>D.I.S. Shuttles: Ticket Prices</title> <script type="text/javascript"> <!-- /* Hide content from old browsers */ function priceProg() { ; /* DEFINITION OF "priceProg()" GOES HERE */ } // end hiding content from old browsers </script> </head> --> <body> <center> <h1>D.I.S. Shuttles</h1> <h2>Find out your ticket type:</h2> <form action="none" name="priceForm" onsubmit="priceProg();return false;"> <b>Enter your age in years:</b> <input type="text" name="agebox" size="4" maxlength="4" /><br /><br /> <input type="submit" value="Display Your Ticket Type" /> </form> </center> </body> </html> Add a definition for the JavaScript function “priceProg()” (and other JavaScript statements as you think appropriate) to the above HTML so that (for example) for an input of 4, clicking on the “Display Your Ticket Type” button produces the alert message for an input of (for example) 9, clicking on the “Display Your Ticket Type” button produces the alert message and for an input of (for example) 25, clicking on the “Display Your Ticket Type” button produces the alert message Ideally, for an invalid input (e.g. some text rather than a number), clicking on the “Display Your Ticket Type” button should result in an appropriate error message. Question 2 For legal and safety reasons, the Slais Shuttles coach company has been told that it may carry a maximum of ten people on its coach at any one time, and that the name of each passenger and whether they are a child or an adult must be recorded. They have started to implement a web page for this purpose. The interface looks like this: The associated XHTML code is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>D.I.S. Shuttles: Passenger List</title> <script type="text/javascript"> <!-- /* Hide content from old browsers */ var MAX_NO_PASSENGERS = 10; var passengerList = new Array(); /* DEFINITIONS OF "addPassenger()", "displayPassengers(...)", AND ANY OTHER FUNCTIONS YOU MAY CHOOSE TO WRITE GO HERE */ // end hiding content from old browsers </script> </head> --> <body> <center> <h1>D.I.S. Shuttles</h1> <h2>Passenger List</h2> <form action="none" name="passengerForm" onsubmit="addPassenger();return false;"> <font size="+2">Passenger name:</font> <input type="text" name="namebox" size="30" maxlength="30" /><br /><br /> <table> <tr><td><input type="radio" name="Child" checked="checked" /><font size="+2">Child</font></td></tr> <tr><td><input type="radio" name="Child" /><font size="+2">Adult</font></td></tr> </table> <br /> <input type="submit" value="Add To Passenger List" /> <br /> <h3><a href="javascript:displayPassengers('children')"> Click here to display current child passengers</a></h3> <h3><a href="javascript:displayPassengers('adults')"> Click here to display current adult passengers</a></h3> <h3><a href="javascript:displayPassengers('people')"> Click here to display all current passengers</a></h3> </form> </center> </body> </html> Add definitions for the JavaScript functions “addPassenger()” and “displayPassengers(...)” to the above HTML so that clicking on the “Add To Passenger List” button appropriately stores information about the new passenger inside the JavaScript program, clicking on “Click here to display all current passengers” produces an alert message such as clicking on “Click here to display current child passengers” produces an alert message such as and clicking on “Click here to display current adult passengers” produces an alert message such as Attempting to add more than 10 passengers should result in an alert message such as You may also add any other JavaScript code or functions you want. Your program should store passenger names and details as properties of appropriate JavaScript objects. Question 3 Without using predefined JavaScript array element-deleting or manipulating methods such as "concat()", "join()", "pop()", "push()", "reverse()", "shift()", "slice()", "sort()", "splice()", "toString()", "unshift()" or "valueOf()", add an extra "Delete From Passenger List" button to the web page of Question 2, which deletes the passenger described by the text box and radio buttons (if there is such a passenger) when clicked: Make sure: • whether the HTML content is valid (i.e. validates using the W3C HTML Validation Service), • whether the programs work correctly, • whether the programs are written in a good style (using meaningful variable names, making good use of data structures and functions where appropriate, etc.), • whether the programs are set out in a clear way, • whether the programs are sensibly commented.