Materialize CSS Online Quiz, Materialize CSS Quiz

1 .

Who is inventor of Material Design ?

A)

Alvin Wang, Alan Chang, Alex Mark and Kevin Louie

B)

Tim Berners-Lee and James Gosling

C)

Guido van Rossum, Rasmus Lerdorf and Yukihiro Matsumoto

D)

Mark Otto and Jacob Thornton

Correct Answer : Option (A) : Alvin Wang, Alan Chang, Alex Mark and Kevin Louie

2 .

Which of the following is Material Design initial release date ?

A)

June 06, 2014

B)

June 14, 2014

C)

June 25, 2014

D)

June 29, 2014

Correct Answer : Option (C) :

June 25, 2014

3 .

Who is developed Material Design ?

A)

Microsoft

B)

Google

C)

Oracle

D)

Apple

Correct Answer : Option (B) :

Google

4 .

What is Materialize UI components?

A)

You can create faster, Innovative websites

B)

Used web apps and android apps

C)

Creates beautiful and responsive websites

D)

All of the above

Correct Answer : Option (D) : All of the above

5 .

Which one is the Materialize CDN url ?

A)

<link rel="stylesheet" href="https://cdn.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

B)

<link rel="stylesheet" href="https://cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

C)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

D)

<link rel="stylesheet" href="https://cloudflare-cdnjs.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

Correct Answer : Option (C) :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

6 .

Which of the following Materialized CSS Grid System class defines size of screen ?

A)

.s, md, lg, xl

B)

.sm, md, lg, xl

C)

.s, .m, l, xl

D)

.xs, sm, md, lg, xl

Correct Answer : Option (C) :

.s, .m, l, xl

7 .

Which of the following class a text color?

A)

.blue-text

B)

.blue

C)

.text-blue

D)

.blue-color

Correct Answer : Option (A) :

.blue-text

8 .

How to apply a background color?

A)

.blue-background

B)

.blue-bg

C)

.background-blue

D)

.blue

Correct Answer : Option (D) : .blue

9 .

How to signifies a materialize css "offset" class?

A)

.off-m3

B)

.offset-m3

C)

.m3-offset

D)

.m3-off

Correct Answer : Option (B) :

.offset-m3

10 .

Which one perfect Helpers classes in materialize css

A)

Alignment classes

B)

Hiding and Showing classes

C)

Formatting classes

D)

All of the above

Correct Answer : Option (D) :

All of the above

11 .

Select one class in following Formatting classes :

A)

.truncate

B)

.valign-wrapper

C)

.medium-and-down

D)

.center-align

Correct Answer : Option (A) :

.truncate

12 .

Which class shapes an image to a responsive ?

A)

.img-responsive

B)

.responsive

C)

.responsive-img

D)

.img-width-responsive

Correct Answer : Option (C) :

.responsive-img

13 .

How to define a materialize pulse buttons?

A)

<a class="btn btn-floating btn-pulse">

B)

<a class="btn btn-floating pulse">

C)

<a class="btn floating-btn pulse">

D)

<a class="btn btn-floating pulse-btn">

Correct Answer : Option (B) :

<a class="btn btn-floating pulse">

14 .

How to define a materialize shadow classes?

A)

.z-depth-3

B)

.depth-shadow-3

C)

.depth-z-3

D)

.shadow-depth-3

Correct Answer : Option (A) :

.z-depth-3

15 .

How to display a badge in materialize css

A)

<span class="badge-new">

B)

<span class="new-badge">

C)

<span class="text-badge">

D)

<span class="badge">

Correct Answer : Option (D) :

<span class="badge">

16 .

How to define a materialize wave classes?

A)

<a class="effect-waves">

B)

<a class="wav-effect">

C)

<a class="waves-effect">

D)

None of the above.

Correct Answer : Option (C) :

<a class="waves-effect">

17 .

What is Materialize BreadCrumb

A)

BreadCrumb is used to block the html elements.

B)

BreadCrumb is used to display your Current Location.

C)

BreadCrumb is used to display your css files.

D)

All of the above

Correct Answer : Option (B) :

BreadCrumb is used to display your Current Location.

18 .

Which class is used to create an image card ?

A)

.img-card

B)

.image-card

C)

.card-img

D)

.card-image

Correct Answer : Option (D) :

.card-image

19 .

How can you insert a search icon?

A)

<i class="material-icons">search</i>

B)

<i class="md-icons">search</i>

C)

<i class="icons-material">search</i>

D)

<i class="material-search">search</i>

Correct Answer : Option (A) :

<i class="material-icons">search</i>

20 .

Which class is used to create a basic pagination?

A)

.page-pagination

B)

.btn-pagination

C)

.pagination

D)

.page-navigation

Correct Answer : Option (C) :

.pagination

21 .

Which class is used to create an footer?

A)

<footer class="footer">

B)

<footer class="footer-page">

C)

<footer class="page-footer">

D)

<footer class="main-footer">

Correct Answer : Option (C) :

<footer class="page-footer">

22 .

Which of the following classes adds borders on all sides of the table and cells?

A)

.table-bordered

B)

.bordered

C)

.bordered-table

D)

.bordered-all

Correct Answer : Option (B) :

.bordered

23 .

Which of the following classes are you used to materialize dropdown :

A)

<a class='dropdown-button btn blue' href='#'>Click Here!</a>

B)

<a class='dropdown btn blue' href='#'>Click Here!</a>

C)

<a class='button-dropdown btn blue' href='#'>Click Here!</a>

D)

<a class='dropdown-active btn blue' href='#'>Click Here!</a>

Correct Answer : Option (A) :

<a class='dropdown-button btn blue' href='#'>Click Here!</a>

24 .

Which plugin is used to create a modal window?

A)

dialogbox

B)

popup

C)

modal

D)

tooltip

Correct Answer : Option (C) :

modal

25 .

How to define a materialize Scrollspy?

A)

<div class="section spy-scrollspy">

B)

<div class="section scrollspy">

C)

<div class="section scroll">

D)

<div class="section scroll-spy">

Correct Answer : Option (B) :

<div class="section scrollspy">

26 .

Which of the following classes are you used a slide out menu in material design ?

A)

<ul class="side-bar">

B)

<ul class="side-menu">

C)

<ul class="side-navigation">

D)

<ul class="side-nav">

Correct Answer : Option (D) :

<ul class="side-nav">

27 .

Select one perfect syntax in fixed width tabs :

A)

<ul class="tabs tabs-fixed-width">

B)

<ul class="tabs tabs-width-fixed">

C)

<ul class="tabs fixed-tabs-width">

D)

<ul class="tabs tabs-fixed">

Correct Answer : Option (A) :

<ul class="tabs tabs-fixed-width">