Accessible jQuery Decision Tree / Flowchart Plugin - decisionTree

decisionTree is a lightweight jQuery plugin used to generate an interactive, accessible, conditional, step-by-step decision tree or flowchart from JSON data.

Basic usage:

1. Include the required decisionTree.css stylesheet in the head section of the html page.

<link rel="stylesheet" href="css/decisionTree.css">

2. Create a container for the decision tree and a toggle link pointing to the start point.

<div class="decisionTree" aria-live="polite" aria-relevant="additions">

  <p class="cta">
    <a href="#" role="button" data-start-node="start">
      Will you get a free upgrade to Windows 10?
    </a>
  </p>

</div>

3. Add questions and answers into the JSON file as follow.

{
  "id": "start",
  "question": "Is your computer running Windows 7, 8, or 8.1?",
  "answers": [

    {
      "text": "Yes",
      "target": "dtn1"
    },
    {
      "text": "No",
      "target": "dtn2"
    }
  ]
}

4. Include the jQuery decisionTree plugin's script after jQuery library.

<script src="jquery.min.js"></script>
<script src="js/jquery.decisionTree.js"></script>

5. Enable the Decision Tree / Flowchart.

$(".decisionTree").decisionTree();

6. Plugin's default settings.

$(".decisionTree").decisionTree({

  // folder to locate JSON files, default is the same folder as the HTML page
  data_folder: '', 

  // prefix for question nodes
  node_prefix: 'dtn', 

  // file extension for JSON requests
  json_ext: 'json', 

  // cache JSON responses
  cache_json: true, 

  // text for the 'Loading' overlay
  loading_text: 'Loading...', 

  // location of the 'progress' animated GIF
  loading_gif: "img/loading.gif", 

  // speed of transitions and effects
  animation_speed: 600, 

  // show additional copy on node questions
  question_extra_text: true, 

  // hide the content used to introduce the decision tree
  hide_original_content: true, 

  // make the headline of answer nodes a link
  answer_link: true, 

  // target for the answer node link
  answer_target: "_blank" 
  
});

---

This awesome jQuery plugin is developed by slabrador35. For more Advanced Usages, please check the demo page or visit the official website.