Question
CSCI 3300 Assignment 5 Total estimated time for this assignment: 10 hours When you see Richard Ricardo in the example screen captures, change it to
CSCI 3300 Assignment 5
Total estimated time for this assignment: 10 hours
When you see Richard Ricardo in the example screen captures, change it to
If you do not put
No two students should submit webpages with exactly the same code, or same content, or same layout, or same color combination. If found, both students will get 0 points.
Create a folder on your hard disk, name the folder lastname_firstname_assignment5. Save all the files from this assignment in this folder.
Create the following subfolders (in the folder lastname_firstname_assignment5): q1, q2, q3, q4. As a result, you should have the following folder (directory) structure for this assignment:
lastname_firstname_assignment5\q1\
lastname_firstname_assignment5\q2\
lastname_firstname_assignment5\q3\
lastname_firstname_assignment5\q4\
It will be very helpful to have a JavaScript debugger for your browser. Most browsers have a debugger but how to get them varies. Please go to http://www.w3schools.com/js/js_debugging.asp to determine how to activate your debugger. All JavaScript must be validated using this console without error. (-2 points for each error, each warning).
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)
Question 1 JavaScript Chapter 4 (25 points) Estimated time: 2 hours
Save question 1 files in subfolder lastname_firstname_assignment5\q1\.
Create a web page that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page using
Allow the user to click on one of the four buttons.
Use for loop to achieve button 1s effects
Use while loop to achieve button 2s effects
Use for loop to achieve button 3s effects
Use while loop to achieve button 4s effects
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.
Example: Initial Page
Example: Output
When button 1 is clicked | When button 2 is clicked |
|
|
When button 3 is clicked |
When button 4 is clicked |
|
|
Question 2 JavaScript Chapter 4 (25 points) Estimated time: 3 hours
Save question 2 files in subfolder lastname_firstname_assignment5\q2\.
Create a web page that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page using
Write a program that asks the user for Pos secret word.
The secret word must have exactly seven characters and may not include spaces.
All other keyboard characters are allowed.
A loop (while or dowhile) should prompt the user to re-enter another secret word until both these conditions are met.
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.
Example: Initial Page
Example: Input q2a
Example: Output q2a
Example: Input q2b
Example: Output q2b
Example: Input q2c
Example: Output q2c and Input q2d
Example: Output q2d
Question 3 JavaScript Chapter 4 & 5 (25 points) Estimated time: 2 hours
Save question 3 files in subfolder lastname_firstname_assignment5\q3\.
Create a web page that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page using
Write a program that allows the user to enter the number of dumplings Po eat every month.
The user should be allowed to enter as many data set as desired (You must use do...while loop).
The output should look like the example output shown.
The program should also calculate the total number of dumplings Po ate.
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.
Example: Initial Page
Example: Input q3
|
|
|
|
|
|
|
|
Example: Output q3
Question 4 JavaScript Chapter 4 & 5 (25 points) Estimated time: 3 hours
Save question 4 files in subfolder lastname_firstname_assignment5\q4\.
Create a web page that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page using
Allow the user to click on one of the four buttons.
You can (must) choose to use for loop, while loop or do..while loop.
The sequences generated and the output should look like the example output shown.
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.
Example: Initial Page
Example: Output
When button 1 is clicked | When button 2 is clicked |
|
|
When button 3 is clicked |
When button 4 is clicked |
|
|
Important:
If you do not put
No two students should submit webpages with exactly the same code, or same content, or same layout, or same color combination. If found, both students will get 0 points.
All html files must pass html validation at http://validator.w3.org/ without any error/warning (with only 1 warning). Use the validators File Upload tab to check each file.
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)
All css files must pass css validation at http://jigsaw.w3.org/css-validator/ without any error/warning.
All html (JavaScript) files must pass JavaScript validation at Firefox Web Console (Tools > Web Developer > Web Console) without any error, without any warning.
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.
If your files do not pass the validations, 2 points will be deducted for each error / warning found.
Document (comment) your html files (), css files (/* */), and JavaScript files (/* */).
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.
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 Lint 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 http://validator.w3.org/), and css validation results (from http://jigsaw.w3.org/css-validator/), name the file lastname_firstname_assignment05.pdf.
2. All html file(s), css file(s), and other related files (e.g. image files). Zip your file folder (lastname_firstname_assignment5) into a single zip file (or rar file) lastname_firstname_assignment05.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_assignment5\q1\index.htm
lastname_firstname_assignment5\q1\style.css
lastname_firstname_assignment5\q2\index.htm
lastname_firstname_assignment5\q2\style.css // you may put style.css in a subfolder
lastname_firstname_assignment5\q3\index.htm
lastname_firstname_assignment5\q3\style.css
lastname_firstname_assignment5\q4\index.htm
lastname_firstname_assignment5\q4\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.
Correctness (50%): Does the program compile (run) correctly? Does the program do what its 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.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started