0% found this document useful (0 votes)

4 views7 pages

COMP40004 - WDOS - Assignemnt

The document outlines the requirements for an individual assignment in a web development course, focusing on creating a client-side web application for a hospital. Students must design and implement the application using HTML and CSS, ensuring it meets web standards and is responsive across devices. The assignment includes specific criteria for pages, content, and testing, along with marking criteria for evaluation.

Uploaded by

Demian De silva

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

4 views7 pages

COMP40004 - WDOS - Assignemnt

Uploaded by

Demian De silva

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

You are on page 1/ 7

COMP40004 - WDOS Page 1 of 7

ASIA PACIFIC INSTITUTE OF INFORMATION TECHNOLOGY

Level 4

COMP40004 WEB DEVELOPMENT AND OPERATING SYSTEMS

Individual Assignment 2 (Weightage 30%)

You are required to design and implement a simple web application which demonstrates the
usage of proper web standards.

Learning Outcomes

Upon completion of this assignment, you will be expected to achieve the following learning
outcomes:

1. DESIGN, PROGRAM AND TEST A WEB APPLICATION USING CURRENT WEB STANDARDS,
AND IN DOING SO, ADDRESS THE TARGET AUDIENCE AND DEVICE IN THE PROCESS SO
THAT THIS WORKS EFFECTIVELY FOR MOBILE AND OFFLINE USE

Technical Requirements

The solution needs to be implemented using HTML and CSS with ONLY the external
web libraries mentioned in the assignment.

Scenario

You have been asked to create a client-side web application for a Hospital. The need arose by
the hospital management. The application should address the needs of patients, visitors, and
hospital staff, providing a seamless experience across various devices. You need to show your
skills in web development, including web design, creating pages with HTML, styling using
CSS and testing web applications.
The application should be designed to showcase you and your skills, suitable to market
yourself later to prospective employers.
The site map for the application is shown below:

Web Application

About us and Services Doctors Consulting Pharmacy

Home Page contact Reservation

Level 4 Asia Pacific Institute of Information Technology 2023

COMP40004 - WDOS Page 2 of 7

Assignment criteria

1. Your whole application must:

 The site must be created using PURE HTML and CSS; NO template editors or
generator tools can be used.
 NO External CSS and JavaScript libraries can be used for this assignment.
 Must have a minimum of 7 HTML pages and are not limited to:
o Home page
o About us page
o Services Page (This page can link to two or more other webpages)
o Doctors
o Consulting reservation page
o Pharmacy

2. Your whole application must be a progressive web application and, therefore, must:
 Be hosted on HTTPS (GitHub Pages)
 Contain a web manifest with icon files
 Contains responsive images for different screen resolutions

3. Your whole web application should be styled using ONLY CSS, ensuring that it:
 Suits for the target audience
 It is responsive on all pages from mobile devices to desktop devices
 No inline STYLES; all CSS should be in its own CSS files linked using the link
tag
 Works on all modern browsers
 Shows the appropriate number of columns on mobile and desktop
 Shows responsive tables
 Shows how animation can help the user experience by providing items the user
can interact with
 Shows your skills in DRY standards conformant CSS

4. Each page must contain suitable and appropriate HTML for the following:

Level 4 Asia Pacific Institute of Information Technology 2023

COMP40004 - WDOS Page 3 of 7

 Semantic HTML
 <header>, <main>, <footer> tags
 A navigation section with <nav> tags and appropriate links
 References of content as comments in the footer area
 Semantic tags for elements, sectioning, grouping, text and media

5. The Home page must contain the following:

 A brief introduction about the Hospital & services they offer
 A suitable responsive main image
 Three sub-sections(with section tags), each having
o A suitable image
o At least two paragraphs of applicable content
o Appropriate headings
 All the following items are somewhere on the page
o A bullet point list of relevant content
o A numbered list of relevant content
o HTML comments for use by developers, which are not displayed on the
page

6. About us page must contain the following:

 Suitable content about different branches of the Hospital (each branch needs to
have a name, a map, images and a description).
 A summary table showing relevant details for the hospital.
 The table must have (you can decide on the appropriate content for the table)
o appropriate headings
o at least three columns and at least three rows
o a table footer

7. Services page will contain the following:

 Brief introduction about the available services.
 Images of services arranged via a Flexbox
 Link to the patient registration page

8. Doctors Page will contain the following:

 Descriptions of Doctors who work at this hospital

Level 4 Asia Pacific Institute of Information Technology 2023

COMP40004 - WDOS Page 4 of 7

 Pictures of Doctors arranged using a grid

9. Consulting reservation Page

 A form designed to reserve a doctor for consultation
 Form should showcase all necessary fields and components.

10. Pharmacy page

 A form designed to buy medicine from hospital pharmacy
 Form should have options to select which medicine customer wants.

Tasks

You will need to submit the following

A PDF documents
Your project folder
A. Design your web application showing low-fidelity wireframes for all your pages in a
desktop and mobile layout
B. Build your web application as per the specifications shown above
C. PDF document should contain the following
 A description states what you learned from this project, any challenges you
faced, and how you overcame them.
 Your wireframes for both desktop and mobile versions

Marking Criteria – Assignment 2

Task Marks
Report
 Suitable wireframes for both Desktop and mobile versions 10
Application 30
 Compliance to requirements 5-11

Application – Progressive Web Application 10

 your conformance to the specification requirements 1-2
 your implementation of good quality, well-structured code
Application – Site CSS 15
 your conformance to the specification requirements 3
 your implementation of good quality code

Level 4 Asia Pacific Institute of Information Technology 2023

COMP40004 - WDOS Page 5 of 7

Task Marks
 your UI / UX skills for usability and design
Application - Overall discretionary mark 10
 your use of innovative approaches to the problem
 your demonstration of high-level coding skills
 robustness of the final web application
 your use of Semantic web technologies for SEO support
Application demonstration and Q/A 25
TOTAL 100
Note: 30% is taken from the total as the final mark

Assignment 3 (Sem 2)
11. The order page provides an ECMA Script application for buying medicine from the
website
 the interface should have suitable form elements to allow the customers to get
the medicine they want:
o The webpage should have different sections such as:
 Analgesics (6 or more)
 Antibiotics (6 or more)
 Antidepressants (6 or more)
 Antihistamines (4 or more)
 Antihypertensives (6 or more)

 The items are added as quantities

 There should be a table showing current items that were added and their price.
The table should show the total price of all the items that were added.
 When the buy now button is clicked:
o the user is navigated to a new page where they will be shown their order
and will be asked to enter their personal details, delivery details and
payment information.
 When the " Pay" button is clicked:
o If all the fields are entered correctly a message is displayed thanking the
user for their purchase. The message should include the delivery date.
12. The order page should provide advanced features to:
 save an order as a favourite
o 2 buttons need to be added to the interface
o when the "add to favourites" button is clicked, the order should be saved in
local storage, overwriting any existing favourite
o when “Apply favourites” button is clicked. The form and the table should
be filled with favourite items.

Level 4 Asia Pacific Institute of Information Technology 2023

COMP40004 - WDOS Page 6 of 7

13. The web application needs to be tested and proper tests cases should be generated for
the following tests,
 HTML validity
 CSS validity
 Accessibility using WAVE
 Lighthouse testing
 Responsiveness on different devices and browsers
 Functional tests for your product reservation application

Tasks

You will need to hand in the following

A copy of PDF document containing activity diagrams and test results
A link to your web application online

A Design your web application showing activity diagrams for the application
B Build your purchase and donate page as per the specification shown above
C Test your web application and create a test table showing your tests for the following
 HTML validity
 CSS validity
 Accessibility using WAVE
 Lighthouse testing
 Responsiveness on different devices and browsers
 Tests for your supermarket ordering application
D. Create a word document report and convert it to PDF which shows the following
 Your designs in activity diagrams
 Your test results in the form of a test table
 A link to your web application which we will use to assess your application
 Conclusion
Marking Criteria

Task Marks
Report - Activity diagrams 10
 your activity diagrams for the order page
Application – basic ticket purchase and donation 15

Level 4 Asia Pacific Institute of Information Technology 2023

COMP40004 - WDOS Page 7 of 7

Task Marks
 your conformance to the specification requirements 11-12
 your implementation of good quality, well-structured code
 the efficiency of the code

Application – advanced ordering features 10

 your conformance to the specification requirements 13
 your implementation of good quality, well-structured code
 the efficiency of the code

Report / Application – Testing 15

 the thoroughness of your testing table
 the results from tests
 HTML validity, CSS validity, Accessibility using WAVE, Lighthouse
testing
 Responsiveness on different devices and browsers, Tests for your ticket
reservation application
Report / Application - Overall discretionary mark 10
 your consideration of good practices
 your use of innovative approaches to the problem
 your demonstration of high-level coding skills
 robustness of the final web application
TOTAL 60

Note: 30% is taken from the total as the final mark

Marks allocated as follows:
0 = no evidence of meeting criteria
1-3 = poor attempt at meeting criteria
4-5 = some attempt at meeting criteria
6-7 = good attempt at meeting criteria
8-10 = excellent attempt at meeting criteria