A PowerPoint describing my CMPT100 project.

1. +
Project 4
Huixin Xu

2. +
Process of Creating the Form

3. The form isn’t that hard to create as I just based it on what a regular
registration form would look like.
Textboxes for input and radio buttons for meal choices were used.
I thought that this way it would be easy for the user to understand without
needing help from a guide.

4. Note that for some of the textboxes, I had varied the sizes, and others I
had limited the length (ie. the postal code and phone number)
I had also separated the form using tables.

5. I placed an “Add Member” button, which I will explain later in the JS section.
Also, I thought it would be kind of fun to display the cost in a scroll box like a
receipt. As you can see here, the white box will display the receipt with costs
listed individually and together when the “Calculate Cost” button is pressed.

6. +
Process of Creating the JS

7. After getting a basic form page
done, I moved on to planning
the JS.
On top of the page, you can
see the global variables used
in this JS code. You can see
that I used many. This is
because I had a maximum limit
of 20 members and each
member is defined with several
variables such as their
discount number, their meal
preference, etc.

8. The first function I tried to create
was the add additional textbox
option upon clicking the “Add
Member” button. This was very
tedious, as we have not learned
how to use innerHTML or the
<div> tag. What you see in front
of you is the functions for
generating each row upon clicking
the “Add Button”. Why is there so
much text? Well…because each
of the textboxes have different ids,
I had to rewrite the code for each
of the input boxes. The different
ids are needed so I can display
them later in the receipt.

9. Ah…but that’s not all I needed
to do.
Upon each time the user clicks
“Add Member”, I needed to
count the number of times the
button is clicked, up to 20 so
that only 20 unique boxes with
unique ids are generated. This
function shown here called
generateRow() will generate a
box with a different id
according to the number of
times the button had been
clicked.

10. Okay, so after the user creates the
correct number of textboxes
corresponding to how many
members are on their team, they
will then fill in information about
their name and their meal
preferences.
This function here called displaymemberarray() will collect information about each
member’s first and last names for later use from the text boxes. Why is the code
so long? Well, because if I just write in all 20 ids at once, if there are only 3
members for example, then 17 of those ids will be undefined. So again, I had to
rewrite the code according to the number of times the “Add Member” button was
clicked.

11. This code called
displaycostarray() will
calculate each team
member’s cost of the
registration for later use. It
takes into account taxes and
the meal discount.
Keep in mind the calculation
changes in different parts as
there are different rates
depending on the number of
athletes.
Also there are 2 sets of data,
one for male and one for
female, as each have their
own rates.

12. Team Size Cost Per Athlete Cost Per Athlete
(male) (female)
4 or fewer athletes $25.00 $26.00
5 athletes $20.00 $22.00
6-10 athletes $18.00 $16.00
More than 10 athletes $15.00 $14.00
The cost of the registration is shown above. It is the same as what is
mentioned in the Assignment4 rubric.
The coach cost is $20.00 and the assistant coach cost is $18.00
The discounts are the same as well, with a 10% coach discount and a
5% vegetarian discount.
The meal price $10.00 per person.

13. This function called
displaymealarray() will record the
user preference for meat or
vegetarian meal for the banquet
for later use.
The data is collected by first
checking if the user selected
meat or vegetarian, then collect
the value of the radio button (ie.
either meat or vegetarian) for
later use.

14. This function will calculate the
discount for each team member
and then totaling it. It does so by
first verifying if the member
ordered vegetarian. If the
member did, then his/her meal
will get a 10% discount or 1 dollar
off. If not, then the variable
remains at 0.

15. This is a follow-up of the previous
function that will keep count of
the number of members and only
calculate using the corresponding
ids.
Again, if I use the same function
for a team of 2 members and a
team of 10 members. The team
of 2 members will have undefined
ids that do not exist as those
textboxes that contain those ids
have not been created.

16. These functions will calculate the
coach discount and the coach’s
vegetarian discounts. They are
the same as calculating the team
members discounts, but much
easier because you do not need to
count with the “Add Member”
button: these textboxes’ ids will
always be present.

17. This is the function for
calculation of the subtotal.
Because this one does not
require the use of ids but only
the number of times the “Add
Member” button is pressed, I did
not have to repeat the same
code over and over. There still
are loops here however because
the prices for different numbers
of athletes and sexes is different.

18. These 2 functions shown here
will calculate the GST and the
total discount. The total
discount uses the total of the
team member discounts and
the coach discounts and adds
them together.
The GST function will just
multiply 6% to the subtotal.

19. This expanded function shown
here is used for calculating the
actual total.
It is calculated using the data
collected for the subtotal, the tax,
and the total discount.

20. This is where the all the data I
had collected truly shines. This
function called textinreceipt() will
record the contact information,
team profile, and of course, the
cost of the registration in XHTML
tags to be used for display when
called.

21. And this is the function for displaying the text in the receipt from the
previous function.
This function is linked to the “Calculate Cost” button on the form via
“onclick”. This means that when the “Calculate Cost” button is pressed,
the textinreceipt() string will be projected onto the scroll box like magic!


22. +
Finishing Touches
After writing the excruciatingly long JS code, it’s back to the form to make it
look nice and pretty.

23. I’ve created a very basic layout with nested tables to keep the page neat.
I also added a picture and a background image to add some flair to the
page.

24. This is the page the user will face when they access the project.html
webpage. It has a brief introduction followed by a register button on one
side, and the powerpoint on the other side.

25. +
Challenges and Solutions
 Biggest challenge:
 Increase the number of text boxes when “Add Member” is clicked
 This was very tough to do as we have not learned about the <div>
tag nor the innerHTML command. Therefore, I had to go online to
search for this and it took me 2 hours to learn how to get it right.
 In the end, I still could not figure out how to remove textboxes with
a “Remove Member” button
 However, I did manage to correctly code the add member
function.

26. +
Challenges and Solutions
 Javascript
 Because of the addition of additional textboxes, another challenge
was faced: that is, JS would not allow me to search for ids that do
not exist. This is a huge problem as I mentioned many times above.
This led to hours of repetitive coding in order to get what I wanted.
In case you haven’t noticed, I have more than 5000 lines of code!
 Also, I really wanted to do something with arrays. That was why I
had called 3 of my functions display___array(). However, I could
not really find anyway to use the arrays I made. Perhaps when I am
more familiar with JS I could find a way to use them to make my life
easier.

27. +
Challenges and Solutions
 Debugging
 There are several times when I forgot to add squiggly brackets
around my functions. This caused hours of painful debugging as
the error console in Firefox isn’t particularly helpful in pointing out
exactly what was wrong with my code.
 And of course with so much code, I had to really watch that I don’t
mess up parts of my function with errors such as forgetting the
quotation marks before and after + signs, forgetting to write part of
the tag, etc. When I really had trouble, however, I would use the
handy alert() function to find exactly where my code is wrong.
Again, the Firefox error console isn’t specific enough for me to rely
on it all the time.

28. +
Challenges and Solutions
 Kompozer
 Kompozer is very bad at keeping track of the JS code indents and
really messes up the code that I sometimes couldn’t read it when I
go over to the text editor. I had to reindent several times to make
my code look neater.
 Also Kompozer crashes frequently and sometimes will not do the
command you ask it to do. I overcame this by saving often and
correctly the source code manually.

29. +
How to Use Registration Form

30. On this part of the form, please enter your contact information as
directed by the text beside the textboxes.

31. On this part of the form, select the sport you wish to register in. Select
your gender (the default is male).
Type in the Coach and Assistant Coach’s names and select whether you
would prefer a meat or vegetarian meal for the banquet.
Lastly, type in the team member’s names and meal preferences. Keep
in mind that every time you press “Add Member” the data from the
previous team members disappears, so it is best that you type in the
data after adding all the textboxes you needed.

32. This large white box is a scroll box that will display the receipt to your
order when you click “Calculate Cost”.
It will help you confirm your order.

33. After confirming the cost of your order, you can either choose to “Submit
Form” or “Clear Data” and start over.
Click on “Back to front page” to go back to the introduction page.

34. +
The End!
Hopefully you had fun reading this!