Are you ready?
11 questions to solve
Instructions
- This quiz goes to full-screen once you press the Start button.
- At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
How do we create a new intersection observer object?
An intersection observer is created by calling the constructor
IntersectionObserver() i.e using the statement new IntersectionObserver().What is the first argument to the
IntersectionObserver() constructor?The first argument to
IntersectionObserver() is a function, known as the callback.What does the
null value for the root property shown below mean?function callback() {
console.log("OK");
}
var options = {
root: null
}
var io = new Intersection(callback, options);A
null value for the root property of the options object means that the root is the viewport. For more info, consider reading IntersectionObserver Basics.What is the default value for the
threshold property of the options argument?The default value for the
threshold property of the options object is the array [0]. See details at IntersectionObserver Basics.The
IntersectionObserver API observes all given targets asynchronously. True or false?Definitely true! This is where the strength and efficiency of the
IntersectionObserver API comes from. Read more at IntersectionObserver Introduction.What does an
intersectionRatio of 1 mean?intersectionRatio is a number between 0 and 1 (both inclusive) to indicate the proportion of the target visible in the root. 1 means that it is completely visible - which goes with choice (C).The
entries parameter of an observer's callback function belongs to which data class?entries is an array; likewise it belongs to the class Array. Read more at IntersectionObserver Basics.When will the following code make a log, supposing that the observer
io is observing only one element?function callback(entries) {
var entry = entries[0];
if (entry.isIntersecting && entry.intersectionRatio === 0) {
console.log("OK");
}
}
var io = new Intersection(callback);This example is detailed in IntersectionObserver Entries.
In the code shown below, what will line 2 log whenever the callback is fired?
function callback(entries, x) {
console.log(x instanceOf IntersectionObserver);
}
var io = new Intersection(callback);The second argument of the callback function is a reference to the observer object (
io in this case). Since the argument is an intersection observer, it indirectly means that it's an instance of IntersectionObserver. Hence line 2 logs true. Read more at IntersectionObserver Entries.Below shown are two variants of a callback function to be passed to an
IntersectionObserver() constructor. The goal is to make a log once a given target is completely visible in the root.Variant 1:
function callback(entries) {
entries.forEach(function(entry) {
if (entry.intersectionRatio === 1) {
console.log("OK")
}
});
}Variant 2:
function callback(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
console.log("OK")
}
});
}Which variant do you think is more reliable and cross-browser compatible in accomplishing this goal?
As discussed in IntersectionObserver Entries, the property
isIntersecting isn't the best deal to go with if we want to check whether a target is completely visible in the root. A better and more reliable option is to directly check intersectionRatio as is done in Variant 1.Which of the following are properties of an
IntersectionObserverEntry object?The first three options are all properties of an
IntersectionObserverEntry object. This goes with choice (D). For more info please refer to IntersectionObserver Entries.
