Use Case

A decision tree is a useful tool when dealing with any kind of option or problem analysis where a number of "if/then" statements must be asked. By designing this process as a decision tree, you are able to limit the information shown to the reader at any given time; this helps prevent the reader from being overwhelmed by the options being presented.

There are many ways to create a decision tree in HTML. The method shown below is designed to be more intuitive to structure in HTML, and will not necessitate any editing of CSS or JavaScript (other than copying and pasting the code shown below).

Example

This decision tree will help determine if a university affiliate is eligible to use the service, "AwesomeSauce", which has complicated eligibility rules.

Understanding the Decision Tree Structure

This particular decision tree is created by structuring your content as a series of nested unordered lists. In the example above, the first "branch" of the tree (i.e. the subsequent questions, selections, and ultimate responses of the top-level "Student" selection), looks as follows without JavaScript and CSS being applied:

• What is the caller's affiliation with the University?
• Student
  • What type of student are they?
  • They are an undergraduate student.
    • Is the student currently employed by the university?
    • Yes, they are a current student employee.
      • Undergraduate students who are currently student employees are eligible to use AwesomeSauce...
    • No, they are not employed by the university.
      • Undergraduate students who are not employed by the university are not eligible to use AwesomeSauce...
  • They are a graduate student.
    • Is the student enrolled in one of the following schools?
    • School of Nursing
      • Graduate students in the School of Nursing are not eligible to use AwesomeSauce...
    • School of Business
      • Graduate students in the School of Business are eligible to use AwesomeSauce...
    • They are enrolled in a school other than the School of Nursing or School of Business
      • Graduate students enrolled in any other School or College meet the normal criteria for AwesomeSauce eligibility...

With the list item bullets being displayed, you can now see the basic structure of the tree. For each selection, the follow-up question and associated selections are presented as a list nested below the initial selection. The question is thus presented as a normal list item, and the associated selections are list items (at the same level as the question) that contain "radio" style inputs. This pattern then continues until any given branch is "terminated" at the final response, which is contained within its own nested list.

There are two reasons to approach the structure this way:

1. It allows you to create the decision tree in one of two ways, depending on what works best for you—you can either work through a single "branch", with its various levels, until it terminates, or, you can complete it level-by-level.

2. It is easier to validate your document as you work on it, since the content will make sense when previewed without CSS and JavaScript in place.

Creating Your Own Decision Tree

Now, we'll walk through creating a decision tree, step-by-step, in HTML. For this example, we will create the entire top level of selections, then we will work through one branch until it terminates.

1. First, you will want to add the containers used for styling the full tree area as well as the question area within it. These should be added as follows, including the specified IDs:

   <div id="tree-container">
     <div id="q-container">
   
     </div>
   </div>

2. Next, create an unordered list with the ID "tree":

   <div id="tree-container">
     <div id="q-container">
   
       <ul id="tree">
   
       </ul>
   
     </div>
   </div>

3. Inside this list, enter the first question or direction you wish to provide to the reader. This should be entered as a normal list item, as shown below:

   <div id="tree-container">
     <div id="q-container">
   
       <ul id="tree">
   
         <li>What is the caller's affiliation with the University?</li>
   
       </ul>
   
     </div>
   </div>

4. Next, add the initial selections you want to present the reader with (though note that you can easily add more later if you prefer to work through one branch to start).

   These will be added as adjacent (i.e. sibling) list items to the list item you added above. The text for each option will be preceded by an <input> tag with type="radio". To prevent the reader from having more than one radio button selected at the same time, give each input the same name, e.g. "lvl1".

   <div id="tree-container">
     <div id="q-container">
   
       <ul id="tree">
   
         <li>What is the caller's affiliation with the University?</li>
   
         <li><input name="lvl1" type="radio">Text for selection #1, e.g. "Student"</li>
         <li><input name="lvl1" type="radio">Text for selection #2, e.g. "Alumni"</li>
         <li><input name="lvl1" type="radio">Text for selection #3, e.g. "Faculty or Staff"</li>
         <li><input name="lvl1" type="radio">Text for selection #4, e.g. "Former Faculty or Staff"</li>
   
       </ul>
   
     </div>
   </div>

5. Now, we'll enter the next set of items that will branch off of the first selection, "Student". This set of items will be entered as a nested unordered list within the "Student" list item (i.e. prior to the closing of the "Student" list item tag) and will include the next question and associated set of possible selections.

   As with the first level of selections, each radio-style input will be given the same name (in this example, "lvl2") to enforce one selection at a time.

   <div id="tree-container">
     <div id="q-container">
   
       <ul id="tree">
   
         <li>What is the caller's affiliation with the University?</li>
   
         <li><input name="lvl1" type="radio">Text for selection #1, e.g. "Student"
   
           <ul>
             <li>Follow-up question to selection #1, e.g. "What type of student are they?"</li>
             <li><input name="lvl2" type="radio">Selection #1 for follow-up question, e.g. "They are an undergraduate student."</li>
             <li><input name="lvl2" type="radio">Selection #2 for follow-up question, e.g. "They are a graduate student."</li>
           </ul>
   
         </li>
         <li><input name="lvl1" type="radio">Text for selection #2, e.g. "Alumni"</li>
         <li><input name="lvl1" type="radio">Text for selection #3, e.g. "Faculty or Staff"</li>
         <li><input name="lvl1" type="radio">Text for selection #4, e.g. "Former Faculty or Staff"</li>
   
       </ul>
   
     </div>
   </div>

6. These steps are then repeated to fill out the additional branches and sub-levels. If we drill down one more level (in this example, what appears after a user selects "They are an undergraduate student"), it would be entered as follows:

   <div id="tree-container">
     <div id="q-container">
   
       <ul id="tree">
   
         <li>What is the caller's affiliation with the University?</li>
   
         <li><input name="lvl1" type="radio">Text for selection #1, e.g. "Student"
           <ul>
             <li>Follow-up question to selection #1, e.g. "What type of student are they?"</li>
             <li><input name="lvl2" type="radio">Selection #1 for follow-up question, e.g. "They are an undergraduate student."
   
               <ul>
                 <li>Follow-up question, e.g. "Is the student currently employed by the university?"</li>
                 <li><input name="lvl3" type="radio">Selection #1, e.g. "Yes, they are currently employed by the university."</li>
                 <li><input name="lvl3" type="radio">Selection #1, e.g. "No, they are not currently employed by the university."</li>
               </ul>
   
             </li>
             <li><input name="lvl2" type="radio">Selection #2 for follow-up question, e.g. "They are a graduate student."</li>
           </ul>
         </li>
         <li><input name="lvl1" type="radio">Text for selection #2, e.g. "Alumni"</li>
         <li><input name="lvl1" type="radio">Text for selection #3, e.g. "Faculty or Staff"</li>
         <li><input name="lvl1" type="radio">Text for selection #4, e.g. "Former Faculty or Staff"</li>
   
       </ul>
   
     </div>
   </div>

7. To terminate any given branch of the decision tree, create one more unordered list within the selected option list item, and populate the list with a single list item. This list item will have the attribute class="answer" to identify it as the terminal response for that branch of the tree. Please note that the terminal list item can contain any other elements that may be desired for formatting, such as paragraph tags, links, etc:

   <div id="tree-container">
     <div id="q-container">
   
       <ul id="tree">
   
         <li>What is the caller's affiliation with the University?</li>
   
         <li><input name="lvl1" type="radio">Text for selection #1, e.g. "Student"
           <ul>
             <li>Follow-up question to selection #1, e.g. "What type of student are they?"</li>
             <li><input name="lvl2" type="radio">Selection #1 for follow-up question, e.g. "They are an undergraduate student."
               <ul>
                 <li>Follow-up question, e.g. "Is the student currently employed by the university?"</li>
                 <li><input name="lvl3" type="radio">Selection #1, e.g. "Yes, they are currently employed by the university."
   
                   <ul>
                     <li class="answer">
                     <p>Undergraduate students who are currently student employees are eligible to use AwesomeSauce on any university-owned computer. Direct the student to talk to their supervisor about getting an AwesomeSauce account created for them. Their account will be active as long as they remain employed.</p>
   
                     <p>If their position through the university ends, they will still be able to purchase the non-Enterprise version of this software, GoodGravy. They can then transfer their account data from AwesomeSauce to GoodGravy.</p>
                     </li>
                   </ul>
   
                 </li>
                 <li><input name="lvl3" type="radio">Selection #1, e.g. "No, they are not currently employed by the university."</li>
               </ul>
             </li>
             <li><input name="lvl2" type="radio">Selection #2 for follow-up question, e.g. "They are a graduate student."</li>
           </ul>
         </li>
         <li><input name="lvl1" type="radio">Text for selection #2, e.g. "Alumni"</li>
         <li><input name="lvl1" type="radio">Text for selection #3, e.g. "Faculty or Staff"</li>
         <li><input name="lvl1" type="radio">Text for selection #4, e.g. "Former Faculty or Staff"</li>
   
       </ul>
   
     </div>
   </div>

8. Continue to populate your decision tree in this fashion until all branches end in a terminal response. While it is necessary to follow this overall structure in order for the tree to function correctly, there is no limit to the number of branches your tree contains, nor is there a limit on the depth of any given branch. Similarly, you may have some branches that terminate after one or two levels, while other branches of the same tree may go many levels deeper.

9. You can also add buttons to allow the reader to go back one step or reset the entire tree. To do so, paste the following between the two closing </div> tags at the end of the tree (i.e. outside of the "q-container" div but inside of the "tree-container" div):

   <div id="tree-container">
     <div id="q-container">
   
       <ul id="tree">
   
         <li>What is the caller's affiliation with the University?</li>
   
         <li><input name="lvl1" type="radio">Text for selection #1, e.g. "Student"</li>
         <li><input name="lvl1" type="radio">Text for selection #2, e.g. "Alumni"</li>
         <li><input name="lvl1" type="radio">Text for selection #3, e.g. "Faculty or Staff"</li>
         <li><input name="lvl1" type="radio">Text for selection #4, e.g. "Former Faculty or Staff"</li>
   
         ...
   
       </ul>
   
     </div>
   
   <button id="goBack" class="treeControls">Back</button> 
   
   <button id="reset-tree" class="treeControls">Reset</button>
   
   </div>

10. Finally, expand the Additional Fields section at the bottom of the document edit screen. By clicking on the + (see red arrow in image below)
    
    
    
    the JavaScript/CSS field is visible. Please see red arrow in image below to see the JavaScript/CSS field.
    
    
    
    
    Then,  add the following to the JavaScript/CSS field:

    
    <link rel="stylesheet" href="/images/group41/66704/decision-tree.css">
    <script type="text/javascript" src="/images/group41/66704/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/images/group41/66704/decision-tree.js"></script>
      

11. Please note that the decision tree will can not be tested in the KB editor preview due to limitations on running linked JavaScript files. However, you should be able to test it when viewing the document in the KB Admin Tools outside of the editor. If you encounter any problems using the decision tree, please contact the KB Team for assistance.