共计 4806 个字符，预计需要花费 13 分钟才能阅读完成。
PROG2002 Assignment 1
Weight: 30% of your final mark
Due: Week 3 (16 May 2022, Mondays, 11.59pm AEST)
Please note that this is a group assignment (2 students per group).
Note: Each student must submit their work to the Grade system individually, and the
answer should not be exactly the same with your group partner. The idea of group is to
provide more opportunity to discuss the assignment with your group partner. Please
introduce yourself to the Discussion Board (in the Assessment thread) to find your partner.
Specifications
Your task is to develop a dynamic website with a minimum of three pages for a real estate
company as follows:
? Page one is a home page
? Page two contains a form to allow a user to express interest in a property
? Page three contains a contact form
The website should also contain an appropriate menu on all pages so users can navigate
around the website.
Getting Help
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.
Lecturer Tutors
Online
Forums
Relatives
Students
outside unit
Hired coders
Classmates
Private
Tutors
Other
2
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.
Part 1 – Home page
The homepage should be a simple page that is suitable for a real estate company.
Whenever a user goes to the home page, the user should be asked whether they adhere to
the companies COVID policies via a JavaScript confirmation.
If the user clicks the OK button, the home page should be displayed.
If the user clicks the cancel button, a JavaScript alert should display a message telling the
user they cannot visit any of the properties in person unless they adhere to the company’s
COVID policies.
Part 2 – Expression of interest form
The second page should contain a form to capture potential buyers’ expression of interest
following a property inspection. The form should contain the following fields:
? Name
? Phone number
? Address of the property the user is interested in
? The price that the user is offering on the property
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 fields must be filled out
? The phone number field should only contain numbers
? The price that the user is offering on the property must not be negative
3
If the form validation is not successful, an alert should inform the user what field has an error
and what the error is.
If the form validation is successful an alert should inform the user that the form has been
submitted. When this happens, you should reset all fields in the form.
Additionally, you must use at least three of the following events in your form: Onblur,
Onchange, Onsubmit, Onfocus and Onreset.
Part 3 – Contact form
The contact form page must contain a form that contains the following fields:
? Name
? Email
? The message that the user wants to send
When the form is submitted, all fields must be checked to make sure they have been filled
out.
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.
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
shortly”
In the above message Name should be replaced by the user’s name from the form.
Part 4 – Contact form continued
Most forms on websites will usually have some sort of test to confirm that the user is a human
and not a bot.
Update the contact form that you created in Part 3. Add a field to the form that asks the user
for the answer to a simple maths problem. The form should only be submitted if the user
provides the successful answer to the maths problem.
For example you may ask the user what 3 + 4 equals. The form will only be successfully
submitted if the user provides 7 as the answer.
4
If the user provides the incorrect answer to the maths problem, you should display a bold red
error message to the user on the page by manipulating the DOM. The message should be
diplayed in the same location on the page as the form validation error message from Part 3.
If the user provides the correct answer to the maths problem, then the form should be
submitted and the user should receive the bold green success message from part 3.
Once part 4 is complete the user should receive an error message if:
? The form validation fails i.e. not all fields have been filled out OR
? The user provides an incorrect answer to the maths problem
Once part 4 is complete the user should receive the success message if:
? The form validation passes i.e. all fields have been filled out AND
? The user provides the correct answer to the maths problem
IMPORTANT: Please note that the same maths problem can not be displayed every time the
page is loaded. You must dynamically build the maths problem each time the form is displayed
so that it is always unique. You will be provided with some hints on how to do this in the
workshop.
