Get All Weeks Responsive Website Basics: Code with HTML, CSS, and JavaScript Quiz Answers
In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity.
At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript.
In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.
Enroll now on Coursera
Week 1: Responsive Website Basics: Code with HTML, CSS, and JavaScript 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
1
1
Link
1
Q3. Inspect the code of a website you use regularly. Which tags can you find?
1
1
1
1
Q4. Which tag should you use for a numbered list?
1
1
1
1
Q5. Which is the correct attribute to use to tell the browser where to find an image?
1
href
1
src
1
&src;
1
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
tags to link from one document to another
- We use
1
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
- home
- about
- contact
1
- home
- about
- contact
1
home
- about
- contact
1
- home </li href=”index.html”>
-
- about</li href=”about.html”>
- contact </li href=”contact.html”>
-
Q9. Select the most correct structure for an HTML document:
1
1
1
1
title
Q10. Which of the following tags are only associated with meta data? Select all that apply.
- html
- head
- title
- h1
Week 2: Responsive Website Basics: Code with HTML, CSS, and JavaScript 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
Quiz 3: Customising links
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
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
what colour am I?</a class="changeme">
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
what colour am I?</a class="changemeagain changeme">
- 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″>
- 1
- 12
- 4
- 3
Q8. How many rows will you see on a very narrow screen such as a phone?
- 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
Week 3: Responsive Website Basics: Code with HTML, CSS, and JavaScript 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
Hello </h1 id=”title” onmouseenter=”alert(‘hello’);” >
1
Hello </h1 id=”mouseenter” onclick=”alert(‘hello’);” >
1
Hello</mouseenter id="title" onclick="alert('hello');" >
1
Hello </h1 id=”title” onclick=”mouseenter(‘hello’);” >
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')
Week 4: Responsive Website Basics: Code with HTML, CSS, and JavaScript 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.
This course is intended for audiences of all experiences who are interested in learning about new skills in a business context; there are no prerequisite courses.
Keep Learning!
Latest Comments