Question 1 [worth 16 marks]
advertisement
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.
