Description
Question 1 – JavaScript Chapter 3 (30 points) Estimated time: 2 hours Save question 1 files in subfolder “lastname_firstname_assignment4\q1\”. (-25 points if no JavaScript) Create a web page that displays the default information (example shown). (1 point each, total 5 points) The initial page and related outputs should look like the examples shown below. Create your page using “’s Kung Fu Panda Po Power Level” as the page title. Save the page as index.htm. Document the html file with html and JavaScript comments. (1 point each, total 3 points) Prompt the user to enter a number representing Kung Fu Panda Po’s power level. (3 points) The power level conversions are as follows: (10 points for logic, 5 points for output format) o less than 0: Po eats too much pho o 0 to 10: Po protects the valley of peace o 11 to 20: Po defeats wolf bandits o 21 to 30: Po reaches Gongmen City o 31 to 40: Po destroys the tower and an arsenal of cannons o Greater than 40: Po defeats Lord Shen Create a css file named style.css to format index.htm by creating your own layout (no two students should have the same layout). Use css comments to document the css program. You can use the same (or similar) css file(s) to format all questions. (1 point each, total 2 points) Example: Initial Page 3 CSCI 3300 Example: Input q1a Example: Output q1a 4 CSCI 3300 Example: Input q1b Example: Output q1b 5 CSCI 3300 Question 2 – JavaScript Chapter 3 (35 points) Estimated time: 2 hours Save question 2 files in subfolder “lastname_firstname_assignment4\q2\”. (-30 points if no JavaScript) Create a web page that displays the default information (example shown). (1 point each, total 5 points) The initial page and related outputs should look like the examples shown below. Create your page using “’s Kung Fu Panda Po Body Mass Index” as the page title. Save the page as index.htm. Document html file with html and JavaScript comments. (1 point each, total 3 points) Write a program that calculates and displays Kung Fu Panda Po’s body mass index (BMI). Po’s BMI is calculated with the following formula: (5 points) o BMI = weight x 703 / height2 o Weight is in pounds, and height is in inches The program should also indicate if Po has optimal weight, is underweight, is overweight, or is obese. o If Po’s BMI is less than 18. Po is underweight o If Po’s BMI is between 18 and 24.9. Po has normal weight o If Po’s BMI is between 25 and 29.9. Po is overweight o If Po’s BMI is greater than 30. Po is obese (15 points for logic, 5 points for output format) Note: The BMI reading is not for humans. It is modified for Po. Please do not use it for humans. Hint: You may use toFixed() JavaScript method to display a number with the exact number of decimals. Create a css file named style.css to format index.htm by creating your own layout (no two students should have the same layout). Use css comments to document the css program. (1 point each, total 2 points) Example: Initial Page 6 CSCI 3300 Example: Input q2a Example: Output q2a 7 CSCI 3300 Example: Input q2b Example: Output q2b 8 CSCI 3300 Question 3 – JavaScript Chapter 3 (35 points) Estimated time: 3 hours Save question 3 files in subfolder “lastname_firstname_assignment4\q3\”. (-30 points if no JavaScript) Create a web page that displays the default information (example shown). (1 point each, total 3 points) The initial page and related outputs should look like the examples shown below. Create your page using “’s Employee Net Pay” as the page title. Save the page as index.htm. Document the html file with html and JavaScript comments. (1 point each, total 3 points) Write a program that calculated an employee’s net pay. o The program should prompt for (1 point each, total 3 points) Hourly pay rate Number of hours worked in a week Number of dependents claimed o If the employee works more than 45 hours in a week, overtime is calculated at 1.5 times the regular hourly rate. (10 points for logic) o Taxes are then deducted from the gross pay as follows: (10 points for logic) No dependents: tax rate is 25% (5 points for output format) 1 to 3 dependents: tax rate is 20% 4 to 6 dependents: tax rate is 10% More than 6 dependents: tax rate is 5% Create a css file named style.css to format index.htm by creating your own layout (no two students should have the same layout). Use css comments to document the css program. (1 point each, total 2 points) Example: Initial Page Input q3a Output q3a and logic Employee’s hourly rate: $30. Number of hours worked this week: 50 hours. Number of dependents: 3. First 45 hours pay = $30 x 45 hours = $1350 Next 5 hours pay (overtime) = $30 x 5 hours x 1.5 = $225 Gross pay = $1350 + $225 = $1575 Tax rate for 3 dependents = 20% Tax deduction = $1575 x 20% = $315 Net pay = $1575 – $315 = $1260 This employee earned: $1260 this week. Input q3b Output q3b and logic Employee’s hourly rate: $40. Number of hours worked this week: 30 hours. Number of dependents: 4. First 40 hours pay = $40 x 30 hours = $1200 Next 0 hours pay (overtime) = $30 x 0 hours x 1.5 = $0 Gross pay = $1200 + $0 = $1200 Tax rate for 4 dependents = 10% Tax deduction = $1200 x 10% = $120 Net pay = $1200 – $120 = $1080 This employee earned: $1080 this week. 9 CSCI 3300 Example: Input q3a Example: Output q3a 10 CSCI 3300 Example: Input q3b Example: Output q3b 11 CSCI 3300 Important: 1. If you do not put / in the above mentioned fields (as shown in the examples), you will get 0 points for the question(s). 2. No two students should submit webpages with exactly the same cod, or the content, or same layout, or same color combination. If found, both students will get 0 points. 3. When you view page source in a web browser, must be at the top of every page. In other words, all pages must be written in HTML5. (-20 points if not) 4. All html files must pass html validation at https://validator.w3.org/ without any error/warning (with only 2 warnings). Use the validator’s “File Upload” tab to check each file. (-2 points for each error/warning, 2 warnings allowed) 5. All css files must pass css validation at https://jigsaw.w3.org/css-validator/ without any error/warning. (-2 points for each error/warning) 6. If your html file contains any css component, your html file must pass both html validation (3 above), and css validation (4 above) without any error. 7. If your files do not pass the validations, 2 points will be deducted for each error (and each JavaScript warning) found. 8. Document (comment) your html files (), css files (/* */), and JavaScript files (/* */). (-1 point for each file with insufficient comments) Submission instructions: You need to test the above document(s) in your web browser. Do screen capture(s) of the initial page and the related output(s). Use any graphic editing software (e.g. Microsoft Paint, Adobe Fireworks, GIMP, or Microsoft Expression Design etc) to cut out the browser output (from the screen capture), paste them into a word document. For this assignment, you only need to do screen capture(s) of the initial page and the related output(s), you do not need to do screen capture(s) of the input pages. Provide 2 different test cases for each question. In other words, for each question, you need to have 1 initial page screen capture and 2 related output(s) screen captures. (-50 points for no test cases, -5 points for only 1 test case) Do screen capture(s) of html validation results and css validation results, cut and paste them into the word document. You do not need to do screen capture(s) of JavaScript validation results. Save the word document as a pdf file. You need to submit the following: 1. A pdf file containing the screen capture(s) of the web browser output (all html pages) and the screen capture(s) of all html validation results (from https://validator.w3.org/) and css validation results (from https://jigsaw.w3.org/css-validator/), name the file lastname_firstname_assignment04.pdf. 2. All html file(s), css file(s), and other related files (e.g. image files). Zip your file folder (lastname_firstname_assignment4) into a single zip file (or rar file) lastname_firstname_assignment04.zip. In the above example, the zip file should contain the following files and subfolders. If there is any image, there should be a \images\ subfolder. lastname_firstname_assignment4\q1\index.htm lastname_firstname_assignment4\q1\style.css lastname_firstname_assignment4\q2\index.htm lastname_firstname_assignment4\q2\style.css // you may put style.css in a subfolder lastname_firstname_assignment4\q3\index.htm lastname_firstname_assignment4\q3\style.css Please submit an electronic copy (the above mentioned two files: .pdf and .zip) to D2L digital dropbox. Grading guidelines (programming questions): Your programs will be judged on several criteria, which are shown below. 12 CSCI 3300 Correctness (50%): Does the program compile (run) correctly? Does the program do what it’s supposed to do? Design (20%): Are operations broken down in a reasonable way (e.g. classes and methods)? Style (10%): Is the program indented properly? Do variables have meaningful names? Robustness (10%): Does the program handle erroneous or unexpected input gracefully? Documentation (10%): Do all program files begin with a comment that identifies the author, the course code, and the program date? Are all the classes, methods and data fields clearly documented (commented)? Are unclear parts of code documented (commented)? (Some items mentioned may not apply to some languages) A program that does not compile (run) will get at most 50% of the possible points.