WDD 130 | Code-along Activity

W05 Code-along Activity: Quiz Form

Code-along Activity Overview

For this activity, you will code along with an instructor video that walks you through each step of the activity below. Make sure that you pause the video, or watch sections over if you need to, so that you are able to complete the entire activity.

Your instructor will post a link to the video in Microsoft Teams.

Overview

Follow the code-along video to create a new HTML file that is a quiz form.

Instructions

File and Folder Setup

Create a new folder named week05.
Create a subfolder named styles within the week05 folder.
Create a new HTML page in the week05 named quiz.html.
Create a new CSS file named quiz.css in the styles folder.

HTML

In quiz.html, build a valid HTML form that is an online quiz about HTML and CSS with at least four (4) questions about HTML and/or CSS.
Your HTML document should be valid and contain an <h1> heading that is appropriate for the content.
Each form element (e.g., <input>, <textarea>, <select>, etc.) should be coupled with an associated label element.

Remember, there are two ways to associate labels with form elements. Either way is appropriate but stick with one method for consistency.
The following form input elements and settings are required in the quiz:
1. A text type input. (fill in the blank question)
  - Assign both the name and id attribute values as "q1".
2. A textarea element. (short answer question)
  - Assign both the name and id attribute values as "q2".
3. A select element. (dropdown or combo box)
  - Assign both the name and id attribute values as "q3".
  - The select element should have at least three (3) options with values.
    If you want the first option to be labeled and non-selectable, you can add an option element with an empty value attribute and the attributes of selected and disabled like this:
```
<option value="" selected disabled>Choose One ...</option>
```
4. A number type input element. (integer answer)
  - Assign both the name and id attribute values as "q4".
The form requires a button of type submit with the text "Submit Quiz".

Screenshot of an example quiz with styling. — Example Quiz
This is just an example. Style your form using your own design and content.

CSS

Style the form using CSS, following best practices to create a single column and uniform layout.

Testing

Be sure to continuously save and test your page locally using the Live/Five Server extension in VS Code.
Validate your HTML and CSS and check your work using the development standards checklist as a guide.
Commit and Sync your page to your remote GitHub wdd130 account.
Post any questions you have in Microsoft Teams in the Week 04 channel.

Alternative Video Link

In addition to the link that your instructor posted, you are also welcome to watch the following code walkthrough or use its transcript:

Submission

Please pause and re-watch any sections of the instructor video necessary until you have completed the entire activity and your page is similar to the instructor's. When you are finished:

Return to Canvas to take the quiz.