click through yes/no questions from OPML one at a time

Question

Based on a flowchart noted as OPML nodes in my xhtml, I would like to dynamically (using jquery, without refreshing the page) get questions shown one by one, depending on the yes/no answer of the previous one, until a final message in the OPML is reached. For example;

Q: Do you have a pet?
A: yes

Q: Is it big?
A: yes

Q: Is it a dog?
A: yes

Final:Please note that dogs are not allowed at this event!

The mechanism is similar to the one proposed in this SO question. However it needs to be coded for each question and reply. I am looking for a way to code something at which you can trow any OPML at, and it will automagically creates that behavior.

[edit] As a readable fallback when javascript is switched off, and to avoid parsing external OPML, it might be better to use XOXO an outline microformat instead of OPML.

Answer 1

You could do something like this: http://jsfiddle.net/kayen/fGrT2/

HTML:

<div id="petTest">
    <fieldset>
        <legend>Do you have a pet?</legend>
        <ul>
            <li><label for=""><input type="radio" name="petstatus" value="Yes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="petstatus" value="No" /> No</label></li>
        </ul>
    </fieldset>

    <fieldset>
        <legend>Is it big?</legend>
        <ul>
            <li><label for=""><input type="radio" name="petsize" value="Yes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="petsize" value="No" /> No</label></li>
        </ul>
    </fieldset>

    <fieldset>
        <legend>Is it a dog?</legend>
        <ul>
            <li><label for=""><input type="radio" name="pettype" value="Yes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="pettype" value="No" /> No</label></li>
        </ul>
    </fieldset>
    <fieldset>
        <legend>Please note that dogs are not allowed at this event!</legend>
    </fieldset> 
</div>

JQuery:

$("#petTest fieldset")
    .hide()
    .eq(0).show()
    .end()
    .find("input[value='Yes']")
    .click(function() {
      $(this).parents("fieldset").next().show(300);
    })
    .end()
    .find("input[value='No']")
    .click(function() {
        $(this).parents("fieldset").nextAll().hide(300, function(){
            $(this).find("input").attr("checked", false);                
        });
    });