mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-17 22:01:24 -04:00
fix(curriculum): CSS relative and absolute units quiz (#56552)
This commit is contained in:
RahulJOD
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user