Responsive Web Design Quizzes & जवाब - Coursera

Mastering responsive web design is an important step towards becoming a skilled web developer. In our latest blog post, we delve into creating flexible websites that adapt seamlessly across devices.

Before we explore Coursera’s comprehensive quizzes and answers, we’ll understand why Responsive Web Design is an essential part of modern web development and how it improves user experience and site performance.

प्रश्न पूछना 1: Usability and user experience

Q1. Usability relates to (select all that apply)

क्षमता
How easy a site is to learn to use

Q2. UX is:

The experience the user has on your site
How experienced the user is

प्रश्न पूछना 2: Where can you go?

Q1. What is a typical way to inform users where they are in our site?

Navbar
Breadcrumb trail

Q2. What is a site map? (select all that apply)

A way of visualising a website
A hierarchical view of the site

प्रश्न पूछना 3: What is here?

Q1. Eye tracking experiments on websites tell us:

People start looking at the top right of the page
People sweep out an F shape with their eyes

Q2. Putting space between elements in our design:

Makes it easier for the eye to find the different elements
Looks more modern

प्रश्न पूछना 4: सरल उपयोग

Q1. Why is accessibility important? (select all that apply)

We do not want to exclude people from using our sites
Accessible sites are normally easier to use for everyone!

Q2. What is WAI?

Web accessibility initiative
Web alliance for inclusion

प्रश्न पूछना 5: Guidelines for design

Q1. What is the key element of cognition based design approaches?

Clear information
Thinking about how users will use the site

Q2. What is the key element of user centred design approaches?

Allowing users to personalise a site
Thinking about how users will use the site

प्रश्न पूछना 6: Design examples

Q1. What is good about the Google home page?

It is clear what it does
It looks very corporate

Q2. What is a Dark Pattern?

A design that tries to attract users in by offering information that is not that relevant to what the site is actually about.
A design that uses a large amount of dark colours to hide uninteresting information from the users.

प्रश्न पूछना 7: Web design principles summary quiz

Q1. Important things to consider in your design are:(select all that apply)

Does it lay out well on different browsers?
How difficult is it to learn?
Who is using your site?
Does it lay out well on different devices?

Q2. Responsive design means

A website that answers all the questions a user has
A website with efficient technical support
A website which responds quickly to user input
A website which adapts to different screen sizes

Q3. Which of the following are types of navigation for websites? (select all that apply)

Natural
Local
Global
Hierarchical

Q4. The most important areas of the screen are: (select all that apply)

The left
शिखर
The right
तल

Q5. Accessible sites have:(select all that apply)

Been tested with the CSS rules switched off
Permanently large fonts
Semantic HTML
alt text in the images

Q6. Which of the following fit into the cognition/ evidence based approach? (select all that apply)

Telling a user where they are
Telling a user where they can go
Presenting information to the user as clearly as possible
Using eye tracking studies to inform the layout

क्यू 7. Which two of the following are user centred questions (as opposed to cognitive, evidence based questions)? (select all that apply)

What do the users want?
Who are the users?
How do the users move their eyes over a page?
Is red text on a black background difficult to read?

क्यू 8. Which of the following comes first in both user centred design and evidence based design approaches?

The home page
The HTML code
User experience
The CSS code

प्रश्न 9. Which of the following are good design principles?

Make it look the same on all devices
Show as much information as possible so every possible user can see the information they want.
Use as many colours as possible to make the site exciting.
Show only the information that the user group you have identified for your site is likely to want to see.

प्र10. Which of the following are bad design principles? (select all that apply)

Always use background colours
Vary the text size to stop the site from being boring
Use colours for titles, with different colours for different titles.
Invite users into your site by displaying as much interesting information as possible.

Responsive Web Design Week 2 प्रश्नोत्तरी उत्तर

प्रश्न पूछना 1: Basic Bootstrap set up

Q1. Look at the simplest possible Bootstrap site. What is the HTML 5 shim code for?

To add HTML 5 features to older browsers
To inform the browser that we are using HTML 5

Q2. Why does the basic Bootstrap site include jQuery before the Bootstrap.js library?

The Bootstrap.js library depends on features in jQuery so that it can provide interactive web design elements.
jQuery is part of Bootstrap

प्रश्न पूछना 2: Where can you go?

Q1. Where would you look to find the navbar and navbar-default class definitions?

Bootstrap.css
The HTML document

Q2. What is the tag to wrap navbars in?

ol
nav

Q3. What is the active class used for?

To make an interactive element in a nav bar
To highlight an element in a nav bar

प्रश्न पूछना 3: Collapsible navbars

Q1. Why do navbars need to collapse?

Navbars should not be visible all the time as they can distract the user
To save screen space on smaller screens

Q2. Why are HTML comments important?

As the code becomes more elaborate, they indicate what all the parts of the document are for
They are useful for communicating informally with the user

प्रश्न पूछना 4: Building out the site

Q1. Is this a selector for a class or a tag?

1 .album_cover

Class
Tag

Q2. How many CSS files can be attached to an HTML document?

स्टैनफोर्ड विश्वविद्यालय के लिए प्रवेश आवश्यकताएँ 1
As many as you like

प्रश्न पूछना 5: Where am I?

Q1. Why do we use <ol> for bread crumb trails and <ul> for nav bars

The bread crumb trails we have seen have a hierarchy, the nav bars we have seen do not.
We want the nav bar to display in any order, unlike the bread crumb trail

Q2. What shape does the user scan the page in?

इ
एफ

प्रश्न पूछना 6: Responsive grid

Q1. What does col-md-3 mean?

I want 3 columns on a medium size screen
This column takes up 3 से बाहर 12 grid squares on a medium size display

Q2. What does col-xs-12 col-md-6 mean?

On a small screen, I want 12 कॉलम, on a medium screen, I want 6 कॉलम
On a medium screen, I want two columns, on an extra small screen, I want 1 column

प्रश्न पूछना 7: Bootstrap themes

Q1. Why would you use a Bootstrap theme?

To create completely new layouts
To rapidly customise the colour palette that Bootstrap uses

Q2. Can you do whatever you like with Bootstrap code you find on the internet?

Yes – if it is published online, it means you can use the code as you like.
No – you should check the licenses that come with the Bootstrap code you find online.

प्रश्न पूछना 8: Realising design principles in code summary quiz

Q1. What is graceful degradation?

Crashing with a polite error message
Old websites that still work on new browsers
When browsers try and display badly written HTML as well as they can
HTML and CSS code that runs as well as possible even on older browsers

Q2. Which of these contains the best minimal set of tags for a Bootstrap navbar?

1234567
1234567
1234567
1234567

Q3. What is the purpose of div tags?

To create divisions in the layout for columns.
To provide a mathematical operation
To cleanly lay out the HTML code
To enable different styles to be applied to different parts of the document.

Q4. Which of the following are correctly formatted HTML comments?

1
1 /* this is a comment */
1
1 // this is a comment

Q5. Which code looks like it defines the collapsed version of a navbar?

1234567
1234567891011
12
123

Q6. A CSS class has width: 25%. If it is located in a div with a width of 200px, how wide will it be?

1 200पिक्सल
1 50पिक्सल
1 25पिक्सल
1 100पिक्सल

क्यू 7. Which code will present 3 columns to users on a phone in portrait mode? Select all that apply.

123456
123
12345
12345

क्यू 8. Which code will present 6 columns to users on a desktop screen?

12345678
123
12345
123

प्रश्न 9. What is a Bootstrap theme?

A type of component in the Bootstrap library
A song that is sung by Bootstrap users
A design methodology which uses Bootstrap
An extension of Bootstrap that overrides the default Bootstrap styles

प्र10. Put this code at the top of the body content of the basic bootstrap example code:

123456789

Which image correctly shows how the navbar appears in a narrow browser window, such as a phone?

Responsive Web Design Week 3 प्रश्नोत्तरी उत्तर

प्रश्न पूछना 1: Separating structure and content

Q1. Which of these is an example of the content of a page?

A photograph of spaghetti with clams used as the header image of a food blog post
A navigation bar at the top of the page

Q2. What aspect of a website is best represented by HTML?

विषय
संरचना
Style

Q3. Why is it bad to copy and paste many similar pieces of HTML into your site?

It becomes hard to change the site.
It slows down page loads.

प्रश्न पूछना 2: JavaScript objects

Q1. What are objects useful for?

They make your web page more interactive by responding to user interface events.
They let you combine lots of related variables into one thing

Q2. Which of these is a correctly defined object?

1234 [ name = “Jenny”; id = “B4342”]
1234 { नाम : “Jenny”, पहचान : “B4342” }

Q3. How do you print the member variable “name” of the object “student”?

1 console.log(student.name);
1

प्रश्न पूछना 3: JavaScript templates with Handlebars

Q1. Did you spot the error in my slides? It was this bit of code:

{{src}} is not a valid template expression
There are no units in the value of the “height”

Q2. Which of these is a template expression?

1 {{ नाम }}
1

Q3. Handlebars matches data to templates based on the name of member variables in an object.

सत्य
असत्य

प्रश्न पूछना 4: Putting data into templates

Q1. The result of compiling a template is:

स्क्रैच से फ्रंट-एंड वेब डेवलपमेंट सीखें
स्क्रैच से फ्रंट-एंड वेब डेवलपमेंट सीखें
जावास्क्रिप्ट

Q2. The result of instantiating a template with data is

स्क्रैच से फ्रंट-एंड वेब डेवलपमेंट सीखें
स्क्रैच से फ्रंट-एंड वेब डेवलपमेंट सीखें
जावास्क्रिप्ट

Q3. What do you use to put the output of a template into your web page

Handlebars
jQuery

प्रश्न पूछना 5: Displaying different data with the same template

Q1. To layout two javaScript objects you need:

One template
Two templates (one per object)

Q2. When you render two objects with a single template, which of these do you only have to do once?

Compile the template
Generate html

Q3. There was a small error in the code I showed. Do you know what it was? It was in this code:

1 var data2 = { src: “https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Shopping_Center_Magna_Plaza_Amsterdam_2014.jpg/2560px-Shopping_Center_Magna_Plaza_Amsterdam_2014.jpg”, शीर्षक: “Shopping Center Magna Plaza Amsterdam 2014”, author: “Tuxyso”, };

Variable names cannot contain numbers
There should not be a comma (,) after the author property

Q1. How many template expressions does a template need?

One for every variable in the object
One for each piece of data you want to display

Q2. What is a modal?

A more powerful type of template
A pop up dialog within HTML

Q3. When do you call this?

1 $(“#imageModal”).modal(‘show’);

Before rendering the template
After rendering the template

प्रश्न पूछना 7: Adding content to websites summary quiz

Q1. Which of these would you need to represent as an object?

the price of a videogame
the name of an animal
the technical specs of a mobile phone
your current position in a slide show

Q2. What is wrong with this object definition?

12345
var person = {
नाम : “johnny”;
occupation : “construction worker”;
उम्र : 45 }

It should start with “object” not “var”
It should have , कीबोर्ड संशोधक चाबियों का एक समूह है जिसका उपयोग अन्य कुंजियों के व्यवहार को बदलने के लिए किया जा सकता है ;
it should have age = instead of age :
member variables cannot be numbers, only text

Q3. Which of these can be stored as a property (variable) in an object? (select all that apply)

a number
मूलपाठ
an object
a function

Q4. Which of these would be member variables of an object representing a person’s social media profile? (select all that apply)

The person’s name
font size
profile image file url
number of members of the site

Q5. What would you use templates for? (select all that apply)

Setting the font size used to display an authors name
controlling the layout of blog posts on your site
displaying a product differently on a mobile e-commerce site from a desktop one
finding all products on an e-commerce site that cost under $10

Q6. What is wrong with this template definition?

12345

the html tags should be outside the template expressions
template expressions should have one set of curly brackets {} not two
the type of the script tag should be “text/javascript”
the template should be in a

क्यू 7. Which of these would be a good template for a product display on an e-commerce site? Clue: remember that the template should be capable of displaying lots of different products with the same code.

123456
123456

क्यू 8. What html does this template produce with this data object shown below?

1234567891011

<script id="my-template" type="text/x-handlebars-template">

<h1>{{Name}}</h1>

<h3>{{age}}</h3>

<img src="{{src}}"/>

</script>

var person = {

name : "Ananda",

age : "23",

image : "ananda_on_the_beach.jpg"}

123 <h1></h1> <h3></h3> <img src=""/>
12345 <h1>Ananda</h1> <h3>23</h3> <img src="ananda_on_the_beach.jpg"/>
123 <h1></h1> <h3>23</h3> <img src=""/>
123 <h1>Ananda</h1> <h3>23</h3><img src=""/>

प्रश्न 9. What html does this template produce with this data object shown below?

1234567891011121314

var blog_post = {
शीर्षक : “how to use templates”,
लेखक : “Marco”,

1234

how to use templates

Marco

1st September 2015

use handlebars

12345

how to use templates

Marco

1st September 2015

comment

use handlebars

1234

how to use templates

Marco

1st September 2015

use handlebars

1234

Marco

how to use templates

1st September 2015

use handlebars

प्र10. If you were to convert this HTML into templates, which parts would you replace with a template expression? (select all that apply)

5 </div>

<डिव>
My Image name
Sandra Chung
myimage.jpg

Responsive Web Design Week 4 प्रश्नोत्तरी उत्तर

प्रश्न पूछना 1: JavaScript arrays

Q1. Why are arrays useful?

They can store very long pieces of text
They can store lots of individual bits of data

Q2. Which of these is a correctly defined array?

1 [‘one’, 2, 3.0]
1 {‘one’, ‘two’, ‘three’}

Q3. What is the first element of an array called “a”?

1 ए[0]
1

प्रश्न पूछना 2: Storing objects in arrays and displaying them with a template

Q1. To use a template with an array you need to:

Create lots of templates, one for each template in an array.
Use a single template but instantiate it separately with each item in the array.
Use a single template and instantiate it once with the whole array

Q2. Did you spot the error in my slides? It was with this code.

12345678

The last template expression should be {{#प्रत्येक}} नहीं {{/प्रत्येक}}
The div is not closed

Q3. Everything inside the {{#प्रत्येक}} {{/प्रत्येक}} expression is

Repeated once for each element in the array
Rendered a single time but with all the data in the array

प्रश्न पूछना 3: Dynamically displaying single images from an array

Q1. How do you access individual elements of an array?

By number
By name

Q2. What does {{@index}} करना?

Get a member variable called index
Get the number of the current item in the array

Q3. What is data-id?

The identification number of an element of a data array
A special “data” attribute that allows us to add extra data to an HTML tag

प्रश्न पूछना 4: Implementing a search function

Q1. Why do keypress events represent keyboard keys as numbers and not letters?

You can’t represent a letter directly on a computer
Some keyboard keys can’t be represented as letters

Q2. Why do you need to pass a function to filter an array?

The function takes an individual element of the array and figures out whether it should be kept or not
The function steps through every element of the array in turn

Q3. Filter changes your array so you need to save a backup

सत्य
असत्य

प्रश्न पूछना 5: Data structure for a complete image gallery

Q1. You cannot have an array as a member variable of an object

सत्य
असत्य

Q2. You should always represent a photo album as just an array, not an object, because it is just a bunch of photos.

सत्य
असत्य

Q3. What data type did I use to represent the name of the photo album?

An array
An object
A string (मूलपाठ)

प्रश्न पूछना 6: Writing the templates for the gallery

Q1. To a hierarchical data structure, like a photo gallery that contains many albums, each of which contains many photos, …

You must use a different template for each level: one for albums and one for photos
You can include both levels (albums and photos) in the same template

Q2. What does {{photos.length}} करना?

Renders the “length” member variable of the array “photos”
Takes two member variables “photos” and “length and joins them together with a dot.

Q3. What does {{#if @first}} करना?

Gets the first element of the current array, if there is one
Only renders the following template code if the current element is the first one in the array

प्रश्न पूछना 7: Building a full gallery app summary quiz

Q1. What is an array?

A JavaScript data structure that can store many items and can access them by a number
A JavaScript data structure that can store many items and can access them by a name
A template where template expressions access data items by a number
A template where template expressions access data items by a name

Q2. If you were building a social media site, which of the following would you represent as an array? (select all that apply)

A person’s name
A person’s friends list
A person’s timeline
A person’s profile

Q3. What is wrong with this array definition?

1var myArray = [“one”, 2, 3.0, [4, 5, “six”];

It should have curly brackets {} instead of square brackets []
It has the wrong number of commas (,)
It has the wrong number of close brackets (])
You cannot have an array inside another array

Q4. What does this code do?

1$(“#myButton”).क्लिक();

Changes which function is called when the element with id “myButton” is clicked
Stops any function being called when the element with id “myButton” is clicked
Calls the function that would normally be called when the element with id “myButton” is clicked
Changes the style of the element with id “myButton” to look like it does when it is clicked.

Q5. What does the template expression {{#each length}} करना?

Show the member variable “length” of the object “each”
Show the number of items in the array “each”
Repeat the following code for all items in the array “length”
Show the member variable “each” followed by the member variable “length”

Q6. What is wrong with this template definition?

123 <ul> {{#each things}} <li>{{name}}</li> </ul>

There is an expression {{/प्रत्येक}} missing
NS <ul> should be after {{#प्रत्येक}}
Instead of {{नाम}} it should be {{things.name}}
Instead of {{#each things}} it should be {{#प्रत्येक}} {{चीज़ें}}

क्यू 7. Which template will correctly display all of this data?

123456789 var mydata = {name : "me",pets : [ {type : "cat",favouritebit : "whiskers"},{type : "dog",favouritebit : "ears"}]}

1234 <div><h2>{{name}}</h2><h4>{{pets}}</h4></div>
1234567 <div>{{#each pets}}<h2>{{name}}</h2><h4>{{type}}</h4><h4>{{favouritebit}}</h4>{{/each}}</div>
1234567 <div><h2>{{name}}</h2><h4>{{pets[0].type}}</h4><h4>{{pets[0].favouritebit}}</h4><h4>{{pets[1].type}}</h4><h4>{{pets[1].favouritebit}}</h4></div>
1234567 <div<h2>{{name}}</h2>{{#each pets}}<h4>{{type}}</h4><h4>{{favouritebit}}</h4> {{/each}}</div>

क्यू 8. When you instantiate this template with an object in which “pets” is an array with many members, which HTML tags only appear once in the final output?

12345678 <div>

<h1>About me</h1>

<h2>{{name}}</h2>

{{#each pets}}

<h3>{{type}}</h3>

<h4>{{favouritebit}}</h4>

{{/each}}

</div>

(select all that apply)

1<h1>
1<h2>
1<h3>
1<h4>

प्रश्न 9. What HTML does this template produce when you instantiate it with the data below?

15

}]}

123456

<div>

<h2>The nations favorite short stories about Aardvarks</h2>

<div id="contents"><h3>George the killer Aardvark</h3>

<h4>Clarice Davies</h4><h3>Aardvarks of the Carribean</h3><h4>

David Clarence</h4></div>

123456

<div>

<h2>The nations favorite short stories about Aardvarks</h2>

<h3>George the killer Aardvark</h3>

<h3>Aardvarks of the Carribean</h3>

<h4>Clarice Davies</h4><h4>David Clarence</h4></div>

1234

<div>

<h2>The nations favorite short stories about Aardvarks</h2>

<h3>Clarice Davies</h3><h3>David Clarence</h3></div>

1234567

<div>

<h2>The nations favorite short stories about Aardvarks</h2>

<h3>George the killer Aardvark</h3>

<h4>Clarice Davies</h4>

<h3>Aardvarks of the Carribean</h3>

<h4>David Clarence</h4></div>

प्र10. What HTML does this template produce when you instantiate it with the data below?

1234567891011121314151617181920

<div><h2>{{category}}</h2>{{#each products}}<h3>{{name}} {{@index}}</h3>{{/each}}</div> var toys = {category : "toys",index : "3462",products : [ {name : "train set",index : "3"},{name : "dolls house",index : "2"},{name : "building bricks",index : "1"} ]}6

</div>

123456

<div>

<h2>toys</h2>

<h3>train set 0</h3>

<h3>dolls house 1</h3>

<h3>building bricks 2</h3></div>

123456

<div>

<h2>toys</h2>

<h3>train set 3462</h3>

<h3>dolls house 3462</h3>

<h3>building bricks 3462</h3></div>

123456

<div>

<h2>toys</h2>

<h3>train set 3</h3>

<h3>dolls house 2</h3>

<h3>building bricks 1</h3></div>

लेखक

हेलेन बस्सी

नमस्ते, I'm Helena, एक ब्लॉग लेखक जिसे शिक्षा क्षेत्र में ज्ञानवर्धक सामग्री पोस्ट करने का शौक है. मेरा मानना है कि शिक्षा व्यक्तिगत और सामाजिक विकास की कुंजी है, और मैं अपने ज्ञान और अनुभव को सभी उम्र और पृष्ठभूमि के शिक्षार्थियों के साथ साझा करना चाहता हूं. मेरे ब्लॉग पर, आपको सीखने की रणनीतियों जैसे विषयों पर लेख मिलेंगे, ऑनलाइन शिक्षा, व्यवसायिक नीति, और अधिक. मैं अपने पाठकों की प्रतिक्रिया और सुझावों का भी स्वागत करता हूं, इसलिए बेझिझक एक टिप्पणी छोड़ें या किसी भी समय मुझसे संपर्क करें. मुझे आशा है कि आपको मेरा ब्लॉग पढ़ने में आनंद आएगा और यह उपयोगी और प्रेरणादायक लगेगा.
सभी पोस्ट देखें