

<!doctype html>
<html lang="en-US" class="no-js" itemtype="https://schema.org/Blog" itemscope>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
	<title>Mobile UI Principles: Material Design &#038; HIG Essentials Quiz &#8211; Developer Interview Practice &amp; Coding Quizzes</title>
<meta name='robots' content='max-image-preview:large' />
	<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
	<link rel='dns-prefetch' href='//platform-api.sharethis.com' />
<link rel='dns-prefetch' href='//cdn.jsdelivr.net' />
<link rel='dns-prefetch' href='//cdnjs.cloudflare.com' />
<link rel='dns-prefetch' href='//www.googletagmanager.com' />
<link rel="alternate" type="application/rss+xml" title="Developer Interview Practice &amp; Coding Quizzes &raquo; Feed" href="https://mockrounds.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Developer Interview Practice &amp; Coding Quizzes &raquo; Comments Feed" href="https://mockrounds.com/comments/feed/" />
			<script>document.documentElement.classList.remove( 'no-js' );</script>
			<meta property="og:type" content="website" />
<meta property="og:image" content="https://mockrounds.com/wp-content/uploads/2025/08/favicon-logo.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://mockrounds.com/wp-content/uploads/2025/08/favicon-logo.jpg" />
<meta name="image" content="https://mockrounds.com/wp-content/uploads/2025/08/favicon-logo.jpg" />
<script>
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/16.0.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/16.0.1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/mockrounds.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.8.2"}};
/*! This file is auto-generated */
!function(s,n){var o,i,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),a=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===a[t]})}function u(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);for(var n=e.getImageData(16,16,1,1),a=0;a<n.data.length;a++)if(0!==n.data[a])return!1;return!0}function f(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\udedf")}return!1}function g(e,t,n,a){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):s.createElement("canvas"),o=r.getContext("2d",{willReadFrequently:!0}),i=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(function(e){i[e]=t(o,e,n,a)}),i}function t(e){var t=s.createElement("script");t.src=e,t.defer=!0,s.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",i=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){s.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+g.toString()+"("+[JSON.stringify(i),f.toString(),p.toString(),u.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"}),r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=function(e){c(n=e.data),r.terminate(),t(n)})}catch(e){}c(n=g(i,f,p,u))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings);
</script>
<link rel='stylesheet' id='hfe-widgets-style-css' href='https://mockrounds.com/wp-content/plugins/header-footer-elementor/inc/widgets-css/frontend.css?ver=2.5.1' media='all' />
<style id='wp-emoji-styles-inline-css'>

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
</style>
<link rel='stylesheet' id='wp-block-library-css' href='https://mockrounds.com/wp-includes/css/dist/block-library/style.min.css?ver=6.8.2' media='all' />
<style id='classic-theme-styles-inline-css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css'>
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--theme-palette-1: var(--global-palette1);--wp--preset--color--theme-palette-2: var(--global-palette2);--wp--preset--color--theme-palette-3: var(--global-palette3);--wp--preset--color--theme-palette-4: var(--global-palette4);--wp--preset--color--theme-palette-5: var(--global-palette5);--wp--preset--color--theme-palette-6: var(--global-palette6);--wp--preset--color--theme-palette-7: var(--global-palette7);--wp--preset--color--theme-palette-8: var(--global-palette8);--wp--preset--color--theme-palette-9: var(--global-palette9);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: var(--global-font-size-small);--wp--preset--font-size--medium: var(--global-font-size-medium);--wp--preset--font-size--large: var(--global-font-size-large);--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--larger: var(--global-font-size-larger);--wp--preset--font-size--xxlarge: var(--global-font-size-xxlarge);--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
:root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='contact-form-7-css' href='https://mockrounds.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=6.1.1' media='all' />
<link rel='stylesheet' id='share-this-share-buttons-sticky-css' href='https://mockrounds.com/wp-content/plugins/sharethis-share-buttons/css/mu-style.css?ver=1754683738' media='all' />
<link rel='stylesheet' id='bigger-picture-css' href='https://mockrounds.com/wp-content/plugins/youtube-channel/assets/lib/bigger-picture/css/bigger-picture.min.css?ver=3.25.2' media='all' />
<link rel='stylesheet' id='youtube-channel-css' href='https://mockrounds.com/wp-content/plugins/youtube-channel/assets/css/youtube-channel.min.css?ver=3.25.2' media='all' />
<link rel='stylesheet' id='hfe-style-css' href='https://mockrounds.com/wp-content/plugins/header-footer-elementor/assets/css/header-footer-elementor.css?ver=2.5.1' media='all' />
<link rel='stylesheet' id='elementor-frontend-css' href='https://mockrounds.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.32.1' media='all' />
<link rel='stylesheet' id='elementor-post-12-css' href='https://mockrounds.com/wp-content/uploads/elementor/css/post-12.css?ver=1758053090' media='all' />
<link rel='stylesheet' id='elementor-post-18-css' href='https://mockrounds.com/wp-content/uploads/elementor/css/post-18.css?ver=1758053090' media='all' />
<link rel='stylesheet' id='child-theme-css' href='https://mockrounds.com/wp-content/themes/kadence-child/style.css?ver=112' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://mockrounds.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=4.7.0' media='all' />
<link rel='stylesheet' id='bootstrap-css-css' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css?ver=5.3.3' media='all' />
<link rel='stylesheet' id='owl-carousel-css' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css?ver=6.8.2' media='all' />
<style id='owl-carousel-inline-css'>

        .mockrounds-books-slider { margin-top:25px; text-align:center; }
        .book-card { padding:10px; display:block; text-align:center; text-decoration:none; color:#000; }
        .book-card img { max-width:150px; margin:0 auto 10px; display:block; }
        .book-card h5 { font-size:16px; margin:5px 0 0; }
        .owl-nav button { background:none !important; border:none !important; font-size:30px !important; color:#ed5758 !important; }
        .owl-nav button:hover { color:#333 !important; }
        .owl-nav button{ height: 40px; width: 40px; }
        .owl-nav button span {
            color: #fff;
            padding: 10px;
            background: #ed5758;
            font-size: 18px;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            display: block;
            line-height: 18px;
        }
        .owl-nav button span:hover{ background: #fa7777; }
        .owl-nav {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
    
</style>
<link rel='stylesheet' id='owl-theme-css' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css?ver=6.8.2' media='all' />
<link rel='stylesheet' id='kadence-global-css' href='https://mockrounds.com/wp-content/themes/kadence/assets/css/global.min.css?ver=1.2.27' media='all' />
<style id='kadence-global-inline-css'>
/* Kadence Base CSS */
:root{--global-palette1:#2B6CB0;--global-palette2:#215387;--global-palette3:#1A202C;--global-palette4:#2D3748;--global-palette5:#4A5568;--global-palette6:#718096;--global-palette7:#EDF2F7;--global-palette8:#F7FAFC;--global-palette9:#ffffff;--global-palette9rgb:255, 255, 255;--global-palette-highlight:var(--global-palette1);--global-palette-highlight-alt:var(--global-palette2);--global-palette-highlight-alt2:var(--global-palette9);--global-palette-btn-bg:var(--global-palette1);--global-palette-btn-bg-hover:var(--global-palette2);--global-palette-btn:var(--global-palette9);--global-palette-btn-hover:var(--global-palette9);--global-body-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--global-heading-font-family:inherit;--global-primary-nav-font-family:inherit;--global-fallback-font:sans-serif;--global-display-fallback-font:sans-serif;--global-content-width:1290px;--global-content-wide-width:calc(1290px + 230px);--global-content-narrow-width:842px;--global-content-edge-padding:1.5rem;--global-content-boxed-padding:2rem;--global-calc-content-width:calc(1290px - var(--global-content-edge-padding) - var(--global-content-edge-padding) );--wp--style--global--content-size:var(--global-calc-content-width);}.wp-site-blocks{--global-vw:calc( 100vw - ( 0.5 * var(--scrollbar-offset)));}:root body.kadence-elementor-colors{--e-global-color-kadence1:var(--global-palette1);--e-global-color-kadence2:var(--global-palette2);--e-global-color-kadence3:var(--global-palette3);--e-global-color-kadence4:var(--global-palette4);--e-global-color-kadence5:var(--global-palette5);--e-global-color-kadence6:var(--global-palette6);--e-global-color-kadence7:var(--global-palette7);--e-global-color-kadence8:var(--global-palette8);--e-global-color-kadence9:var(--global-palette9);}body{background:var(--global-palette8);}body, input, select, optgroup, textarea{font-weight:400;font-size:17px;line-height:1.6;font-family:var(--global-body-font-family);color:var(--global-palette4);}.content-bg, body.content-style-unboxed .site{background:var(--global-palette9);}h1,h2,h3,h4,h5,h6{font-family:var(--global-heading-font-family);}h1{font-weight:700;font-size:32px;line-height:1.5;color:var(--global-palette3);}h2{font-weight:700;font-size:28px;line-height:1.5;color:var(--global-palette3);}h3{font-weight:700;font-size:24px;line-height:1.5;color:var(--global-palette3);}h4{font-weight:700;font-size:22px;line-height:1.5;color:var(--global-palette4);}h5{font-weight:700;font-size:20px;line-height:1.5;color:var(--global-palette4);}h6{font-weight:700;font-size:18px;line-height:1.5;color:var(--global-palette5);}.entry-hero .kadence-breadcrumbs{max-width:1290px;}.site-container, .site-header-row-layout-contained, .site-footer-row-layout-contained, .entry-hero-layout-contained, .comments-area, .alignfull > .wp-block-cover__inner-container, .alignwide > .wp-block-cover__inner-container{max-width:var(--global-content-width);}.content-width-narrow .content-container.site-container, .content-width-narrow .hero-container.site-container{max-width:var(--global-content-narrow-width);}@media all and (min-width: 1520px){.wp-site-blocks .content-container  .alignwide{margin-left:-115px;margin-right:-115px;width:unset;max-width:unset;}}@media all and (min-width: 1102px){.content-width-narrow .wp-site-blocks .content-container .alignwide{margin-left:-130px;margin-right:-130px;width:unset;max-width:unset;}}.content-style-boxed .wp-site-blocks .entry-content .alignwide{margin-left:calc( -1 * var( --global-content-boxed-padding ) );margin-right:calc( -1 * var( --global-content-boxed-padding ) );}.content-area{margin-top:5rem;margin-bottom:5rem;}@media all and (max-width: 1024px){.content-area{margin-top:3rem;margin-bottom:3rem;}}@media all and (max-width: 767px){.content-area{margin-top:2rem;margin-bottom:2rem;}}@media all and (max-width: 1024px){:root{--global-content-boxed-padding:2rem;}}@media all and (max-width: 767px){:root{--global-content-boxed-padding:1.5rem;}}.entry-content-wrap{padding:2rem;}@media all and (max-width: 1024px){.entry-content-wrap{padding:2rem;}}@media all and (max-width: 767px){.entry-content-wrap{padding:1.5rem;}}.entry.single-entry{box-shadow:0px 15px 15px -10px rgba(0,0,0,0.05);}.entry.loop-entry{box-shadow:0px 15px 15px -10px rgba(0,0,0,0.05);}.loop-entry .entry-content-wrap{padding:2rem;}@media all and (max-width: 1024px){.loop-entry .entry-content-wrap{padding:2rem;}}@media all and (max-width: 767px){.loop-entry .entry-content-wrap{padding:1.5rem;}}button, .button, .wp-block-button__link, input[type="button"], input[type="reset"], input[type="submit"], .fl-button, .elementor-button-wrapper .elementor-button, .wc-block-components-checkout-place-order-button, .wc-block-cart__submit{box-shadow:0px 0px 0px -7px rgba(0,0,0,0);}button:hover, button:focus, button:active, .button:hover, .button:focus, .button:active, .wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active, input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active, input[type="reset"]:hover, input[type="reset"]:focus, input[type="reset"]:active, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active, .elementor-button-wrapper .elementor-button:hover, .elementor-button-wrapper .elementor-button:focus, .elementor-button-wrapper .elementor-button:active, .wc-block-cart__submit:hover{box-shadow:0px 15px 25px -7px rgba(0,0,0,0.1);}.kb-button.kb-btn-global-outline.kb-btn-global-inherit{padding-top:calc(px - 2px);padding-right:calc(px - 2px);padding-bottom:calc(px - 2px);padding-left:calc(px - 2px);}@media all and (min-width: 1025px){.transparent-header .entry-hero .entry-hero-container-inner{padding-top:80px;}}@media all and (max-width: 1024px){.mobile-transparent-header .entry-hero .entry-hero-container-inner{padding-top:80px;}}@media all and (max-width: 767px){.mobile-transparent-header .entry-hero .entry-hero-container-inner{padding-top:80px;}}#kt-scroll-up-reader, #kt-scroll-up{border-radius:5px 5px 5px 5px;color:#ffffff;background:#ed5758;bottom:30px;font-size:28px;padding:0.4em 0.4em 0.4em 0.4em;}#kt-scroll-up-reader.scroll-up-side-right, #kt-scroll-up.scroll-up-side-right{right:30px;}#kt-scroll-up-reader.scroll-up-side-left, #kt-scroll-up.scroll-up-side-left{left:30px;}@media all and (hover: hover){#kt-scroll-up-reader:hover, #kt-scroll-up:hover{color:#ffffff;background:var(--global-palette3);}}@media all and (max-width: 1024px){#kt-scroll-up-reader, #kt-scroll-up{font-size:25px;}}@media all and (max-width: 767px){#kt-scroll-up-reader, #kt-scroll-up{font-size:25px;}}.comment-metadata a:not(.comment-edit-link), .comment-body .edit-link:before{display:none;}
/* Kadence Header CSS */
@media all and (max-width: 1024px){.mobile-transparent-header #masthead{position:absolute;left:0px;right:0px;z-index:100;}.kadence-scrollbar-fixer.mobile-transparent-header #masthead{right:var(--scrollbar-offset,0);}.mobile-transparent-header #masthead, .mobile-transparent-header .site-top-header-wrap .site-header-row-container-inner, .mobile-transparent-header .site-main-header-wrap .site-header-row-container-inner, .mobile-transparent-header .site-bottom-header-wrap .site-header-row-container-inner{background:transparent;}.site-header-row-tablet-layout-fullwidth, .site-header-row-tablet-layout-standard{padding:0px;}}@media all and (min-width: 1025px){.transparent-header #masthead{position:absolute;left:0px;right:0px;z-index:100;}.transparent-header.kadence-scrollbar-fixer #masthead{right:var(--scrollbar-offset,0);}.transparent-header #masthead, .transparent-header .site-top-header-wrap .site-header-row-container-inner, .transparent-header .site-main-header-wrap .site-header-row-container-inner, .transparent-header .site-bottom-header-wrap .site-header-row-container-inner{background:transparent;}}.site-branding a.brand img{max-width:180px;}.site-branding a.brand img.svg-logo-image{width:180px;}.site-branding{padding:0px 0px 0px 0px;}#masthead, #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap), #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner{background:#ffffff;}.site-main-header-wrap .site-header-row-container-inner{border-bottom:1px solid var(--global-palette3);}.site-main-header-inner-wrap{min-height:80px;}.header-navigation[class*="header-navigation-style-underline"] .header-menu-container.primary-menu-container>ul>li>a:after{width:calc( 100% - 1.2em);}.main-navigation .primary-menu-container > ul > li.menu-item > a{padding-left:calc(1.2em / 2);padding-right:calc(1.2em / 2);padding-top:0.6em;padding-bottom:0.6em;color:var(--global-palette5);}.main-navigation .primary-menu-container > ul > li.menu-item .dropdown-nav-special-toggle{right:calc(1.2em / 2);}.main-navigation .primary-menu-container > ul > li.menu-item > a:hover{color:var(--global-palette-highlight);}.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a{color:var(--global-palette3);}.header-navigation[class*="header-navigation-style-underline"] .header-menu-container.secondary-menu-container>ul>li>a:after{width:calc( 100% - 30px);}.secondary-navigation .secondary-menu-container > ul > li.menu-item > a{padding-left:calc(30px / 2);padding-right:calc(30px / 2);padding-top:0.6em;padding-bottom:0.6em;color:var(--global-palette3);}.secondary-navigation .primary-menu-container > ul > li.menu-item .dropdown-nav-special-toggle{right:calc(30px / 2);}.secondary-navigation .secondary-menu-container > ul li.menu-item > a{font-style:normal;font-size:18px;line-height:28px;text-transform:capitalize;}.secondary-navigation .secondary-menu-container > ul > li.menu-item > a:hover{color:#ed5758;}.secondary-navigation .secondary-menu-container > ul > li.menu-item.current-menu-item > a{color:#ed5758;}.header-navigation .header-menu-container ul ul.sub-menu, .header-navigation .header-menu-container ul ul.submenu{background:#ed5758;box-shadow:0px 2px 13px 0px rgba(0,0,0,0.1);}.header-navigation .header-menu-container ul ul li.menu-item, .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul > li.menu-item > a{border-bottom:1px solid var(--global-palette8);}.header-navigation .header-menu-container ul ul li.menu-item > a{width:320px;padding-top:15px;padding-bottom:15px;color:#ffffff;font-style:normal;font-size:13px;line-height:14px;letter-spacing:1px;text-transform:capitalize;}.header-navigation .header-menu-container ul ul li.menu-item > a:hover{color:var(--global-palette9);background:#fa7f80;}.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a{color:var(--global-palette9);background:#fa7f80;}.mobile-toggle-open-container .menu-toggle-open, .mobile-toggle-open-container .menu-toggle-open:focus{color:#ed5758;padding:0.4em 0.6em 0.4em 0.6em;font-size:14px;}.mobile-toggle-open-container .menu-toggle-open.menu-toggle-style-bordered{border:1px solid currentColor;}.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon{font-size:20px;}.mobile-toggle-open-container .menu-toggle-open:hover, .mobile-toggle-open-container .menu-toggle-open:focus-visible{color:var(--global-palette3);}.mobile-navigation ul li{font-style:normal;font-weight:600;font-size:14px;line-height:18px;}.mobile-navigation ul li a{padding-top:em;padding-bottom:em;}.mobile-navigation ul li > a, .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap{color:var(--global-palette8);}.mobile-navigation ul li > a:hover, .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap:hover{background:rgba(247,109,109,0.81);color:var(--global-palette8);}.mobile-navigation ul li.current-menu-item > a, .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap{background:rgba(247,109,109,0.82);color:var(--global-palette8);}.mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap, .mobile-navigation ul li:not(.menu-item-has-children) a{border-bottom:0px solid rgba(255,255,255,0.56);}.mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button{border-left:0px solid rgba(255,255,255,0.56);}#mobile-drawer .drawer-inner, #mobile-drawer.popup-drawer-layout-fullwidth.popup-drawer-animation-slice .pop-portion-bg, #mobile-drawer.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.pop-animated.show-drawer .drawer-inner{background:#ed5758;width:320px;}#mobile-drawer .drawer-header .drawer-toggle{padding:0.6em 0.15em 0.6em 0.15em;font-size:30px;}
/* Kadence Footer CSS */
.site-bottom-footer-inner-wrap{padding-top:30px;padding-bottom:30px;grid-column-gap:30px;}.site-bottom-footer-inner-wrap .widget{margin-bottom:30px;}.site-bottom-footer-inner-wrap .site-footer-section:not(:last-child):after{right:calc(-30px / 2);}
</style>
<link rel='stylesheet' id='kadence-header-css' href='https://mockrounds.com/wp-content/themes/kadence/assets/css/header.min.css?ver=1.2.27' media='all' />
<link rel='stylesheet' id='kadence-content-css' href='https://mockrounds.com/wp-content/themes/kadence/assets/css/content.min.css?ver=1.2.27' media='all' />
<link rel='stylesheet' id='kadence-footer-css' href='https://mockrounds.com/wp-content/themes/kadence/assets/css/footer.min.css?ver=1.2.27' media='all' />
<link rel='stylesheet' id='hfe-elementor-icons-css' href='https://mockrounds.com/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=5.34.0' media='all' />
<link rel='stylesheet' id='hfe-icons-list-css' href='https://mockrounds.com/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css?ver=3.24.3' media='all' />
<link rel='stylesheet' id='hfe-social-icons-css' href='https://mockrounds.com/wp-content/plugins/elementor/assets/css/widget-social-icons.min.css?ver=3.24.0' media='all' />
<link rel='stylesheet' id='hfe-social-share-icons-brands-css' href='https://mockrounds.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/brands.css?ver=5.15.3' media='all' />
<link rel='stylesheet' id='hfe-social-share-icons-fontawesome-css' href='https://mockrounds.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.css?ver=5.15.3' media='all' />
<link rel='stylesheet' id='hfe-nav-menu-icons-css' href='https://mockrounds.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.css?ver=5.15.3' media='all' />
<link rel='stylesheet' id='um_modal-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-modal.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_ui-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/jquery-ui/jquery-ui.min.css?ver=1.13.2' media='all' />
<link rel='stylesheet' id='um_tipsy-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/tipsy/tipsy.min.css?ver=1.0.0a' media='all' />
<link rel='stylesheet' id='um_raty-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/raty/um-raty.min.css?ver=2.6.0' media='all' />
<link rel='stylesheet' id='select2-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/select2/select2.min.css?ver=4.0.13' media='all' />
<link rel='stylesheet' id='um_fileupload-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-fileupload.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_confirm-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/um-confirm/um-confirm.min.css?ver=1.0' media='all' />
<link rel='stylesheet' id='um_datetime-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.min.css?ver=3.6.2' media='all' />
<link rel='stylesheet' id='um_datetime_date-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.date.min.css?ver=3.6.2' media='all' />
<link rel='stylesheet' id='um_datetime_time-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.time.min.css?ver=3.6.2' media='all' />
<link rel='stylesheet' id='um_fonticons_ii-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/legacy/fonticons/fonticons-ii.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_fonticons_fa-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/legacy/fonticons/fonticons-fa.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_fontawesome-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-fontawesome.min.css?ver=6.5.2' media='all' />
<link rel='stylesheet' id='um_common-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/common.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_responsive-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-responsive.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_styles-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-styles.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_crop-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/cropper/cropper.min.css?ver=1.6.1' media='all' />
<link rel='stylesheet' id='um_profile-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-profile.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_account-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-account.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_misc-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-misc.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='um_default_css-css' href='https://mockrounds.com/wp-content/plugins/ultimate-member/assets/css/um-old-default.min.css?ver=2.10.5' media='all' />
<link rel='stylesheet' id='elementor-gf-local-jost-css' href='https://mockrounds.com/wp-content/uploads/elementor/google-fonts/css/jost.css?ver=1757067197' media='all' />
<link rel='stylesheet' id='elementor-gf-local-opensans-css' href='https://mockrounds.com/wp-content/uploads/elementor/google-fonts/css/opensans.css?ver=1757067209' media='all' />
<script src="//platform-api.sharethis.com/js/sharethis.js?ver=2.3.6#property=687a3194b4b5899d48e70d0e&amp;product=sticky-buttons&amp;source=sharethis-share-buttons-wordpress" id="share-this-share-buttons-mu-js"></script>
<script src="https://mockrounds.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
<script src="https://mockrounds.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
<script id="jquery-js-after">
!function($){"use strict";$(document).ready(function(){$(this).scrollTop()>100&&$(".hfe-scroll-to-top-wrap").removeClass("hfe-scroll-to-top-hide"),$(window).scroll(function(){$(this).scrollTop()<100?$(".hfe-scroll-to-top-wrap").fadeOut(300):$(".hfe-scroll-to-top-wrap").fadeIn(300)}),$(".hfe-scroll-to-top-wrap").on("click",function(){$("html, body").animate({scrollTop:0},300);return!1})})}(jQuery);
!function($){'use strict';$(document).ready(function(){var bar=$('.hfe-reading-progress-bar');if(!bar.length)return;$(window).on('scroll',function(){var s=$(window).scrollTop(),d=$(document).height()-$(window).height(),p=d? s/d*100:0;bar.css('width',p+'%')});});}(jQuery);
</script>

<!-- Google tag (gtag.js) snippet added by Site Kit -->
<!-- Google Analytics snippet added by Site Kit -->
<script src="https://www.googletagmanager.com/gtag/js?id=GT-NGBBNQZR" id="google_gtagjs-js" async></script>
<script id="google_gtagjs-js-after">
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}
gtag("set","linker",{"domains":["mockrounds.com"]});
gtag("js", new Date());
gtag("set", "developer_id.dZTNiMT", true);
gtag("config", "GT-NGBBNQZR");
 window._googlesitekit = window._googlesitekit || {}; window._googlesitekit.throttledEvents = []; window._googlesitekit.gtagEvent = (name, data) => { var key = JSON.stringify( { name, data } ); if ( !! window._googlesitekit.throttledEvents[ key ] ) { return; } window._googlesitekit.throttledEvents[ key ] = true; setTimeout( () => { delete window._googlesitekit.throttledEvents[ key ]; }, 5 ); gtag( "event", name, { ...data, event_source: "site-kit" } ); };
</script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/um-gdpr.min.js?ver=2.10.5" id="um-gdpr-js"></script>
<link rel="https://api.w.org/" href="https://mockrounds.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://mockrounds.com/wp-json/wp/v2/mobile_apps/5924" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://mockrounds.com/xmlrpc.php?rsd" />
<meta name="generator" content="WordPress 6.8.2" />
<link rel="canonical" href="https://mockrounds.com/mobile_apps/mobile-ui-principles-material-design-hig-essentials-quiz/" />
<link rel='shortlink' href='https://mockrounds.com/?p=5924' />
<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://mockrounds.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmockrounds.com%2Fmobile_apps%2Fmobile-ui-principles-material-design-hig-essentials-quiz%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://mockrounds.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmockrounds.com%2Fmobile_apps%2Fmobile-ui-principles-material-design-hig-essentials-quiz%2F&#038;format=xml" />
<meta name="cdp-version" content="1.5.0" /><meta name="generator" content="Site Kit by Google 1.161.0" /><meta name="generator" content="Elementor 3.32.1; features: e_font_icon_svg, additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-swap">
			<style>
				.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
				.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
					background-image: none !important;
				}
				@media screen and (max-height: 1024px) {
					.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
					.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
						background-image: none !important;
					}
				}
				@media screen and (max-height: 640px) {
					.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
					.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
						background-image: none !important;
					}
				}
			</style>
			<link rel="icon" href="https://mockrounds.com/wp-content/uploads/2025/07/logo-1-1.jpg" sizes="32x32" />
<link rel="icon" href="https://mockrounds.com/wp-content/uploads/2025/07/logo-1-1.jpg" sizes="192x192" />
<link rel="apple-touch-icon" href="https://mockrounds.com/wp-content/uploads/2025/07/logo-1-1.jpg" />
<meta name="msapplication-TileImage" content="https://mockrounds.com/wp-content/uploads/2025/07/logo-1-1.jpg" />
		<style id="wp-custom-css">
			.categories-listing-section .card,
.archive article.loop-entry,
body.search.search-results article.loop-entry{
    background: #fff !important;
    box-shadow: 5px 5px 0 #fa7777;
    border: 1px solid #e3e3e3;
	
	border-radius: 8px
}
.site-header-section {
    display: flex;
    max-height: inherit;
    gap: 50px;
}
section.categories-listing-section a {
    text-decoration: none;
}
.archive h1.page-title.archive-title {
    font-size: 40px;
    line-height: 50px;
}
.single div#primary {
    margin-top: 0px;
}
#archive-container h2.entry-title {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #fa7777;
}
#archive-container h2.entry-title:hover,
#archive-container h2.entry-title a:hover{
	color: #fa7777 !important;
}
.categories-listing-section .card-body {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 5px;
	  color: #fa7777;
}
.categories-listing-section .card-text:last-child {
    margin-bottom: 0.5rem;
    font-weight: 600;
}
#archive-container .entry-content-wrap header.entry-header {
    margin-bottom: 0 !important;
}
#archive-container .entry-summary{
	display: none;
}


.categories-listing-section .card, .archive article.loop-entry, body.search.search-results article.loop-entry {
    background: #fff !important;
    box-shadow: 5px 5px 0 #fa7777;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    height: 100% !important;
}
.page-id-13 .categories-listing-section .row{
	justify-content: center !important;
}
.page-id-13 .categories-listing-section .card-body {
    align-items: center;
}


.page-id-13 h5.card-title {
    font-size: 17px;
    line-height: 25px;
    margin-bottom: 0 !important;
/*     color: #000; */
    text-align: left !important;
}
.page-id-13 .card {
    box-shadow: none !important;
    border: none;
    background: transparent !important;
    border-radius: 0;
}

#create-quiz-btn span{
	align-items: center;
}
#create-quiz-btn svg {
    height: 40px;
    width: 40px;
}

.page-id-13 .categories-listing-section .card-body {
    padding: 0;
    background: transparent !important;
}
.page-id-13 .categories-listing-section .card-body {
    align-items: start;
    justify-content: start;
}
.categories-listing-section .card-body h5,
.categories-listing-section .card-body p{
	font-size: 17px;
}
.single h3#reply-title,
.single p.logged-in-as{
    display: none;
}

.single div#st-2 {
    display: none;
}

.um-col-alt-b {
    display: none;
}
i.fa.fa-bullseye:before {
    color: #ee0000 !important;
}
#logoSlider figure.swiper-slide-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#logoSlider figure.swiper-slide-inner img {
    height: 100px;
    width: 100%;
    max-width: 100px;
    filter: brightness(0);
}

#logoSlider figcaption.elementor-image-carousel-caption a {
    color: #545454;
}
/*-----Sub menu & Scroll---*/
.header-navigation[class*=header-navigation-dropdown-animation-fade]:not(.click-to-open) 
ul li:hover > ul {
    height: 550px !important;
    overflow-y: auto !important;
    scrollbar-width: thin; 
    scrollbar-color: #666 #f1f1f1; 
}

.header-navigation[class*=header-navigation-dropdown-animation-fade]:not(.click-to-open) 
ul li:hover > ul::-webkit-scrollbar {
    width: 8px;
}

.header-navigation[class*=header-navigation-dropdown-animation-fade]:not(.click-to-open) 
ul li:hover > ul::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.header-navigation[class*=header-navigation-dropdown-animation-fade]:not(.click-to-open) 
ul li:hover > ul::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

.header-navigation[class*=header-navigation-dropdown-animation-fade]:not(.click-to-open) 
ul li:hover > ul::-webkit-scrollbar-thumb:hover {
    background-color: #444;
}


/*--Mobile Responsive---*/
@media(max-width: 991px){
	.single h1.entry-title {
    font-size: 35px;
    line-height: 45px;
    margin-left: 15px;
}
}
@media(max-width: 767px){
	.archive h1.page-title.archive-title {
    font-size: 30px;
    line-height: 40px;
		text-align: center;
}
	.hfe-nav-menu__align-right .hfe-nav-menu {
		 margin-left: 0 !important;
		text-align: center;
		justify-content: center;
		        align-items: center;
}
		nav.custom-breadcrumb a, nav.custom-breadcrumb {
    font-size: 20px !important;
    line-height: 25px;
}
}
@media(max-width: 575px){
	.single h1.entry-title {
    font-size: 20px;
    line-height: 25px;
    margin-left: 15px;
}
	.hfe-nav-menu__align-right .hfe-nav-menu {
    margin-left: 0 !important;
		justify-content: center;
}
	.hfe-nav-menu__layout-horizontal {
    justify-content: center;
}
.page-id-13	section.categories-listing-section h2 {
    font-size: 20px;
    margin-bottom: 10px !important;
	text-align: center;
}
.categories-listing-section h5.card-title {
    font-size: 18px !important;
}
	.share-icons-wrapper {
        justify-content: center;
        flex-wrap: wrap;
    }
	
	nav.custom-breadcrumb a, nav.custom-breadcrumb {
    font-size: 15px !important;
    line-height: 20px;
}
}		</style>
		</head>

<body class="wp-singular mobile_apps-template-default single single-mobile_apps postid-5924 wp-custom-logo wp-embed-responsive wp-theme-kadence wp-child-theme-kadence-child ehf-footer ehf-template-kadence ehf-stylesheet-kadence-child footer-on-bottom hide-focus-outline link-style-standard content-title-style-normal content-width-normal content-style-boxed content-vertical-padding-show non-transparent-header mobile-non-transparent-header kadence-elementor-colors elementor-default elementor-kit-12">
<div id="wrapper" class="site wp-site-blocks">
			<a class="skip-link screen-reader-text scroll-ignore" href="#main">Skip to content</a>
		<header id="masthead" class="site-header" role="banner" itemtype="https://schema.org/WPHeader" itemscope>
	<div id="main-header" class="site-header-wrap">
		<div class="site-header-inner-wrap">
			<div class="site-header-upper-wrap">
				<div class="site-header-upper-inner-wrap">
					<div class="site-main-header-wrap site-header-row-container site-header-focus-item site-header-row-layout-standard kadence-sticky-header" data-section="kadence_customizer_header_main" data-reveal-scroll-up="true" data-shrink="true" data-shrink-height="100">
	<div class="site-header-row-container-inner">
				<div class="site-container">
			<div class="site-main-header-inner-wrap site-header-row site-header-row-has-sides site-header-row-no-center">
									<div class="site-header-main-section-left site-header-section site-header-section-left">
						<div class="site-header-item site-header-focus-item" data-section="title_tagline">
	<div class="site-branding branding-layout-standard site-brand-logo-only"><a class="brand has-logo-image" href="https://mockrounds.com/" rel="home"><img fetchpriority="high" width="1000" height="352" src="https://mockrounds.com/wp-content/uploads/2025/07/1000.png" class="custom-logo" alt="Developer Interview Practice &amp; Coding Quizzes" decoding="async" srcset="https://mockrounds.com/wp-content/uploads/2025/07/1000.png 1000w, https://mockrounds.com/wp-content/uploads/2025/07/1000-300x106.png 300w, https://mockrounds.com/wp-content/uploads/2025/07/1000-768x270.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></div></div><!-- data-section="title_tagline" -->
<div class="site-header-item site-header-focus-item site-header-item-main-navigation header-navigation-layout-stretch-false header-navigation-layout-fill-stretch-false" data-section="kadence_customizer_secondary_navigation">
		<nav id="secondary-navigation" class="secondary-navigation header-navigation hover-to-open nav--toggle-sub header-navigation-style-standard header-navigation-dropdown-animation-fade-up" role="navigation" aria-label="Secondary Navigation">
					<div class="secondary-menu-container header-menu-container">
		<ul id="secondary-menu" class="menu"><li id="menu-item-233" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-233"><a href="#."><span class="nav-drop-title-wrap">Category<span class="dropdown-nav-toggle"><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-down-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Expand</title><path d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>
				</svg></span></span></span></a>
<ul class="sub-menu">
	<li id="menu-item-2812" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2812"><a href="https://mockrounds.com/ai-machine-learning/">AI &#038; Machine Learning</a></li>
	<li id="menu-item-2814" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2814"><a href="https://mockrounds.com/aptitude-hr-tests/">Aptitude &#038; HR Tests</a></li>
	<li id="menu-item-191" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-191"><a href="https://mockrounds.com/backend-development/">Backend Development</a></li>
	<li id="menu-item-1269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1269"><a href="https://mockrounds.com/competitive-exams/">Competitive Exams</a></li>
	<li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-186"><a href="https://mockrounds.com/cs-fundamentals/">CS Fundamentals</a></li>
	<li id="menu-item-190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-190"><a href="https://mockrounds.com/database-systems/">Database Systems</a></li>
	<li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="https://mockrounds.com/devops-cloud/">DevOps &#038; Cloud</a></li>
	<li id="menu-item-2815" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2815"><a href="https://mockrounds.com/electronics-communication/">Electronics &#038; Communication</a></li>
	<li id="menu-item-192" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-192"><a href="https://mockrounds.com/frontend-development/">Frontend Development</a></li>
	<li id="menu-item-2813" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2813"><a href="https://mockrounds.com/game-development/">Game Development</a></li>
	<li id="menu-item-184" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-184"><a href="https://mockrounds.com/interview-rounds-company-mcqs/">Interview Rounds &#038; Company MCQs</a></li>
	<li id="menu-item-5891" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5891"><a href="https://mockrounds.com/mobile-apps/">Mobile Apps</a></li>
	<li id="menu-item-193" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-193"><a href="https://mockrounds.com/programming-fundamentals/">Programming Fundamentals</a></li>
	<li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-187"><a href="https://mockrounds.com/security-testing/">Security &#038; Testing</a></li>
	<li id="menu-item-189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-189"><a href="https://mockrounds.com/system-design-architecture/">System Design &#038; Architecture</a></li>
	<li id="menu-item-4677" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4677"><a href="https://mockrounds.com/tech-trivias/">Tech Trivias</a></li>
	<li id="menu-item-185" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-185"><a href="https://mockrounds.com/tools-ecosystem/">Tools &#038; Ecosystem</a></li>
</ul>
</li>
<li id="menu-item-297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-297"><a href="https://mockrounds.com/search/">Search</a></li>
<li id="menu-item-6054" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6054"><a href="https://mockrounds.com/compass/">Compass</a></li>
</ul>			</div>
	</nav><!-- #secondary-navigation -->
	</div><!-- data-section="secondary_navigation" -->
					</div>
																	<div class="site-header-main-section-right site-header-section site-header-section-right">
						<div class="site-header-item site-header-focus-item site-header-item-main-navigation header-navigation-layout-stretch-false header-navigation-layout-fill-stretch-false" data-section="kadence_customizer_primary_navigation">
	    <nav id="site-navigation" class="main-navigation header-navigation hover-to-open nav--toggle-sub header-navigation-style-standard header-navigation-dropdown-animation-fade-up" role="navigation" aria-label="Primary Navigation">
            <div class="primary-menu-container header-menu-container">
    <ul id="primary-menu" class="menu"><li id="menu-item-34" class="login menu-item menu-item-type-custom menu-item-object-custom menu-item-34"><a href="https://mockrounds.com/login/"><i class="fa-solid fa-lock"></i> Login</a></li>
<li id="menu-item-35" class="register menu-item menu-item-type-custom menu-item-object-custom menu-item-35"><a href="https://mockrounds.com/register/"><i class="fa-solid fa-user-plus"></i> Register</a></li>
<li id="menu-item-3774" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3774"><a href="https://mockrounds.com/create-quiz/"><i class="fa fa-plus" aria-hidden="true"></i> Create Quiz</a></li>
</ul>        </div>
    </nav><!-- #site-navigation -->
    </div><!-- data-section="primary_navigation" -->
					</div>
							</div>
		</div>
	</div>
</div>
				</div>
			</div>
					</div>
	</div>
	
<div id="mobile-header" class="site-mobile-header-wrap">
	<div class="site-header-inner-wrap">
		<div class="site-header-upper-wrap">
			<div class="site-header-upper-inner-wrap">
			<div class="site-main-header-wrap site-header-focus-item site-header-row-layout-standard site-header-row-tablet-layout-default site-header-row-mobile-layout-default  kadence-sticky-header" data-shrink="false" data-reveal-scroll-up="true">
	<div class="site-header-row-container-inner">
		<div class="site-container">
			<div class="site-main-header-inner-wrap site-header-row site-header-row-has-sides site-header-row-no-center">
									<div class="site-header-main-section-left site-header-section site-header-section-left">
						<div class="site-header-item site-header-focus-item" data-section="title_tagline">
	<div class="site-branding mobile-site-branding branding-layout-standard branding-tablet-layout-inherit site-brand-logo-only branding-mobile-layout-inherit"><a class="brand has-logo-image" href="https://mockrounds.com/" rel="home"><img fetchpriority="high" width="1000" height="352" src="https://mockrounds.com/wp-content/uploads/2025/07/1000.png" class="custom-logo" alt="Developer Interview Practice &amp; Coding Quizzes" decoding="async" srcset="https://mockrounds.com/wp-content/uploads/2025/07/1000.png 1000w, https://mockrounds.com/wp-content/uploads/2025/07/1000-300x106.png 300w, https://mockrounds.com/wp-content/uploads/2025/07/1000-768x270.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></div></div><!-- data-section="title_tagline" -->
					</div>
																	<div class="site-header-main-section-right site-header-section site-header-section-right">
						<div class="site-header-item site-header-focus-item site-header-item-navgation-popup-toggle" data-section="kadence_customizer_mobile_trigger">
		<div class="mobile-toggle-open-container">
						<button id="mobile-toggle" class="menu-toggle-open drawer-toggle menu-toggle-style-bordered" aria-label="Open menu" data-toggle-target="#mobile-drawer" data-toggle-body-class="showing-popup-drawer-from-right" aria-expanded="false" data-set-focus=".menu-toggle-close"
					>
						<span class="menu-toggle-icon"><span class="kadence-svg-iconset"><svg aria-hidden="true" class="kadence-svg-icon kadence-menu-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Toggle Menu</title><path d="M3 13h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 7h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 19h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
				</svg></span></span>
		</button>
	</div>
	</div><!-- data-section="mobile_trigger" -->
					</div>
							</div>
		</div>
	</div>
</div>
			</div>
		</div>
			</div>
</div>
</header><!-- #masthead -->

	<div id="inner-wrap" class="wrap kt-clear">
		

<style>
.url-lin-style {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    color: #ed5758;
}
body.single {
    padding: 0;
}
.card-body {
    background: #fff !important;
    border-radius: 8px;
    color: #fa7777;
    padding: 0;
}
a.card-link {
    text-decoration: none;
}
.single-post-section a { text-decoration: none; }
.card { border: none; }
h5.card-title { font-size: 18px; }
.copy-btn {
    background: #ed5758;
    border: none;
    outline: none;
    padding: 5px 10px;
    font-size: 14px;
}
.copy-btn:hover { background: #000; }
.form-control:focus { box-shadow: none; }
.custom-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-close img { width: 100%; height: 100%; }
.share-icons-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 15px;
}

.share-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    text-decoration: none;
    color: #000;
}
.share-icon i {
    font-size: 24px;
    padding: 12px;
    border-radius: 50%;
    background: #e5e5e5;
    margin-bottom: 4px;
    color: #fff;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    margin-bottom: 6px;
}
.embed-icon i { background: #6e6e6e; font-size: 25px;}
.whatsapp-icon i { background: #25d366; font-size: 30px; }
.facebook-icon i { background: #3b5998; }
.x-icon i { background: #000; }
.email-icon i { background: #ed5758; }
.share-icon:hover i {
    opacity: 0.85;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/*----Sidebar Shortcode---*/
.single-popular-quiz .categories-listing-section .card {
    box-shadow: none !important;
    padding: 0 !important;
    border: none;
}
.single-popular-quiz .categories-listing-section .card-body{
    padding: 0;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}
.related-and-comments h2,
.quiz-reference h2{
    text-align: left !important;
    background: transparent !important;
    margin-bottom: -10px;
    border-bottom: 5px solid #fa7777;
}
.single-popular-quiz .categories-listing-section .row div {
    padding: 0 !important;
    background: transparent !important;
    justify-content: start;
}
img.create-quizzz {
    background-color: transparent;
    background-image: linear-gradient(180deg, #6A16164F 0%, #FFFBFB 100%);
    border-radius: 2px 2px 2px 2px;
    margin-top: -30px;
}
.custom-close {
    background: none;
    border: none;
    padding: 0;
    margin-left: auto; /* pushes it to right side in modal-header */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.custom-close:hover {
    background: #ed5758;
}
.custom-close img {
    width: 100%;
    height: auto;
    display: block;
}
section.single-post-section .singlepost-sidebar-colum {
    background: #fff;
}
div#comments {
    max-width: 500px;
    margin-top: 20px;
    margin-left: 0;
}
.excerpt-colum h2,
h2.share-icons-embed{
    text-align: left !important;
    background: transparent !important;
    border-bottom: 5px solid #fa7777;
}
@media(max-width: 400px){
    .share-icon {
    font-size: 10px;
}
.share-icons-wrapper {
    margin-bottom: 20px;
}
}
</style>

<section class="single-post-section">
    <div class="container pt-5">
        <div class="row g-4">
            
            
            <!-- Sidebar Column -->
            
            <div class="col-lg-3 order-2 order-lg-2 singlepost-sidebar-colum">
                                    <div class="mockrounds-books-slider">
        <h2 class="my-4 share-icons-embed">Recommended Books</h2>
        <div class="mockrounds-books-carousel owl-carousel">
                            <a class="book-card" href="https://www.amazon.com/s?k=9781787283596&#038;i=stripbooks&#038;tag=mockrounds-21" target="_blank">
                                            <img src="https://books.google.com/books/content?id=LedDDwAAQBAJ&#038;printsec=frontcover&#038;img=1&#038;zoom=1&#038;edge=curl&#038;source=gbs_api" alt="UX Design for Mobile">
                                        <h5>UX Design for Mobile</h5>
                </a>
                            <a class="book-card" href="https://www.amazon.com/s?k=9781089552970&#038;i=stripbooks&#038;tag=mockrounds-21" target="_blank">
                                            <img src="https://books.google.com/books/content?id=XsqTyAEACAAJ&#038;printsec=frontcover&#038;img=1&#038;zoom=1&#038;source=gbs_api" alt="Mobile UI/UX Design Notebook">
                                        <h5>Mobile UI/UX Design Notebook</h5>
                </a>
                            <a class="book-card" href="https://www.amazon.com/s?k=9781089555803&#038;i=stripbooks&#038;tag=mockrounds-21" target="_blank">
                                            <img src="https://books.google.com/books/content?id=EuKSyAEACAAJ&#038;printsec=frontcover&#038;img=1&#038;zoom=1&#038;source=gbs_api" alt="Mobile UI/UX Design Notebook">
                                        <h5>Mobile UI/UX Design Notebook</h5>
                </a>
                            <a class="book-card" href="https://www.amazon.com/s?k=9781686511691&#038;i=stripbooks&#038;tag=mockrounds-21" target="_blank">
                                            <img src="https://books.google.com/books/content?id=kUKHyAEACAAJ&#038;printsec=frontcover&#038;img=1&#038;zoom=1&#038;source=gbs_api" alt="Mobile UI/UX Design Notebook">
                                        <h5>Mobile UI/UX Design Notebook</h5>
                </a>
                            <a class="book-card" href="https://www.amazon.com/s?k=9781089662693&#038;i=stripbooks&#038;tag=mockrounds-21" target="_blank">
                                            <img src="https://books.google.com/books/content?id=jOedyAEACAAJ&#038;printsec=frontcover&#038;img=1&#038;zoom=1&#038;source=gbs_api" alt="Mobile UI/UX Design Notebook">
                                        <h5>Mobile UI/UX Design Notebook</h5>
                </a>
                    </div>
    </div>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
                <h2 class="mb-4 share-icons-embed">Share</h2>
                <div id="share-icons-5924" class="share-icons-wrapper">
                    <a href="#" class="share-icon embed-icon" title="Embed" data-bs-toggle="modal" data-bs-target="#embedModal-5924">
                        <i class="fa-solid fa-code"></i><span>Embed</span>
                    </a>
                    
                    <a href="https://wa.me/?text=Mobile+UI+Principles%3A+Material+Design+%26+HIG+Essentials+Quiz+-+https%3A%2F%2Fmockrounds.com%2Fmobile_apps%2Fmobile-ui-principles-material-design-hig-essentials-quiz%2F" target="_blank" class="share-icon whatsapp-icon" title="WhatsApp">
                        <i class="fa-brands fa-whatsapp"></i><span>WhatsApp</span>
                    </a>
                    
                    <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmockrounds.com%2Fmobile_apps%2Fmobile-ui-principles-material-design-hig-essentials-quiz%2F&quote=Mobile+UI+Principles%3A+Material+Design+%26+HIG+Essentials+Quiz" target="_blank" class="share-icon facebook-icon" title="Facebook">
                        <i class="fa-brands fa-facebook-f"></i><span>Facebook</span>
                    </a>
                    
                    <a href="https://twitter.com/intent/tweet?text=Mobile+UI+Principles%3A+Material+Design+%26+HIG+Essentials+Quiz&url=https%3A%2F%2Fmockrounds.com%2Fmobile_apps%2Fmobile-ui-principles-material-design-hig-essentials-quiz%2F" target="_blank" class="share-icon x-icon" title="X">
                        <i class="fa-brands fa-x-twitter"></i><span>X</span>
                    </a>
                    
                    <a href="mailto:?subject=Mobile%20UI%20Principles%3A%20Material%20Design%20%26%20HIG%20Essentials%20Quiz&body=Mobile%20UI%20Principles%3A%20Material%20Design%20%26%20HIG%20Essentials%20Quiz%20-%20https%3A%2F%2Fmockrounds.com%2Fmobile_apps%2Fmobile-ui-principles-material-design-hig-essentials-quiz%2F" class="share-icon email-icon" title="Email">
                        <i class="fa-solid fa-envelope"></i><span>Email</span>
                    </a>
                </div>
                                    <div class="excerpt-colum">
                        <h2 class="mb-4">Description</h2>
                        <p><p>Test your understanding of core principles from Material Design and Human Interface Guidelines (HIG) in mobile user interfaces. Ideal for designers and developers looking to strengthen their UI knowledge with mobile-specific best practices and concepts.</p>
</p>
                    </div>
                                <!-- Embed Modal -->
                <div class="modal fade" id="embedModal-5924" tabindex="-1" aria-labelledby="embedLabel-5924" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content border-0 shadow-lg">
                      <div class="modal-header border-0">
                        <h5 class="modal-title fw-semibold" id="embedLabel-5924">
                          Embed “Mobile UI Principles: Material Design &#038; HIG Essentials Quiz”
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                
                      <div class="modal-body">
                
                                        
                        <!-- Controls -->
                        <div class="row g-3 align-items-end mb-3">
                          <div class="col-12 col-md-4">
                            <label for="embedSize-5924" class="form-label">Size preset</label>
                            <select id="embedSize-5924" class="form-select">
                              <option value="custom" selected>Custom (edit below)</option>
                              <option value="sm">Small (400 × 300)</option>
                              <option value="md">Medium (600 × 400)</option>
                              <option value="lg">Large (800 × 600)</option>
                            </select>
                          </div>
                
                          <div class="col-6 col-md-3">
                            <label for="embedWidth-5924" class="form-label">Width (px)</label>
                            <input type="number" min="200" step="10" class="form-control" id="embedWidth-5924" value="600">
                          </div>
                
                          <div class="col-6 col-md-3">
                            <label for="embedHeight-5924" class="form-label">Height (px)</label>
                            <input type="number" min="150" step="10" class="form-control" id="embedHeight-5924" value="400">
                          </div>
                
                          <div class="col-12 col-md-2">
                            <div class="form-check mt-4">
                              <input class="form-check-input" type="checkbox" id="embedResponsive-5924">
                              <label class="form-check-label" for="embedResponsive-5924">
                                Responsive
                              </label>
                            </div>
                          </div>
                        </div>
                
                        <!-- Code box -->
                        <label for="embedCode-5924" class="form-label">Copy and paste this code into your website where you want the quiz to appear.</label>
                        <textarea id="embedCode-5924" class="form-control font-monospace" rows="5" readonly>&lt;iframe src=&quot;https://mockrounds.com/mobile_apps/mobile-ui-principles-material-design-hig-essentials-quiz/?embed=true&quot; width=&quot;600&quot; height=&quot;400&quot; frameborder=&quot;0&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;no-referrer-when-downgrade&quot; allowfullscreen&gt;&lt;/iframe&gt;</textarea>
                
                        <div class="d-flex gap-2 mt-3">
                          <button class="btn btn-primary" type="button" id="copyEmbedBtn-5924" data-bs-toggle="tooltip" data-bs-title="Copied!" data-bs-trigger="manual">
                            Copy code
                          </button>
                          <a class="btn btn-outline-secondary" href="https://mockrounds.com/mobile_apps/mobile-ui-principles-material-design-hig-essentials-quiz/?embed=true" target="_blank" rel="noopener">Preview</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <script>
                (function(){
                  const pid = "5924";
                  const baseSrc = "https://mockrounds.com/mobile_apps/mobile-ui-principles-material-design-hig-essentials-quiz/?embed=true";
                  const sel     = (id) => document.getElementById(id);
                
                  const sizeEl   = sel("embedSize-" + pid);
                  const wEl      = sel("embedWidth-" + pid);
                  const hEl      = sel("embedHeight-" + pid);
                  const respEl   = sel("embedResponsive-" + pid);
                  const codeEl   = sel("embedCode-" + pid);
                  const copyBtn  = sel("copyEmbedBtn-" + pid);
                
                  function buildIframe() {
                    const w = Math.max(parseInt(wEl.value || 0, 10), 200);
                    const h = Math.max(parseInt(hEl.value || 0, 10), 150);
                
                    if (respEl.checked) {
                      // Responsive (full width) with aspect ratio derived from width/height
                      const ratio = (h / w).toFixed(4);
                      return (
                `<div style="position:relative;width:100%;">
                  <div style="position:relative;width:100%;aspect-ratio:${w} / ${h};">
                    <iframe src="${baseSrc}" style="position:absolute;inset:0;width:100%;height:100%;" frameborder="0" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
                  </div>
                </div>`
                      );
                    }
                
                    return `<iframe src="${baseSrc}" width="${w}" height="${h}" frameborder="0" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>`;
                  }
                
                  function updateFromPreset() {
                    switch (sizeEl.value) {
                      case "sm": wEl.value = 400; hEl.value = 300; respEl.checked = false; break;
                      case "md": wEl.value = 600; hEl.value = 400; respEl.checked = false; break;
                      case "lg": wEl.value = 800; hEl.value = 600; respEl.checked = false; break;
                      default: /* custom */ break;
                    }
                    codeEl.value = buildIframe();
                  }
                
                  function updateCode() {
                    // If user edits width/height, switch preset to custom
                    sizeEl.value = "custom";
                    codeEl.value = buildIframe();
                  }
                
                  sizeEl.addEventListener("change", updateFromPreset);
                  wEl.addEventListener("input", updateCode);
                  hEl.addEventListener("input", updateCode);
                  respEl.addEventListener("change", updateCode);
                
                  // Initialize tooltip for copy button
                  let tooltip;
                  if (window.bootstrap) {
                    tooltip = new bootstrap.Tooltip(copyBtn);
                  }
                
                  copyBtn.addEventListener("click", async () => {
                    try {
                      codeEl.select();
                      codeEl.setSelectionRange(0, codeEl.value.length);
                      await navigator.clipboard.writeText(codeEl.value);
                      if (tooltip) {
                        copyBtn.setAttribute("data-bs-title", "Copied!");
                        tooltip.show();
                        setTimeout(() => tooltip.hide(), 900);
                      } else {
                        copyBtn.textContent = "Copied!";
                        setTimeout(() => (copyBtn.textContent = "Copy code"), 900);
                      }
                    } catch (e) {
                      // Fallback
                      document.execCommand("copy");
                    }
                  });
                
                  // Set initial code
                  codeEl.value = buildIframe();
                })();
                </script>
                   
                <!-- Sidebar Shortcode -->
                <div>
                    
        
                </div>
            </div>

            <!-- Main Content Column -->
            <div class="col-lg-9 order-1 order-lg-1">
                <style>
                    nav.custom-breadcrumb {
                        display: flex;
                        align-items: center;
                        margin-bottom: 15px;
                    }
                    nav.custom-breadcrumb a, nav.custom-breadcrumb{
                        font-family: sans-serif;
                        font-size: 24px;
                        color: #fa7777;
                        font-weight: 700;
                    }
                    
                    
                    @media(max-width: 575px){
                        nav.custom-breadcrumb a {
                        font-size: 18px;
                    }
                    }
                </style>
                <nav class="custom-breadcrumb">Mobile Apps<svg width="12" height="12" viewBox="0 0 56 87" fill="none" xmlns="https://www.w3.org/2000/svg" style="vertical-align:middle;margin:0 6px;">
    <path d="M0 74.5828C0 77.0906 0.97656 79.4461 2.7461 81.2117L5.7305 84.2039C7.5586 86.0281 9.961 86.9422 12.3594 86.9422C14.7578 86.9422 17.1641 86.0281 18.9922 84.2L53.0902 50.098C54.8597 48.3285 55.8363 45.973 55.8363 43.4691C55.8363 40.9652 54.8597 38.6097 53.0902 36.8402L18.9922 2.74219C15.3399 -0.910112 9.3906 -0.918012 5.7342 2.74219L2.7498 5.72659C0.9803 7.49609 0.00369835 9.85159 0.00369835 12.3555C0.00369835 14.8594 0.98026 17.2149 2.7498 18.9883L27.2338 43.4723L2.7498 67.9563C0.9803 69.7258 0.00369835 72.0813 0.00369835 74.5852L0 74.5828Z" fill="#FA7777"/>
    </svg><a href="https://mockrounds.com/mobile_apps-category/mobile-ui-ux-design/">Mobile UI/UX Design</a></nav>                
                <div class="content">
                    <p><iframe title="Mobile UI Principles: Material Design &amp; HIG Essentials Quiz" src="https://quto.dev/en/tools/audio-quiz/7529?embed=true" width="100%" height="700" style="min-height:700px; border:none;" allow="clipboard-write" loading="lazy"></iframe></p>
                </div>
                
                
                <style>
                    .related-quiz-section .card-body {
                        border: 1px solid #ddd;
                        border-radius: 10px;
                        height: 100%;
                        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
                        transition: box-shadow 0.3s ease;
                        padding: 20px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                    .related-quiz-section .excerpt-colum p {
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #323232;
                        font-size: 17px;
                    }
                    .related-quiz-section a.startquiz-btn {
                        padding: 8px;
                        background: #ed5758;
                        border-radius: 5px;
                        color: #fff;
                    }
                    .related-quiz-section a.startquiz-btn:hover {
                        background: #f57879;
                    }
                    .related-quiz-section h5.card-title a:hover {
                        color: #ed5758;
                    }
                    .related-quiz-section h2 {
                        position: relative;
                        display: inline-block;
                        padding-bottom: 10px; /* space for the line */
                    }
                    
                    .related-quiz-section h2::after,
                    .cpt-youtube-video h2:after{
                        content: "";
                        display: block;
                        width: 100%;
                        height: 5px;
                        background-color: #fa7777;
                        margin-top: 8px;
                    }
                     
                </style>
                                

            </div>

        </div>
    </div>
</section>
<style>
    iframe.embed-responsive-item {
    max-width: 100%;
    width: 100%;
    height: 550px;
}
@media(max-width: 767px){
    iframe.embed-responsive-item {
    height: 300px;
}
}
</style>
<!-- Related Posts + Comments in separate full-width section -->
<section class="related-and-comments">
    <div class="container">
        <div class="row">
            <div class="col-12">
                
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.copy-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const target = document.querySelector(this.getAttribute('data-target'));
            target.select();
            document.execCommand('copy');
            this.textContent = 'Copied!';
            setTimeout(() => { this.textContent = 'Copy Code'; }, 2000);
        });
    });
});
</script>

	</div><!-- #inner-wrap -->
			<footer itemtype="https://schema.org/WPFooter" itemscope="itemscope" id="colophon" role="contentinfo">
			<div class='footer-width-fixer'>		<div data-elementor-type="wp-post" data-elementor-id="18" class="elementor elementor-18">
				<div class="elementor-element elementor-element-b0328d8 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent" data-id="b0328d8" data-element_type="container" id="mailchimp" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-6514131 elementor-widget elementor-widget-heading" data-id="6514131" data-element_type="widget" data-widget_type="heading.default">
					<h2 class="elementor-heading-title elementor-size-default">Subscribe For New Building Codes and Updates</h2>				</div>
				<div class="elementor-element elementor-element-d1f3be0 elementor-widget elementor-widget-heading" data-id="d1f3be0" data-element_type="widget" data-widget_type="heading.default">
					<h4 class="elementor-heading-title elementor-size-default">Newer Building codes will be delivered right to your email addresss. Subscribe now and never miss a code!</h4>				</div>
				<div class="elementor-element elementor-element-4e2d7bf elementor-widget__width-inherit elementor-widget elementor-widget-shortcode" data-id="4e2d7bf" data-element_type="widget" data-widget_type="shortcode.default">
							<div class="elementor-shortcode">
<div class="wpcf7 no-js" id="wpcf7-f308-o1" lang="en-US" dir="ltr" data-wpcf7-id="308">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/mobile_apps/mobile-ui-principles-material-design-hig-essentials-quiz/#wpcf7-f308-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init">
<fieldset class="hidden-fields-container"><input type="hidden" name="_wpcf7" value="308" /><input type="hidden" name="_wpcf7_version" value="6.1.1" /><input type="hidden" name="_wpcf7_locale" value="en_US" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f308-o1" /><input type="hidden" name="_wpcf7_container_post" value="0" /><input type="hidden" name="_wpcf7_posted_data_hash" value="" />
</fieldset>
<p><span class="wpcf7-form-control-wrap" data-name="your-email"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Enter Your Email" value="" type="email" name="your-email" /></span><br />
<input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="Subscribe" />
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
</div>
</div>
						</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-9ac1eb5 e-flex e-con-boxed e-con e-parent" data-id="9ac1eb5" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-135a91e elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-text-editor" data-id="135a91e" data-element_type="widget" data-widget_type="text-editor.default">
									Copyright @ 2025 <a style="color: #ed5758;" href="https://mockrounds.com/">Mockrounds.com</a>								</div>
				<div class="elementor-element elementor-element-2c48934 hfe-nav-menu__breakpoint-none elementor-widget__width-initial hfe-nav-menu__align-right elementor-widget-mobile__width-inherit hfe-submenu-icon-arrow hfe-submenu-animation-none hfe-link-redirect-child elementor-widget elementor-widget-navigation-menu" data-id="2c48934" data-element_type="widget" data-settings="{&quot;padding_horizontal_menu_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:15,&quot;sizes&quot;:[]},&quot;padding_horizontal_menu_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_menu_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:15,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_menu_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_space_between_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;menu_row_space_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;dropdown_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;dropdown_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;dropdown_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;width_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;220&quot;,&quot;sizes&quot;:[]},&quot;width_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;width_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_horizontal_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:15,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;padding_vertical_dropdown_item_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;distance_from_menu_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_size_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;toggle_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}" data-widget_type="navigation-menu.default">
				<div class="elementor-widget-container">
								<div class="hfe-nav-menu hfe-layout-horizontal hfe-nav-menu-layout horizontal hfe-pointer__none" data-layout="horizontal">
				<div role="button" class="hfe-nav-menu__toggle elementor-clickable" tabindex="0" aria-label="Menu Toggle">
					<span class="screen-reader-text">Menu</span>
					<div class="hfe-nav-menu-icon">
											</div>
				</div>
				<nav class="hfe-nav-menu__layout-horizontal hfe-nav-menu__submenu-arrow" data-toggle-icon="" data-close-icon="" data-full-width="">
					<ul id="menu-1-2c48934" class="hfe-nav-menu"><li id="menu-item-352" class="menu-item menu-item-type-post_type menu-item-object-page parent hfe-creative-menu"><a href="https://mockrounds.com/about-us/" class = "hfe-menu-item">About Us</a></li>
<li id="menu-item-3502" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent parent hfe-creative-menu"><a href="https://mockrounds.com/highlights/" class = "hfe-menu-item">Highlights</a></li>
<li id="menu-item-354" class="menu-item menu-item-type-post_type menu-item-object-page parent hfe-creative-menu"><a href="https://mockrounds.com/terms-of-service/" class = "hfe-menu-item">Terms of Service</a></li>
</ul> 
				</nav>
			</div>
							</div>
				</div>
					</div>
				</div>
				</div>
		</div>		</footer>
	</div><!-- #wrapper -->

			<script>document.documentElement.style.setProperty('--scrollbar-offset', window.innerWidth - document.documentElement.clientWidth + 'px' );</script>
			
<div id="um_upload_single" style="display:none;"></div>

<div id="um_view_photo" style="display:none;">
	<a href="javascript:void(0);" data-action="um_remove_modal" class="um-modal-close" aria-label="Close view photo modal">
		<i class="um-faicon-times"></i>
	</a>

	<div class="um-modal-body photo">
		<div class="um-modal-photo"></div>
	</div>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/kadence-child\/*","\/wp-content\/themes\/kadence\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<a id="kt-scroll-up" tabindex="-1" aria-hidden="true" aria-label="Scroll to top" href="#wrapper" class="kadence-scroll-to-top scroll-up-wrap scroll-ignore scroll-up-side-right scroll-up-style-filled vs-lg-true vs-md-true vs-sm-true"><span class="kadence-svg-iconset"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-up-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Scroll to top</title><path d="M5.707 12.707l5.293-5.293v11.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-11.586l5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-7-7c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076c-0.256 0-0.512 0.098-0.707 0.293l-7 7c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>
				</svg></span></a><button id="kt-scroll-up-reader" href="#wrapper" aria-label="Scroll to top" class="kadence-scroll-to-top scroll-up-wrap scroll-ignore scroll-up-side-right scroll-up-style-filled vs-lg-true vs-md-true vs-sm-true"><span class="kadence-svg-iconset"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-up-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Scroll to top</title><path d="M5.707 12.707l5.293-5.293v11.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-11.586l5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-7-7c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076c-0.256 0-0.512 0.098-0.707 0.293l-7 7c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>
				</svg></span></button>			<script>
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
				<div id="mobile-drawer" class="popup-drawer popup-drawer-layout-sidepanel popup-drawer-animation-fade popup-drawer-side-right" data-drawer-target-string="#mobile-drawer"
			>
		<div class="drawer-overlay" data-drawer-target-string="#mobile-drawer"></div>
		<div class="drawer-inner">
						<div class="drawer-header">
				<button class="menu-toggle-close drawer-toggle" aria-label="Close menu"  data-toggle-target="#mobile-drawer" data-toggle-body-class="showing-popup-drawer-from-right" aria-expanded="false" data-set-focus=".menu-toggle-open"
							>
					<span class="toggle-close-bar"></span>
					<span class="toggle-close-bar"></span>
				</button>
			</div>
			<div class="drawer-content mobile-drawer-content content-align-left content-valign-top">
								<div class="site-header-item site-header-focus-item site-header-item-mobile-navigation mobile-navigation-layout-stretch-false" data-section="kadence_customizer_mobile_navigation">
		<nav id="mobile-site-navigation" class="mobile-navigation drawer-navigation drawer-navigation-parent-toggle-true" role="navigation" aria-label="Primary Mobile Navigation">
				<div class="mobile-menu-container drawer-menu-container">
			<ul id="mobile-menu" class="menu"><li id="menu-item-276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-276"><a href="#.">Categories</a>
<ul class="sub-menu">
	<li id="menu-item-2817" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2817"><a href="https://mockrounds.com/ai-machine-learning/">AI &#038; Machine Learning</a></li>
	<li id="menu-item-2819" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2819"><a href="https://mockrounds.com/aptitude-hr-tests/">Aptitude &#038; HR Tests</a></li>
	<li id="menu-item-284" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-284"><a href="https://mockrounds.com/backend-development/">Backend Development</a></li>
	<li id="menu-item-279" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-279"><a href="https://mockrounds.com/cs-fundamentals/">CS Fundamentals</a></li>
	<li id="menu-item-283" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-283"><a href="https://mockrounds.com/database-systems/">Database Systems</a></li>
	<li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="https://mockrounds.com/devops-cloud/">DevOps &#038; Cloud</a></li>
	<li id="menu-item-2820" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2820"><a href="https://mockrounds.com/electronics-communication/">Electronics &#038; Communication</a></li>
	<li id="menu-item-285" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-285"><a href="https://mockrounds.com/frontend-development/">Frontend Development</a></li>
	<li id="menu-item-2818" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2818"><a href="https://mockrounds.com/game-development/">Game Development</a></li>
	<li id="menu-item-277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277"><a href="https://mockrounds.com/interview-rounds-company-mcqs/">Interview Rounds &#038; Company MCQs</a></li>
	<li id="menu-item-5892" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5892"><a href="https://mockrounds.com/mobile-apps/">Mobile Apps</a></li>
	<li id="menu-item-286" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-286"><a href="https://mockrounds.com/programming-fundamentals/">Programming Fundamentals</a></li>
	<li id="menu-item-280" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-280"><a href="https://mockrounds.com/security-testing/">Security &#038; Testing</a></li>
	<li id="menu-item-282" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-282"><a href="https://mockrounds.com/system-design-architecture/">System Design &#038; Architecture</a></li>
	<li id="menu-item-4676" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4676"><a href="https://mockrounds.com/tech-trivias/">Tech Trivias</a></li>
	<li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="https://mockrounds.com/tools-ecosystem/">Tools &#038; Ecosystem</a></li>
</ul>
</li>
<li id="menu-item-307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-307"><a href="https://mockrounds.com/search/">Search</a></li>
<li id="menu-item-6056" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6056"><a href="https://mockrounds.com/compass/">Compass</a></li>
<li id="menu-item-287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="https://mockrounds.com/register/"><i class="fa-solid fa-user-plus"></i> Register</a></li>
<li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a href="https://mockrounds.com/login/"><i class="fa-solid fa-lock"></i> Login</a></li>
<li id="menu-item-3791" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3791"><a href="/create-quiz/"><i class="fa fa-plus" aria-hidden="true"></i> Create Quiz</a></li>
</ul>		</div>
	</nav><!-- #site-navigation -->
	</div><!-- data-section="mobile_navigation" -->
							</div>
		</div>
	</div>
	<script src="https://mockrounds.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
<script src="https://mockrounds.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script src="https://mockrounds.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.1" id="swv-js"></script>
<script id="contact-form-7-js-before">
var wpcf7 = {
    "api": {
        "root": "https:\/\/mockrounds.com\/wp-json\/",
        "namespace": "contact-form-7\/v1"
    }
};
</script>
<script src="https://mockrounds.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.1" id="contact-form-7-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/youtube-channel/assets/lib/bigger-picture/bigger-picture.min.js?ver=3.25.2" id="bigger-picture-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/youtube-channel/assets/js/youtube-channel.min.js?ver=3.25.2" id="youtube-channel-js"></script>
<script src="https://mockrounds.com/wp-content/themes/kadence-child/custom.js?ver=1757307000" id="child-custom-js-js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js?ver=5.3.3" id="bootstrap-js-js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" id="owl-carousel-js"></script>
<script id="owl-carousel-js-after">
jQuery(document).ready(function($){
            $('.mockrounds-books-carousel').owlCarousel({
                items:1,
                loop:true,
                nav:true,
                dots:false,
                autoplay:false,
                autoplayTimeout:4000,
                autoplayHoverPause:true,
                navText:['<span class="owl-prev-icon">&#10094;</span>','<span class="owl-next-icon">&#10095;</span>']
            });
        });
</script>
<script id="kadence-navigation-js-extra">
var kadenceConfig = {"screenReader":{"expand":"Child menu","expandOf":"Child menu of","collapse":"Child menu","collapseOf":"Child menu of"},"breakPoints":{"desktop":"1024","tablet":768},"scrollOffset":"0"};
</script>
<script src="https://mockrounds.com/wp-content/themes/kadence/assets/js/navigation.min.js?ver=1.2.27" id="kadence-navigation-js" async></script>
<script src="https://mockrounds.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-contact-form-7-84e9a1056bc4922b7cbd.js" id="googlesitekit-events-provider-contact-form-7-js" defer></script>
<script src="https://mockrounds.com/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js"></script>
<script id="wp-util-js-extra">
var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}};
</script>
<script src="https://mockrounds.com/wp-includes/js/wp-util.min.js?ver=6.8.2" id="wp-util-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/tipsy/tipsy.min.js?ver=1.0.0a" id="um_tipsy-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/um-confirm/um-confirm.min.js?ver=1.0" id="um_confirm-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/pickadate/picker.min.js?ver=3.6.2" id="um_datetime-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/pickadate/picker.date.min.js?ver=3.6.2" id="um_datetime_date-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/pickadate/picker.time.min.js?ver=3.6.2" id="um_datetime_time-js"></script>
<script id="um_common-js-extra">
var um_common_variables = {"locale":"en_US"};
var um_common_variables = {"locale":"en_US"};
</script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/common.min.js?ver=2.10.5" id="um_common-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/cropper/cropper.min.js?ver=1.6.1" id="um_crop-js"></script>
<script id="um_frontend_common-js-extra">
var um_frontend_common_variables = [];
</script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/common-frontend.min.js?ver=2.10.5" id="um_frontend_common-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/um-modal.min.js?ver=2.10.5" id="um_modal-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/jquery-form/jquery-form.min.js?ver=2.10.5" id="um_jquery_form-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/fileupload/fileupload.js?ver=2.10.5" id="um_fileupload-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/um-functions.min.js?ver=2.10.5" id="um_functions-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/um-responsive.min.js?ver=2.10.5" id="um_responsive-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/um-conditional.min.js?ver=2.10.5" id="um_conditional-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/select2/select2.full.min.js?ver=4.0.13" id="select2-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/select2/i18n/en.js?ver=4.0.13" id="um_select2_locale-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/libs/raty/um-raty.min.js?ver=2.6.0" id="um_raty-js"></script>
<script id="um_scripts-js-extra">
var um_scripts = {"max_upload_size":"83886080","nonce":"c499cf8448"};
</script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/um-scripts.min.js?ver=2.10.5" id="um_scripts-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/um-profile.min.js?ver=2.10.5" id="um_profile-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/ultimate-member/assets/js/um-account.min.js?ver=2.10.5" id="um_account-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/header-footer-elementor/inc/js/frontend.js?ver=2.5.1" id="hfe-frontend-js-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.32.1" id="elementor-webpack-runtime-js"></script>
<script src="https://mockrounds.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.32.1" id="elementor-frontend-modules-js"></script>
<script src="https://mockrounds.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
<script id="elementor-frontend-js-before">
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"3.32.1","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_optimized_markup":true,"nested-elements":true,"home_screen":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"cloud-library":true,"e_opt_in_v4_page":true,"import-export-customization":true},"urls":{"assets":"https:\/\/mockrounds.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/mockrounds.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/mockrounds.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"e7c8725e3c"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":5924,"title":"Mobile%20UI%20Principles%3A%20Material%20Design%20%26%20HIG%20Essentials%20Quiz%20%E2%80%93%20Developer%20Interview%20Practice%20%26%20Coding%20Quizzes","excerpt":"Test your understanding of core principles from Material Design and Human Interface Guidelines (HIG) in mobile user interfaces. Ideal for designers and developers looking to strengthen their UI knowledge with mobile-specific best practices and concepts.","featuredImage":false}};
</script>
<script src="https://mockrounds.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.32.1" id="elementor-frontend-js"></script>
<!-- My YouTube Channel --><script type="text/javascript"></script></body>
</html>