diff --git a/curriculum/challenges/english/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md b/curriculum/challenges/english/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md index 2c555754f4a..63d2cae08a5 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-css-relative-and-absolute-units/66ed9009f45ce3ece4053eb7.md @@ -17,439 +17,439 @@ To pass the quiz, you must correctly answer at least 17 of the 20 of the questio #### --text-- -Placeholder question +If the body text is `16px`, how much is `1em` in most child elements? #### --distractors-- -Placeholder distractor 1 +`18px` --- -Placeholder distractor 2 +`12px` --- -Placeholder distractor 3 +It depends on the parent's font size #### --answer-- -Placeholder answer +`16px` ### --question-- #### --text-- -Placeholder question +What does `100vw` cover in terms of screen width? #### --distractors-- -Placeholder distractor 1 +100% of the screen width answer --- -Placeholder distractor 2 +100% of the viewport height --- -Placeholder distractor 3 +100% of the parent's width #### --answer-- -Placeholder answer +100% of the viewport width ### --question-- #### --text-- -Placeholder question +If a container is `1000px` wide, how wide is 5% of it? #### --distractors-- -Placeholder distractor 1 +`100px` --- -Placeholder distractor 2 +`500px` --- -Placeholder distractor 3 +`5px` #### --answer-- -Placeholder answer +`50px` ### --question-- #### --text-- -Placeholder question +If the root font size is `20px`, what is `1rem` equal to? #### --distractors-- -Placeholder distractor 1 +`18px` --- -Placeholder distractor 2 +`16px` --- -Placeholder distractor 3 +`10px` #### --answer-- -Placeholder answer +`20px` ### --question-- #### --text-- -Placeholder question +What can the `calc()` function do in CSS? #### --distractors-- -Placeholder distractor 1 +Modify colors dynamically --- -Placeholder distractor 2 +Set a fixed width --- -Placeholder distractor 3 +Only work with percentages #### --answer-- -Placeholder answer +Add, subtract, multiply, or divide different units ### --question-- #### --text-- -Placeholder question +On a typical screen with 96 DPI resolution, how many points (`pt`) are in 1 pixel (`px`)? #### --distractors-- -Placeholder distractor 1 +`1.33pt` --- -Placeholder distractor 2 +`1pt` --- -Placeholder distractor 3 +`2pt` #### --answer-- -Placeholder answer +`0.75pt` ### --question-- #### --text-- -Placeholder question +If the screen height is `800px`, what would `50vh` be? #### --distractors-- -Placeholder distractor 1 +`50px` --- -Placeholder distractor 2 +`200px` --- -Placeholder distractor 3 +`100px` #### --answer-- -Placeholder answer +`400px` ### --question-- #### --text-- -Placeholder question +What does setting an element's width to `100%` mean? #### --distractors-- -Placeholder distractor 1 +It takes up the full width of the document --- -Placeholder distractor 2 +It takes up the full width of the screen --- -Placeholder distractor 3 +It takes up `100px` #### --answer-- -Placeholder answer +It takes up the full width of its parent ### --question-- #### --text-- -Placeholder question +What happens with `calc(10px + 20%)` in CSS? #### --distractors-- -Placeholder distractor 1 +Adds `10px` to `10%` of the document width --- -Placeholder distractor 2 +Always equals `30px` --- -Placeholder distractor 3 +Adds `10px` to `20%` of the screen width #### --answer-- -Placeholder answer +Adds `10px` to `20%` of the parent's width ### --question-- #### --text-- -Placeholder question +If the parent element's text size is `20px`, how big is `1.5em`? #### --distractors-- -Placeholder distractor 1 +`25px` --- -Placeholder distractor 2 +`15px` --- -Placeholder distractor 3 +`20px` #### --answer-- -Placeholder answer +`30px` ### --question-- #### --text-- -Placeholder question +With a root font size of `16px`, how big is `10rem`? #### --distractors-- -Placeholder distractor 1 +`140px` --- -Placeholder distractor 2 +`10px` --- -Placeholder distractor 3 +`100px` #### --answer-- -Placeholder answer +`160px` ### --question-- #### --text-- -Placeholder question +Why might you use `pt` instead of `px` in design? #### --distractors-- -Placeholder distractor 1 +Points are scalable --- -Placeholder distractor 2 +Points are better for responsive layouts --- -Placeholder distractor 3 +Points are easier to manage on screens #### --answer-- -Placeholder answer +Points are for print design ### --question-- #### --text-- -Placeholder question +How does `calc(10vh + 50px)` work for height? #### --distractors-- -Placeholder distractor 1 +Adds `50px` to `10%` of the viewport height --- -Placeholder distractor 2 +Adds `10px` to `50%` of the parent's height --- -Placeholder distractor 3 +Adds `10vh` to `50%` of the document #### --answer-- -Placeholder answer +Adds `50px` to `10%` of the viewport height ### --question-- #### --text-- -Placeholder question +How much screen space does `80vw` take? #### --distractors-- -Placeholder distractor 1 +80% of the parent's width --- -Placeholder distractor 2 +100% of the viewport height --- -Placeholder distractor 3 +`80px` #### --answer-- -Placeholder answer +80% of the viewport width ### --question-- #### --text-- -Placeholder question +If the root font size is `18px`, how big is `2rem`? #### --distractors-- -Placeholder distractor 1 +`24px` --- -Placeholder distractor 2 +`18px` --- -Placeholder distractor 3 +`20px` #### --answer-- -Placeholder answer +`36px` ### --question-- #### --text-- -Placeholder question +What does `calc(50% + 20px)` do for width? #### --distractors-- -Placeholder distractor 1 +Adds `50%` of the screen width plus `20px` --- -Placeholder distractor 2 +Adds `50px` to the screen width --- -Placeholder distractor 3 +Adds `50%` of the height plus `20px` #### --answer-- -Placeholder answer +Adds `50%` of the parent's width plus `20px` ### --question-- #### --text-- -Placeholder question +What's the key difference between `rem` and `em` in CSS? #### --distractors-- -Placeholder distractor 1 +`rem` is only used for fonts --- -Placeholder distractor 2 +`rem` is for width, em is for fonts --- -Placeholder distractor 3 +`rem` is always smaller than `em` #### --answer-- -Placeholder answer +`rem` is based on the root font size, `em` is based on the parent's font size ### --question-- #### --text-- -Placeholder question +How does `calc(100px + 10%)` work for width? #### --distractors-- -Placeholder distractor 1 +Adds `10%` of the screen width to `100px` --- -Placeholder distractor 2 +Adds `10%` of the height to `100px` --- -Placeholder distractor 3 +Adds `100px` to `10%` of the document #### --answer-- -Placeholder answer +Adds `10%` of the parent's width to `100px` ### --question-- #### --text-- -Placeholder question +What does setting an element's width to auto do in CSS? #### --distractors-- -Placeholder distractor 1 +Sets the width to `100%` --- -Placeholder distractor 2 +Sets the width to `50%` of the viewport --- -Placeholder distractor 3 +Sets the width to `0px` #### --answer-- -Placeholder answer +Allows the browser to determine the width based on the content and container ### --question-- #### --text-- -Placeholder question +What happens when you use `calc(30vh - 10px)` for height? #### --distractors-- -Placeholder distractor 1 +Subtracts `10px` from the parent's height --- -Placeholder distractor 2 +Subtracts `30px` from the screen height --- -Placeholder distractor 3 +Adds `30%` of the parent's height minus `10px` #### --answer-- -Placeholder answer +Subtracts `10px` from `30%` of the viewport height