Responsive Website Basics: Code with HTML, CSS, and JavaScript Quiz Answers

Table of Contents

Responsive Website Basics: Code with HTML, CSS, and JavaScript Week 1 Quiz Answers

Quiz 1: Web basics

Q1. A web browser is:

  • A server
  • A client

Q2. The world wide web is the same as the internet

  • TRUE
  • FALSE

Q3. HTML is used to define:

  • The structure of the page
  • The appearance of the page

Quiz 2: Set up the dev environment

Q1. HTML files end with: (choose ALL that are correct)

  • .html
  • .htm
  • .www

Q2. The first web page went live in:

  • 1980
  • 1990
  • 2000

Q3. Word processors are ideal for editing HTML

  • TRUE
  • FALSE

Quiz 3: HTML

Q1. In HTML, HT stands for:

  • Hypertext
  • High throughput

Q2. In HTML, ML stands for:

  • Markup language
  • Media language

Q3. True or False: The browser parses the HTML and decides how to display the page?

  • True
  • False

Quiz 4: Navigation bar

Q1. What is the purpose of a navigation bar?

  • It allows users to move around your website
  • It allows you to draw a line across the page

Q2. Why is whitespace important?

  • Since the browser ignores whitespace in an HTML document, you can clearly lay out the code without affecting how the web page will look.
  • It allows you to easily create spaces between the various parts of a web page.

Q3. What is the most important difference between HTML and most other document formats?

  • HTML allows you to make links from one document to another.
  • HTML allows you to separate navigation from content.

Quiz 5: Images and lists

Q1. Images are typically stored as separate files, not embedded in the HTML document.

  • True
  • False

Q2. What are HTML attributes for?

  • They let you create spaces between words
  • They let you provide extra information to the browser about a tag

Q3. True or False: HTML elements are hierarchical?

  • True
  • False

Quiz 6: Properly structured documents

Q1. True or False: h1 tags contain meta data?

  • True
  • False

Q2. In good practice, which tags should all HTML documents have? Please select all that apply.

  • html
  • body
  • head
  • a

Q3. What happens to a web browser if the HTML is not correctly structured?

  • It will definitely crash
  • It probably won’t crash

Quiz 7: The world’s first web page

Q1. True or False: The HTML language changes over time?

  • True
  • False

Q2. True or False: It is best to use capital letters for tags

  • True
  • False

Q3. 20 year old HTML documents can be read by modern web browsers

  • True
  • False

Quiz 8: HTML summary quiz

Q1. What is the head section of an HTML document used for? Select all that apply

  • Meta data that describes the content of the site.
  • The top part of the content that users will see when they visit the site.
  • The title of the document.
  • The brain of the web page.

Q2. Which are examples of badly formed HTML?

  • 1 <a><p></a></p>
  • 1 <ol><li></li></ol>
  • 1 <p><a></p>Link</h1></a><h1>
  • 1 <p><a href="http://www.google.com"></a></p>

Q3. Inspect the code of a website you use regularly. Which tags can you find?

  • 1 <website>
  • 1 <div>
  • 1 <html>
  • 1 <body>

Q4. Which tag should you use for a numbered list?

  • 1 <ol>
  • 1 <ul>
  • 1 <h2>
  • 1 <dl>

Q5. Which is the correct attribute to use to tell the browser where to find an image?

  • 1 href
  • 1 src
  • 1 &src;
  • 1 <src>

Q6. Which are true about HTML documents?

  • The HT in HTML refers to the fact that you can create a link from one document to another
  • We use 1 <a> tags to link from one document to another
  • We use 1 <href> tags to link from one document to another
  • Web browsers use whitespace to layout the 00rendered page

Q7. Concerning hyperlinks, which are true?

  • The browser underlines the text in an a tag
  • The browser makes the text in an a tag blue
  • Links only go one way
  • The browser guesses which page to go to if we put in a broken link address

Q8. Select the code which creates a list of links:

  • 1 <li> <ol> <a href="index.html">home</a></ol> <ol> <a href="about.html">about</a></ol> <ol> <a href="contact.html">contact</a></ol> </li>
  • 1 <ol> <li> <a href="index.html">home</a></li> <li> <a href="about.html">about</a></li> <li> <a href="contact.html">contact</a></li> </ol>
  • 1 <links> <li> <a href="index.html">home</a></li> <li> <a href="about.html">about</a></li> <li> <a href="contact.html">contact</a></li> </links>
  • 1 <ol> <a> <li href="index.html">home<li></a> <a> <li href="about.html">about</li></a> <a> <li href="contact.html">contact</li></a> </ol>

Q9. Select the most correct structure for an HTML document:

  • 1 <html> <head> </head> <body> </body> </html>
  • 1 <html> <head> <body> </head> </body></html>
  • 1 <html> <title> </title> <head> </head> <body> </body></html>
  • 1 <html> <head> <h1>title </h1> </head> <body> </body></html>

Q10. Which of the following tags are only associated with meta data? Select all that apply.

  • html
  • head
  • title
  • h1

Responsive Website Basics: Code with HTML, CSS, and JavaScript Week 2 Quiz Answers

Quiz 1: External CSS file

Q1. What does CSS stand for?

  • Cascading style sheets
  • Custom style sheet

Q2. What is the tag we use to add an external CSS file?

  • style
  • link

Q3. What CSS property do I set to change the background colour of the page?

  • body
  • background

Quiz 2: Fonts

Q1. Which is not a font family?

  • Times New Roman Bold
  • Serif

Q2. Which font is normally used to display code?

  • a monospaced font
  • A sans-serif font

Q1. Why should we customise links?

  • To get rid of the weird hand cursor
  • To emphasise to the user where the links are

Q2. What is the purpose of a CSS selector?

  • It connects a set of CSS properties to things in the HTML document
  • It tells the browser which CSS file to load

Q3. a:hover is a CSS selector to select links that the user is hovering over

  • TRUE
  • FALSE

Quiz 4: Layout control

Q1. CSS classes only apply to one type of tag

  • TRUE
  • FALSE

Q2. HTML tags can have multiple classes

  • TRUE
  • FALSE

Q3. Which of the following is a definition of a new CSS class?

  • .bold { font-weight:bold;}
  • bold { font-weight:bold;}
  • #bold { font-weight:bold;}

Quiz 5: Install Bootstrap

Q1. Why do we use bootstrap?

  • All websites should look the same for accessibility
  • To reset the browser’s default styles to a clean, modern state

Q2. Bootstrap can be used along with my own CSS stylesheets

  • TRUE
  • FALSE

Quiz 6: Responsive Grid

Q1. How many columns are in a standard boostrap grid?

  • 10
  • 12

Q2. How many col-md-3 columns fit in a standard boostrap grid?

  • 4
  • 3

Q3. How many parameters does the border property shorthand normally have?

  • 3
  • 1

Q4. Responsive web pages respond to user input

  • TRUE
  • FALSE

Quiz 7: CSS summary quiz

Q1. Select the correct way to link to an external CSS file

  • <a class=”styles.css”>Styled link</a>
  • <link rel=”stylesheet” href=”styles.css” type=”text/css”/>
  • <link rel=”stylesheet” src=”styles.css” type=”text/css”>
  • <style rel=”stylesheet” href=”styles.css” type=”text/css”></style>

Q2. Which of the following puts blue text on a red background? (select all that apply)

  • 1 color: #blue;

2 background: #red;

  • 1 color: blue;

2 background: red;

  • 1 color: #0000FF;

2 background: #FF0000;

  • 1 font-color: blue;

2 background-color: red;

Q3. Which of the following is a serif font?

  • Times New Roman
  • Arial
  • Helvetica
  • Bold

Q4. Which font would be used in the body region with the following CSS code?

1

2

3

4

5

6

7

.body { font-family: serif, sans-serif; }

body {  font-family: sans-serif, serif; }

  • A sans-serif font
  • Times New Roman
  • Arial
  • A serif font

Q5. What colour would the link text be with the following code:

In your HTML:

1 <a class="changeme">what colour am I?</a>

In your CSS:

1

2

3

4

5

6

7

a { color: blue; }

.changeme {  color: red; }

  • red
  • green
  • blue
  • red with a green background

Q6. What colour would the text ‘what colour am I’ be with the following code fragment in the CSS file:

1

2

3

4

5

6

7

8

9

10

11

a {  color: green; }

.changemeagain {  color: yellow; }

.changeme {  color: red; }

and the following code fragment in the HTML file:

1 <a class="changemeagain changeme">what colour am I?</a>

  • red
  • green
  • blue
  • yellow

Q7. How many columns are being used from the bootstrap grid here?

1

2

3

4

<div class="row"> 

  <div class="col-md-3"> 

  </div>

</div>

  • 1
  • 12
  • 4
  • 3

Q8. How many rows will you see on a very narrow screen such as a phone?<div class=”row”> <div class=”col-md-3″> one </div> <div class=”col-md-5″> two </div> <div class=”col-md-4″> three </div></div>

  • 1
  • 12
  • 3
  • 5

Q9. In this extract of a CSS file, what are the selectors? (select all that apply)

1

2

3

4

5

6

7

8

9

10

11

.test {  color:red; }

.body {  color:#ff00ff;

#curveball {  color:green; }

  • .test
  • .body
  • #curveball
  • color

Q10. What are advantages of using bootstrap? (select all that apply)

  • It is free
  • It sets up default styles that look more modern than the browser’s default styles
  • It provides ready made design elements such as navbars
  • It provides a responsive grid system

Responsive Website Basics: Code with HTML, CSS, and JavaScript Week 3 Quiz Answers

Quiz 1: Introduction to JavaScript

Q1. When you interact with a web page it has to reload from the server every time you make a small change

  • TRUE
  • FALSE

Q2. What is the relationship between Java and JavaScript

  • They are versions of the same language
  • They are completely different languages

Q3. JavaScript is a language only used for handling mouse events.

  • TRUE
  • FALSE

Quiz 2: Responding to mouse clicks

Q1. What does the onclick attribute do?

  • Says how the elements style should change when it is clicked
  • Says what script should be called when an element is clicked

Q2. What is wrong with this call to alert? alert(Hello World);

  • Hello World should be in quotes.
  • There cannot be a space in the arguments to a function

Q3. What is the purpose of semi-colons (;) in JavaScript

  • starting a comment
  • ending a line of code

Quiz 3: The Console

Q1. What is the console used for?

  • print out debugging information
  • playing web based games

Q2. What does this code do?

1 a.b();

  • calls a function called a with an argument called b
  • calls a function called b on an object called a

Q3. What are objects?

  • data that is passed in to functions
  • they represent things in the program, like documents or HTML elements

Quiz 4: Manipulating HTML elements

Q1. What is jQuery useful for?

  • manipulating the HTML elements of a web page
  • querying information from a database

Q2. What is $?

  • an object that represents the whole web page
  • A shorthand for the function JQuery

Q3. What does this code do?

1 $(“.button”).html(“hello”);

  • sets the the html content of all objects with class “button” to “hello”
  • displays “hello” when you click on a button

Quiz 5: Script tag

Q1. Why would you create your own function?

  • to bring together a lot of lines of JavaScript so you can easily call them together
  • add a new type of custom HTML tag

Q2. What is a script tag used for?

  • including JavaScript in an html page
  • correctly formatting screenplays

Q3. What is wrong with the following code:

123 function setHTML(text){ $(“#myelement”).html(mytext); }

  • you cannot have capital letters in a function name
  • mytext does not match the argument name, which is “text”

Quiz 6: Anonymous functions

Q1. With JavaScript you can change the behaviour of an element when it is clicked on at any time as the web page is running

  • TRUE
  • FALSE

Q2. What do you call a function that you pass directly into another function without giving it a name?

  • An anonymous function
  • A direct function

Q3. What does this code do? a(function (){console.log(“c”)});

  • passes an anonymous function to a
  • calls a function called a which prints “b” to the console

Quiz 7: Beginning JavaScript summary quiz

Q1. Which language is used to add real time interaction to web pages?

  • CSS
  • Java
  • HTML
  • JavaScript

Q2. Which of these aspects of a web page would use JavaScript functions?

  • The authors contact details
  • What happens when you click on a button.
  • The colour of the navigation bar
  • WebGL games

Q3. How would you write a function that takes an argument, and you can call like this: “say(‘hello’);”?

  • 1

2

3

function say(word){  alert(word);  }

  • 1

2

3

function say{hello}( alert(hello); ) say hello(){ alert(hello); }

  • 1

2

3

say hello(){  alert(hello);  }

Q4. To implement a hover event you need to do something when the mouse enters and then change it back when it exits. The jQuery hover function takes 2 functions as arguments, how would you change the color as you hover over it?

  • 1

2

3

4

5

$("#title").hover(enter(){ $("#title").css("color", "red");},  exit(){$("#title").css("color", "black"); })

  • 1

2

3

4

5

$("#title").hover(function(){$("#enter").css("color", "red"); }, function(){$("#exit").css("color", "black"); })

  • 1

2

3

4

$("#title").hover(function(){ $("#title").css("color", "red");  $("#title").css("color", "black"); })

  • 1

2

3

4

5

6

$("#title").hover(function(){ $("#title").css("color", "red"); }, 

function(){ $("#title").css("color", "black"); })

Q5. The HTML document object has a function “getElementById”. How would you get the element with id “title”?

  • 1 getElementById(document, "title");
  • 1 title.getElementById("document");
  • 1 document.getElementById("title");
  • 1 document(“getElementById”, "title");

Q6. What is wrong with this jquery code?

1 $("h1.title").html($("#chapterTitle"+3));

  • It passes in $(“#chapterTitle”+3) but that isn’t a piece of text
  • It is trying to call $ which is not a valid function name
  • It uses two selectors: h1 and .title, when it should have one.
  • It is trying to add a string (text) to a number

Q7. How would you make the element react when the mouse moves into it?

  • 1 <h1 id="title" onmouseenter="alert('hello');" >Hello</h1>
  • 1 <h1 id="mouseenter" onclick="alert('hello');" >Hello</h1>
  • 1 <mouseenter id="title" onclick="alert('hello');" >Hello</mouseenter>
  • 1 <h1 id="title" onclick="mouseenter('hello');" >Hello</h1>

Q8. What does this code do?

1

2

3

4

5

function no(){  $(this).html("I'm offended"); }

$("#myfavouritebit").mouseleave(no());

  • doesn’t work: “this” is not a valid css selector
  • doesn’t work: you can only use anonymous functions to respond to events
  • changes the content of the element with id “myfavouritebit” when the mouse moves out of it
  • changes the content of the element with id “this” when the mouse moves out of the element with id “myfavouritebit”

Q9. How do you show the content of an html element in popup dialog?

  • 1 $("#title").alert(html());
  • 1 $("#title").alert();
  • 1 $("#title").html(alert());
  • 1 alert($("#title").html());

Q10. The jQuery function “css” sets css parameters of an element. How would you change the background color of all list items with class “emphasised”?

  • 1 $(“css”).li.emphasised("color", "red");
  • 1 li.emphasised.css("color", "red");
  • 1 $('li, .emphasised').css('background', 'red')
  • 1 $('li.emphasised').css('background', 'red')

Responsive Website Basics: Code with HTML, CSS, and JavaScript Week 4 Quiz Answers

Quiz 1: Variables

Q1. What is a variable?

  • A named piece of code that can be used to change values
  • A named location in memory that you can use to store values

Q2. What is the correct way to create a new variable called “a”?

  • variable a : 3;
  • var a = 3;

Q3. Once you set the value of a variable you cannot change it.

  • TRUE
  • FALSE

Quiz 2: Using variables

Q1. What does this code do?

1 counter = counter + 1;

  • Sets the variable counter to 1
  • Adds one to the variable counter.

Q2. What does this code print out?

1 var myVar = 1;console.log(myVar + 1);

  • 2
  • 1

Q3. What does this code print out?

1

2

3

var myVar = 1;

myVar + 1;

console.log(myVar);

  • 1
  • 2

Quiz 3: Variables in practice

Q1. What does this code produce? “one” + 2

  • “one2”
  • 3

Q2. How would you implement a backwards button?

  • 34 $(“#backward”).click(function (){ counter = counter + 1; $(“#image”+counter-1).click(); });
  • 1234

Quiz 4: If statements

Q1. What does an if statement let you do?

  • make a choice of whether to run some code or not
  • repeat code many times

Q2. What does this code mean? (myVariable < 3)

  • myVariable is less than 3
  • myVariable becomes equal to 3

Q3. What does this code do? var myVar = 4;if (myVar > 4){ console.log(“yes”);}

  • prints yes
  • does nothing

Quiz 5: Boolean variables

Q1. What does setInterval do?

  • Call a function at regular intervals
  • Controls the page load time

Q2. What values can a boolean variable have?

  • yes, no
  • true, false
  • Any number

Q3. What does this code do?

1 excited = !excited;

  • increases the variable excited
  • makes the variable excited equal to not its old value

Quiz 6: eReader example

Q1. What does this code do? $(this).width()*0.3

  • sets the width of this element to 0.3
  • calculates 30% of the width of this element

Q2. What is “this” in JavaScript

  • It can mean different things in different situations
  • It represents the element that an event has happened to

Q3. What does this code do? $(“.scene”).

  • Get all elements with class “scene”
  • Gets the element with id “scene”

Quiz 7: Going deeper into JavaScript summary quiz

Q1. What does this code do?

1 var a = 3;

  • creates a new function with an argument 3
  • adds 3 to the variable 3
  • calls a function called “a” with an argument 3
  • creates a new variable with value 3

Q2. If you had a variable called “a” How would you set a new variable “b” to one more than a?

  • var b = a + 1;
  • var a + 1 = b;
  • var b = 1;
  • var a = b + 1

Q3. Which of these is a correct if statement?

  • 123 if {a > 3}( console.log(“hello”); )
  • 123 if myif(a > 3){ console.log(“hello”); }
  • 123 if (a > 3){ console.log(“hello”);}
  • 123 if a > 3 {}[ console.log(“hello”); ]

Q4. To create a condition where two things are equal we use two equals signs == (to distinguish it from one = which sets the value of a variable). How would you write a condition to check if variable a is one less than variable b?

  • a == b – 1
  • a == {b – 1}
  • a == {b == -1}
  • a == b

Q5. If you are going backwards through 4 images with a counter, how do you loop back to the end when the counter goes below 1?

  • 123 if(counter < 1){ counter = 4; }
  • 123 if(counter < 1){ counter = 1; }
  • 123 if(counter > 4){ counter = 4;}
  • 123 if(counter > 1){ counter = 1; }

Q6. How would you set an interval so function “f” gets called every half second?

  • 1 setInterval(f, 1/2);
  • 1 setInterval(f, 0.5);
  • 1 setInterval(f, 1/120);
  • 1 setInterval(f, 500);

Q7. What is content of the element with id “number” at the end of this code?

123 var myVar = 1;
$(“#number”).html(myVar+1);
myVar = myVar + 1;

  • 1
  • 2
  • 4
  • 3

Q8. How do you save the content of an html element to a variable?

  • 1 string content = $(“#title”).html();
  • 1 var content = $(“#title”).html();
  • 1 $(“#title”).html(var content);
  • 1 var content = $(“#title”);

Q9. After this code, what is the content of element “title”?

12345678
var number = 1;
if(number == 1){
$(“#title”).html(“chapter” + number + 1);
}
if(number == 2){
number = number + 2;
}
$(“#title”).html(“chapter” + number);

  • chapter4
  • chapter3
  • chapter1
  • chapter2

Q10. What gets printed out by this code? (select all that are printed)

12345678910111213141516
var a = 1;
if (a == 1){
console.log(“one”);
a = a + 1;
}
if (a == 1){
console.log(“two”);
}
a = a + 1;
if (a == 2){

  • one
  • four
  • two
  • three
Conclusion:

I hope this Responsive Website Basics: Code with HTML, CSS, and JavaScript Coursera Quiz Answers would be useful for you to learn something new from the Course. If it helped you, don’t forget to bookmark our site for more Quiz Answers.

Keep Learning!

More Coursera Quiz Answers >>

Responsive Web Design Coursera Quiz Answers

Dairy Production and Management Coursera Quiz Answers

Introduction to Thermodynamics: Transferring Energy from Here to There Quiz Answers

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!