Page 1 of 7

RMIT Classification: Trusted
Web Programming
COSC2413 (Semester 2, 2021)
Assignment 1

Assessment
Type

To be attempted individually.

Submit online via Canvas→Assignments→Assignment 1.

Marks awarded for meeting requirements as closely as possible. Clarifications/updates may be
made via announcements/relevant discussion forums.

Due Date Week 6, Friday 27th August 2021, 5:00 pm (note the time)
Marks 40
1. Overview (you must read this first)
You are to attempt this assignment individually, no group work is allowed.
You will use HTML5, CSS & JavaScript to author the client-side part of a website. The server-side implementation of the
website will be completed in assignment 2.
The tasks are divided into four parts: PA (Pass), CR (Credit), DI (Distinction) & HD (High Distinction).
The DI & HD section tasks will require self-research, you will not get straight answers in the course
material. While we are happy to assist you on those tasks, most of the work and research must be
done by you. This is done on purpose to prepare for you future work and rigours of the IT industry.
Also, in order to achieve DI and HD, you must show your weekly progress to the instructors of the
course. More details on this will be released later.
If you find a specification open to interpretation, post a query identifying the specification in the corresponding discussion
board for assignment 1. Software development in real life does not come with a definitive roadmap and flowcharts
complete with instructions. More often than so, it is the job of the developer to clarify requirements from the client. For
the purpose of this assignment and course, the lecturer is considered as the client.
All of us have been affected by the unfortunate COVID-19 scenario and its aftermath. It is often hard to concentrate
and study; but as a student enrolled in this course, it is your responsibility to regularly attend lectorial, lab and
consultation session(s).
? Bring your questions to online discussion board, consultation sessions
? Watch the online recordings on a regular basis if you cannot attend the live sessions.
? Do NOT start the work on assignment at the last minute.
? Do NOT ask for last minute extensions, these are often rejected. Extensions can only be granted for personal
and medical reasons, provided you can supply some evidence.
2. Learning Outcomes
This assessment relates to all of the learning outcomes of the course which are:
? understand modern languages, constructs used on the Web (such as HTML5, Advanced CSS, JavaScript)
? explain the functions of clients and servers on the Web, and describe the strengths and weaknesses of the
client-server internet approaches to web design and implementation
? program, access, and manipulate data through the adoption of accepted standards, mark-up languages, client-
side programming, and server-side programming
? design and implement an interactive web site(s) with regard to issues of usability, accessibility and
internationalisation


Page 2 of 7

RMIT Classification: Trusted
3. Assessment details
The COVID-19 pandemic has made a massive impact on our lives. Many of us are reeling through emotional aftermath
of the lockdowns and challenges posed by the pandemic. Public health actions, such as social distancing, are necessary
to reduce the spread of COVID-19, but they can make us feel isolated and lonely and can increase stress and anxiety.
According to a report published by Australian Institite of Health and Welfare (Australian government)- stress, confusion
and anger are commonplace as a result of the pandemic and, while many people may not experience any long-term
concerns, COVID-19 has the potential to contribute to or exacerbate long-term mental challanges including anxiety and
depression.

According to research done by a local council in Melbourne, wellness industry has grown rapidly during the pandemic.
People are looking for ways to decompress, relax, and focus on mental wellbeing. In view of that the local council would
like to commence a digital wellness website known as LIFE (Living It Fully Everyday). The program on the website will
manage stress, and lead the user down the path of becoming a more mindful and productive individual. LIFE will
include ONLINE services as:
? Yoga || Meditation || Stretching || Healthy habits

Note: Weight training and gymming are not a part of this program!
Having decided to discuss the needs around this website, the committee at the council has realised that they totally
lack the necessary skills and in-house experience. However, after a series of acrimonious meetings they have decided to
engage a local contractor to design and build the LIFE website. You are that contractor!

Consequently, prudently and sensibly they have decided to start off slowly and gradually build the whole site in two
stages. The first stage will involve: HCI (Human Computer Interaction) analysis and construction of the client-side
components of the website. In order to avoid the cost blow-outs, care has to be taken from the start to meet user
demands and expectations. This includes the user interface design and how a user feels about interacting with your site
(hence HCI).

The following layout was suggested by the committee-


LIFE website must have home, service, COVID-19 resources (useful links- these can be sourvced from gorvernment
websites) , contact us and sitemap pages.

HEADER
NAVIGATION
BAR

MAIN CONTENT AREA
Logo/
Slogan
name +
FOOTER


Page 3 of 7

RMIT Classification: Trusted


4. Tasks
Note: in order to proceed to higher parts, you must complete all of the specifications in the lower part, you must not
cherry pick specifications from various parts. As an example, complete all of specifications in PA part before proceeding
to CR part and so on.
PA part [20 marks]

Create a single PDF document, call its HCI_Analysis.pdf. No other name and format (.txt,.doc, etc.) will be
accepted. You will get a ZERO for this part for changing the name and format. Answer the following (tasks a-c) :

a. (2 marks) Which links must be placed in the navigation bar? Justify your answer by providing examples. Be
realistic in your answer as you will have to program these features as a part of website creation. Your answer
should not exceed 1-2 page(s).

b. (2 marks) What kind of content should be placed in the main content area of the website to facilitate wellness
of clients? Justify your answer by providing examples. Be realistic in your answer as you will have to code these
features as a part of website creation. Your answer should not exceed 2-3 pages.

c. (2 marks) Suggest an alternative (to the one shown on page 2) layout for the website. You will need to draw a
well-labelled diagram of the new layout. Consider the features of HTML5 and CSS3 that might help in creation
of this layout. Analyse the layout considering the points such as: ease of use of the website, how user-friendly
the layout is? & is the layout easily editable or extended in future (this is important as clients change their
needs, requirements and thought process and website layout needs to be altered for future versions)? Your
answer should not exceed 1-2 page(s).

d. (2 marks) Suggest and explain four ways to make LIFE website accessible. Be realistic in your answer as you will
have to code these features as a part of website creation. Your answer should not exceed 1-2 page(s).


Using HTML5, CSS3 and JavaScript author the client-side website features. At this stage, you are to test the website for
Chrome browser only. You must always the HTML5 DTD for web pages:

You must host your website using the following URL scheme:
http://titan.csit.rmit.edu.au/~s1234567/wp/a1/index.html (where s1234567 is your student id and titan can also be
jupiter or saturn.


e. (4 marks) Create the layout suggested by you in task c with HTML5 and CSS. Use of HTML tables and readmade
online templates is not allowed.

f. (6 marks) Once the layout is created, you must think of some sensible website content. Use the following as a
guide:

Homepage for LIFE, call it as index.html. Do not add lorem ipsum- add meaningful content about wellness.

Services page- this page will detail all the activities/services listed on page 2 (be creative a google search will
give you some ideas). Do remember that all these activities are to be performed online. You will need video
components.

Contact us page- this page must have the address, email and enquiry form options. Some people may prefer to
call, some people may enquire via the enquiry form. The form must perform validation via HTML5. Form
queries must be submitted to email: LIFE@localcouncil.com

g. (2 marks) Add the COVID-19 resource(s) and appropriate information in the footer of the website.


Page 4 of 7

RMIT Classification: Trusted
CR part [8 marks]

h. (8 marks) In future the full range of services will be available to registered members only. Add a link to
registration page on the LIFE website.

Think carefully about the placement/location of this link. Should it be in header or navigation bar section?

Create a registration form using HTML5 and CSS, use of tables is not allowed.

Use JavaScript to perform client-side validation on the Registration form. None of the validation(s) are to be
performed via HTML5, you must write JavaScript code to perform validation. Use of jQuery is not allowed.

The business analyst comes up with the following details for registration form:


Field Type Values JavaScript Validation
required
Notes
First Name Textbox a compulsory field
Last Name Textbox a compulsory field
Email
Address
Textbox must be in proper email
format
a compulsory field;

Use a robust
regular
expression to
validate email
field
Confirm
Email
Textbox email user input from
previous field cannot be
copied, it must be typed
again
a compulsory field
Phone
Number
Textbox Must be in
+61 4xx xxx xxx
(Australian mobile
number) format
a compulsory field Use a robust
regular
expression to
validate phone
field
Age Range slider Must be 16 years and
above

Student
Status
Radio
button
Yes, No a compulsory field
Employment
Status
Radio
button
Yes, No a compulsory field

The form does not submit to a server-side script at this stage. It is only meant for client-side validation.












Note: for the following (DI and HD sections), you will need to do some research and thinkà



Page 5 of 7

RMIT Classification: Trusted
DI part [4 marks]

i. Add an annual membership fee calculator on the registration page. This will require extending registration
form (task h) without breaking any of its functionality. Please read the following business rules:

? Individual membership cost to access full range of services: $10 per month,
? If a particular member is between the age of 16-20 years, they get a discount of 10%
? A student gets 5% discount regardless of their age
? Unemployed status fetches a discount of 40%
All discounts are cumulative, for example a 16 year old student who is unemployed will get a 55% discount (ie
10% + 5% + 40% = 55%)

Devise an algorithm to incorporate above and then implement it using JavaScript. Explain the algorithm with
robust code commenting in the javascript.

Display the annual membership fee at the bottom of the registration form.




































HD partà



Page 6 of 7

RMIT Classification: Trusted
HD part [8 marks]
Create a personalised meal planner on the Healthy habits service page. You are only allowed to use HTML5, CSS and
pure JavaScript- use of jQuery or any external library is prohibited.
Here is one such implementation scenario:
Step 1: A user inputs/chooses- type of diet, calories intake and number of meals

Step 2: Meal plan is generated:

You will be marked on- inegneuity of the solution, user interface and creativity of the meal planner.
NOTE: the screenshots are a part of
suggestion, feel free to create your
own meal planners.
Simplistic solutions will receive low
marks. This is HD section, be
creative and think like a
programmer!



Page 7 of 7

RMIT Classification: Trusted
5. Submission
? Zip your PDF file, all website files and README.txt file and submit single zipped archive with .zip extension via
Canvas submission link for this assignment.
? README file must contain the hosted URL of your website.
? If the website is not functioning on hosted URL or it has not been hosted, you will be marked on your code and
in that case, you will only receive 50% of the allocated marks to the task. Make sure that your assignment can
run only with the code included in your zip file!
After the due date, you will have 5 business days to submit your assignment as a late submission. Late submissions will
incur a penalty of 10% per day. After these five days, Canvas will be closed, and you will lose ALL the assignment marks.
Assessment declaration:
When you submit work electronically, you agree to the assessment declaration:
http://www.rmit.edu.au/students/student-essentials/assessment-and-results/how-to-submit-your-assessments

6. Academic integrity and plagiarism (standard warning)
Academic integrity is about honest presentation of your academic work. It means acknowledging the work of others while
developing your own insights, knowledge and ideas. You should take extreme care that you have:
? Acknowledged words, data, diagrams, models, frameworks and/or ideas of others you have quoted (i.e. directly
copied), summarised, paraphrased, discussed or mentioned in your assessment through the appropriate
referencing methods,
? Provided a reference list of the publication details so your reader can locate the source if necessary. This includes
material taken from Internet sites.
If you do not acknowledge the sources of your material, you may be accused of plagiarism because you have passed off
the work and ideas of another person without appropriate referencing, as if they were your own.
RMIT University treats plagiarism as a very serious offence constituting misconduct. Plagiarism covers a variety of
inappropriate behaviours, including:
? Contract cheating- paying someone to do your work
? Failure to properly document a source
? Copyright material from the internet or databases
? Collusion between students
? Posting assignment tasks on technical forums (reddit, stack exchange, etc.) and asking for solution(s)
For further information on our policies and procedures, please refer to:
http://www.rmit.edu.au/students/student-essentials/assessment-and-results/academic-integrity

7. Marking Guidelines
The marks allocated have been added to each of the tasks. Please read rubrics for details.