From f4ffc49403dde46355062e4feabaeb961c27f685 Mon Sep 17 00:00:00 2001 From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Date: Thu, 30 Jan 2025 11:55:48 -0800 Subject: [PATCH] refactor(curriculum): styling forms quiz (#58427) Co-authored-by: Sem Bauke --- .../66ed9043f45ce3ece4053ebf.md | 313 +++--------------- 1 file changed, 46 insertions(+), 267 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/english/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md index c425ccad6ae..9d51b345c17 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md @@ -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-- - -`