Survey Form Project - Superheroes Supervillains Wanted

Code Feedback
1

This is my Survey Form project Gotham City Job Vacancies

Does anyone have “css only” tips or a link to a tutorial on how to change the content of a label when a radio button is checked?

I have it working on a checkbox see the last multiple choice question. But the same css does not work for a radio button.

All the tests are working but I haven’t hit submit yet. I tried to do this with flex columns and rows but it took me ages to get it working. It looks ‘ok’ on a large screen and Samsung Galaxy mobile not sure about other phones or tablets. Any feedback on possible layout or readability issues would be appreciated.

I found a good explanation of flexbox on Css-Tricks.com. Lots of pictures to help visualise each effect.

For the tooltip I used the css tooltip tutorial from w3schools.com .

2

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like
3

Thank you @Roma very useful links :slight_smile:

body tag, Select and comment label sorted

I think I will use a list for the tooltip, to get rid of <br> tag.

The I will enclose the <br> tag in the Comment se ction with <p>

1 Like
4

Hint: 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
5

Hi @Roma

Thanks for the tip . I used the span element and used the tooltip hover to trigger a class called block.

This has just helped me to understand why the unordered list was breaking the hidden tooltip text. It is a block element. The start point of the tooltip text is inline text.

To temporarily hide the list I could have changed its display to inline then use the hover action to reset it to display block.

Unfortunatly I wasted an hour or two last night before I saw your tip.