Freecodecamp: Instructions not too clear

Created on 4 May 2016 · 14Comments · Source: freeCodeCamp/freeCodeCamp

Challenge Target the same element with multiple jQuery Selectors has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:


<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Please clear up instructions and explain better for student sto understand as it took some time figuring this challenge out.

first timers only help wanted

Source

benjaminjacobharley

👍3

Most helpful comment

@benjaminjacobharley I can see how there can be confusion from reading the instructions and looking at the test requirements. Here's my proposed changes (the bold text represents what I've changed/added). Let me know what could be change to make it the most clear on what to do.

Instructions

...

Although it is possible to add multiple classes in a single .addClass() call, let's add them to the same element in _three different ways_.

Using each of the above jQuery selectors and the addClass() function in three separate lines of code:

Add the animated class to all elements with type button.

Add the shake class to all the buttons with class .btn.

Add the btn-primary class to the button with id #target1.

Note: You should only be targeting one element and adding only one class at a time. All together, your three individual selectors will end up adding the three classes shake, animated, and btn-primary to #target1.

erictleung on 4 May 2016

👍2

All 14 comments

@benjaminjacobharley thanks for the feedback. How do you suggest we change the instructions to make it more clear? Or what parts of the instructions were confusing?

erictleung on 4 May 2016

👍1

The instructions below the run test section is not to clear in my opinion on what it expect the student to do or know. A potential fix for this could be to perhaps have a more thorough explanation for students especially considering it is a beginning experience for users. https://github.com/FreeCodeCamp/FreeCodeCamp/issues/3583
The article linked above also shows other user's at the same level and more experienced suggesting perhaps better wordplay with either the instructions or the lesson(or both). Thanks for listening always is appreciated to get a helping hand and trying to make learning more engaging.

benjaminjacobharley on 4 May 2016

Instructions

...

Although it is possible to add multiple classes in a single .addClass() call, let's add them to the same element in _three different ways_.

Using each of the above jQuery selectors and the addClass() function in three separate lines of code:

Add the animated class to all elements with type button.

Add the shake class to all the buttons with class .btn.

Add the btn-primary class to the button with id #target1.

Note: You should only be targeting one element and adding only one class at a time. All together, your three individual selectors will end up adding the three classes shake, animated, and btn-primary to #target1.

erictleung on 4 May 2016

👍2

Eric as a camper I understood fully what was being said a change commit is
necessary for that challenge nice job
On May 4, 2016 3:27 PM, "Eric Leung" [email protected] wrote:

@benjaminjacobharley https://github.com/benjaminjacobharley I can see
how there can be confusion from reading the instructions and looking at the
test requirements. Here's my proposed changes (the bold text represents
what I've changed/added). Let me know what could be change to make it the
most clear on what to do.

_Instructions_

...

Although it is possible to add multiple classes in a single .addClass()
call, let's add them to the same element in _three different ways_.

Using each of the above jQuery selectors and the addClass() function in _three
separate lines of code_:

Add the animated class to all elements with type button.

Add the shake class to all the buttons with class .btn.

Add the btn-primary class to the button with id #target1.

_Note: You should only be targeting one element and adding only one class
at a time. All together, your three individual selectors will end up adding
the three classes shake, animated, and btn-primary to #target1._

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/8438#issuecomment-216992238

bigkatspence on 5 May 2016

👍1

Eric,

Since you've clearly laid out the changes to instructions above, would it be alright if I forked it and attempted to make those changes and submit a pull request? It would be my 2nd PR so I'm still new but can no longer do "first-timers-only" :)

buckeyekt on 16 May 2016

👍1

@buckeyekt go for it! If you haven't already done so, please read the contributing guidelines before taking care of the issue. Also, don't hesitate to visit the Contributors Help if you have any questions about helping.

erictleung on 16 May 2016

For those interested in fixing this, what is displayed should look similar to what I typed up above.

The code itself should be something like this:

"Now you know three ways of targeting elements: by type: <code>$(\"button\")</code>, by class: <code>$(\".btn\")</code>, and by id <code>$(\"#target1\")</code>.",
"Although it is possible to add multiple classes in a single <code>.addClass()</code> call, let's add them to the same element in <em>three separate ways</em>.",
"Using each of the above jQuery selectors and the <code>.addClass()</code> function in three separate lines of code:",
"Add the <code>animated</code> class to all elements with type <code>button</code>.",
"Add the <code>shake</code> class to all the buttons with class <code>.btn</code>.",
"Add the <code>btn-primary</code> class to the button with id <code>#target1</code>.",
"<strong>Note</strong><br>You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes <code>shake</code>, <code>animated</code>, and <code>btn-primary</code> to <code>#target1</code>."

Please first read the contributing guidelines before taking care of this issue. And feel free to visit the Contributors Help if you have any questions about helping. We're there to help.

erictleung on 30 May 2016

Another one for @yourfirstpr ?

robjloranger on 14 Jun 2016

@robjloranger, yeh :smile:

ghost on 14 Jun 2016

My idea:
Change this line "Your #target1 element should have the classes animated‚ shake and btn-primary." into "Your #target1 element should have the three class effects of animated‚ shake and btn-primary." and change three words color from red to black with in this line.