Nested IF's with jQuery's help

Question

Hi everyone,

I'm brand new to JQuery - thought it might be good to pick it up for a project I'm taking part on. Basically I want to create a form of sorts, and each time a question on the form is answered, a new question appears depending on the answer. I've got a bit of pseudo code written for it and could probably write it in PHP. The problem is the current version has multiple pages containing every single possibility.

I need an efficient and easily maintainable and modifiable way of creating this.

To give a bit more background, here's how it works..

Each question has a yes/no answer. Depending on the answer, another question is asked, and so on before reaching a certain conclusion. There are about 25 different possible outcomes.

Does anyone know of any references I could use to do something like this, or if there is currently anything out there similar?

Thanks, Sean

Answer 1

If you don't have lots of different questions, you could just load them in an JS array and take it from there; no need to use AJAX.

If, on the other, you have lots of questions and that would load hundreds of KB to the browser, you might want to develop an AJAX version.

However, I believe I still don't understand the question... what is exactly what you're having problems with? jQuery? An algorithm? AJAX? How to create markup to achieve this?

Maybe posting your current code could lead us to help you better.

Answer 2

jquery forms plugin is probably a good way to begin thinking about how to approach this. I think you'll find it to be nearly trivial to implement.

Answer 3

one way to consider formatting your data is an XML tree, with each possible response listed as a child of the "parent" question:

<question text="Is blue your favorite color" >
  <question answered="yes" text="Is 98.6 degrees your normal internal temperature"/>
  <question answered="no" text="Is green your favorite color">
    <question answered="yes" text="Do you have green eyes" />
    <question answered="no" text="Is your favorite color white"/>
  </question>
<question>

Answer 4

try this.. not tested

<form>
<label id="id1">Do you like turkey?</label>
<input type="radio" name="group1" value="Y" onclick="ShowYes(1);">Yes
<input type="radio" name="group1" value="N" onclick="ShowNo(1);" >No
</ br>
<div id="Set2">
    <label id="id2">Do you like mirrors?</label>
    <input type="radio" name="group2" value="Y" onclick="ShowYes(2);">Yes
    <input type="radio" name="group2" value="N" onclick="ShowNo(2);" >No
</div>
<div id="Set3">
    <label id="id3">Do you like winter?</label>
    <input type="radio" name="group3" value="Y" onclick="ShowYes(3);">Yes
    <input type="radio" name="group3" value="N" onclick="ShowNo(3);" >No
</div>
<div id="Set4">
    <label id="id4">Do you like dogs?</label>
    <input type="radio" name="group4" value="Y" onclick="ShowYes(4);">Yes
    <input type="radio" name="group4" value="N" onclick="ShowNo(4);" >No
</div>
<div id="Set5">
    <label id="id4">Do you like winter?</label>
    <input type="radio" name="group5" value="Y" onclick="ShowYes(5);">Yes
    <input type="radio" name="group5" value="N" onclick="ShowNo(5);" >No
</div>

function ShowYes(questionSet){
switch(questionSet)
{
    case 1:
      $(Set2).show();
      break;
    case 2:
      $(Set3).show();
        break;
    default:
      alert();
}}

function ShowNo(questionSet){
switch(questionSet)
{
    case 1:
      $(Set4).show();
      break;
    case 2:
      $(Set5).show();
        break;
    default:
      alert();
}}

then at the top of your html add document.ready... I'm sure hiding all the divs can be done in a .each() also..

$(document).ready(function(){
 $('#Set2').hide();
 $('#Set3').hide();
 $('#Set4').hide();
 $('#Set5').hide();}