Description
Create a folder to store all your code and images.
Compress your folder into A2.zip and submit it via the Assignment 2 Submission on Moodle.
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.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.
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.
Question 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. On the web page displays 2 text fields and 2 buttons: “Swap Text” and “Clear Text”.
- 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.
- When the button “Clear Text” is clicked, then the texts entered in the two text fields will be cleared.
Question 4. 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.
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.
