Decision Tree

by wrxsti85

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container"></div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
     margin: 10px;
 }

button {
    margin: 10px;
}

.dtree-container {
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.dtree.slide {
    position: absolute;
    width: 400px;
    left: 100%;
}

JavaScript

var dtree = [{
    issue: 'What is the problem you are having?',
    options: [{
        optionText: 'The computer will not turn on.',
        linkTo: {
            issue: 'Is the computer plugged in?',
            options: [{
                optionText: 'Yes.',
                linkTo: {
                    issue: 'Do you see any lights on the tower when attempting to power on the machine?',
                    options: [{
                        optionText: 'Yes',
                        linkTo: {
                            issue: 'Call someone else...This is just a test.'
                        }
                    }, {
                        optionText: 'No',
                        linkTo: {
                            issue: 'Too bad...'
                        }
                    }]
                }
            }, {
                optionText: 'No.',
                linkTo: {
                    issue: 'Plug the computer in and press the power button.'
                }
            }]
        }
    }, {
        optionText: 'The computer will not turn off.',
        linkTo: {
            issue: "I don't care..."
        }
    }]
}];

var dCount = 0;
var oCount = 0;
var objLoop = function(obj){
    $.each(obj, function(k, v){
        var slideMarkup = '<div class="dtree slide" data-slide="' + dCount + '' + oCount + '">';
        if(v.issue){
            dCount++;
            console.log(v.issue);
            slideMarkup += '<h3>' + v.issue + '</h3>';
            if(v.options){
                $.each(v.options, function(i, o){
                    if(o.linkTo){
                        oCount = i;
                        slideMarkup += '<button class="btn btn-primary" data-slide="' + dCount + '' + i + '">' + o.optionText + '</button>';
                        objLoop(o); 
                    }
                });
            }
            slideMarkup += '</div>';
            $('.dtree-container').append(slideMarkup);
        }
    });
};

$.fn.dTree =...