WP2250 - Web Development Assignment on Russel Street Medical

Overview

You have been contacted by a small medical clinic called “Russel Street Medical” to develop a

website with 2 pages. The website should be hosted on Coreteaching from the url below: https://titan.csit.rmit.edu.au/~yoursid/wp/a1/ (where “yoursid” is your student number).

Your wp directory should be protected with a .htaccess file, a template can be found here: https://titan.csit.rmit.edu.au/~e54061/secure/htaccess

Each of your webpages should have separate and visually distinct header, navigation (nav), main and footer elements.

• The header area should contain a "text-less" logo and have text that is the business name
• The navigation links should be button like and styled with contextual selectors using the LoVe HAte F rule. This should come below the header and stick to the top of the page when the user scrolls down the
• The main element should contain the main content for each page, details can be found in later
• The footer should contain contact information for the clinic, along with your full name and student

Their brand colours are primarily yellow and blue (shown below) and your manager has asked you to expand the palette and develop different shades of these two hues, for example off white and off black versions. You can introduce other hues but they should make sense, be used in moderation and for a purpose, and not detract from the principal brand hues.

We’ll write customized paper for you.
Get Upto 30% OFF on your Order!

Order Now Whatsapp Now

Home Page

The home page navigation should take the user to the internal sections listed above with smooth scrolling AND to an external booking page.

Main Element Sections

Within the main element, the home page should have three subsections:

• An "About Us" section that describes the practice and lists their opening times (Mon - Sun 9am - 6pm). There should be at least one image of a sample reception area or external
• A "Who we are" section that contains profiles of three staff members. There should be an image and brief description of each staff member and their
• A "Service Area"" section that invites new patients to register with them in person and reminds current patients that they can use the online booking system to book vaccinations and blood

About Us Text

Russel Street Medical opened in 2020 and is located in Melbourne’s CBD at 340 Russel Street Melbourne, just opposite The Old Melbourne Jail and within walking distance of Melbourne Central Train Station.

We strive to help all of our patients with a focus on preventative health care, a view to managing chronic health conditions with a holistic approach, and with access to a wide range of specialist care providers when needed.

Under partnerships, we are able to offer RMIT students & staff discounted rates.

Staff Profiles Text

Three example staff profiles & images are supplied, and attribution image links should be cited in the comments area:

Dr. Abigale Laurentis

https://www.pexels.com/photo/a-woman-in-white-long-sleeve-shirt-holding-a-red-stethoscope- 9062164/

Abigale Laurentis completed her medical degree at the University of Queensland in 2013, where she also obtained a Bachelor of Science in Biomedicine.

Over her training and practice, Abigale has worked in a variety of clinical settings including specialities at Latrobe Health.

Dr. Stephen Hill

https://www.pexels.com/photo/a-man-wearing-a-stethoscope-on-his-neck-6234600/

Stephen Hill graduated from Auckland University in New Zealand in 2014, and obtained his Fellowship from the Royal Australian College of General Practitioners in 2017.

Over his training and practice, Stephen worked in internal medicine at the Royal Children's Hospital Melbourne before transitioning to General Practice.

Ms Kiyoko Tsu

https://www.pexels.com/photo/female-medical-practitioner-wearing-laboratory-coat-8442283/

Kiyoko Tsu completed her Bachelor of Nursing at the Yong Loo Lin School of Medicine in Singapore in 2019.

She is an accredited Nurse Immuniser and has worked in various hospitals within metropolitan Melbourne.

Booking Page

The booking page navigation should contain just one link back to the main page, styled in the same way as the home page navigation links.

Main Element Sections

Within the main element on the booking page, there should be a booking form which has:

• A text field which allows a patient to enter their patient id. This field should convert content to uppercase as the user types and should match a
• A date field which allows a patient to select a date that they would like to come in to receive a vaccination or blood The date field should not allow dates in the past to be selected.
• Stylised checkbox fields in the form of a “pill group” (see below for an example) which allow the patient to select between one, two or all three time blocks to notify the practice when they are available for an
• A dropdown box which allows a patient to select a reason for their appointment. Based on the reason some pre-appointment information should be shown to the user in an advice
• A submit button that allows the user to submit the form "to itself" using the POST

Pill Group Example

Form Details

The booking page should use a combination of labels and form fields that form a one column layout in smaller screens and expand to a two column layout in larger screens. All fields should be required fields, ie submission should be blocked if any fields are left blank.

The 2 column layout is shown below, labels on the left and fields on the right:

Patient ID Validation Details

To avoid privacy issues, existing patients are provided with a patient id which they use to log in with. The format is two capital letters, based on the patient’s first and last name, followed by 1 or more digits, and then one final capital letter, eg:

• HD1A
• TR11B
• SL998Z
• KM999A
• PA814235W

You must convert the input to uppercase as the user types. There are two levels of client side validation:

1. Check that the pattern of letters and numbers is observed,
2. Check that the final character is correct according to a checksum

The final character is found based on the modulo remainder of the sum of the digits, eg: HD1A:

1 = 1, 1 % 26 = 1 : This maps to the letter 'A' TR11B:

1 + 1 = 2, 2 % 26 = 2 : This maps to the letter 'B' SL998Z:

9 + 9 + 8 = 26, 26 % 26 = 0 : This maps to the letter 'Z' KM999A:

9 + 9 + 9 = 27, 27 % 26 = 1 : This maps to the letter 'A' PA814235:

8 + 1 + 4 + 2 + 3 + 5 = 23, 23 % 26 = 23 : This maps to the letter 'W'

Marking Rubric [35 marks]

Webservice [5 marks]

1. Website is hosted from the correct
2. All files correct name and
3. Directory is protected with a .htaccess
4. Indentation is decent, makes
5. Valid HTML (test your code here: https://validator.w3.org/nu/#textarea).

HTML Basics [5 marks]

1. Modern semantic elements used: header nav main
2. Main elements used: article, section, figure,
3. Headings hierarchy and paragraphs text sizing make
4. Wrapping elements minimised (div / span not overused).
5. Image alt tags have an appropriate description of the

Page Content [5 marks]

1. Header logo (no text) and clinic business name (text)
2. About Us and staff profiles area have a good balance of images &
3. Layout and design of About Us and staff profiles area are completed to a very high
4. Each section is visually distinct, do not look “anaemic”.
5. Paragraph text is not

CSS Basics [5 marks]

1. Good contrast overall, supplied palette used and expanded
2. Navlinks are button like with full LoVe HAte F
3. Navigation bar comes below the header area and sticks to the top of the screen when the user scrolls, internal link scroll behaviour is
4. Padding and margin ensure content is not up against sides of
5. Contextual and pseudo styling used in preference to id and class

CSS Advanced [5 marks]

1. Use of shadows, translucency, gradients, background images to good
2. Transitions, transforms, and/or animations are
3. + Overall look and feel works well with all styles listed in combination.
4. CSS grid layout and media queries create good layouts across a range of screen sizes.
5. + As above, but the outcomes are exemplary.

Form construction, design, and Javascript tasks [10 marks]

1. Form uses post method to submit to itself, at least one field is sent.
2. + All fields are correct name and type, none can be blank or invalid.
3. Patient id is converted to uppercase as the user
4. Patient id passes basic check (letters and numbers).
5. Patient id advanced checksum check works, but there are
6. + Patient id advanced check works perfectly.
7. Date field prevents selections from the
8. Checkbox labels group is styled as per instructions and with no gaps between
9. Checkbox labels that are checked have a very distinguishable
10. Appointment Reason drop down field updates patient advice area