Nothing is ever simple
Recently I had to create what we termed a “wizard.” Basically a set of questions that showed different results depending on the answers. I quickly realized that while the questions themselves were simple, setting them up was not. You have to do a bunch of things, check to see if anything is actually checked (because I used radio buttons), and if not throw an error. If there isn’t an error, which answer did they give, because the results changed depending on what the value was. A whole ton of stuff came up that I didn’t think about until I got into it. Oh, and I never realized that you could put form inputs outside of a form element. You can, and I did. As you will see below. While that doesn’t really pertain to anything, it was something I learned along the way. On to the questionnaire!
Below you can see the basic HTML for the first question, which by the way is the only one I’ll dive into. There were more, but they were more of the same. First I have the actual question, then two radio buttons to choose from for an answer.
Both inputs have the same name so they are related, but the actual text answer is different, with the value relating to it. If you choose electric guitars, the answer (or value) should reflect that. If the answer is acoustic, well…you get the idea. Right after that is the ‘Next’ button, which would in theory bring you to the next question in the process. Finally, you have the error message, which should be displayed none in the CSS. We don’t want to tell them they are wrong right off the bat, do we?