Input & label confusion

My code kept ‘failing’ the site’s test until I changed the actual label text to a single word in lower-case. That seems like a poorly designed test process (my opinion, anyway). Displayed text is not the challenge; attributes are. My output worked and displayed correctly with many edits changing the locations of and . Only the “testing” reported erorz. :laughing:

  **Your [original] code so far**

<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>

  <label for="indoor">
    <input type="radio" id="indoor" name="indoor-outdoor">**In Door**</label>
  <label for="indoor">
    <input type="radio" id="indoor" name="indoor-outdoor">**Out Door**</label>

  <button type="submit">Submit</button>
</form>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Challenge: Create a Set of Radio Buttons

Link to the challenge:

One of the labels should be “indoor”, the other one being “outdoor”. But, from what I can see from your code, both of your labels only have “indoor”.

Fix your labels first then change the name of your radio buttons: **In Door** to indoor. Same thing with **Out Door**. Good luck!

The challenge is very much also about the label. Just look at how much of the challenge text is devoted to it. The test is just checking the values to see if they are correct.

1 Like

Xynoan’s Correct.

ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤ

Interesting thought process…

Can you Explain more clearly, what it is that you are talking about…


Your explanation is lacking in conciseness…


ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ ㅤㅤㅤㅤㅤ ㅤ ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤ

Yes, that was the remains of one of my many attempts to track down what the problem was. Using “indoor” makes no difference in this code since it is not valid html, anyway. But it does “upset” the site’s testing since the parser is not very informative. Most “misteaks” give the same output. I did manage to get a “Pass!” from the parser but not before sending my message. It’s part of learning to code most languages; make one change at a time and sometimes it helps to note what those changes are and the results… every time! :stuck_out_tongue_winking_eye:

Thanks for your quick reply! It’s a bit unusual for some free coding sites!

Actually, the text in the label button can be almost anything that would be appropriate and helpful to the user. Of course, the parser may not accept (pass) text that does not match the lesson instructions.

BTW, the ‘**’ is Markup code for bold.

I’m disagreed, in real life scenario maybe, but in the test you need to do what the test is asking to do. And here is very clear:

Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of indoor and the other should have the option of outdoor. Both should share the name attribute of indoor-outdoor to create a radio group.

There will be a lot of tests or projects where you maybe want to change something because it seems more logic to do it, but you can’t because you need to fullfill the user stories exactly how their are written. Lets say tomorrow you have a work to do for someone and this person ask you to add a button with the text “CLICK ME” (which is very bad for accesibility), you can tell this person why he or she should change that text, but at the end if he/she dont want to change it you will delivery your work as was requested.

1 Like

Also, indoor and outdoor are words that have meaning. In door and out door don’t mean the same thing and in the context of the challenge are wrong.

This was one of my thought process as well.

Oh…But we are not just “Some free coding site”…

We are a group of people who Believe Strongly, and Care Deeply about helping others move forward to a more successful Educated Place in their lives.

I welcome you to join our community, but I want to say something to you first:

I want you to understand, that when you make small criticisms, like referring to something as “Poorly Designed”, That everything here, is run by volunteers… Who Essentially have given “Blood, Sweat and Tears” to make all elements of freeCodeCamp succeed.

There are literally people all over the world, engineers, computer scientists, people who help with Translation and individuals who produce tutorials for freeCodeCamp on video for YouTube, who believe in the effort to Make an education in Code available to ALL PEOPLE… Not just people who can afford it, in first world countries.

https://www.freecodecamp.org/news/2020-top-contributors/

I would prefer it, If you choose to stay here, that all Negativisms be translated, into constructive feedback that can help our community…


And I would like to personally thank @lasjorg @JeremyLT @ArielLeslie @snowmonkey @ilenia @jwilkins.oboe @kevinSmith @nhcarrigan and all the other people who work and Volunteer here, for their exceptionally hard work and dedication.


4 Likes

Also, I am not a Volunteer. I am just invested in the world view and the goals that freeCodeCamp Professes.

1 Like

My BAD!! :face_with_hand_over_mouth: Thanks for explaining the concept behind the site and how it is maintained. My only excuse is from not so good experience at other coding sites where “support” was less than helpful. Even some sites that charge didn’t have the feedback I’ve seen here. :-1:

I have learned that the trick to the parser is to follow the instructions to the letter. Sometimes one can try different things and see the results in the right-hand display column but always revert back to the instructions before asking for the parser. The parser is like any other software; it does exactly what it is designed to do. It is not designed to “read my mind”! At least not as well as my wife can!!! :rofl:

1 Like

It’s totally ok to have frustrations or suggestions for improvement! Frustration is a natural part of the learning process (if it isn’t, I’m sure in trouble!), so you shouldn’t feel bad for being frustrated!!

Computers are tragically, utterly literal machines. Sometimes, our tests are a bit strict, but a lot of that comes from computers being only able to understand exact, literal instructions. If we tell the computer to check for the label named “Indoor”, it isn’t smart enough to check for all of the different variations that might be in use. It only checks for the one version that we ask for, with exact capitalization.

You’ll see this as a general theme as you learn more. Javascript syntax is even less forgiving and needs to be even more precise. Remember, computers are just really dumb pieces of rock that we tricked into doing really fast calculations by using lots of electricity! Computers need really specific instructions - they get confused easily :confounded:


I thoroughly empathize with your position…

Also, If you ever need someone to help you out, or discuss something with… There are Always people here, day and night who will do that…

…Partly, because, some of us don’t actually believe that sleep is necessity to life : )


As tests go, it is pretty clear. And yes, its a pain when it is expected that we match spacing or punctuation or casing.

But there is a method to this. Often, we as developers are handed a “specification sheet” by a team lead, a manager, or someone outside of our development sphere. We don’t know why we got this particular spec, we just know what our markers to pass are.

It may be that we have to match some HTML to some given Javascript hook - we don’t know. Maybe we need to pass a very particular value from a form to a backend API - we don’t know. Maybe we are being given a particular string for any of eighty reasons, none of which we know, and none of which matter. They are outside of our responsibility.

What is our responsibility? To pass the test, by matching its expectations precisely. As @JeremyLT wisely pointed out, parsers are very literal. "a big cat" is not the same as "A big cat", even though we can see they are semantically identical. They are not literally identical.

2 Likes