From 92cd74c16c6ad7e4aaca1bb4db5d27e39ccc20b0 Mon Sep 17 00:00:00 2001 From: Hani Shaikh <148368923+Code-Hacker26@users.noreply.github.com> Date: Fri, 18 Oct 2024 23:27:49 +0530 Subject: [PATCH] feat(curriculum): create styling forms quiz (#56446) --- .../66ed9043f45ce3ece4053ebf.md | 200 +++++++++--------- 1 file changed, 100 insertions(+), 100 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 47b4ceeba08..4d67427ccc3 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 @@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz. #### --text-- -Placeholder question +Which of the following is a common issue with the `datetime-local` input type? #### --distractors-- -Placeholder distractor 1 +It cannot be used with CSS variables. --- -Placeholder distractor 2 +It automatically submits the form upon value selection. --- -Placeholder distractor 3 +It does not support real-time updates. #### --answer-- -Placeholder answer +The input format is different across browsers. ### --question-- #### --text-- -Placeholder question +Why is it important to use `box-sizing: border-box;` when styling text inputs? #### --distractors-- -Placeholder distractor 1 +It makes the text input focusable with a keyboard. --- -Placeholder distractor 2 +It hides the input’s placeholder text. --- -Placeholder distractor 3 +It removes the default browser styling for inputs. #### --answer-- -Placeholder answer +It ensures padding and borders are included in the element’s width and height. ### --question-- #### --text-- -Placeholder question +What is a benefit of setting a max-width for text inputs? #### --distractors-- -Placeholder distractor 1 +It prevents users from entering long text. --- -Placeholder distractor 2 +It makes the input unresponsive on larger screens. --- -Placeholder distractor 3 +It automatically adjusts the font size. #### --answer-- -Placeholder answer +It ensures the input doesn’t stretch too wide on larger screens. ### --question-- #### --text-- -Placeholder question +Why should you add `:focus` styles to text inputs? #### --distractors-- -Placeholder distractor 1 +It hides the input’s border. --- -Placeholder distractor 2 +It disables user input. --- -Placeholder distractor 3 +It forces the browser to ignore default styles. #### --answer-- -Placeholder answer +It improves accessibility by making the input easier to identify when focused. ### --question-- #### --text-- -Placeholder question +How can you prevent text inputs from being cut off when resized? #### --distractors-- -Placeholder distractor 1 +By adding `overflow: hidden;`. --- -Placeholder distractor 2 +By setting a fixed height and width. --- -Placeholder distractor 3 +By removing padding from the input. #### --answer-- -Placeholder answer +By using padding and line-height with flexible units like `em` or `rem`. ### --question-- #### --text-- -Placeholder question +Why is it important to use descriptive placeholder text in form inputs? #### --distractors-- -Placeholder distractor 1 +It helps to pre-fill the form for the user. --- -Placeholder distractor 2 +It automatically validates the input as the user types. --- -Placeholder distractor 3 +It hides the input label, reducing visual clutter. #### --answer-- -Placeholder answer +It provides users with guidance on the expected input format without cluttering the interface. ### --question-- #### --text-- -Placeholder question +Why should you avoid using `outline: none;` without adding a custom focus style? #### --distractors-- -Placeholder distractor 1 +It reduces the size of the text input. --- -Placeholder distractor 2 +It hides the input from assistive technology users. --- -Placeholder distractor 3 +It makes the input read-only. #### --answer-- -Placeholder answer +It removes the focus outline, which may confuse users about which field is selected. ### --question-- #### --text-- -Placeholder question +What is the purpose of using Flexbox or Grid for form layout? #### --distractors-- -Placeholder distractor 1 +To make form controls appear in random positions. --- -Placeholder distractor 2 +To make the form smaller on mobile devices. --- -Placeholder distractor 3 +To hide form controls on large screens. #### --answer-- -Placeholder answer +To create a well-structured and responsive form layout. ### --question-- #### --text-- -Placeholder question +Why should input elements be styled with a solid border? #### --distractors-- -Placeholder distractor 1 +It makes the form look more colorful. --- -Placeholder distractor 2 +It automatically increases form field size. --- -Placeholder distractor 3 +It forces users to zoom in on mobile devices. #### --answer-- -Placeholder answer +To ensure input fields are clearly visible and easily recognizable as form controls. ### --question-- #### --text-- -Placeholder question +How does increasing the margin between form elements affect form usability? #### --distractors-- -Placeholder distractor 1 +It decreases accessibility on mobile devices. --- -Placeholder distractor 2 +It prevents users from submitting the form. --- -Placeholder distractor 3 +It hides form labels. #### --answer-- -Placeholder answer +It improves readability by helping users see the grouping of related form elements. ### --question-- #### --text-- -Placeholder question +What is the primary reason for using `appearance: none` in form elements? #### --distractors-- -Placeholder distractor 1 +To add new default styles to form elements. --- -Placeholder distractor 2 +To enable form elements to appear larger on mobile devices. --- -Placeholder distractor 3 +To disable form validation for specific elements. #### --answer-- -Placeholder answer +To remove the default browser styling from form elements and apply custom styles. ### --question-- #### --text-- -Placeholder question +Which type of form elements is commonly styled using `appearance: none` to remove their default look? #### --distractors-- -Placeholder distractor 1 +`