HyDraCode's Survey Page

Hello everyone, I just finished my Survey page project. It took me 2 days to complete it. Hope you guys spend some time and give feedbacks about my page. Thank you.

Here’s my page’s link: https://codepen.io/TechnologyFuture/pen/QWvWeNL

Also, I want to ask you guys about a problem
My page has some questions that use type=“radio” and type=“checkbox”, and in those questions, the options usually stay on one line. Because of that I need to use
. It’s quite disturbing especially when I forget it. So I hope you guys give me some of the solutions so I can fix that problem. Thank you :smiley:

Hi! i just checked out your website and here are a few suggestions.

  1. I noticed that when i changed the screen size, there was still side scrolling even though you have media queries in your code so maybe you should look a bit into that.

  1. the next thing is to either change the color of your background from orange to something else or increase it’s opacity so that the foreground color is easier to read because it is a huge accessibility issue. you can visit the link below to know more about it.

https://webaim.org/resources/contrastchecker/

  1. you don’t need to include the body tag in your html, codepen already does that for you.

  2. I think you accidentally used the same name value for the “Do you like it” and " How long have you know Sherlock Holmes?" question which is why i can only select only 1 out of 7 radio buttons when instead it should be 1 out of 3 for the first radio group and 1 out of 4 for the second.

if by this you mean you want the options to align side by side then you can use flexbox to achieve that.

p.s. i really love how you designed the button.

Hope this helped! :slight_smile:

Your form looks good @phamminhphu161009. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    • last two checkboxes do not work
    • first group of radio buttons is tied to the second group of radio buttons. Notice that the user can only select one but not both sections. (This is a bad UX)
  • Change the cursor to a pointer when hovering over the submit button
  • Looks like HTML code was copied from the example project and text around it was changed.
    • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens. Elements fall out of the container
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Reference MDN Docs
    • Instead of using <br> elements to have each inline element on a new line use, or set, container elements to be block-level elements so they’ll each take up the full width.
1 Like

Thank you for your feedback. At first, I didn’t know about the sizing problem, so I really glad that you spotted it. Also thanks a lot for answering my bonus question. Your feedback helped me a lot. Once again, thank you

Hello @Roma. Thank you for giving me a long feedback-which helps me a lot because as a beginner I have to learn a lot of things and your comment helps me a lot. Also, about the checkboxes, they all work but the 2 last one can’t be used if you clicked on the text.

Yes, that’s what I was pointing out. That’s a bad UX. You can, and should, fix it. Revisit the checkbox lesson.

The other issues I mentioned should also be corrected. Ask questions if there’s something you don’t understand.

Thank you for your feedback. But I have 1 question though.

How can I fix this problem? (I can’t say it in a name so I have to describe it)

As you know, my radio boxes have troubles. At first, my first radio question doesn’t have the any answers checked while the second radio question has. After that, I clicked one of the radio boxes in the 1st radio question and the checked box in radio question suddenly isn’t checked anymore.

Does it happens because I forgot to close some of the tags?

The solution to this problem is that you have set all of the name attribute’s value to user-recommend. Change the value to something else for the first three radio buttons and a different value for the next 4 and it should work just fine. Try doing it yourself first and if you still dont understand it let me know.

also i saw that you still havent fixed the resizing issue.

Although someone gave you the answer I’ll refer you to this lesson which explains how to create a radio button group.
That will help you to correct the issue on your own.

If there’s something in the lesson you don’t understand feel free to ask.

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