Description
Assignment specification:
There are 6 assignment questions.
Write each question solution into a separate website.
Solution of Question X must be saved into the website questionX.html.
Put your name and student number as a heading on top of each web page.
Each question must be labelled clearly with a heading.
Question 1. (2%) Consider the following fictional scenario. At the Whosville Holiday
Reserve, there are 3 accommodation options: Cabin, Dormitory, and Cottage. They also provide
a number of guided tours to local caves: the Ktar Koon Cave, the Beyoh Boon Cave, the Sontain
Soon Cave and the famous Tahoot Toon Cave. There are also internet services at low price. The
holiday reserve website has a web form that allows customers to query for a price quote, which
depends on the type of accomodation, the number of adults and children, the number of days
they want to stay, whether they want to include some of the cave tours, or whether they want to
include internet service. The web form also has a text area where customers can submit questions
regarding the holiday reserve.
Page 1 of 5
The back-end service is running at http://whosville.com/price_enquiry
and it accepts GET request with the following parameters:
● adult: this parameter is to specify the number of adults
● child: this parameter is to specify the number of children
● days: this parameter is to specify the number of days the customer wants to stay
● atype: this parameter is to specify the accommodation type, the acceptable values are:
○ cab: for Cabin
○ dor: for Dormitory
○ cot: for Cottage
● tour: this parameter is to specify which cave tours the customer wants to include, it
accepts zero to multiple values, and the acceptable values are:
○ 1: for Ktar Koon Cave tour
○ 2: for Beyoh Boon Cave tour
○ 3: for Sontain Soon Cave tour
○ 4: for Tahoot Toon Cave tour
● internet: this parameter is to specify whether the customer would like to include the
internet service, and the acceptable values are:
○ yes: for include internet service
○ no: for no internet
● query: this parameter is for customers to ask any question about the holiday reserve.
Create a web form for the Whosville Holiday Reserve with the following requirement:
● Use a text field: for the number of adults
● Use a text field: for the number of children
● Use a drop-down list: for the accomodation type
● Use a text field: for the number of days
● Use checkboxes: for the cave tours
● Use 2 radio buttons: for the internet service
● Use a text area: for customer query
The webform has 2 buttons: one for submit and one for reset the form.
Use table arrangement so that your webform looks presentable for the users.
Your webform must explicitly specify the correct action and method.
You should test the web form to see if it submits the correct parameters and values to the server.
Page 2 of 5
Question 2. (2%) Go to the website https://www.amazon.com.au and play with the
search web form. Type some keyword and choose some category to search. Try to find out the
following information:
● What is the action of the form?
● What is the parameter for the keyword?
● What is the parameter for the category?
● Choose 5 different categories of your choice and find out what the corresponding values
for those categories are.
After obtain the above information, create a web form with the following requirement:
● Use a text field: for the keyword;
● Use 5 radio buttons for your 5 chosen categories;
The webform has 2 buttons: one for submit and one for reset the form.
You should test the web form to see if it submits the correct parameters and values to the server.
Question 3. (1%) On the web page displays 2 text fields and 2 buttons: “Swap Text” and “Clear
Text”.
(1.) When the button “Swap Text” is clicked, then the texts entered in the two text fields will be
swapped. For example, if the user enters John in the first text field and Lee in the second text
field, and if the user clicks the “Swap Text” button, then the first text field should display Lee
and the second text field should display John.
(2.) When the button “Clear Text” is clicked, then the texts entered in the two text fields will be
cleared.
Page 3 of 5
Question 4. (1%) On the web page displays two text fields and a button “Calculate” as follows:
When the user enters two numbers into the two text fields and clicks the button “Calculate”, then
a message is displayed on the web page showing the minimum number, the maximum number,
and the sum of the two numbers as illustrated by the following example:
Question 5. (2%). On the web page displays five animal images and four “Switch” buttons as
follows.
Whenever the user clicks on a switch button, the two images next to the button switch their
places. You can use any animal images to do this task.
Page 4 of 5
Question 6. (2%). On the web page displays “Enter command: ”, followed by a text field for the
user to enter a command, followed by a button “Execute command”.
Here are the list of valid commands and command’s output:
Command Command output
make duck noise Display “QUACK QUACK” in a big font and color of your choice on
the webpage. Do not choose black or white color.
make rooster noise Display “COCK-A-DOODLE-DOO” in a big font and color of your
choice on the webpage. Do not choose black or white color.
show duck image Show an image of a duck on the webpage.
show rooster image Show an image of a rooster on the webpage.
show frog face Using the character entity to show an image of a frog face.
(Read the lab exercise to see the character entity of the frog face)
Any other command that is different from the above exact 4 commands are deemed as an invalid
command.
● If the user enters an invalid command and presses the button “Execute command” then
an alert window appears which says “You have entered an invalid command”.
● If the user enters a valid command and presses the button “Execute command” then the
previous command output should disappear from the webpage and the new command
output should appear on the webpage.
END OF THE ASSIGNMENT
Page 5 of 5
