JS/jQuery - Displaying results based upon user input

Question

Hey all,

I've been thinking about this project I've taken on, now what I am after is a form that will have a list of questions, simple yes/no questions that when answered and submitted it will dynamically return the relevant data on that same page. So initially all answers will be loaded onto the page then hidden, and the way I plan on selecting and returning the data will be by giving each element a class for each question and whether it's yes or no. Something like class="q1_0 q2_1 q3_1 q4_0" with 0 being no and 1 being yes. Would you consider this a good way to go about tackling this problem or would the be an easier option? To summarize, I am looking to see whether anyone has dealt with a jQuery plugin that could assist with this? Any help as always is greatly appreciated.

Thanks,

-Josh

Answer 1

Ok let's assume you are using checkboxes to let the user answer yes/no to your questions. Further assume that the order of your questions reflects the order your answers are layed out in your page. Then you would need something like this:

<ul>
    <li class="relevant_data">Hi, I'm quite relevant to question 1</li>
    <li class="relevant_data">Hi, I'm quite relevant to question 2</li>

....

<input type="checkbox" class="question"/> Are you hungry?
<input type="checkbox" class="question"/> Are you thirsty?  

No for the jQuery part:

$questions = $('input.question');
$questions.bind('click', function() {
    var pos = $questions.index(this),
        item = $('ul li.relevant_data:eq('+pos+')');

    this.checked ?
        item.hide() : item.show();
});

Hope it'll be of any help.

Answer 2

What you're describing will work, although I certainly don't know of any plug-ins that would help with it. However, if you do take that approach, you should be absolutely certain that there will never be any more complicated logic than "q1 yes, q2 no" kinda stuff. For instance, if you ever need "q1 yes, q2 yes or q4 no" as a question's display condition, then your scheme will be unable to handle it, and you'll wind up either hacking something messy or re-writing your whole system.

If you do think you might need more complicated logic later, I would recommend implementing things in pure JS instead. For instance:

function isYes(i) {
  return $("#question" + i).is(":checked");
}
var question1 = ["Is red your favorite color?", function() {
  return isYes(1);
}];
var question2 = ["Are dogs your favorite pet?", function() {
  return isYes(1) && (isNo(4) || isYes(7);
}];

Something like that (plus logic to render the questions and an onChange handler for them that triggers the check of whether the quesiton should be displayed or not).

Of course, you'd probably want to just create a "question" class instead of using arrays, and you'll probably want an array object instead of separate variables for each question, but this was just a quick example. Anyhow, an approach like that will give you much more power and flexibility in the future ... but it will also be more work initially than your class-based idea.