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.
<form name="myQuiz">
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
</p>
<p>
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.
h3{
font: bold 25px arial;
color: black;
}
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 tag <div id="buttons> is used to format the button to be pushed in order to score the test. The description for how the button will look is in the cascading style sheet files. The value of the button, :Grade appears inside the button and when the button is clicked it performs a checkAnswer1() function in a javascript file. It also checks all other checkAnswers() functions looking for a match to the correct answer. Finally the score is calculated. See below.
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.
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.
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.
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.
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.