Nettuts+ Quiz #2: jQuery Basics

Nettuts+ Quiz #2: jQuery Basics

on Jun 1st 2011 with 89 comments
This entry is part 2 of 12 in the The Official Nettuts+ Quizzes Session
« PreviousNext »

So it seems you folks enjoy your quizzes, ay? All right; I’m back with another quiz for you jQuery newcomers. Think you can ace the test?



A Friendly Plug

So how’d you do? If you liked today’s quiz, consider buying jQuizzy, the engine that powers it, on CodeCanyon. You’ll love it, I promise!

jQuizzy

Siddharth is Siddharth on Codecanyon
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hola! I'm the associate editor here, editor of Windows.AppStorm, the lead reviewer at CodeCanyon and a reviewer at ThemeForest. When I'm not working for Envato, I'm a web developer/designer with expertise in JavaScript, PHP and Ruby . I am passionate about web technologies and video games and I really think code *is* art. It's a well known fact that following me has brought people great fortune and a lot of cuddles!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://james.padolsey.com James

    Question 10 is a bit iffy. The `noConflict` function only clears all of jQuery’s global variables (all two of them) if the first arg is true (otherwise it only clears $). So, I would say this question is vague at best because it doesn’t state what argument you’re passing.

    • http://www.jeffrey-way.com Jeffrey Way

      Oh good point. I’ll get Sid to update that ASAP.

      • http://www.ssiddharth.com Siddharth
        Author

        Good find! Updated!

    • http://eyoosuf.com Yoosuf

      I got 80% any 100%?

      • http://www.oceanic.com.fj tanshul

        ya me too, i thought document.ready was for both page and dom

    • http://www.freshclickmedia.com/blog Shane

      Out from the shadows, JavaScript ninja James pounces on an issue. Go James! :D

    • http://www.freshclickmedia.com/blog Shane

      Out from the shadows, JavaScript ninja James pounces on an issue. Go James! :D

    • http://www.freshclickmedia.com/blog Shane

      Out from the shadows, JavaScript ninja James pounces on an issue. Go James! :D

    • http://poetro.hu/ Peter Galiba

      And jQuery.noConflict(true) only removes the jQuery that was added to the page the last time, and restores any previous instance. For example think of a page, that has jQuery 1.4.4 on it. Then another script loads jQuery 1.5.2, then runs jQuery.noConflict(true). This will restore $ and jQuery to 1.4.4 on the page.

      Basically this is what is happening:
      jQuery creates on initialization 2 variables:

      // Map over jQuery in case of overwrite
      _jQuery = window.jQuery,

      // Map over the $ in case of overwrite
      _$ = window.$,

      And here is what noConflict does::

      noConflict: function( deep ) {
      window.$ = _$;

      if ( deep ) {
      window.jQuery = _jQuery;
      }

      return jQuery;
      }

      So it restores the $ and if requested the jQuery variable to it’s previous state.

      This makes #10 obsolete, as it does NOT remove all jQuery and $ variables, but restore their previous value. If you think, that this is nonsense, just try to work with a bunch of widgets, that use their own versions of jQuery on a page that is already using jQuery. Thing would go bad without jQuery.noConflict(true).

  • http://www.keithbluhm.com Keith

    Missed two and I’m not even a JavaScript guy… let alone jQuery.

  • Hassan

    I think there’s a mistake o Question 10. $.noConflict does not remove all jQuery’s global variables. You would still have the global ‘jQuery’ variable.

    • Hassan

      Oops. Sorry. Late night. I just saw it was mentioned before.

  • http://www.pantso.gr Pantso

    You e awesome enough to just walk into Mordor, aren’t you? You scored 100% !!! Great quiz ! Thank you

  • http://joshriser.com Josh

    %60 is a pass right? :D

    Some of those I didn’t know for sure. I haven’t studied jQuery, I just use a few of the functions to add nice effects to my designs, most of which I can do with CSS3 now!

  • http://code-junkie.com Brannon

    I got 80%, which isn’t too bad. I think that on question number 2, answer B might be correct. As I understand it, jQuery’s main focus is DOM manipulation while things like animating and performing AJAX calls are close secondary focuses.

    • http://www.ssiddharth.com Siddharth
      Author

      It probably is true during the beginning phases of jQuery but right now, it pretty much abstracts all the lower level features in JavaScript.

      • http://creditorwatch.com.au Dale Hurley

        While jQuery does do the other things, it’s focus is on DOM manipulation. Sorry Sid I have seen your responses which are poor and come across as immature. You poorly worded question two. You asked for the main focus. If you wanted “All of the above” than main focus is the incorrect thing to ask for.

  • Nicklas

    73.33%, i’m gonna have to get better at this!

    • Nicklas

      Damn it, one wrong this time! Oh well, still better. :)

  • Eitan

    I would’ve gotten an 80% if Q2 was answer B as Brannon pointed out. ‘main focus’ is different than ‘can do’.
    Great Quiz, I’d like to see more! Thank you.

    • http://www.ssiddharth.com Siddharth
      Author

      I guess the AJAX and animation parts of jQuery are strong enough that it can easily pass the ‘can do’ barrier. I feel that they’re well developed enough that in a typical web application, jQuery is the one that’s doing all the heavy lifting with respect to animations and AJAX.

  • http://www.dridgett.com.au David

    I only got two wrong, how to test browser support and the css selector engine that jQuery uses. Neither of which I’ve ever needed to know :P

    86.67%, I’m cool with that :)

    • Khanh Tran

      @David me too, failed on question #8

  • http://www.ecustom.ca/ Damon

    Great job Siddharth! this one was decidedly trickier than the first! But I got 100! :)

  • Brad VanHorn

    Good enough to be a Nazgûl,

    86.67%

    I like these quizzes, they force you to know terms and what code actually does instead of just learning to write code which is something I fail at.

  • http://www.mediacm.com/ Alex

    Cool quiz. Though for some reason, there was a bug in the results (checked twice).
    I had 1 so called mistake (2b :-D), and 4 which was incorrectly shown.
    Questions 5,8,9,10

    Other than that, I like it! :-)

  • arnold

    Good enough to be Nazgul , 80%, :) not bad for a beginner
    got wrong in these questions …#8 ,#7, #6

  • Anthony

    I got 73.33% which could be better but since, like a few other people here I’ve not yet tried to ‘learn’ jQuery – only use it to add little bits ‘n pieces here and there I guess that’s not a bad start : )

    Looking forward to the next quiz!

  • IJas

    80 % :(

    • IJas Again

      but Second time I got 100% :D ,what an improvement !!!

      • http://eyoosuf.com Yoosuf

        Thats call learning :P

    • zufar

      :(..

  • http://frendz4ever.in Fahad

    “An orc would have performed just as good as you! You scored 53.33%” I am a beginner at jQuery and i am working hard on it.

  • Ganesh Kondalkar

    Hi,

    Its really nice to inspire the beginners towards jQuery. I scored 80% (though I feel I dont even know 0.01% of jQuery)…

    Thanks for such a nice test tutorial. :)

  • http://webdesignertutorials.com web designer tutorials

    Good enough to be a Nazgûl :) Nice quizz. I still should improve my knowledge related to DOM.

  • http://envato.com Ryan Allen

    I got 100%. I AM THE BEST! I’m not even a programmer, I’m a cat!!! http://goo.gl/h5GxO

    • http://www.ssiddharth.com Siddharth
      Author

      I don’t see how I can argue with that!

  • Harish Kurup

    ooh! i scored 60%

  • Carl

    My PRECIOUS!! You were outstanding! You scored 93.33%

    Got #10 wrong – I answered ‘used to clear $’. I’ve never needed to use multiple libraries so never really looked in to it.

    Great quiz.

    • Abhijit

      I got it wrong too! I checked the docs and it says jQuery.noConflict() will clear all globals if you pass “true” to it i.e. if you use jQuery.noConflict(true). This will clear the jQuery global variable as well. So I guess that will no more be “Basic jQuery”!

  • http://www.caiobianchi.com Caio

    Yay… Scored 100!!! \o/
    keep the quizzes coming!!! Love them.

  • http://www.ricardo-machado.com Ricardo Machado

    Hi Sid,

    First, congrats for this quiz. Pretty entertaining and people can learn a few things with it while get more into JQuery.

    However, and although I had only 80%, the truth is that I don’t agree with some “incorrect” signs.

    First, the JQuery’s main focus is and always had been DOM manipulation. Yeah, it’s true JQuery enhanced the ajax requests as well as redeveloped and improved the animations’ coding. But still it’s MAIN focus since it exists, is the DOM Manipulation.

    Second, the $(document).ready(function(){}) does not prevent code from being executed before the DOM is fully loaded… yet it forces the code inside it to only run after the DOM Manipulation is fully loaded.

    If I do:
    $(document).ready(funnction(){
    alert(“LOL”);
    });
    alert(“It Runs First AH AH”); // this will trigger first :)

    ;)

    Still, very cool ;) :)

    • http://www.ricardo-machado.com Ricardo Machado

      Ups typo:

      where is “funnction” is function :)

      • http://eyoosuf.com Yoosuf

        LAMO :P good catch…

  • techeese

    73.33% and half of the jquery question was random guessing (O___O

  • w1sh

    Siddharth, nice quiz app. I love that you incorporated a way to check incorrect answers. ;)

    Good luck selling a ton of those. It really does make a site more interactive (somewhere the web needs to start going).

  • http://jeremymichel.co.cc Jeremy Michel

    Well, that’s 100%, any more advanced quizzes coming? Thanks, this was fun.

  • bart

    80%. Good enough. :)

  • Ken

    Great Quiz. 100% Whee! Hate to say I guessed on a few.

  • Chris Sanders

    I pushed some of the right answers yet it still marked me as being wrong on them.

    • Chris Sanders

      I only got an 86.67 when I should’ve gotten something like a 93.33 because of question #5.

  • http://www.russelluresti.com RussellUresti

    93.333% — missed question 10. But now I know about $.support; I didn’t know this feature existed.

    • http://zyglobe.com Evan Smith

      This question got me too. I pretty much said, “I don’t know… I thought that’s why I used Modernizr.”

  • http://ad 33

    DOBRY QUIZ :D LUBIETO

  • Olle

    Good enough to be a Nazgûl, I guess. You scored 73.33%.

    I don’t write any jQuery, I just edit existing scripts, with the documentation on my other monitor. Good nuf.

  • Rei

    I scored 73.33%.. Not bad for a started.. Tee-hee~

  • http://zyglobe.com Evan Smith

    Question 2 is a bit subjective and misleading to me. While jQuery supports all of these features, a “main focus” suggests a singular concept, not everything about it. Considering there are libraries to extend jQuery’s animation capabilities, I would consider animation not a main focus (but nice basic feature) of jQuery. The ajax object is also an awesome and popular utility, but I don’t think it’s the projects main focus. As the name implies, jQuery (javascript query-ing) is selection and manipulation of the DOM. Just my opinion :)

    • http://timelodge.com Dale Hurley

      Yep I agree with Even, to be called the main focus it has to be the core aim of jQuery, which most people know it for DOM manipulation. In terms of AJAX and effects there is better JS frameworks with that as their main focus. For instance if you were to replace a Flash page with a JS framework Jquery is not going to be a great choice the animation is very limited.

  • http://mahdipedram.com mahdi pedram

    Please encrypt the JS code on the quiz, I easily did a view source and got the answers.
    BTW i got 100% :)

    THanks

    • http://www.jeffrey-way.com Jeffrey Way

      This isn’t supposed to be a locked down quiz. It’s for fun. :) Cheating defeats the purpose.

    • eeean

      Your score is 0% on the comprehension test. Study harder.

  • http://www.gncart.com GncArt

    I’ve been just using for 6 months, but my grade is 66,3%. If I work hard, I will learn jQuery compeletly I think :D

  • http://shuogeng.appspot.com Shuo Geng

    13 out of 15 – 86.67%.

  • Thera

    Only 93.3% as I stupidely missed question 10 :-(

  • Absenero

    yuhhooooo! I got 60%.. 9/15. well.. not bad, i’m not a web designer at all.. I’m just gifted.

  • Thomas Jane

    80% again

  • http://skatox.com/blog/ Skatox

    100% :)

  • Thomas Jane

    Scored 93.33%. I just missed Q. 11.

  • http://anasnakawa.wordpress.com Anas

    100%, perfect !

  • George

    Question 5 is a little misleading,

    run $(“p”) in the firebug console on this page and it returns an array of jQuery objects. Had the question run $(“#OnlyParagraphOnThePage”) then it would return a jQuery object.

    Someone else mentioned it but number 6 is similarly ambigous It doesnt prevent code from running but is actually an event (much like .click) with a callback that runs once the event has been triggered.

    jQuery recommends using $(function(){ … }); instead of document ready BTW just some food for thought.

  • http://www.andrecavallari.com.br André

    $(‘p’).click(function(){
    // Code here
    });
    Inside the commented section, the value of the variable this is a..

    the this is not a variable but a reference to the same object, so in this case the this is a reference to a jquery object…

    try yourself…

    $(‘p’).click(function(){
    this.css({background:’#000′});
    //All p object will have a black background when any p is clicked… so the “this” reference is a reference to same $(‘p’) jquery object.
    });

    • http://www.andrecavallari.com.br André

      Wow, sorry, i´ve made a confusing here, really sorry, but correcting the question, the “this” keyword is not a variable, but a reference to the same object.

  • kankaro

    You scored 73.33% ==> this is good since I started learning this framework… thanks a lot for the quiz Mr. Siddhart :D

  • http://download2s.com download2s

    Uhm thank.

    My result is 9/15 huhu

  • http://www.mojito.media.pl krzysko

    1/3 66.67% :D not bad ;]

  • emmanuel

    86.67 good start nice quiz

  • http://www.designkanya.com Design Kanya

    Loved it. :)

Newer Comments →