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.

• The first 16 lines of this javaScript file initialize the variables used and set them to zero

• There is a function for each button that is designed to check the correct answer and compare it to the button that was pushed.

• The function checks to see if the button was clicked

• It then looks for which button for the first question was pushed.

• All buttons are listed in an array since they all have the same name

• The first response is labeled as 0 not 1

• The second response is labeled as 1

• The third response is labeled as 2

• The fourth response is array number 3

• It is this number inside the square brackets that hold the correct answer to questions. Correct answers are already entered for you.

• Question number one asks how roller coasters are ranked. The correct answer to this question is All of the above, which is array element number 3 or the forth response.

• If the user gets the correct answer to question 1 then correct1 gets one point. correct1=1

• The same holds true for all the remaining 14 questions.

• The function calculateScore(myQuiz) first checks to see if boxes asking for first and last name have been completed.

• var themessage ="You are required to complete the following fields:"; initialized a message that we can add information to if the user skips the first and last name fields.

• If anything is missing, an alert box pops up letting the user know that they are missing some required data.

• Next the score is calculated with the following formula. All 15 amnswers ae tabulated and put into the variable called score. The total is then divided by the total number of questions, 15, in the test.

• //15 questions in file score = (correct1 + correct2 + correct3 + correct4 + correct5 + correct6 + correct7 + correct8 + correct9 + correct10 + correct11 + correct12 + correct13 + correct14 + correct15) / 15

• myQuiz.score.value = Math.floor((score) *100 +.5)/100 rounds off the score to two decimal places and places the score into the html document if the myQuiz form score box.

• Make sure o save your modified file as c2.js

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.
<p>First day of trip</p> <input type="date" name="dateOfTrip"> <br> <!-- select number of people in the party--> <p class="special">Number in party</p> <input id="slider1" type="number" min="1" max="5" name ="NumberOfPeople" value="1"/> <br> <p class="special">Park Choices</P> <ul style="list-style-type:none"> <li><input name="disneyland" type="checkbox"><label>Disneyland</label> <li><input name="disneyCaliforniaAdveventure" type="checkbox"><label>Disney California Adventure</label> <li><input name="knotts" type="checkbox"><label>Knott's Berry Farm</label> <li><input name="valencia" type="checkbox"><label>Six Flags:Valencia</label> <li><input name="greatAmerica" type="checkbox"><label>Six Flags Great Adventure:Santa Clara</label> <li><input name="discovery" type="checkbox"><label>Six Flags Discovery:Vallejo</label> <li><input name="bellmont" type="checkbox"><label>Bellmont Park:San Diego</label> </ul> <br> <p class="special">Hotel Room Accomodations</p> <ul style="list-style-type:none"> <li><input name="oneSingle" type="radio"><label>Single Bed</label> <li><input name="twoSingle" type="radio"><label>Two Single Beds</label> <li><input name="queen" type="radio"><label>Queen Bed</label> <li><input name="King" type="radio"><label>King Bed</label> </ul> <br> <P class="special">Hotel Rating</p> <ul style="list-style-type:none"> <li><input name="twoStar" type="radio"><label>Two Star</label> <li><input name="threeStar" type="radio"><label>Three Star</label> <li><input name="fourStar" type="radio"><label>Four Star</label> <li><input name="fiveStar" type="radio"><label>Five Star</label> </uL> <p class="special">Rental Car</p> <ul style="list-style-type:none"> <li><input name="small" type="radio"><label>Small</label> <li><input name="mid" type="radio"><label>Mid-size</label> <li><input name="full" type="radio"><label>Full-size</label> <li><input name="lux" type="radio"><label>Luxury</label> <li><input name="hybred" type="radio"><label>Hybred</label> </ul> <h2>Personal Information</h2> <br> <label for="firstName">First Name</label><br><input id="firstName" type="text" autofocus name="firstName"placeholder="First Name" required size="12"> <br> <label for="lastName">Last Name</label><br><input id="lastName" type="text" name="lastName" placeholder="Last Name" required size="12"> <br> <label for="email">E-Mail Address</label><br><input id="email" type="email" name="emailAddress" placeholder="E Mail address" required size="22"> <br> <div id="buttons"> <input type="submit" value="Submit" onClick="validate(personalInfo);"> </div> <br> <div id="buttons"> <input type="Reset" name="Reset: value="Reset"/> <input type=hidden value=jerry@janetbelch.com name= recipient/> </div> </form>

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.

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

• style1.css
• style2.css
• style3.css
• style4.css
• style5.css
• style6.css

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

planTrip.html

You will 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

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

• 26101 Magic Mountain Parkway Valencia CA 91355

• 1313 Disneyland Drive Anaheim CA 92802

• 1313 Disneyland Drive Anaheim CA 92802

• 8039 Beach Blvd. Buena Park CA 90620

• 4701 Great America Parkway Santa Clara CA 94589

• 1001 Fairgrounds Drive Vallejo CA 94589

• 3146 Mission Blvd San Diego CA 92109