Fun quiz Survey Form - feedback requested

Code Feedback
1

Hi FCC community,

First of all, I really appreciate how active this forum is! I got great feedback and help with my first project, and I felt a bit more confident going into my second.

For my Survey Form project, I decided on a fun throwback theme to the online quizzes of early Internet days. Feel free to take it, haha.

As you will see, however, it’s unfortunately not a fully functional quiz with results (yet) as I believe making it so requires Javascript, something I haven’t learned (yet). If I’m mistaken about this and I can in fact link questions with unique results just with html, do chime in!

My main question re: the code at this point: Is there a way to adjust the background of my textarea label? You can see that the blue color doesn’t extend as far as the rest of the labels, even though it’s part of the same class. I’m guessing there’s something unique about textarea labels, and I made an additional ID to adjust it, but I haven’t figured out what property to use.

I welcome any and all feedback, particularly regarding the code. Is there anything I left out re: accessibility or responsiveness?

Thanks!

2

The reason the blue background doesn’t go all the way to the edge of the purple background is because you have side padding on <main>, which is keeping the <p>s from extending all the way to the edge of <main>. So you’ll either need to get rid of the side padding or you could use negative side margins on the labels to extend them all the way to the edge.

Concerning those labels, I would recommend you use a fieldset/legend with these checkbox and radio button groupings. It is much more semantically correct and much more accessible.

3

Thanks for your response! I appreciate the recommendation to use fieldset/legend groupings, and I’ve modified my code to include that.

Unfortunately, the padding issue does not seem to affect the way the textarea label extends. I had also tried negative side margins, to no effect. Right now, the fieldset/legend attributes have changed all the blue labels to be the same, so it’s fine stylistically, but I would still like to know how I could modify the code to extend all labels (textarea label included) to the edges if I wanted to.

4

The label element is an inline element. You can set display: block on it to have the box extend the full width.

1 Like
5

thank you, that worked! curious if you know if there is a way to extend the full width of legend labels as well?

6

The legend element isn’t really supposed to fully overlap the top border of the fieldset element. But you can set a width on it anyway.

However, making it sit flush is a little awkward. It is getting late so maybe I’m just spacing out on a simpler solution.

fieldset {
  margin: 10px;
  padding: 0;
}

legend {
  font-weight: 600;
  color: black;
  background-color: #00d6ff;
  padding: 5px 0;
  /* 4px is the fieldset border */
  width: calc(100% + 4px);
  /* pull the element back in place */
  transform: translateX(-2px);
}

Edit: You probably do not want to target the legend element using the .question selector as you are using that for other elements. So just target it using the legend type selector.

1 Like
7

Oh wow, ok thanks for suggesting a solution! I think given the constraints of the legend, it probably makes more sense to keep it as it is. But you’ve shared some new properties that I will look into :slight_smile:

Is there a reason that the legend element should not be targeted with a class selector? I will look it up too. Thanks again!

8

You can use a class just fine on the legend element, just don’t use the same class as you are using for the labels.

You are using the .question class for the labels and you do not really want to apply the same styles to them. It might not be very noticeable but the styles needed for the legend aren’t needed for the labels so there is no reason to apply the styles to them.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.