JavaScript Decision Tree tool

Posted on February 18, 2011 by Dan

My goal has been to make a JavaScript Decision Tree tool as a new content module for our next site redesign.

It needs to work such that the same piece of JavaScript can be utilised without modification for any decision tree tool we build on the site, with a very simply-defined markup structure,

So I’ve been self-administering repeated doses of headdesk/facepalm over the last couple of days, but I came back today after a Friday lunch (you know what I mean) and found a solution. It’s not pretty, with at least two nested ‘for’ loops, but it works.

I’ve created a JSFiddle of it, so you can take a look at it, modify it, laugh at it, etc.
Open it in JSFiddle or see it embedded below:

This entry was posted in Coding, JavaScript. Bookmark the permalink.

4 Responses to JavaScript Decision Tree tool

  1. JP says:
    February 18, 2011 at 10:30 am

    js fiddle . . . sounds dodgy . . .

  2. Adam Bright says:
    October 30, 2013 at 9:31 pm

    Awesome job.

    I did add something for my purposes, because the nodes were getting long, FYI.

    
            fieldsets.addClass('hide');
            $('fieldset.option0').removeClass('hide');
            for (i = 0; i < options.length; i += 1) {
                options_buffer += options[i];
                $('fieldset.option' + options_buffer).removeClass('hide');				
				document.getElementById('question' + options_buffer.replace(/(.)/g, '_$1')).scrollIntoView(); //***NEW Scroll to the latest option.***
            }

  3. Dan says:
    October 30, 2013 at 10:47 pm

    Nice touch! Cheers!

  4. Johanus says:
    February 28, 2014 at 9:27 am

    I found a small bug/limitation, whatever you would like to call it. If you add 10+ radio buttons in my example 11, 12 were showing up twice because the same class names were being used/generated for options 1, 2 for another step were they both automatically worked out to ‘option211’ and ‘option212’. But otherwise a pretty nice script.

Leave a Reply

Your email address will not be published. Required fields are marked *