Assignment Prompt & Instructions
**Instructions**
**General Instructions for your Assignments:**
During Week 1 through Week 7 of this course, you will have a new assignment each week. You should create a new set of files for each assignment. During Weeks 1 through 7 you are NOT building on your previous assignment, like you did in WEBD121. Instead you are creating a new set of files for each assignment. However, make sure you save all of your files from each assignment because you will need them later for your Final Project. During Week 8, for your Final Project, you will create a Home Page with a navigation menu that uses JavaScript for drop-down sub-menus, which will link all of your previous assignments together, creating a comprehensive website that showcases all of your work this semester.
You must write the code files by hand for all assignments in this class. A simple text editor, such as Notepad or Notepad++ will suffice (or TextEdit on the Mac). DO NOT use GUI editors, such as FrontPage, Dreamweaver, etc. You must write the code for your web page files yourself. If you are using a PC, it is strongly recommended that you download the free [Notepad++](https://notepad-plus-plus.org/) text editor because it contains extra features which assist with debugging, such as line numbering and color coding of different elements of syntax. **Mac users** should use the TextEdit text editor that comes with the Mac OS. However, if you are a Mac user, make sure you set [TextEdit](https://www.tekrevue.com/tip/textedit-plain-text-mode/) to use Plain Text by default.
Make sure all of your web pages comply with the HTML 5 standards and CSS standards. DO NOT use obsolete HTML elements and attributes from previous versions of HTML. By including the HTML 5 DOCTYPE declaration in your webpages, and validating all of your [HTML files,](https://validator.w3.org/#validate_by_upload) you can be sure that your code complies with HTML 5. Also, make sure that your external style sheet (.css file) passes validation at the W3C [CSS Validation](https://jigsaw.w3.org/css-validator/#validate_by_upload) Service. Make sure you use the "Validate by File Upload" option (and NOT the "Validate by Direct Input" option), on both of these validators since this is the way your instructor will check your pages when grading your assignments.
**Specific Instructions for Assignment 2:**
Perform all of the following steps to complete this assignment:
1) Begin by creating a new file in your text editor and include all of the basic HTML code (see Assignment 1 instructions again for the HTML code if you need it). Or you can simply make a copy of your HTML file from last week and name the new copy LastFirstAssignment2.html (where "Last" is your last name and "First" is your first name), but be careful not to overwrite your file from last week because you will need it again when you do your Final Project during Week 8.
2) Make sure you change the contents of the <title> tag to "Assignment 2" (just the words – not the quotation marks) and make sure your full name is inside of the <h1> heading, just like in your previous assignments. Also, delete the contents of the <script> tag — everything between the <!– and //–> tags, if you created your new file by making a copy of your previous file, because you will be creating a brand new page with different JavaScript code for this assignment. Save your file.
3) Upload the new file to the [HTML validator](https://validator.w3.org/#validate_by_upload) to check for compliance with the HTML5 standards here. Your file should pass validation. If you receive any errors or warnings, then go back through the previous steps of the assignment again until you have corrected all errors and your file passes validation.
4) Create another new file in your text editor and save it as Assignment2.css or make a copy of last week's CSS file, being careful not to overwrite last week's file.
5) In your CSS file, write code to set the background color of your page to #D5F5E3 and write code to center the h1 element. Save your CSS file.
6) View your webpage again in your browser and confirm that your page has a light blue background and that the heading is centered. Upload your CSS file to the CSS validator to check for compliance with the [CSS standards](https://jigsaw.w3.org/css-validator/#validate_by_upload.). Your file should pass validation. If you receive any errors or warnings, debug your CSS code until you have corrected all errors and your file passes validation.
7) Open your Assignment 2 HTML file for editing. Inside of the <script> tag, create a variable named "userName".
8) Using the prompt() method, prompt the user to enter their name. Assign the value they enter to the "userName" variable you created in Step 9. Lab 2-2 on the CIW website shows a code example of how to do this.
9) Using the document.write() method, display a welcome message to the user, addressing them by the name they previously input. Make sure you write the output to the webpage and not in a pop-up window. Again, Lab 2-2 on the CIW website includes sample code for how to do this.
10) Save your file and view it in the browser. Compare your results with the results you got when viewing practice Lab 2-2 on the CIW website, to make sure your JavaScript is producing the expected output. (The webpages will be similar, although not exact).
11) Using Lab 3-3 as an example, create a 3-question qz with a button labeled "Take Qz" that initiates the qz. Your q
z should contain the following 3 questions and answers –
Q. Which data type allows a sequence of alphanumeric characters written in quotes (either single or double quotes)?
A. string
Q. Using Javascript operator precedence, what is the result of the following expression? 3 + 3 * 5
A. 18
Q. A variable name can start with the * symbol (type "true" or "false")?
A. false
Like in Lab 3-3, after the user finishes the qz, you should display the number of answers they got correct.
12) You may add any additional HTML, CSS, or JavaScript content that you wish, to practice more of the features that you have learned about in your online textbook, as long as all of your code files still pass validation. However, do not add anything to your files that would make them invalid according to the standards. You can confirm this by making sure your files still pass validation.
13) Before submitting your assignment, validate your HTML and CSS files one last time at [Validation Service](https://jigsaw.w3.org/css-validator/#validate_by_upload) AND [W3C](https://validator.w3.org/#validate_by_upload), using the "Validate by File Upload" option. **Note: It is critical that you debug and fix ALL errors identified by the validator before submitting your assignments. Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that all of your code files pass validation.**
14) Create a zip archive containing all pages pertaining to your website (.html files, .css files, .js files, image files, etc). Make sure you maintain the necessary directory structure in your zip archive so that your webpages will refer correctly when unzipped. In other words, if your images are in a sub-folder, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip archive, too, including the sub-folder. **Submit only the zip file for grading.**
**Validation Requirements:**
Before submitting your web site:
1. Validate your HTML file at [https://validator.w3.org/#validate_by_upload](https://validator.w3.org/#validate_by_upload), using the "Validate by File Upload" option, and fix any errors that the validator identifies before submitting your web site for grading.
2. Validate your CSS file at [https://jigsaw.w3.org/css-validator/#validate_by_upload](https://jigsaw.w3.org/css-validator/#validate_by_upload), using the "Validate by File Upload" option, and fix any errors that the validator identifies before submitting your web site for grading.
**Note: It is critical that you debug and fix ALL errors identified by these two code validators before submitting your assignments. Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that your code files pass validation.** Remember that valid JavaScript relies on a foundation of valid HTML and valid CSS to function as intended.
**Submission Instructions:** Create a zip file containing all files related to your web page (.html files, .css files, .js files, image files, etc). Make sure you maintain the necessary directory structure in your zip file so that your webpages will view correctly when unzipped. In other words, if your images are in a sub-folder on your computer, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip file, too. Submit only the zip file for grading.
**Rubric for Grading Assignment**
**Exemplary**
**Accomplished**
**Developing**
**Beginning**
**Points** Available
**HTML file(s) validate without errors at** [**https://validator.w3.org/#validate_by_upload**](https://validator.w3.org/#validate_by_upload)
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**CSS file(s) validate without errors at** [**https://jigsaw.w3.org/css-validator/#validate_by_upload**](https://jigsaw.w3.org/css-validator/#validate_by_upload)
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**All required HTML code is present.**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**All required CSS code is present.**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**Prompt user for their name and store it in variable "userName".**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
20
**Correctly created qz and displayed results to user.**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
30
**Correctly named files, and correctly created zip archive that contains all files for webpage (maintaining original folder structure).**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**Total**
100
*****Note: Your webpage must include the JavaScript functionality asked for in this assignment to receive credit for this assignment. You cannot receive partial credit simply for submitting HTML or CSS code, or JavaScript from previous assignments.**
**Instructions**
**General Instructions for your Assignments:**
During Week 1 through Week 7 of this course, you will have a new assignment each week. You should create a new set of files for each assignment. During Weeks 1 through 7 you are NOT building on your previous assignment, like you did in WEBD121. Instead you are creating a new set of files for each assignment. However, make sure you save all of your files from each assignment because you will need them later for your Final Project. During Week 8, for your Final Project, you will create a Home Page with a navigation menu that uses JavaScript for drop-down sub-menus, which will link all of your previous assignments together, creating a comprehensive website that showcases all of your work this semester.
You must write the code files by hand for all assignments in this class. A simple text editor, such as Notepad or Notepad++ will suffice (or TextEdit on the Mac). DO NOT use GUI editors, such as FrontPage, Dreamweaver, etc. You must write the code for your web page files yourself. If you are using a PC, it is strongly recommended that you download the free [Notepad++](https://notepad-plus-plus.org/) text editor because it contains extra features which assist with debugging, such as line numbering and color coding of different elements of syntax. **Mac users** should use the TextEdit text editor that comes with the Mac OS. However, if you are a Mac user, make sure you set [TextEdit](https://www.tekrevue.com/tip/textedit-plain-text-mode/) to use Plain Text by default.
Make sure all of your web pages comply with the HTML 5 standards and CSS standards. DO NOT use obsolete HTML elements and attributes from previous versions of HTML. By including the HTML 5 DOCTYPE declaration in your webpages, and validating all of your [HTML files,](https://validator.w3.org/#validate_by_upload) you can be sure that your code complies with HTML 5. Also, make sure that your external style sheet (.css file) passes validation at the W3C [CSS Validation](https://jigsaw.w3.org/css-validator/#validate_by_upload) Service. Make sure you use the "Validate by File Upload" option (and NOT the "Validate by Direct Input" option), on both of these validators since this is the way your instructor will check your pages when grading your assignments.
**Specific Instructions for Assignment 2:**
Perform all of the following steps to complete this assignment:
1) Begin by creating a new file in your text editor and include all of the basic HTML code (see Assignment 1 instructions again for the HTML code if you need it). Or you can simply make a copy of your HTML file from last week and name the new copy LastFirstAssignment2.html (where "Last" is your last name and "First" is your first name), but be careful not to overwrite your file from last week because you will need it again when you do your Final Project during Week 8.
2) Make sure you change the contents of the <title> tag to "Assignment 2" (just the words – not the quotation marks) and make sure your full name is inside of the <h1> heading, just like in your previous assignments. Also, delete the contents of the <script> tag — everything between the <!– and //–> tags, if you created your new file by making a copy of your previous file, because you will be creating a brand new page with different JavaScript code for this assignment. Save your file.
3) Upload the new file to the [HTML validator](https://validator.w3.org/#validate_by_upload) to check for compliance with the HTML5 standards here. Your file should pass validation. If you receive any errors or warnings, then go back through the previous steps of the assignment again until you have corrected all errors and your file passes validation.
4) Create another new file in your text editor and save it as Assignment2.css or make a copy of last week's CSS file, being careful not to overwrite last week's file.
5) In your CSS file, write code to set the background color of your page to #D5F5E3 and write code to center the h1 element. Save your CSS file.
6) View your webpage again in your browser and confirm that your page has a light blue background and that the heading is centered. Upload your CSS file to the CSS validator to check for compliance with the [CSS standards](https://jigsaw.w3.org/css-validator/#validate_by_upload.). Your file should pass validation. If you receive any errors or warnings, debug your CSS code until you have corrected all errors and your file passes validation.
7) Open your Assignment 2 HTML file for editing. Inside of the <script> tag, create a variable named "userName".
8) Using the prompt() method, prompt the user to enter their name. Assign the value they enter to the "userName" variable you created in Step 9. Lab 2-2 on the CIW website shows a code example of how to do this.
9) Using the document.write() method, display a welcome message to the user, addressing them by the name they previously input. Make sure you write the output to the webpage and not in a pop-up window. Again, Lab 2-2 on the CIW website includes sample code for how to do this.
10) Save your file and view it in the browser. Compare your results with the results you got when viewing practice Lab 2-2 on the CIW website, to make sure your JavaScript is producing the expected output. (The webpages will be similar, although not exact).
11) Using Lab 3-3 as an example, create a 3-question qui, with a button labeled "Take Qui" that initiates the qui. Your qui should contain the following 3 questions and answers –
Q. Which data type allows a sequence of alphanumeric characters written in quotes (either single or double quotes)?
A. string
Q. Using Javascript operator precedence, what is the result of the following expression? 3 + 3 * 5
A. 18
Q. A variable name can start with the * symbol (type "true" or "false")?
A. false
Like in Lab 3-3, after the user finishes the qui, you should display the number of answers they got correct.
12) You may add any additional HTML, CSS, or JavaScript content that you wish, to practice more of the features that you have learned about in your online textbook, as long as all of your code files still pass validation. However, do not add anything to your files that would make them invalid according to the standards. You can confirm this by making sure your files still pass validation.
13) Before submitting your assignment, validate your HTML and CSS files one last time at [Validation Service](https://jigsaw.w3.org/css-validator/#validate_by_upload) AND [W3C](https://validator.w3.org/#validate_by_upload), using the "Validate by File Upload" option. **Note: It is critical that you debug and fix ALL errors identified by the validator before submitting your assignments. Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that all of your code files pass validation.**
14) Create a zip archive containing all pages pertaining to your website (.html files, .css files, .js files, image files, etc). Make sure you maintain the necessary directory structure in your zip archive so that your webpages will refer correctly when unzipped. In other words, if your images are in a sub-folder, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip archive, too, including the sub-folder. **Submit only the zip file for grading.**
**Validation Requirements:**
Before submitting your web site:
1. Validate your HTML file at [https://validator.w3.org/#validate_by_upload](https://validator.w3.org/#validate_by_upload), using the "Validate by File Upload" option, and fix any errors that the validator identifies before submitting your web site for grading.
2. Validate your CSS file at [https://jigsaw.w3.org/css-validator/#validate_by_upload](https://jigsaw.w3.org/css-validator/#validate_by_upload), using the "Validate by File Upload" option, and fix any errors that the validator identifies before submitting your web site for grading.
**Note: It is critical that you debug and fix ALL errors identified by these two code validators before submitting your assignments. Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that your code files pass validation.** Remember that valid JavaScript relies on a foundation of valid HTML and valid CSS to function as intended.
**Submission Instructions:** Create a zip file containing all files related to your web page (.html files, .css files, .js files, image files, etc). Make sure you maintain the necessary directory structure in your zip file so that your webpages will view correctly when unzipped. In other words, if your images are in a sub-folder on your computer, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip file, too. Submit only the zip file for grading.
**Rubric for Grading Assignment**
**Exemplary**
**Accomplished**
**Developing**
**Beginning**
**Points** Available
**HTML file(s) validate without errors at** [**https://validator.w3.org/#validate_by_upload**](https://validator.w3.org/#validate_by_upload)
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**CSS file(s) validate without errors at** [**https://jigsaw.w3.org/css-validator/#validate_by_upload**](https://jigsaw.w3.org/css-validator/#validate_by_upload)
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**All required HTML code is present.**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**All required CSS code is present.**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**Prompt user for their name and store it in variable "userName".**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
20
**Correctly created qui**
**and displayed results to user.**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
30
**Correctly named files, and correctly created zip archive that contains all files for webpage (maintaining original folder structure).**
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
10
**Total**
100
*****Note: Your webpage must include the JavaScript functionality asked for in this assignment to receive credit for this assignment. You cannot receive partial credit simply for submitting HTML or CSS code, or JavaScript from previous assignments.**