feat(curriculum): add second set of quiz questions for Responsive Web Design (#59861)

curriculum/challenges/english/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md

@@ -523,3 +523,444 @@ What is the default media type if no media type is specified?
 
 `all`
 
+## --quiz--
+
+### --question--
+
+#### --text--
+
+Which CSS unit is commonly used in responsive design to create fluid layouts?
+
+#### --distractors--
+
+`px`
+
+---
+
+`em`
+
+---
+
+`rem`
+
+#### --answer--
+
+`%`
+
+### --question--
+
+#### --text--
+
+What is the primary purpose of using media queries in responsive web design?
+
+#### --distractors--
+
+To apply different styles based on user input
+
+---
+
+To make the website load faster
+
+---
+
+To change the website’s color scheme automatically
+
+#### --answer--
+
+To adjust the layout and design based on screen size
+
+### --question--
+
+#### --text--
+
+Which CSS `width` value causes an element to scale proportionally with the width of its parent container, making it suitable for responsive design?
+
+#### --distractors--
+
+`auto`
+
+---
+
+`100vh`
+
+---
+
+`fit-content`
+
+#### --answer--
+
+`100%`
+
+### --question--
+
+#### --text--
+
+Which of the following is an example of a media feature that can be used in a media query?
+
+#### --distractors--
+
+`background-color`
+
+---
+
+`font-size`
+
+---
+
+`text-align`
+
+#### --answer--
+
+`min-width`
+
+### --question--
+
+#### --text--
+
+What does the `@media screen and (max-width: 768px)` media query apply to?
+
+#### --distractors--
+
+It applies styles to screens larger than 768px wide.
+
+---
+
+It applies styles to all screens, regardless of size.
+
+---
+
+It applies styles to screens with a resolution greater than 768dpi.
+
+#### --answer--
+
+It applies styles to screens smaller than 768px wide.
+
+### --question--
+
+#### --text--
+
+Which of the following media query features targets devices with a screen resolution of at least 300dpi?
+
+#### --distractors--
+
+`@media screen and (min-width: 300dpi)`
+
+---
+
+`@media screen and (resolution: 300dpi)`
+
+---
+
+`@media screen and (min-res: 300dpi)`
+
+#### --answer--
+
+`@media screen and (min-resolution: 300dpi)`
+
+### --question--
+
+#### --text--
+
+Which of the following media features would you use to apply styles only when a device does not support hover interactions?
+
+#### --distractors--
+
+`@media (hover: hover)`
+
+---
+
+`@media (hover: auto)`
+
+---
+
+`@media (no-hover: false)`
+
+#### --answer--
+
+`@media (hover: none)`
+
+### --question--
+
+#### --text--
+
+Which of the following is a valid way to target devices with a portrait orientation using a media query?
+
+#### --distractors--
+
+`@media screen and (orientation: landscape) { ... }`
+
+---
+
+`@media (orientation: portrait) { ... }`
+
+---
+
+`@media screen and (min-orientation: portrait) { ... }`
+
+#### --answer--
+
+`@media screen and (orientation: portrait) { ... }`
+
+### --question--
+
+#### --text--
+
+Which media query feature is used to apply styles based on the resolution of the device?
+
+#### --distractors--
+
+`@media (resolution: high) { ... }`
+
+---
+
+`@media screen and (resolution: 300dpi) { ... }`
+
+---
+
+`@media (min-resolution: 150) { ... }`
+
+#### --answer--
+
+`@media (min-resolution: 300dpi) { ... }`
+
+### --question--
+
+#### --text--
+
+What is the purpose of the `@media (hover: hover)` query in CSS?
+
+#### --distractors--
+
+It applies styles only on touch devices.
+
+---
+
+It changes styles based on device orientation.
+
+---
+
+It detects if the device uses a touchscreen.
+
+#### --answer--
+
+It checks if a device supports mouse hover.
+
+### --question--
+
+#### --text--
+
+Which media feature allows you to apply styles only on high pixel density screens like Retina displays?
+
+#### --distractors--
+
+`device-type`
+
+---
+
+`aspect-ratio`
+
+---
+
+`min-width`
+
+#### --answer--
+
+`min-resolution`
+
+### --question--
+
+#### --text--
+
+Which keyword can be used in media queries to combine multiple conditions?
+
+#### --distractors--
+
+if
+
+---
+
+then
+
+---
+
+combine
+
+#### --answer--
+
+and
+
+### --question--
+
+#### --text--
+
+Which CSS technique is commonly used with media queries to apply styles only under specific conditions?
+
+#### --distractors--
+
+Using inline styles for all elements
+
+---
+
+Using JavaScript to detect screen size and apply classes
+
+---
+
+Linking to different HTML files for mobile and desktop
+
+#### --answer--
+
+Combining media features using logical operators like `and` in media queries
+
+### --question--
+
+#### --text--
+
+Which CSS technique helps ensure images scale proportionally on different screen sizes?
+
+#### --distractors--
+
+Using fixed pixel widths for images
+
+---
+
+Setting images as background elements
+
+---
+
+Applying inline styles with exact dimensions
+
+#### --answer--
+
+Setting the image width to a percentage like `width: 100%`
+
+### --question--
+
+#### --text--
+
+What is the purpose of the `@media screen and (min-resolution: 300dpi)` query?
+
+#### --distractors--
+
+To apply styles for screens with a low pixel density.
+
+---
+
+To apply styles based on the screen’s width.
+
+---
+
+To apply styles based on the device's resolution in pixels.
+
+#### --answer--
+
+To apply styles for screens with a high pixel density.
+
+### --question--
+
+#### --text--
+
+Which of the following is true about the mobile-first approach in responsive design?
+
+#### --distractors--
+
+It focuses on designing for large desktop screens first and then scaling down.
+
+---
+
+It designs primarily for tablet screens before scaling down.
+
+---
+
+It only targets smartphones and ignores tablets or desktops.
+
+#### --answer--
+
+It focuses on designing for mobile devices first, then scaling up for larger screens.
+
+### --question--
+
+#### --text--
+
+Which media query feature is used to detect the screen orientation (landscape or portrait)?
+
+#### --distractors--
+
+`aspect-ratio`
+
+---
+
+`device-width`
+
+---
+
+`max-width`
+
+#### --answer--
+
+`orientation`
+
+### --question--
+
+#### --text--
+
+What does the `prefers-color-scheme` media feature detect?
+
+#### --distractors--
+
+`The type of device used for display`
+
+---
+
+`The screen resolution`
+
+---
+
+`The user's preferred font size`
+
+#### --answer--
+
+`Whether the user prefers a light or dark theme`
+
+### --question--
+
+#### --text--
+
+What does the `orientation` media feature detect?
+
+#### --distractors--
+
+`The width of the screen`
+
+---
+
+`The resolution of the display`
+
+---
+
+`The type of device (tablet, phone, etc.)`
+
+#### --answer--
+
+`Whether the device is in landscape or portrait mode`
+
+### --question--
+
+#### --text--
+
+What is the correct syntax to apply styles for devices with at least 2x pixel density?
+
+#### --distractors--
+
+`@media (resolution: 2x)`
+
+---
+
+`@media screen and (pixel-ratio: 2)`
+
+---
+
+`@media (dpi: 300)`
+
+#### --answer--
+
+`@media screen and (min-resolution: 192dpi)`