Responsive Web Design Quizzes & Ответы – Курсера

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 (выбрать все, что подходит)

• Эффективность
• How easy a site is to learn to use

2 квартал. 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

2 квартал. What is a site map? (выбрать все, что подходит)

• 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

2 квартал. 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? (выбрать все, что подходит)

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

2 квартал. 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

2 квартал. 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

2 квартал. 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:(выбрать все, что подходит)

• 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?

2 квартал. 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

3 квартал. Which of the following are types of navigation for websites? (выбрать все, что подходит)

• Natural
• Местный
• Global
• Hierarchical

4 квартал. The most important areas of the screen are: (выбрать все, что подходит)

• The left
• Вершина
• The right
• Дно

Q5. Accessible sites have:(выбрать все, что подходит)

• 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? (выбрать все, что подходит)

• 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

Q7. Which two of the following are user centred questions (as opposed to cognitive, evidence based questions)? (выбрать все, что подходит)

• 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?

Q8. Which of the following comes first in both user centred design and evidence based design approaches?

• The home page
• The HTML code
• Пользовательский опыт
• The CSS code

Q9. 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.

Q10. Which of the following are bad design principles? (выбрать все, что подходит)

• 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

2 квартал. 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

2 квартал. What is the tag to wrap navbars in?

• ol
• nav

3 квартал. 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

2 квартал. 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

2 квартал. How many CSS files can be attached to an HTML document?

• Только 1
• As many as you like

викторина 5: Где я?

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

2 квартал. What shape does the user scan the page in?

• Е
• F

викторина 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

2 квартал. 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

2 квартал. 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

2 квартал. Which of these contains the best minimal set of tags for a Bootstrap navbar?

• 1234567
• 1234567
• 1234567
• 1234567

3 квартал. 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.

4 квартал. 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 200px
• 1 50px
• 1 25px
• 1 100px

Q7. Which code will present 3 columns to users on a phone in portrait mode? Выбрать все, что подходит.

• 123456
• 123
• 12345
• 12345

Q8. Which code will present 6 columns to users on a desktop screen?

• 12345678
• 123
• 12345
• 123

Q9. 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

Q10. 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

2 квартал. What aspect of a website is best represented by HTML?

• содержание
• Состав
• Style

3 квартал. 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

2 квартал. Which of these is a correctly defined object?

• 1234 [ name = “Jenny”; id = “B4342”]
• 1234 { имя : “Jenny”, я бы : “B4342” }

3 квартал. 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:

6

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

2 квартал. Which of these is a template expression?

• 1 {{ имя }}
• 1

3 квартал. 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:

• HTML
• CSS
• JavaScript

2 квартал. The result of instantiating a template with data is

• HTML
• CSS
• JavaScript

3 квартал. 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)

2 квартал. When you render two objects with a single template, which of these do you only have to do once?

• Compile the template
• Generate html

3 квартал. 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”, автор: “Tuxyso”, };

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

викторина 6: Displaying the same data with different templates, Use a Bootstrap modal

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

2 квартал. What is a modal?

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

3 квартал. 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

2 квартал. 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

3 квартал. Which of these can be stored as a property (variable) in an object? (выбрать все, что подходит)

• a number
• текст
• an object
• a function

4 квартал. Which of these would be member variables of an object representing a person’s social media profile? (выбрать все, что подходит)

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

Q5. What would you use templates for? (выбрать все, что подходит)

• 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

Q7. 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

Q8. 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=""/>

Q9. 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

Q10. If you were to convert this HTML into templates, which parts would you replace with a template expression? (выбрать все, что подходит)

5 </div>

• <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

2 квартал. Which of these is a correctly defined array?

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

3 квартал. What is the first element of an array called “a”?

• 1 a[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

2 квартал. 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

3 квартал. 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

2 квартал. What does {{@index}} делать?

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

3 квартал. 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

2 квартал. 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

3 квартал. 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

• истинный
• ЛОЖЬ

2 квартал. You should always represent a photo album as just an array, not an object, because it is just a bunch of photos.

• истинный
• ЛОЖЬ

3 квартал. 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

2 квартал. 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.

3 квартал. 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

2 квартал. If you were building a social media site, which of the following would you represent as an array? (выбрать все, что подходит)

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

3 квартал. 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

4 квартал. 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
• the <ul> should be after {{#каждый}}
• Instead of {{имя}} it should be {{things.name}}
• Instead of {{#each things}} it should be {{#каждый}} {{вещи}}

Q7. 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>

Q8. 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>

(выбрать все, что подходит)

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

Q9. 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>

Q10. 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>