jQuery-based flow diagram I have created a proof of concept jQuery based flow diagram based upon kayen's answer to this post.

This diagram shows the flow diagram that I am seeking to create in jQuery:



I also wanted to make the UI as clean as possible, so I have set it that only the current question is displayed as the users works their way through the various questions.

The user can also go back to the last question at any time before they are given an answer.

The code will be used on a website.

As my code is long, I have set it out in full in my jsFiddle. The basic structure is:

HTML:

&lt;!—question 2--&gt;
&lt;fieldset id="question2" style="display:none;"&gt;
    &lt;legend&gt;question 2&lt;/legend&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;label for=""&gt;
                &lt;input type="radio" name="question2" value="Yes" id="rdYes" /&gt;Yes&lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;label for=""&gt;
                &lt;input type="radio" name="question2" value="No" id="rdNo" /&gt;No&lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;input type="button" value="Back to last question" id="back2-1" /&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/fieldset&gt;


jQuery:

//Test for question 2
jQuery("input[name=question2]").change(function () {

    if ($(this).val() == "Yes") {
        jQuery("#question2A").show();
        jQuery("#question2").hide();
    } else {
        jQuery("#question3").show();
        jQuery("#question2").hide();
    }
});

//Back button to question 1 from 2
jQuery("#back2-1").click(function () {
    jQuery("#q1").show();
    jQuery("input:radio").attr("checked", false);
    jQuery("#question2").hide();
});


It works, but as this is my first project it would really help me and others learning code, if someone could confirm:


Is there a more efficient way to code this in jQuery?
Would it be better to code it in another language, i.e. to avoid problems with older browsers?
You can simplify the javascript to be something as given below by adding some properties to the markup.

jQuery(function () {

    jQuery('input:radio[name^="question"]').change(function(){
        var $this = $(this);

        $this.closest('.question-container').hide();
        $('#' + $this.data('target')).show();
    });
});


Required changes in the markup


add a class question-container to the question container ie the element with the question id like q1, question1A, etc
For all radio boxes add an additional attribute data-target which will have the id of the question to be displayed if it was checked. ex Yes button in question question1A will have data-target="question1B" and No button will have data-target="question2-1A"


demo: Fiddle