Are you ready?

1 questions to solve.

Instructions
  1. This quiz goes to full-screen once you press the Start button, or any Next button after exiting the quiz window.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
Compared to 0.5, what does the value 3 do when assigned to the widthIncrement property?
widthIncrement holds the value by which the width of .bar will be incremented each time requestAnimationFrame() is invoked. Thus, a large value will get the width to increment by large amounts and consequently move the bar quicker.
What's the problem in the code below?
if (automate) {
    Automation.start();
}

if (progressBar) {
    var bar = document.createElement("div");
    bar.className = "bar";
    progressBar.appendChild(bar);
    ProgressBar.target = bar;
    ProgressBar.start();
}
If both automate and progressBar evaluate to true, both the conditionals above will be executed consequently setting up an interval from Automation.start() and rAF from ProgressBar.start(). For more details and the correct code, please read the second last section in Sliders Progress Bar.
Programming the logic for our slider's progress bar is easier using CSS-based animations than using JavaScript-based animations.
True or false?
The previous Sliders Progress Bar chapter emphasized again and again on the fact that JavaScript-based animations are easier and more maintainable in powering up the progress bar as compared to CSS transitions/animations. Hence the correct choice is B).
What is the purpose of the property target on the ProgressBar object?
target holds a reference to the .bar element. Hence the choice A).
What's the problem in the following definition for the method move?
ProgressBar.move = function() {
    var self = ProgressBar;
    self.id = requestAnimationFrame(self.move);
    if (self.currentWidth >= 100) {
        counter++;
        navigateSlider();
    }
    self.currentWidth += self.widthIncrement;
    self.target.style.width = self.currentWidth + "%";
}
requestAnimationFrame() shall be called after line 9 to carry out the necessary actions. Hence the choice A).
What's the problem in the following definition for the method move?
ProgressBar.move = function() {
    if (this.currentWidth >= 100) {
        counter++;
        navigateSlider();
    }
    this.currentWidth += this.widthIncrement;
    this.target.style.width = this.currentWidth + "%";
    this.id = requestAnimationFrame(this.move);
}
Since move() is called by requestAnimationFrame(), the value of this passed to it will resolve to the window object, and NOT to the ProgressBar object. Check out the previous Sliders Progress Bar chapter to see how to mitigate this.