Let's look at how to create the test. First we need to put the information into a form using form tags, so that only the parts of the page enclosed in these tags will be evaluated. The following line begins the form and calls it myQuiz. The <br> is simply a line break and the <p> is a new paragraph.
1. Roller coasters are ranked by?
<br><input type="radio" name="question1">height and speed
<br><input type="radio" name="question1" >length and inversions
<br><input type="radio" name="question1" >steepness
<br><input type="radio" name="question1" >All the above
The question is listed first, followed by 4 almost identical statements. The first part states that we will want to receive input from the user. The radio buttons all have the same name, question1. Giving all of them the same name indicates that only one button can be selected at a time. The user response of each appears next to each button.
The next section of the test, after all the questions is to see the results of the test
The heading 3 tag sets the font weight, size of the font, and the color and the text, Roller Coaster Test Results, enclosd in its tags. This information is contained in each of the cascading style sheet files: default.css, style1.css, style2.css, style3.css, style4.css, style5.css, and style6.css. The curly braces surround the characteristics of how all h3 elements should appear in the html document.
font: bold 25px arial;
The next section creates a table to hold information about the test taker:First name, Last name and score. The <tr> stands for table row. It tells html to begin a new row in the table. The <td> stands for a cell in the table to hold data, First Name. The </td> ends the table data cell. A new cell to hold data appears next and it is input from the user in text form with a maximum length of 20 characters. The name of this data cell is "firstName". The table cell data then has its ending tag and then the table row ends. The next row holds information of the Last Name. The last row of the table is to display the score once the test is completed. Finally there is an ending table tag.
The button is described below:
The background color of the button is army green. The border radius of 15px rounds the corners. There is a black 5 pixel solid border around the button. Padding is the space between the text and the button's edge. The button is 105 pixels wide and 45 pixels tall. The button's:hover css3 description calls for an opacity (darkness to lightness) with a background color of red when the user hovers over it.
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.
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.
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
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.
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.
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.
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.
The planTrip.html works with the following files
These files need to be copied from our web site to your computer.
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
Disney California Adventure
Knott's Berry Farm
Six Flags Magic Mountain Valencia
Six Flags Great America
Six Flags Discovery Kingdom
Belmont Park San Diego
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
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.
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
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.
Put this file on the clipboard. Paste it into Notepad++. Save it and call it map2.js