freeCodeCamp
freeCodeCamp copied to clipboard
freeCodeCamp
Cat Photo App 10-11
Describe the Issue
Flipping the order of Steps 10 and 11 might help make Step 12 less confusing.
Affected Page
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-10 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-11
Expected behavior
Students seem to find 10-11 too different than 12 for them to fully understand. I think putting the text first and then the link could help make step 10-11 feel more similar to Step 12.
Screenshots
No response
System
All
Additional context
No response
I agree this might be helpful, but adding just the text first might be confusing in itself since all other text up to this point has been added within an element at the same time (i.e. step 2, step 3, step 4).
Yeah, I'm not sure. We still have issues with step 12, so the users are not realizing that steps 10-11 are literally the exact same thing.
@jeremylt Ya, I'm a little surprised that this step is causing problems because it seems like it explains the concept pretty well. I think maybe we need to do a little research in the forum and try to get people to clarify exactly what they didn't understand about this step so we know what to change instead of just guessing.
Yeah. I'm not sure the best way to collect this data but some more information would help
The most common issue I see with step 12 is that people add an extra "cat photos" to then end of the sentence and then make that the link instead of turning the existing "cat photos" in the middle of the sentence into a link. I'm going to start asking them why they thought they had to do this and see if we can figure out how to change the wording on step 12, because this issue has not gone away and step 12 is by far the most common post in the forums.
Another common mistake is people adding spaces before/after "cat photos" inside the anchor element. If they do this then they get the following hint:
"The link's text should be cat photos. You have either omitted the text or have a typo."
At this point in the course, I don't think we've made it clear that spaces can matter so I don't think just telling them that the link text should only be cat photos is enough of a hint to get them to remove the extra spaces. We probably need to explicitly tell them in the hint that they need to remove these spaces. Might want a test that just detects those extra spaces. OR, we let the extra spaces go for now and adjust the test to not be so strict.
I'm going to add feedback I get for step 12 as it comes in.
I think for it would be easier for my brain to understand if it were phrased “Turn the words ‘cat photos’ inside the phrase ‘See more cat photos in our gallery’ into a link.” or something similar to that! I am not the best at understanding written instructions so I usually need it to be as detailed as possible.
Yeah, I think adding a separate test for whitespace would be good. So first check for the string with any whitespace then check for the string with the correct whitespace?
One remaining ToDo is to add a test for the target text, but with extra whitespace before or after the target text.
One remaining ToDo is to add a test for the target text, but with extra whitespace before or after the target text. completed by #52100
