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 {
    width: 100px;
    margin-right: 10px;
}

JavaScript

var dtree = {
    'Turn left or right:': {
        'Left': "You went left",
        'Right': "You went right"
    },
    'Go up or down:': {
        'Up': "You went left",
        'Down': "You went right"
    }
};

var qCount = 0;
$.each(dtree, function(q, a){
    var aCount = 0;
    qCount++;
    var output = '<div id="q' + qCount + '" class="form-group"><label class="control-label">' + q + '</label><div class="input-group">';
    $.each(a, function(k, v){
        aCount++;
        output += '<button class="btn btn-default" type="button" data-slide="a' + aCount + '">' + k + '</button>';
    });
    output += '</div>';
    $('.container').append(output);
});