RMIT Classification: Trusted
WP2250 Assignment 1.
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
• Thenavigationlinksshouldbebuttonlikeandstyledwithcontextualselectorsusingthe
LoVe HAte F rule. This should come below the header and stick to the top of the page when
the user scrolls down the page.
• The main element should contain the main content for each page, details can be found in
later sections.
• The footer should contain contact information for the clinic, along with your full name and
student id.
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.
hsl(200, 100%, 50%) #00AAFF
hsl(50, 100%, 50%) #FFD400
Page 1 of 8
RMIT Classification: Trusted
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 location.
• 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 position.
• 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 tests.
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.
Standard $85.00 $60.50 $39.75 Long or Complex $130.00 $91.00 $76.95
Consultation
Normal Fee
RMIT Member Fee
Medicare Rebate
Page 2 of 8
RMIT Classification: Trusted
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/
AbigaleLaurentiscompletedhermedicaldegreeattheUniversityofQueenslandin2013, whereshe 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.
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 Singapor e in 2019.
She is an accredited Nurse Immuniser and has worked in various hospitals within metropolitan Melbourne.
Page 3 of 8
RMIT Classification: Trusted
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 pattern.
• A date field which allows a patient to select a date that they would like to come in to receive a vaccination or blood tests. 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 appointment.
• 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
area.
• A submit button that allows the user to submit the form "to itself" using the POST method.
Pill Group Example
9am - 12pm 3pm - 6pm
12pm - 3pm
Page 4 of 8
RMIT Classification: Trusted
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 Name=”pid” Date Name=”date”
Text field (rules explained in next section) Date Field (minimum date is “today”)
Time Name=”time[]”
3 x checkboxes & labels in a pill group, times are:
[ 9am –12pm ] [ 12pm – 3pm ] [ 3pm – 6pm ]
The checkboxes should be hidden and the associated label style should be determined by whether they follow an unchecked checkbox (default state) or a checked checkbox (selected state)
Appointment Reason Name=”reason”
Dropdown Field with 5 options:
Please Select (with empty / blank value) Childhood Vaccination Shots
Influenza Shot
Covid Booster Shot
Blood Test
{{ blank area }}
An area for advice to be given depending on the option selected above.
Childhood vaccines: A disclaimer that multiple vaccines are normally administered in combination and may cause the child to be sluggish or feverous for 24 – 48 hours afterwards.
Influenza: The best time to get vaccinated is in April and May each year for optimal protection over the winter months.
Covid Booster Shot: Advice that everyone should arrange to have their third shot as soon as possible and adults over the age of 30 should have their fourth shot to protect against new variant strains.
Blood test: That some tests require some fasting ahead of time and that a staff member will advise them on this prior to the appointment.
{{ blank area }}
Submit Button
Page 5 of 8
RMIT Classification: Trusted
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 rule.
The final character is found based on the modulo remainder of the sum of the digits, eg: HD1A:
1=1, 1%26 =1:Thismapstotheletter'A'
TR11B:
1 + 1 = 2, 2 % 26 = 2 : This maps to the letter 'B' SL998Z:
9+9+8=26, 26%26=0:Thismapstotheletter'Z' KM999A:
9+9+9=27, 27%26=1:Thismapstotheletter'A'
PA814235:
8 + 1 + 4 + 2 + 3 + 5 = 23, 23 % 26 = 23 : This maps to the letter 'W'
Page 6 of 8
RMIT Classification: Trusted
Marking Rubric [35 marks]
Webservice [5 marks]
1. Website is hosted from the correct url.
2. All files correct name and place.
3. Directory is protected with a .htaccess file.
4. Indentation is decent, makes sense.
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 footer.
2. Main elements used: article, section, figure, aside.
3. Headings hierarchy and paragraphs text sizing make sense.
4. Wrapping elements minimised (div / span not overused).
5. Image alt tags have an appropriate description of the image.
Page Content [5 marks]
1. Header logo (no text) and clinic business name (text) present.
2. About Us and staff profiles area have a good balance of images & text.
3. Layout and design of About Us and staff profiles area are completed to a very high standard.
4. Each section is visually distinct, do not look “anaemic”.
5. Paragraph text is not centred.
Page 7 of 8
CSS Basics [5 marks]
RMIT Classification: Trusted
1. Good contrast overall, supplied palette used and expanded on.
2. Navlinks are button like with full LoVe HAte F styling.
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 smooth.
4. Padding and margin ensure content is not up against sides of containers.
5. Contextual and pseudo styling used in preference to id and class styling.
CSS Advanced [5 marks]
1. Use of shadows, translucency, gradients, background images to good effect.
2. Transitions, transforms, and/or animations are present.
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. 2. 3. 4. 5. 6. 7. 8. 9. 10.
Form uses post method to submit to itself, at least one field is sent. + All fields are correct name and type, none can be blank or invalid. Patient id is converted to uppercase as the user types.
Patient id passes basic check (letters and numbers).
Patient id advanced checksum check works, but there are issues.
+ Patient id advanced check works perfectly.
Date field prevents selections from the past.
Checkbox labels group is styled as per instructions and with no gaps between labels. Checkbox labels that are checked have a very distinguishable style. AppointmentReasondropdownfieldupdatespatientadviceareacorrectly.