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 (เลือกทั้งหมดที่ใช้)

ประสิทธิภาพ
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? (เลือกทั้งหมดที่ใช้)

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? (เลือกทั้งหมดที่ใช้)

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:(เลือกทั้งหมดที่ใช้)

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? (เลือกทั้งหมดที่ใช้)

Natural
ท้องถิ่น
Global
Hierarchical

Q4. 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
Bonitasoft BPM
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.

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 Quiz Answers

แบบทดสอบ 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

ระดับ
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?

อี
F

แบบทดสอบ 6: Responsive grid

Q1. What does col-md-3 mean?

ฉันต้องการ 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, ฉันต้องการ 12 คอลัมน์, on a medium screen, ฉันต้องการ 6 คอลัมน์
On a medium screen, I want two columns, on an extra small screen, ฉันต้องการ 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 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

คำถามที่ 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

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 Quiz Answers

แบบทดสอบ 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?

คุณจะมุ่งเน้นไปที่การทำงานของ Digital Electronics
โครงสร้าง
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”, id : “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:

HTML
CSS
JavaScript

Q2. The result of instantiating a template with data is

HTML
CSS
JavaScript

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”, RSS เป็นข้อความธรรมดารูปแบบ XML: “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 (ตัวแปร) in an object? (เลือกทั้งหมดที่ใช้)

a number
ข้อความ
an object
a function

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

คำถามที่ 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

Q10. If you were to convert this HTML into templates, which parts would you replace with a template expression? (เลือกทั้งหมดที่ใช้)

5 </div>

<กอง>
My Image name
Sandra Chung
myimage.jpg

Responsive Web Design Week 4 Quiz Answers

แบบทดสอบ 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? (เลือกทั้งหมดที่ใช้)

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. รหัสนี้ใช้ทำอะไร?

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
ที่ <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>

คำถามที่ 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>

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>

ผู้เขียน

เฮเลน บาสซีย์

โปรดแจ้งให้เราทราบเพื่อที่ฉันจะได้รวมไว้ในชั้นเรียนนี้หรือในหลักสูตรในอนาคต, I'm Helena, นักเขียนบล็อกผู้หลงใหลในการโพสต์เนื้อหาเชิงลึกในช่องการศึกษา. ฉันเชื่อว่าการศึกษาเป็นกุญแจสำคัญในการพัฒนาตนเองและสังคม, และฉันต้องการแบ่งปันความรู้และประสบการณ์ของฉันกับผู้เรียนทุกวัยและทุกภูมิหลัง. ในบล็อกของฉัน, คุณจะพบบทความในหัวข้อต่างๆ เช่น กลยุทธ์การเรียนรู้, การศึกษาออนไลน์, คำแนะนำด้านอาชีพ, และอื่น ๆ. ฉันยินดีรับข้อเสนอแนะและข้อเสนอแนะจากผู้อ่านของฉัน, ดังนั้นอย่าลังเลที่จะแสดงความคิดเห็นหรือติดต่อฉันได้ตลอดเวลา. ฉันหวังว่าคุณจะสนุกกับการอ่านบล็อกของฉันและพบว่ามีประโยชน์และสร้างแรงบันดาลใจ.
ดูกระทู้ทั้งหมด