CIS 115 Test 1 REQUIREMENTS: Test 1 consists of three code exercises, all associated with an application that reimburses employees for mileage and other travel costs. The Test1.zip file contains the image and files that you need to complete these exercises. Unzip and move these files into your coursework/exam

CIS 115 Test 1

REQUIREMENTS:

Test 1 consists of three code exercises, all associated with an application that reimburses employees for mileage and other travel costs. The Test1.zip file contains the image and files that you need to complete these exercises. Unzip and move these files into your coursework/exam1 folder.   Note that some files already contain code to save you time.  When you are done, zip and submit your ENTIRE exam1 folder so that ALL your files will be submitted.  

Start early so you have plenty of time to complete the test, and to send an email if you’re not sure of the requirements. If you’re not sure how to do something, move on so you can do as much as possible. This will help you maximize your points.

1.  Themileage-home.htmlpage will display an introductory page that includes an image, some paragraphs and a table, and links to two other pages  (you will develop these in exercises 2 and 3). The mileage-home.html page should exactly match the screen shot that is provided at the end of this document. You need to add the necessary HTML tags to achieve this, and you need to add the necessary styles to the CSS file named mileage.css. The necessary HTML and styles are defined below, be sure that mileage-home.html refers to mileage.css.  

Things you should know:

• To save you time, themileage-home.html file already contains all the necessary text for the page, so you just need to add the HTML tags to format  the page to include the image, display a level 1 heading, create the paragraphs, bold text, and the table, and include two links. Refer to the screen shot below.  Note that the last paragraph displays in red and italic.
• The image is provided and namedmileage.jpg. The alt attribute text should be “Mileage Image”. You don’t need to use a table to align the image. 
• For yourmileage.css file, the H1 style should be Arial or Helvetica, or Sans-serif, blue, 24 pt, and bold. The paragraph style is Arial or Helvetica, or Sans-serif, black, 10 pt, and normal. The strong style is blue and bold. The special “alert” paragraph should be red and italic. The table is Arial or Helvetica, or Sans-serif,  blue and 10 pt.
• The table with the reimbursement amounts should have a border of 1.
• The first link should go toconvert.html, the second to mileage-form.html.

 

Hints:

• Everything for exercise 1 is covered in Chapter  4.
• Don’t worry if your paragraphs don’t wrap the same way as the screenshot, this will depend on the size of your Web browser’s window.

 

2. Theconvert.htmland convert.php application allows the user to submit a number of kilometers, converts this to miles, and displays the result, rounded up to the nearest mile.  To convert, multiply the number of kilometers by 0.621371.

Things you should know:

• The screenshots at the end of this document show how these two pages should display. Use the numbers shown in the screenshots to test your work.
• You will need a form forconvert.html that will submit to convert.php.
• The input box inconvert.html must include a name for the input value.
• Inconvert.php you will need to use a PHP function that will always round UP the result to the nearest mile.
• Test your work by running the server and using the localhost URL.

 

Hints:

• Everything you need forconvert.html is covered in Chapter 4. Everything for convert.php can be found in Chapter 5.
• Always check your form names,  variable names, and function names if you get errors or an incorrect result. Consider missing semi-colons. Appendix D in the textbook might help you to debug your HTML or PHP code.

 

3. Themileage-form.htmland mileage-form.php application allows the user to submit five inputs: the month, number of travel days, number of miles, number of lunch days, and number of overnights. The mileage-form.html code is already coded for you, but the code provides an input box for the user to enter the month. Change this so that the user can select the month from a drop down list of months instead (see the screenshot below). The mileage-form.php code should: receive the five user inputs from the form; calculate the mileage payment, lunch payment, and overnight payment; calculate the total payment, and display the results so that the currency values are displayed to two decimal places. Read the text that was provided in mileage-home.html (exercise 1) to see how to calculate the mileage payment, lunch payment, and overnight payment.

Things you should know:

• mileage-form.htmlis provided in full, but you must modify it so that the user can select a month from a drop down list instead of typing the month into an input box.
• The table to output the results inmileage-form-php is provided but you will need to modify this slightly so the currency values ($mileagePayment, $lunchPayment, $overnightPayment, and $total) are all displayed to two decimal places.
• Note the variable names that are used in the input form and in the output table; you will need to use these same variable names in your own code.
• Test your work by running the server and using the localhost URL.

 

Hints:

• Everything you need formileage-form.html is covered in Chapter 4. Everything for mileage-form.php can be found in Chapter 5.
• If you’re not sure how to create a drop down list for the month, skip this so you can focus on the other requirements, use the existing form instead.
• If you’re not sure how to display the currency values to two places, skip this so you can focus on the other requirements. The existing print statement lines will still show your results, they just won’t be formatted to two places.
• Be sure the variable names used in your code match the names in the form and the names used in the print statements.
• Use the numbers in the screen shots below to test your results.

 

 

GRADING (out of 25 points)

 

mileage-home.html:

Include image: 1

Correct link to CSS 1

Correct CSS, including strong and alert 3

Correct HTML tags to match format 2

Correct use of table 1

Correct links 2

 

convert.html:

Correctly send the kilometers to convert.php 1

Correct useof <input> tag and name 1

 

convert.php

Correctly receive value from form 1

Correct calculation 1

Correct use of function to round up the result 2

Correct display of result 1

 

mileage-form.html:

Change the month to a drop down 2

 

mileage-form.php:

Correctly receive values 2

Correct calculations 2

Correct use of function to format currency values round to two places 2

 

Note that up to 5 points may also be deducted for missing student name, incorrect syntax, misspellings, or other errors.

 

See next two pages for screen shots.

Use the sample input to test your work.

 

SCREEN SHOTS

Review the screen shots carefully. All formatting and styles that appear in the screen shots should also appear in your own applications.  Your paragraphs may wrap differently depending on the size of your browser window.

 

 

Screenshot for mileage-home.html

 

Screenshots for convert.html and convert.php

 

 

Screenshots for mileage-form.html and mileage-form.php

Here is mileage-form.html  again, this time showing the drop  down list for the month