California Coasters Tutorial


Day 5

The javaScript file with the answers

Key in the following line up in the head section of the html document. This is the file that contains the answers for the test. Resave the html file.
<script type="text/javaScript" src="c2.js"></script>

The box below contains the javaScript file, c2.js, that grades the test.


Day 6

Theme Park Information

In this section we will give the users information about parks in California and the roller coasters that are featured. One way to display this information is in a tabular form. We will construct a three column table with a separate row for each amusement park.The first column contains the name of the park. The second column contains the name of th coaster and a video link to that roller coaster at that park The example below will show you one way of how to do it.


Copy and paste this information between the article tags in your html file. Revise and pick other parks if you wish and then test it out. Make sure to check out the links to the videos. Remember to preceed the links with <A href> tag.

Day 7

Customer Order Information

Put this information under the Aside section of the html file.

Planning your roller coaster theme park road trip

We need to create a form that encompasses all of the information we need to collect from our customes. It has a beginning and ending tag. You will need to get the opening tag information from your web host. What you see below is for our web site. The general form is the same, however.

<Form name="personalInfo" ACTION=http://www.janetbelch.com/cgi-pub/FormMail/ method=post>

Now we need to know what type of trip our user wants. We need to collect on :Date for the trip, Number of people traveling, parks planning on visiting, type of hotel accommodations, type of rental car. Copy the information listed in the textarea box and paste it into your html file in the Aside flexbox section

HTML5 has some great tools for constructing forms to collect information. There a number of different input types. The first is a date picker that makes it easy to select the date using a drop-down calendar.

The slider tool is a good way to enter a number. You need to set the beginning and ending possible values, a default value of 1 which shows on the screen and you need to give the variable a name that describes it.

The next section is designed so that the user can select the parks that they wish to visit. Checkboxes are used so that the user can select more than one park to visit. Each one is given a name that describes the park. This information appears in the email order form. We need to collect information of the type of room the user wants to stay in. Radio buttons are a good choice to gather this data. Radio input buttons are also used to gain information for the type of rental car the user wants to take on their road trip. To obtain the personal information text and email types are used. Place holders fill the input fields as to what information is desired. Each button, Submit and Reset are set off in a division of their own, which is described in the css3 files. The submit button click calls a javsScript function which is should be located at the end of the file called c2.js. Remember the first part of the file and its functions relate to the roller coaster quiz. Copy and paste the information below iat the end of the c2.js file and resave.



First the function is named along with the part of the page that makes up the personalInfo form. A variable themessage is initialized and set to You are required to complete the following fields. The next line states that if no first name is entered by the user before clicking the submit button, the message will say, "You are required to complete the following fields - firstName." The same holds true for the last name and email fields, if left blank. The alert displays the message letting the user know which fields have not ben completed.

An example of a valid order will be displayed on your screen. It will most likely be different. It is dependant on your web host service provider's CGI script.

Order
Project 2

Once you have your customer's information, it is time for you to use a geolocation tool that we will create to respond to this email.


Day 8

PlanTrip.html


The planTrip.html works with the following files


These files need to be copied from our web site to your computer.

planTrip.html


The first thing that needs to be done, after copying and saving the planTrip.html file, is to put in the names of the amusement park names between the option tags. The names of the parks can be of your own choosing or you may use the list below. If you are using your own list, when you search for the parks, also jot down the address as we will need it later on in the project. Make sure to save your file


The lines located between the head tags are style and javaScript files needed for the project. You should have already copied these files.



You will also need the four roller coaster pictures listed below. Right click each picture and save them as coaster1.jpg, coaster2.jpg, coaster3.jpg and coaster4.jpg
Roller Coaster of California

parkAddress.js



Put the file above on the clipboard and save it into Notepad++. Call it parkAddress.js

Key in the address of each park in the line that states document.feedbackForm.opinion.value = "address of amusement park";

Here is a list of addresses that go with each park.


The way this function works, is that when the user selects a park from the list of available parks, its address appears in the html form (planTrip.html). in the line

<input Name="opinion" Value="" size=10 Type="hidden"> The park address is the value of opinion and it displays in the box.

map2.js


Put this file on the clipboard. Paste it into Notepad++. Save it and call it map2.js

curLocation.js


The purpose of this javaScript file is show the user their current location based on longitude and latitude. When the user clicks the button in the planTrip.html (line 149) this function is called and the longitude and latitude are dislayed in the html page. Make sure that you get the code from the textarea box above, put it on the clipboard save it as curLocation.js into Notepad++