Responsive Web Design Coursera Quiz Answers

by

Coursera was launched in 2012 by Daphne Koller and Andrew Ng with the goal of giving life-changing learning experiences to students all around the world. In the modern day, Coursera is a worldwide online learning platform that provides anybody, anywhere with access to online courses and degrees from top institutions and corporations.

Join Now

Responsive Web Design Week 01 Quiz Answers

Quiz 1: Usability and user experience

Q1. Usability relates to (select all that apply)

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

Quiz 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

Quiz 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

Quiz 4: Accessibility

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;

Quiz 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

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

Quiz 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 top
  • The right
  • The bottom

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

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

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

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

Quiz 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

Quiz 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

Quiz 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

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

  • Only 1
  • As many as you like;

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

  • E
  • F

Quiz 6: Responsive grid

Q1. What does col-md-3 mean?

  • I want 3 columns on a medium size screen
  • This column takes up 3 out of 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 columns, on a medium screen, I want 6 columns
  • On a medium screen, I want two columns, on an extra small screen, I want 1 column

Quiz 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.;

Quiz 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? Select all that apply.

  • 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

<image: svg%3E>

<image: svg%3E>

<image: svg%3E>

<image: svg%3E>

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

Responsive Web Design Week 3 Quiz Answers

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

  • Content
  • Structure
  • 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.

Quiz 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 { name : “Jenny”, id : “B4342” }

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

  • 1 console.log(student.name);
  • 1

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

Q2. Which of these is a template expression?

  • 1 {{ name }}
  • 1

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

  • TRUE
  • FALSE;

Quiz 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

Quiz 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”, title: “Shopping Center Magna Plaza Amsterdam 2014”, author: “Tuxyso”, };

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

Quiz 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

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

Quiz 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 = {
name : “johnny”;
occupation : “construction worker”;
age : 45 }

  • It should start with “object” not “var”
  • It should have , instead of ;
  • 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
  • text
  • 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

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 = {
Title : “how to use templates”,
Author : “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? (select all that apply)

5 </div>

  • <div>
  • My Image name
  • Sandra Chung
  • myimage.jpg;

Responsive Web Design Week 4 Quiz Answers

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

Quiz 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 {{#each}} not {{/each}}
  • The div is not closed

Q3. Everything inside the {{#each}} {{/each}} expression is

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

Quiz 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}} do?

  • 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

Quiz 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

  • TRUE
  • FALSE;

Quiz 5: Data structure for a complete image gallery

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

  • TRUE
  • FALSE

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

  • TRUE
  • FALSE

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

  • An array
  • An object
  • A string (text)

Quiz 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}} do?

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

  • 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

Quiz 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”).click();

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

  • 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 {{/each}} missing
  • the <ul> should be after {{#each}}
  • Instead of {{name}} it should be {{things.name}}
  • Instead of {{#each things}} it should be {{#each}} {{things}}

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>

(select all that apply)

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

.

Review:

Based on our knowledge, we urge you to enroll in this course so you can pick up new skills from specialists. It will be worthwhile, we trust.

 

Leave a Comment