mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-27 20:02:15 -05:00
refactor(curriculum): styling forms quiz (#58427)
Co-authored-by: Sem Bauke <sem@freecodecamp.org>
This commit is contained in:
Jessica Wilkins
@@ -7,7 +7,7 @@ dashedName: quiz-styling-forms
|
||||
|
||||
# --description--
|
||||
|
||||
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
|
||||
To pass the quiz, you must correctly answer at least 9 of the 10 questions below.
|
||||
|
||||
# --quizzes--
|
||||
|
||||
@@ -17,19 +17,19 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following is a common issue with the `datetime-local` input type?
|
||||
What is a common issue for styling the `datetime-local` input type?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It cannot be used with CSS variables.
|
||||
It does not work with the `float` property.
|
||||
|
||||
---
|
||||
|
||||
It automatically submits the form upon value selection.
|
||||
It is impossible to make it responsive.
|
||||
|
||||
---
|
||||
|
||||
It does not support real-time updates.
|
||||
It does not work with `rem` units.
|
||||
|
||||
#### --answer--
|
||||
|
||||
@@ -39,89 +39,89 @@ The input format is different across browsers.
|
||||
|
||||
#### --text--
|
||||
|
||||
Why is it important to use `box-sizing: border-box;` when styling text inputs?
|
||||
Which of the following is considered best practice for styling text inputs?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It makes the text input focusable with a keyboard.
|
||||
Text input font sizes need to be set with `em` units and colors should be a light gray.
|
||||
|
||||
---
|
||||
|
||||
It hides the input's placeholder text.
|
||||
Text input sizes should only use dark green borders on focus and the text color should be dark gray.
|
||||
|
||||
---
|
||||
|
||||
It removes the default browser styling for inputs.
|
||||
Text input font colors need to be light colors and the size should only be set using the `px` unit.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It ensures padding and borders are included in the element's width and height.
|
||||
Text input fonts need to be adequately sized, and the color needs to have sufficient contrast with the background.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is a benefit of setting a max-width for text inputs?
|
||||
Why is it important to not remove the ability for users to resize a `textarea` input?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It prevents users from entering long text.
|
||||
Users should be able to zoom in and out and there should be no change in the input.
|
||||
|
||||
---
|
||||
|
||||
It makes the input unresponsive on larger screens.
|
||||
Users should be able to zoom in and out and the input should increase to twice its size.
|
||||
|
||||
---
|
||||
|
||||
It automatically adjusts the font size.
|
||||
Users should be able to zoom in and out and the input text should triple in size.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It ensures the input doesn't stretch too wide on larger screens.
|
||||
Users should be able to zoom in and out and the input should scale accordingly.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Why should you add `:focus` styles to text inputs?
|
||||
What is a best practice for styling inputs in a focused state?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It hides the input's border.
|
||||
It is important to use only light gray borders for focused inputs.
|
||||
|
||||
---
|
||||
|
||||
It disables user input.
|
||||
It is important to only use dark red borders for focused inputs.
|
||||
|
||||
---
|
||||
|
||||
It forces the browser to ignore default styles.
|
||||
It is important to remove any noticeable indicator.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It improves accessibility by making the input easier to identify when focused.
|
||||
It is important to preserve a noticeable indicator.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How can you prevent text inputs from being cut off when resized?
|
||||
What is a best practice for styling inputs in an error state?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
By adding `overflow: hidden;`.
|
||||
Increase the font size for the input text to `3rem`.
|
||||
|
||||
---
|
||||
|
||||
By setting a fixed height and width.
|
||||
Set the input to `display: none;` so it is removed from the page.
|
||||
|
||||
---
|
||||
|
||||
By removing padding from the input.
|
||||
Set the input to be disabled so users can no longer interact with it.
|
||||
|
||||
#### --answer--
|
||||
|
||||
By using padding and line-height with flexible units like `em` or `rem`.
|
||||
Provide a visual indicator with a message so users know that something is incorrect and needs to be fixed.
|
||||
|
||||
### --question--
|
||||
|
||||
@@ -143,313 +143,92 @@ It hides the input label, reducing visual clutter.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It provides users with guidance on the expected input format without cluttering the interface.
|
||||
It provides users with guidance on the expected input format.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Why should you avoid using `outline: none;` without adding a custom focus style?
|
||||
What is WebKit?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It reduces the size of the text input.
|
||||
It is a browser engine that ensures that there are no validation errors in your CSS.
|
||||
|
||||
---
|
||||
|
||||
It hides the input from assistive technology users.
|
||||
It is a special CSS property used in CSS Grid.
|
||||
|
||||
---
|
||||
|
||||
It makes the input read-only.
|
||||
It is a special CSS property used in CSS flexbox.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It removes the focus outline, which may confuse users about which field is selected.
|
||||
It is a browser engine that displays webpages.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the purpose of using Flexbox or Grid for form layout?
|
||||
When is it appropriate to use `appearance: none;` for form elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
To make form controls appear in random positions.
|
||||
To remove form elements completely from the DOM and page.
|
||||
|
||||
---
|
||||
|
||||
To make the form smaller on mobile devices.
|
||||
To hide form elements from those who use assistive technologies like screen readers.
|
||||
|
||||
---
|
||||
|
||||
To hide form controls on large screens.
|
||||
To remove only default colors that are applied to the form elements and use your own.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To create a well-structured and responsive form layout.
|
||||
To remove some of the default styles that are applied to the form elements.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Why should input elements be styled with a solid border?
|
||||
What are some considerations when working with `appearance: none;` on form elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It makes the form look more colorful.
|
||||
It is important to preserve hovered and submit indicators on interactive elements.
|
||||
|
||||
---
|
||||
|
||||
It automatically increases form field size.
|
||||
It is important to only use `appearance: none;` when you want to apply different styles for the Safari browser.
|
||||
|
||||
---
|
||||
|
||||
It forces users to zoom in on mobile devices.
|
||||
It is important to use `appearance: none;` when you need to completely remove a form element from the page.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To ensure input fields are clearly visible and easily recognizable as form controls.
|
||||
It is important to preserve focus and error indicators on interactive elements.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How does increasing the margin between form elements affect form usability?
|
||||
Which type of form elements are commonly styled using `appearance: none;` to remove their default look?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It decreases accessibility on mobile devices.
|
||||
`label` elements
|
||||
|
||||
---
|
||||
|
||||
It prevents users from submitting the form.
|
||||
`div` elements
|
||||
|
||||
---
|
||||
|
||||
It hides form labels.
|
||||
`span` elements
|
||||
|
||||
#### --answer--
|
||||
|
||||
It improves readability by helping users see the grouping of related form elements.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is the primary reason for using `appearance: none` in form elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
To add new default styles to form elements.
|
||||
|
||||
---
|
||||
|
||||
To enable form elements to appear larger on mobile devices.
|
||||
|
||||
---
|
||||
|
||||
To disable form validation for specific elements.
|
||||
|
||||
#### --answer--
|
||||
|
||||
To remove the default browser styling from form elements and apply custom styles.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which type of form elements is commonly styled using `appearance: none` to remove their default look?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`<label>` elements
|
||||
|
||||
---
|
||||
|
||||
`<div>` elements
|
||||
|
||||
---
|
||||
|
||||
`<span>` elements
|
||||
|
||||
#### --answer--
|
||||
|
||||
`<input>` and `<select>` elements.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
When should you avoid using `appearance: none` on form controls?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
When you want to fully customize the form control's style.
|
||||
|
||||
---
|
||||
|
||||
When the browser's default styles are hard to override.
|
||||
|
||||
---
|
||||
|
||||
When you are building a mobile-first responsive form.
|
||||
|
||||
#### --answer--
|
||||
|
||||
When relying on the accessibility and familiarity of native form control appearances.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
How can using `appearance: none` improve the design of radio buttons and checkboxes?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It increases the size of radio buttons and checkboxes.
|
||||
|
||||
---
|
||||
|
||||
It automatically creates animation effects for radio buttons and checkboxes.
|
||||
|
||||
---
|
||||
|
||||
It prevents users from interacting with radio buttons and checkboxes.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It removes the browser's default appearance, allowing you to fully customize the design.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What is a common issue that arises when using `appearance: none` on a select element?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It makes the `select` element invisible.
|
||||
|
||||
---
|
||||
|
||||
It disables the dropdown functionality.
|
||||
|
||||
---
|
||||
|
||||
It breaks form validation.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It removes the dropdown arrow, requiring you to add a custom arrow or indicator.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What issue can occur when using HTML5 validation attributes like `required` without custom messaging?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It automatically validates all inputs without user interaction.
|
||||
|
||||
---
|
||||
|
||||
It prevents the form from being submitted if all fields are filled.
|
||||
|
||||
---
|
||||
|
||||
It allows users to see detailed error messages for each input.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Users may not understand why their submission fails, leading to frustration if no helpful feedback is provided.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What issue can arise when no margin is added between the header and the content?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It makes the content load faster.
|
||||
|
||||
---
|
||||
|
||||
It improves the overall readability of the content.
|
||||
|
||||
---
|
||||
|
||||
It automatically centers the content under the header.
|
||||
|
||||
#### --answer--
|
||||
|
||||
The content may appear cramped or overlap with the header, making it difficult to read and reducing visual clarity.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What issue may arise with custom fonts when used in form elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
They may not display correctly on all browsers.
|
||||
|
||||
---
|
||||
|
||||
They always load faster than system fonts.
|
||||
|
||||
---
|
||||
|
||||
They prevent the use of responsive design.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Custom fonts may not be accessible to users if they are not properly loaded or fallback fonts are not specified.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What issue can arise when using `overflow: hidden;` on form elements?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It improves the form's overall accessibility.
|
||||
|
||||
---
|
||||
|
||||
It automatically adjusts the form to fit within smaller screens.
|
||||
|
||||
---
|
||||
|
||||
It ensures that all text content is always visible.
|
||||
|
||||
#### --answer--
|
||||
|
||||
It can cause content, such as text or labels, to be cut off if the element is resized or if padding is used incorrectly.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What common problem arises when submitting form data that includes `color` input?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
The `color` value gets automatically converted to grayscale.
|
||||
|
||||
---
|
||||
|
||||
The browser displays an alert before submitting the form.
|
||||
|
||||
---
|
||||
|
||||
It replaces the `color` value with a default value.
|
||||
|
||||
#### --answer--
|
||||
|
||||
The `color` input value is submitted as a hexadecimal string, which may require formatting on the server.
|
||||
|
||||
`input` elements
|
||||
|
||||
Reference in New Issue
Block a user