Another questionable jQuery Quiz answer at W3Schools

Question

There is a jQuery quiz posted on the W3Schools site here...

http://www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery

Question #16 is as follows,

Which jQuery function is used to prevent code from running, before the document is finished loading?

A. $(document).load()

B. $(document).ready()

C. $(body).onload()

I got it wrong by picking answer A. (their official answer is B.)

I answered it, thinking that I knew the following,

1. document.load fires after everything on the page loads including all images

2. document.ready fires only after the DOM is loaded (not necessarily all the images have been loaded)

I interpreted the original question's wording of, "document is finished loading", to include everything (with all the images). After all, I thought that's why they called it "document.load". Also for their answer to be correct, you'd have to conclude that "DOM" is the equivalent to "document". This does not seem right otherwise why call it "document object model" (DOM) instead of just "document"?

Despite the W3School claim that B is the correct answer, what is really the correct answer?

Thank-you for your thoughts.

Sidenote: Quoting my own comments in my other related question...

"I actually learn most of my jQuery over at the jQuery site and come search here at StackOverflow when I get stuck. I was mostly playing around with the quiz at W3School because I was investigating their "prerequisites" for jQuery Certification. I don't consider myself to be a jQuery expert but I easily scored 95% (19/20) on their quiz. Seeing the improper wording in that answer, I figured I'd confirm what I already suspected by posting here. My opinions on these kinds of certifications are now shifting."

---

EDIT:

I notified the W3Schools of the existence of this thread.

---

EDIT 2:

When I answered the original quiz question, I was thinking of $(window).load(), therefore my quiz answer was clearly incorrect. I believe this fact leaves none of the three multiple choice options as the correct answer. See my detailed answer below.

Answer 1

The question is ambiguous.

The correct answer depends on your definition of document. If it is the DOM, it would be B. If it were the entire page's assets, it would be $(window).load(function() { ... }).

As you can see, this quiz sucks.

Answer 2

From the jQuery API documentation...

.ready()

Description: Specify a function to execute when the DOM is fully loaded. While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed.

More about jQuery Ready

Defining DOM, from the W3C...

What is the Document Object Model?

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

Defining .load() from the jQuery API documentation

.load()

Description: Bind an event handler to the "load" JavaScript event.

Example: Run a function when the page is fully loaded including graphics.

$(window).load(function () {

 // run code 

});

---

After researching this and much contemplation, I've come to the conclusion that the wording of the question is incorrect given their three choices. Of course, based on this line of thinking, since there is no correct answer to the quiz question, my original answer was also wrong.

The original W3Schools jQuery Quiz Question:

Which jQuery function is used to prevent code from running, before the document is finished loading?

Let's now analyze the original three answers:

A. $(document).load()

This was my initial answer but after posting this question on StackOverflow, realized that $(document).load() is not valid code as far as I can tell. $(window).load() is what I originally had in mind. Using $(window).load(), you will prevent code from executing before the entire window has loaded including all it's elements, images, etc.

A cannot be the correct answer since the wording is "document.load" although should be "window.load".

B. $(document).ready()

This is the official answer and it's valid jQuery code. It triggers when the DOM is ready but before anything else has finished loading. I would argue that you cannot say the "document" has finished loading otherwise the word "document" and "DOM" would have the same meaning and be interchangeable.

B cannot be the correct answer because without the images and other assets, the page (document) has not finished loading.

C. $(body).onload()

C cannot be the correct answer simply because "onload()" is not part of the jQuery library.

Conclusion(s):

1. As the question is worded, "Which jQuery function is used to prevent code from running, before the document is finished loading?", there is no correct answer from the three presented. $(window).load() should be the correct answer as it refers to the "page" or "document" as a whole and not just the DOM.

2. To accept the official answer, "$(document).ready()", the original question should be re-written as follows: "Which jQuery function is used to prevent code from running, before the DOM is finished loading?"