Building a quiz step-30: Missing ids on input elements

[lasjorg]

Describe the Issue

It doesn't seem intended as the following step has specific for/id attributes.

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-30 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-31

https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-30

Your code

Expected behavior

The starting codes input elements should have the ids used in the following step.

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

https://forum.freecodecamp.org/t/learn-accessibility-by-building-a-quiz-step-30/532944

[majestic-owl448]

the tests do not require a specific id, it is I think left to the user to remember how to link a label and an input together

like most of the project it's all "choose what you want there"

[lasjorg]

In my opinion, that doesn't really make much sense seeing as the seed code in the next step has the id and for attributes set to specific values. It also makes the instructions and seed code look incomplete. I would suggest adding the ids to the elements in the seed code or giving them as part of the challenge text.

The point of the challenge is to connect the labels to the inputs using the for attribute. Giving the ids beforehand doesn't change that. I'm sure by now the camper knows how to add an id attribute.

like most of the project it's all "choose what you want there"

I haven't looked at the challenge so that might be true. But that sounds very handwavy to me.

[majestic-owl448]

Like this one says "place a question..." https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-28

And in the next one the seed code has a specific question in it

[lasjorg]

But to me, you are pointing out more issues and not reasons why it should be like that. Just because other steps are poorly constructed doesn't mean they have to be. It seems to be one of the cases also pointed out by campers on the forum where the instructions are lacking and not in line with how challenge steps should be constructed.

It just feels like a lack of QA to me.

[majestic-owl448]

It was more a "if that needs to be fixed, then this also needs to be fixed". We should follow the same approach for all the project

[lasjorg]

So do you agree that the instructions seem a bit rushed and not fully fleshed out? If so they should be corrected, should they not?

[majestic-owl448]

No, I don't have an opinion either way.

It's just that if that is too vague, there are many other places in the project that are too vague. I was bringing more details.

[moT01]

I remember QAing this - I didn't have an issue with how it was, it may have even been my suggestion. I think the design was intentional, and not a lack of being fleshed out. It challenges campers a little more where many other steps are very hand holding. They just linked some labels to inputs a few steps before this, so they should know how. This should further cement how to do that by being a little vague and making them think about it in a different way - they need to think about how to link the elements, rather than just what for's and id's they need to add somewhere.

I kind of wish there was more of this throughout the projects. I do see the issue though, how steps like this are not common - where users aren't explicitly told what content or id's to use. I am fine leaving it - but if we really think there's a problem here, we can add what the id's should be. e.g. "Use for and id attributes that match the question and answer order in this format: q1-a1" or something like that.

[moT01]

I came across this challenge - also doesn't say what to use for the values, just says to add something. Unless we're seeing a bunch of forum posts around this, I think I would lean towards just closing this.

[ShaunSHamilton]

I specifically wrote this project adding boilerplate that did nothing to teach Campers - having Campers add a bunch of stuff they already know prevents them from learning anything in that lesson.

I am fine with this being changed. It was the first time this was done, and was more of a pedagogical test than anything else.

[lasjorg]

I came across this challenge - also doesn't say what to use for the values, just says to add something. Unless we're seeing a bunch of forum posts around this, I think I would lean towards just closing this.

That was purely done out of necessity and after discussing how best to handle the alt text requirement. At one point we did actually consider fixed values (although I think that would just have been extremely tedious for the camper).

Asking for any value and then in the next challenge having predefined values just strikes me as very odd. Personally, I think the step comes off as low effort.

[moT01]

Here's another - If we want to fix all these, I would be fine with it. I actually prefer them the way they are, but they won't be much different if we want to explicitly define the values or whatever else for campers to enter - so I don't think it's that big of a deal.

[lasjorg]

Here's another - If we want to fix all these, I would be fine with it. I actually prefer them the way they are, but they won't be much different if we want to explicitly define the values or whatever else for campers to enter - so I don't think it's that big of a deal.

That is the last step of the challenge and the values seem pretty much irrelevant to me.

---

My main gripe with this step is the fact that whatever values they choose won't be used in the next step and will change (which is unexpected). If they carried over I wouldn't mind it.

If there was an extra step where one of the values was specified (id or for) and then in the next step they had to connect the input/label it would still test their understanding of how inputs and labels are connected and the values wouldn't unexpectedly get changed between steps.

Step 30: Give the input elements some id value.

Step 31: Connect the labels to the input elements.

Anyway, this issue was as much a question as an observation. The question has been answered, it is the intended behavior.

[moT01]

Step 30: Give the input elements some id value. Step 31: Connect the labels to the input elements.

I like that, and would be fine it 👍 What do you think - open it up for help?

[lasjorg]

Sure. I assume it will require adding a new step?

The docs for how to add new steps. https://contribute.freecodecamp.org/#/how-to-work-on-practice-projects?id=insert-step-1

Edit: Not sure how best to specify the id values. Just list them all or explain the naming convention?

q1-a1
q1-a2
q2-a1
q2-a2

[moT01]

Sure. I assume it will require adding a new step?

I am on board with your suggestion. We could see what @ShaunSHamilton thinks.

For step 30, we could say something like:

Add an id to all of your radio input's so you can link your labels to them. Give the first one an id of q1-a1. Give the rest of them id's of q1-a2, q2-a1, and q2-a2, respectively.

Step 31:

Add a for attribute to your four radio button labels that links the labels to the inputs.

[ShaunSHamilton]

The more I go through this curriculum, the more I dislike the constant mention/requirement for the addition of specific values/attributes.

The point of the mentioned lessons is to make Campers aware of accessibility practices.

They already know about id and for attributes. So, my preferred "fix" would be to change the test (hint) order such that the first hint suggests giving the input elements ids.

just my opinion

[nayabatir1]

I would like to work on this. Can anyone tell me what exactly needs to be done here ?

[lasjorg]

An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors.

If you would like to contribute and have not read the contributors docs, please do so here: https://contribute.freecodecamp.org/#/

If you have any issues with contributing, be sure to join us on the contributors channel, or on the contributors sub-forum

[nayabatir1]

An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors.

If you would like to contribute and have not read the contributors docs, please do so here: https://contribute.freecodecamp.org/#/

If you have any issues with contributing, be sure to join us on the contributors channel, or on the contributors sub-forum

What I meant was what cases should the tests cover ?

[Jasmine-maryj]

is anyone working on step 30?

[Jasmine-maryj]

Describe the Issue

It doesn't seem intended as the following step has specific for/id attributes.

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-30 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-31

https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-30

Your code

<ul class="answers-list">

            <li>
              <label for="first-ans"><input type="radio" id="first-ans"><br>
            </li>
            <li>
              <label for="second-ans"><input type="radio" id="second-ans"><br>
            </li>
          </ul>
        </fieldset>
      </div>
      <div class="question-block">
        <p>2</p>
        <fieldset class="question" name="html-question-two">
          <legend>
            A label element nesting an input element is required to have a
            for attribute with the same value as the input's id
          </legend>
          <ul class="answers-list">
            <li>
              <label for="first-ans"><input type="radio" id="first-ans"><br>
            
            </li>
            <li>
              <label for="second-ans"><input type="radio" id="second-ans"><br>
            </li>
          </ul>

### System
* Device: [e.g. iPhone 6, Laptop]
* OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
* Browser: [e.g. Chrome, Safari]
* Version: [e.g. 22]

### Additional context
         #########https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-30

[majestic-owl448]

If it has to require a specific id, it has to be the one used in the next step