Reference no: EM132374657

Internet and Website Development Project Assignment - Create an Interactive Application

Learning outcomes:

1. Explain and apply the fundamentals of CSS (Cascading Style Sheets).

2. Explain and apply the fundamentals of JavaScript.

3. Use current client-side website development languages/technologies create a complex commercial or educational website.

4. Use the features of Web/Multimedia authoring packages to create a complex commercial or educational website with effective navigational interface.

Project instructions - You will work in pairs to create a website in your designated dochyper space. Project consist of two parts

Part 1 - Create an online booking system for Restaurant

Part 2 - Create interactive game for children

You will present your part 1 and 2 of the project to the class. Presentation is compulsory. Each pair will have 15 minutes to present their work. Your project homepage should include links to both parts.

Part 1 - Online reservation system for Restaurant

You will develop an online booking system for Hoa Hari Restaurant, using XML as external storage and using JSON to communicate with external APA. This Restaurant has 3 seating areas: two rooms inside and deck outside. Outside deck is available for booking, if weather is permitted.

a. Provide documentation for your application. Make the document link available on landing page.

b. Consider the following criteria given below while developing an online booking system:

i. Load your Restaurant data settings from XML files. Users should be able to specify a different number of people and select a date, time and table location. Date range only from today and up to next 3 days for two rooms (inside) and today booking for deck only. Your Restaurant's layout outline is up to you. Our example is presented on the next page (page 3), Please note it is example only and it is not demonstrating all requirements.

ii. Restaurant layout must be link to data from XML file (room, table, 'number of people allow'). This data is presented dynamically on booking page. Booking page is providing a popup information on "mouse over" for each table.

i. Three tables have already been taken, so users cannot book them.

ii. Different tables can accommodate a different number of people. Each table has a unique number.

iii. If table is located on deck, weather permission should be checked using external API. Booking allows if no rain and temperature is above 18 C. Weather condition should be taking from open API, please apply for your own API key.

iv. You need to have as minimum 6 tables in each room and minimum 7 tables on the deck. (One table is for 8 people, one table for 6 people, two tables for 4 and two tables for 2 people)

v. Populate restaurant menu dynamically on the webpage. Menu must be link to data from XML file (image names, description, cost, special requirements)

vi. When populating each menu item layout consider the following:

1. User must be able to dynamically see a list of menu items. Each item has image, description, type indication (vegetarian, egg free, gluten free) and cost. You need to have as minimum 12 items on your menu.

2. User can select item and specify amount (for example: 2 Chicken Satay meals). Total for current selection should be display, that user can do informative choice.

3. If user wants to change their selection they system should be able to update dynamically.

vii. On user confirmation (room, table number and menu selection) the booking system should calculate total price and provide a full statement/ list of selected items and table number. Summary for booking should have: date, time, name of Restaurant room (or deck), table number, number of people coming, menu selected and total cost.

viii. After booking confirmation is done- table should be marked as unavailable/booked for that time (plus two hours) and selected date.

ix. If user decided to add additional table for same day and time booking, his earlier selected table should be marked as booked.

Part 2 - Interactive online game

You will design and develop an interactive web game for young children using HTML5 elements including Canvas.

Game story: An animated spaceship is flying in sky and try to shout enemies. It will be shouting enemies in the sky. Spaceship shapes and colour is up to you. Spaceship task is to destroy all enemies and avoid them as they try to destroy the spaceship. Every destroyed enemy will get a score of one. If an enemy crash to the Spaceship, then a score will be deducted by one.

Game development requirements: Character (Spaceship):

• Spaceship movement is controlled by using the keyboard arrow keys (up, down, left, right).
• You should have additional key (for example "space" ) to allow shouting.
• Shouting device direction changes, when Spaceship moves left or right. Each time Spaceship changes direction the shouting device should be in front of Spaceship.
• Spaceship movement is restricted inside the canvas.
• Every time Spaceship successfully destroy enemy, a score of one is added to the current score and a 'happy' sound is played. However, if an enemy touch Spaceship, an 'unhappy' sound will be played and crash image displayed and current score will be deducted by one.
• Define and implement Spaceship animation (light flashing, tail movement, projectors movement).

Each enemy has a life cycle which is described below:

Stage 1: a small light blue enemy with a radius = 5px will appear randomly on the any side of canvas.

Stage 2: growing time for each enemy is 5 seconds. Each enemy grows to size of radius = 25px

Stage 3: enemy's colour changes gradually from light blue to blue in a duration of 4 seconds. Use radial gradient in diagonal direction for the colour change.

Stage 4: Each blue enemy will stay on the side for a duration of 3 seconds and will then start move.

Stage 5: movement time for each enemy is 6 seconds to cross a playable area.

Stage 6: enemy moves fly out of vision if Spaceship is unable to shout it. Or if it moves on the any side of Spaceship it should explode.

Additional requirements for the game:

a) Minimum 4 different sounds in the game (like one collision beep and shouting sound, start and end game sounds) and users should be able to control the volume of the sounds.

b) Provide feedback with appropriate text messages and sound to the player. For example, a mechanism to display the score to the player or text message in the end of game.

c) Time settings which can be changed by player. Default time setting for duration of game is 5 minutes. Other possible value for the duration of the game is 1, 3 and 6 minutes.

d) Start button and restart button.

e) Overall design and complexity of scenery - background.

f) Provide documentation for your application. Make the document link available on landing page.

Attachment:- Internet and Website Development Assignment File.rar