Assignment 1: Marking Scheme

1.Overall Layout [4 marks]

• The browser window is divided into two or more frames.
• No frame borders are visible. One exception is the use of scrollbar (e.g., when the shopping cart contains so many products that you don’t wish to show a long list of items all at once).
• Website logo appears at the top of the webpage.
• A navigation bar appears on the left-hand side or at the top of the webpage.
• A search box appears all the time on the page.
• The shopping cart appears at the bottom-right corner or as a pop-up window and can be easily moved around using the mouse.

2.Category Hierarchy [7 marks]

• The navigation bar shows all the top-level categories (at least five) of items in the shop.
• Upon clicking or mouseover, the top-level category expands to show the corresponding second-level categories. The navigation bar should also be a drop-down menu.
• When a second-level category is clicked, the items in this sub-category should be shown in the main information area.
• At any time, only the second-level categories of no more than one top-level category can be visible to the customer.
• The second-level categories (or sub-categories) should cover a total of at least 32 items.
• Each second-level category shows the number of items in this category as part of the category hierarchy.
• A second-level category should be inactive (not clickable) if there is no item under this second-level category.
• At any time, no node appears beyond the scope/frame of the navigation bar.

3.Search Box [3 marks]

• Customers can input or select a price range to filter the items shown in the main information area.
• Customers can input one or more keywords to search for items by name.
• The search results show in the main information area.

4.Item Presentation [6 marks]

• Items shown in the main information area show in a grid/table or other better layouts rather than in a simple list.
• Each item shows the name, image, quantity, and price correctly. The images are not too large or too small.
• Each item has an "in stock" status showing whether the item is available in stock and can be added to the shopping cart.
• Each item has an "Add" button beside it, which can be used to add the item to the shopping cart.
• Customers can click the "Add" button multiple times to increase the number of items in the shopping cart.
• Clicking a particular item will trigger a new page or pop-up window showing more details of the item, where customers can also "Add" the item to the shopping cart.

5.Shopping Cart [7 marks]

• The shopping cart correctly shows the number and total price of items added by the customer.
• Each item occupies exactly one row in the shopping cart. Different orders (selections) of the same product are amalgamated on the one row.
• The shopping cart provides buttons to remove an item, empty the cart, and check out.
• Customers can edit the number of each item in the shopping cart.
• Customers cannot submit orders with unrealistic amounts (e.g., 1,000,000 boxes of fish fingers). A reasonable limit (say 20) should be set.
• After the "Checkout" button is clicked, no more items can be added into the shopping cart. The customers need to complete the order before being able to add items to the shopping cart again.
• The "Checkout" button should be inactive (not clickable) when the cart is empty.

6.Online Order Form [4 marks]

• The online order form displays either in the main information area overriding the existing content of the frame, or in a new popup window.
• The online order form requests the customer to fill in their delivery details (including name, address, suburb, state, country) and email address. The form should have a table-like layout.
• All the fields in the online order form must be completed (marked by red asterisks) and the email address input by the customer should follow the correct format before the order can be submitted successfully. A simple message is displayed if any field is not filled out or the input does not meet the requirements for a field.

7.Order Confirmation [4 marks]

• The customer completes the transaction by clicking on a button labelled ‘Place Order”.
• A message (confirmation with details) of the order is sent via email to the customer’s email address.
• The confirmation email includes the shopping details, including the date and time of the order, the "single item cost", and the "total cost" for the order.

8.Overall Presentation [6 marks]

• The webpages can dynamically switch (or change) views without losing any category, sub-category, or item.
• The category and sub-category of an item are shown correctly on the item details page.
• All parent-child relations between categories are shown correctly and clearly.
• Text fonts used on the webpages are contemporary and of appropriate font sizes.
• Everything on the page has the appropriate font colors and background colors.
• All texts and labels are easy to read.
• Data presented in tables is nicely formatted.
• No unnecessary borders in tables.
• No borders around images.

9. User Experience [4 marks]

• Tutors will test using your website in person and make their evaluations on the user experience on the following aspects: soundness of design, smoothness of operation, overall usability, and reliability.

10. Bonus Points:

Your website retrieves item information by (sub-)category from a database.
Search results are retrieved by (a combination of) conditions from a database.
The items in the shopping cart are remembered and automatically appear when the customer revisits the website.