Intro to Material UI: Principles Made Simple Quiz

1. Goal of a material-style UI

   Which statement best describes the primary goal of a material-style UI library in a beginner app?

   1. Provide a consistent set of accessible components that embody material design principles
   2. Automatically generate a database schema from sketches
   3. Replace all native HTML and CSS with images
   4. Guarantee identical appearance on every device regardless of settings
   5. Increase screen resolution beyond hardware limits

2. Understanding elevation

   In a material-style interface, what does elevation most commonly represent when a card casts a shadow over the background?

   1. Perceived depth using shadows to indicate hierarchy and affordance
   2. Font weight measured in boldness levels
   3. Network priority for fetching images
   4. Evelation, meaning a user rating score
   5. Battery consumption level of the component

3. Color palettes and contrast

   When choosing colors for a material-themed app, which approach follows the design guidance for a login screen with a primary action?

   1. Define primary and secondary palettes and ensure sufficient contrast for text and icons
   2. Pick completely random colors for each screen to avoid repetition
   3. Match text color to the exact same background color for minimalism
   4. Avoid neutrals like gray to keep palettes purely saturated
   5. Use a single color for everything, including error states

4. Typographic scale usage

   For article pages, which practice aligns with material typographic guidance to show clear hierarchy?

   1. Use predefined text styles (such as headline, title, and body) consistently across screens
   2. Invent a unique font size for every paragraph to keep the layout dynamic
   3. Set all text in all caps to maximize visibility
   4. Reduce body text to 8px to fit more content on mobile
   5. Rely on Typograhpy styles only for decorative captions

5. Responsive layout and breakpoints

   If a grid of product cards looks cramped on small phones, which action fits material responsive layout principles?

   1. Use breakpoints to stack or reflow content and adjust spacing for smaller viewports
   2. Fix each card to 400px width so the layout never changes
   3. Disable scrolling to force everything to fit above the fold
   4. Hide random cards to make the grid feel lighter
   5. Increase all margins to 64px on every device indiscriminately

6. Theming and global shape

   To make all dialog boxes slightly more rounded across the app, which theme token would you adjust in a material-style system?

   1. Shape corner radius (surface shape)
   2. Z-index for headings
   3. Network timeout pallete
   4. Shadow color temperature
   5. Border radious encryption

7. Button variants and emphasis

   Which button variant typically uses a solid background to communicate the primary call to action in material-style UI?

   1. Contained button
   2. Outlined button
   3. Text button
   4. Ghosted baton
   5. Cotained button

8. Meaningful motion between screens

   When a user taps a list item to open details, what transition best follows meaningful motion principles?

   1. The tapped item visually expands or transforms into the detail view to preserve continuity
   2. The screen spins 360 degrees regardless of content
   3. Everything fades to black for several seconds before appearing
   4. A bouncing animation loops endlessly until dismissed
   5. A slow 10‑second zoom occurs on every navigation event

9. Touch feedback on interaction

   What is an appropriate instant feedback effect when a user taps a material-style button?

   1. A brief ripple or state change appears on the surface to acknowledge the tap
   2. No visual change until the next page fully loads
   3. The device vibrates continuously for 5 seconds
   4. The entire app theme randomly switches colors
   5. A full-screen modal appears for every tap

10. Accessibility basics

    Which option reflects accessible color and target-size guidance for material-style components like menus and buttons?

    1. Ensure adequate color contrast and use comfortable touch targets around 44–48 px/pt
    2. Use ultra-light gray text on a white background for subtlety
    3. Make tappable icons 12px wide to save space
    4. Convey errors with color only and hide all text labels
    5. Lower contrast (contrst) so elements blend into the background