1. [10 marks] Window Layout
Assignment 1: marking scheme
– The browser window is divided into three frames, the Left Hand Frame, the Top Right Hand Frame and the Bottom Right Hand Frame,
– The geometrical division of these frames can be easily identified in pre-attentive processing manner . Note that if identifying (or detection) tasks are performed with: < 200 - 250 ms qualifies as pre-attentive.
- As specified in handout. No frame borders are visible. The one exception to this might occur when the shopping cart (ie. lower right frame) has so many products that its frame creates a vertical scroll bar.
2. [10 marks]
The initial dispaly of products hierarchy:
- The left hand frame displays a Graphic Browser (e.g. ImageMap) which only shows the initial content (two levels of the products hierarchy). This includes
- the root node and nodes representing five categories: - Frozen-Food,
- Fresh-Food,
- Beverages,
- Home-Health and - Pet-Food.
Some students may choose to have a vertically aligned levels rather than horizontally aligned. This is quite acceptable. Also some students may have implemented the selection mechanism via a drop down menu. This is acceptable provided it uses similar or identical techniques to the imagemap and rollover.
3. [10 marks]
The visual structure (links) of the Graphic Browser (or ImageMap) correctly represents the hierarchy of products.
4. [20 marks]
The quality of the Graphic Browser (or ImageMap)
- All labels are readable
- The use of appropriate font sizes
- The use of appropriate font color and background color
- The Graphic Browser clearly show the parent-child relationship
5. [10 marks]
The dynamic Map covers the entire products hierarchy
- the nodes at the lowest level should cover all 32 products available in MySQL
6. [10 marks]
Good layout of the Graphic Browser (or ImageMap)
- At any time, no nodes should appear beyond the bounds of the Left Hand Frame. The images are not too large or too small.
7. [10 marks]
When the mouse pointer moves over a particular category node, then the display of Graphic Browser changes accordingly for showing the substructure and its product details of this particular category.
8. [10 marks]
At the lowest level of the hierarchy individual nodes are "live". They represent particular products and they are live links to a PHP file.
9. [20 marks]
When a user clicks on a particular 'product node', it will bring up a PHP file showing the details of that product in the right top frame.
10. [40 marks]
The top right frame is a dynamic web page generated on the server side by a PHP script. It retrieves the appropriate product entry from the MySQL products table and then displays selected attributes of the product in a web page generated by the script.
- A tabular format, that needs to be produced by PHP codes, is used to nicely display the chosen product information, including product name, price, selected quantity as well as some optional information, such as an image of chosen product.
11. [60 marks]
The 'product' displayed in the top right frame has an associated 'Add' button which adds the selected product to the user's shopping cart, which is displayed in the bottom right hand frame.
- There is a text input box associated with the display of 'product' where the user enters the quantity.
- This quantity is validated using javascript before the data is submitted. Incorrect data is not submitted.
- Also, users should not be allowed to submit orders with unrealistic quantities (e.g. 1000000 boxes of fish fingers). A reasonable limit (say 20 or thereabouts) should be set.
12. [20 marks]
The bottom right hand frame displays a Virtual Shopping Cart, showing the number of products selected by the user, the detail of chosen products as well as the total value of these products.
- Each selected 'product' occupies one row in the virtual shopping cart. Different orders (selections) of the same product are amalgamated on the one row.
13. [20 marks]
Users can empty the shopping cart (i.e. clear all selections made so far) by clicking on a "Clear" button.
14. [25 marks]
Users can also complete their shopping session by clicking on a button labelled ¡®Checkout¡¯. Note that after the "Checkout" button is clicked, no more products can be added into the shopping cart.
15. [30 marks]
When the ¡®Checkout¡¯ button is clicked, the system checks whether the user has added any products in the shopping cart. If so, it executes a PHP script displaying the shopping detail with the 'single item purchase cost" and the "total purchase cost'. The output of this PHP script can be displayed either in the top right hand frame overriding the existing content of the frame, or in a new popup window.
16. [15 marks]
If there are no products in the shopping cart a simple message is displayed.
17. [25 marks]
The checkout component displays a 'purchase form' asking the user to fill in their delivery details (including name, address, suburb, state, country and email address). The form is laid out using a table. All fields are marked as compulsory using red asterisks.
18. [25 marks]
All these fields in the ¡®purchase form¡¯ must be completed for the order to go ahead. A simple message is displayed if a field is not filled out. Email data is checked for a valid email string.
19. [20 marks]
The user completes the transaction by clicking on a button labelled ¡®Purchase¡¯. A message (confirmation or details) of the order is sent via email to the email address given on the form.
20. [60 marks]
The quality of the overall presentation of dynamic graphic browser. This includes such things as:
- It can dynamically switch (or change) views without losing any 'sub-categories' and 'products'.
- The 'parent - child' relationships are dynamically maintained. So, during the view switching the user can easily precept the hierarchical structure within pre-attentive time.
- Fonts used are contemporary and not too large. This could be implemented using a style. Appropriate fonts are Verdana, Arial, Helvetica or San Serif as a fallback font. The CSS gives some good examples of how fonts can be set to look attractive.
- Data at all levels presented in html tables is nicely formatted. No ugly borders.
- Colours are well chosen. Text should be easy to read. Examples of BAD color combinations include red and black, red and green, purple and red, orange and red, red and dark blue. Basically, any combination of colors that makes text hard to read is bad.
- No animated gifs.
- No borders around images.
- Logos and small pictures (such as a picture of a shopping cart) are permitted, but they should be reasonably attractive and not dominate the site page.
# Total marks = 450