PROG2002 WEB DEVELOPMENT II Assessment 1: Client-side of website
PROG2002 Assessment 1
PROG2002 WEB DEVELOPMENT II
Summary
Title Assessment 1 – Client -side of website Type Group assessment but individual submission (read the information below) Due Date Monday 11 Sep 11:59 pm AEST (Week 3) Length Refer to the assessment details below Weighting 30% Academic Integrity Please read carefully the Academic Integrity section below Submission One zip file containing all HTML, CSS, and JavaScript files is submitted to Blackboard (not SCU cPanel ). Unit Learning Outcomes This assessment task maps to the following ULOs : • ULO1: understand and apply client -side and server -side web development technologies . • ULO2: demonstrate the ability to work effectively and coorperatively in a web development team.
Rationale
This section describe s the purpose of the assessment task (the ‘why’).
This assessment aims to develop a client -site website using JavaScript , DOM , event s, and Web storage s to make the website more d ynamic. The assessment will be further improved in Assessment 2 by incorporating the admin -site website .
This assessment also allows students to work in a team (max of 2 students ) in order to demonstrate the ability to work effe ctively and coo peratively in a web development team.
Task Description
This section provide s a brief description of the assessment task (the ‘what’) .
Your task is to develop a dynamic web for a hospital with a minimum of three pages as follows: • Home page (i.e., index.html) is a home page containing the hospital ’s general information and a list of available doctors . • Inquiry page (i.e., inquiry .html) contains a form to allow visitors /patients to send their inquir ies to to the hospital . • Make an Appointment page (i.e., makeanappointment .html) contains a form to allow visitors/ patients to book an appointment with their preferred doctor s. The website does not have any database yet ; hence the list of available doctors should be stored in a Java Script array . The website should contain an appropriate menu on all pages so users can navigate around the website.
• The assessment must use using JavaS cript , DOM, events and Web storages only (described in Module 1) . Other than these , the submission is not acceptable . • Paying for someone to write code for you or using GenAI to write your assessment will be considered academic misconduct.
NOTE: This is a group assignment ( max of 2 students per group ), but each student must submit their work to the Blackboard individually, and the answer should not be exactly the same as your group partner. The idea of the group is to provide more opportunit ies to discuss the assignment with your group partner. Please introduce yourself to the Discussion Board (in the Assessment thread) to find your partner. This assignment is to be completed individually. It is the opportunity to gain an understanding of the concepts of building a dynamic website. It is important that you master these concepts yourself. You are permitted to work from the examples in the study guide or textbook but you must acknowledge assistance from other textbooks or classmates. In particular, you must not use online material or help from others, as this would prevent you from mastering these concepts. Who can you get help from? Use this diagram to determine from whom you may seek help with your program.
Encouraged Attribution Required Ask tutor Not acceptable
Please note that if your marker has any suspicion that you had help with your code or that your work is not your own you will be asked to come to a meeting with your marker to explain your code. Any student who is unable to explain their code will be submitted for academic misconduct.
Lecturer TutorsOnline Forums RelativesStudents outside unitHired coders ClassmatesPrivate TutorsOther
Task Instructions
This section provide s step -by-step task instructions (the ‘how’).
Part 1 – Home page
The home page should have the requirements as follows: • General information about the hospital, such as services offered, current health promotions, address, contact info, and emergency hotline . • A list of available doctor s (at least 10 doctors ). Each doctor has the following information: o ID (a unique numeric doctor identifier) o Name o Medical degree (e.g., Dr.) o Qualification s (e.g., MD (UKM), FNHAM, FAsCC, CCDS, CEPS ) o Specialty (e.g. , cardiology, dermatology, general surgery, neurology, orthodontist ) • A JavaScript file (e.g. , script.js ) to store the available doctors in array (s). You need to include the JavaScript file on the home page and display the doctors on the page . If you do not use an array to store and display the doctors , you will not get the full marks . The page has a menu consisting the following links to allow users to navigate between pages. The menu should be shown on all pages as well. • Home : a link to the Home page (index.html) • Inquiry : a link to the Inquiry page ( inquiry.html) • Make an appointment : a link to the Make an Appointment page (makeanappointment .html)
Part 2 – Inquiry page
The inquiry page contains a form to capture a visitor/patients’ request and send the request to the hospital . The form must contain the following fields: • Name - required • Email - required • Contact number - optional • Type of inquiry ( i.e, general inquiry, estimated cost, contact doctor) - required • Message - required The form has a button to send all fields’ values inputted by the user. When the form is submitted, all fields in the form should be validated on the client side using JavaScript according to the following rules: • All required fields must be filled out . • The email must be in a valid format . • The contact number should only contain numbers . • The message cannot be longer than 500 characters .
If the form validation is not successful, a bold red error message should be displayed to the user on the page by manipulating the DOM. The message should indicate which fields that have the issues. If the form validation is successful, a bold green success message should be displayed to the user on the page by manipulating the DOM. The message should say: “Dear [Name ], thank you for your inquiry. One of our team members will be in touch with you soon. ” In the above message , [Name ] should be replaced by the user’s name from the form . Additionally, you must use at least two of the following events in your form: Onblur, Onchange, Onsubmit, Onfocus , and Onreset .
Part 3 – Home page (continued)
This part aims to improve the Home page (Part 1) , so it allows users to select a doctor to make an appointment with the preferred doctor. The Home page should have the following additional requirements as follows: • For each doctor displayed on the page, insert a link (i.e. , a hyperlink or an image with a link) to make an appointment with the doctor . Once it is clicked , the user will be redirected to the Make an Appointment page. • Users can only book a doctor . If the user has selected a doctor previously, then the selected doctor will be replaced with the newly selected doctor. • Use a Web storage ( sessionStorage or localStorage) to store the selected doctor .
Part 4 – Make an Appointment page
The page contains a booking form that users need to fill in , as shown below .
• Specialty : contains the list of doctor special ties. • Doctor : contains the list of doctors based on the selected specialty . The data will be changed every time users select another specialty. • Selected date : the selected booking date . May use element (see https://www.w3schools.com/tags/att_input_type_date.asp ). • Preferred time : the selected time . Has 2 options (AM , PM). • Patient’s detail s : name and email (required fields). The page should select the selected doctor based on the stored information in Web stora ge if users have selected a doctor previously (refer to Part 3). • Every time the page is refreshed, it must select the selected doctor based on information stored in Web Storage. • Every time users change the doctor selection, the selected doc tor information stored in Web storage will be updated accordingly . The page allows user s to change the specialty selection . • If users select another specialty, the list of doc tors will be updated according to the selected specialty. • In the JavaScript file (e.g. , script.js ), create a function named updateDoctorLis t with a specialty parameter . The function aims to empty the list of doctors and insert all do ctors in the selected specialty parameter . o To add a new item: https://www.w3schools.com/jsref/met_select_add.asp o To remove an item: https://www.w3schools.com/jsref/met_select_remove.asp • Call the method every time a new specialty is selected . A submit button is placed at the bottom to submit the appointment with the following requirements. • When the button is clicked, the user should be asked whether they confirm to perform this action via a JavaScript confirmation . If the user clicks OK, then a validation will be performed to check if all required information has been provided. • If the validation is successful, then display an alert message saying : “ Your appointment booking is successful. A confirmation email will be sent to your email shortly .”, and then the selected doctor information will be cleared from Web storage . • If it is unsuccessful, display an alert saying “ Some of the required information is missing. Complete all required information ” You need to include the JavaScript file in all pages so you can display the details of selected doctors.
Resources
In this section, provide links to resources required to complete the assessment task .
Use the following resources to support you when working on this assessment. • Unit Module 1 on Blackboard • Additional online resource s: o HTML : https://www.w3schools.com/html/ o JavaScript https://www.w3schools.com/js/default.asp o Array in JavaScrip t: https://www.w3schools.com/js/js_arrays.asp
Referencing Style Resource NA
Task Submission In this section, provide submission instructions.
One zip file containing all HTML, CSS, and JavaScript files is submitted to Blackboard (not SCU cPanel) .
Academic Integrity At Southern Cross University , academic integrity means behaving with the values of honesty, fairness, trustworthiness, courage, responsibility and respect in relation to academic work. The Southern Cross University Academic Integrity Framework aims to develop a holistic, systematic and consistent approach to addressing academic integrity across the entire University. For more information , see: SCU Academic Integrity Framework
NOTE : Academic Integrity breaches include unacceptable use of generative artificial intelligence (GenAI) tools , the use of GenAI has not been appropriately acknowledged or is beyond the acceptable limit as defined in the Assessment , poor referencing, not identifying direct quotations correctly, close paraphrasing, plagiarism, recycling, misrepresentation, collusion, cheating, contract cheating, fabricating information.
At SCU the use of GenAI tools is acceptable, unless it is beyond the acceptable limit as defined in the Assessment Item by the Unit Assessor . GenAI May Not be Used Generative Artificial Intelligence (GenAI) tools, such as ChatGPT, may not be used for this Assessment Task. You are required to demonstrate if you have developed the unit’s skills and knowledge without the support of GenAI . If you use GenAI tools in your assessment task, it may result in an academic integrity breach against you as described in the Student Academic and Non -Academic Misconduct Rules, Section 3 .
Special Consideration Please refer to the Special Consideration section of Policy . https://policies.scu.edu.au/document/view -current.php?id=140
Late Submissions & Penalties Please refer to the Late Submission & Penalties section of Policy . https://policies.scu.edu.au/view.current.php?id=00255
Grades & Feedback Assessments that have been submitted by the due date will receive a n SCU grade. Grades and feedback will be posted to the ‘ Grades and Feedback ’ section on the Blackboard unit site. Please allow 7 days for marks to be posted.
Assessment Rubric Marking criteria for this assessment can be found on the Assessment page .
Description of SCU Grades High Distinction: The student’s performance, in addition to satisfying all of the basic learning requirements, demonstrates distinctive insight and ability in researching, analysing and applying relevant skills and concepts, and shows exceptional ability to synthesise, inte grate and evaluate knowledge. The student’s performance could be described as outstanding in relation to the learning requirements specified. Distinction: The student’s performance, in addition to satisfying all of the basic learning requirements, demonstrates distinctive insight and ability in researching, analysing and applying relevant skills and concepts, and shows a well -developed ability to synthesise, integrate and evaluate knowledge. The student’s performance could be described as distinguished in relation to the learning requirements specified. Credit: The student’s performance, in addition to satisfying all of the basic learning requirements specified, demonstrates insight and ability in researching, analysing and applying relevant skills and concepts. The student’s performance could be described as com petent in relation to the learning requirements specified. Pass: The student’s performance satisfies all of the basic learning requirements specified and provides a sound basis for proceeding to higher -level studies in the subject area. The student’s performance could be described as satisfactory in relation to the lear ning requirements specified. Fail: The student’s performance fails to satisfy the learning requirements specified.
