Build A Simple jQuery Questionnaire Tutorial

Build A Simple jQuery Questionnaire Tutorial

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!

The setup

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?

	<div class="legend">1. Which type of guitar to you prefer to play?</div>
	<div class="guitar-input">
		<label><input type="radio" name="quesiton1" value="electric" class="question-guitar question-guitar-1"></input>
		I prefer electric guitars</label>
	</div>
	<div class="guitar-input">
		<label><input type="radio" name="quesiton1" value="acoustic" class="question-guitar question-guitar-2"></input>
		I prefer acoustic guitars</label>
	</div>
	<div class="guitar-buttons">
		<a class="guitar-submit-btn guitar-btn-1">Next</a>
	</div>
	<div class="question-error">
		<p>You must choose an answer for question 1 before continuing.</p>
	</div>

The user clicked stuff….now what?

I should clarify something actually. In my questionaire, neither radio button is checked off the bat, which is what I am showing you here. You could change that and have one as the default, but after this you should be able to figure that out.

So the user click on one of the radio buttons. Great. Oustanding because they are using the little ‘wizard.’ But what if they change their mind before they click the ‘Next’ button? That is what the first piece in the javascript below tackles. When they mousedown on one of the radio buttons, the first thing the js does is to set them to unchecked, and then set the checked attribute to true on the radio button that was clicked. That is good because now we know that even if they made a mistake, it is still making the correct one checked.

Now the user goes and clicks the ‘Next’ button. Mainly because in the above questionaire there is nothing else to do! The button is clicked and we instantly set a variable ($guitar) to be equal to the checked radio button’s value. Which in this case is either ‘electric’ or ‘acoustic’.

Here comes the pain in the ass part, with the if/else statement. The ‘if’ basically says, “Hey if the first radio button is NOT checked, and the second radio button is NOT checked, show that error and call the user names.” The ‘!’ is saying the NOT, in case you were not aware. It reverses what you are saying.

If the user was smart and clicked one of them though, then it continues on and says “If one is checked, and the value is electric, hide the name calling, and do something spectacular.” Of course if the value is ‘acoustic’, well…hide the error and do something else. Which would most likely be to go to the next question.

	$('.question-guitar').on('mousedown', function() {
		$('.question-guitar').attr('checked', false);
		$(this).attr('checked', true);
	});
 
	$('.guitar-btn-1').on('click', function(e) {
 
		var $guitar = $('.question-guitar:checked').val();
 
		if(!($('.question-guitar-1').is(':checked')) && (!($('.question-guitar-2').is(':checked')))) {
			$('.question-error').show();
		} else if ($guitar == 'electric') {
			$('.question-error').hide();
			...do stuff
		} else if ($guitar == 'acoustic') {
			$('.question-error').hide();
			...do stuff
		}

Make it go to 11!

This is obviously a sample of what a full questionaire would be, but you should get what is going on. In the ‘wizard’ I created, there were more questions, and text inputs to boot. When a user clicks on one thing, the answer determines what would show in the results div. In my case it was different images, links, and what-not. This is just one of the building blocks. With it though you could go and create something extremely complicated. Add more questions, display a ton of crap…pretty much endless.

What was cool about building this is that I had no idea how, and learned a ton along the way. I got a really good idea about what goes on when something is validating a form. Well, at least in a very general sense, and it isn’t easy because you have to check for so many things. This one question basically makes you look to see if it was answered at all, and if it is, determine what that answer was, then do something about it.

If you have ever had to do something like this, let me know!

Tags: ,

One Response to “Build A Simple jQuery Questionnaire Tutorial”

  1. Emily Woods says:

    Looks good, however, it has to be a really amazing online survey tool to convince me to switch from SoGoSurvey!

Leave a Reply