KB User's Guide - Advanced HTML - Decision Tree

This document describes how to create a decision tree that can be placed within a KB document to aid in troubleshooting or other complex decision-making scenarios.

    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.

    Select the user's type of affiliation:

    • 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 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.

            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.

        • No, they are not employed by the university.
          • Undergraduate students who are not employed by the university are not eligible to use AwesomeSauce. They may, however, purchase the non-Enterprise version of this software, GoodGravy, from the Campus Store.
      • 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, as the School of Nursing instead wants students to use their local software, InHouseDressing. Questions about the use of this software should be directed to the SoN helpdesk at 555-123-1234.
        • School of Business
          • Graduate students in the School of Business are eligible to use AwesomeSauce, however, they need to register their account under their @business.university.edu email address to gain access to additional features that were specifically licensed for the SoB.
        • 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; however, please note that graduate students may only install AwesomeSauce on a university-owned computer.
    • Alumni
      • When did they graduate from the university?
      • They graduated after Spring 2014.
        • Alumni who graduated after Spring 2014 will be eligible to use AwesomeSauce, however, they will have access to a limited feature set.
      • They graduated prior to Spring 2014.
        • Alumni who graduated before Spring 2014 will not be eligible to use AwesomeSauce, as they were students when the software was licensed for the university.
    • Faculty or Staff
      • Are they a full or part-time employee?
      • They are a full-time employee.
        • What is their position type?
        • They have a permanent position.
          • As long as they remain an employee, they will be eligible to install and use AwesomeSauce on both personal and university-owned computers.
        • They have a project position.
          • Is their position renewable?
          • Yes, their position is renewable.
            • As long as they remain an employee, they will be eligible to install and use AwesomeSauce on both personal and university-owned computers.
          • No, their position cannot be renewed.
            • As long as they remain an employee, they will be eligible to install and use AwesomeSauce on university-owned computers. For personal use, they can purchase a copy of the non-Enterprise version of the software, GoodGravy, from the Campus Store.
        • They are a limited term position.
          • Limited term employees are not eligible to use AwesomeSauce. They may, however, purchase the non-Enterprise version of this software, GoodGravy, from the Campus Store.
      • They are a part-time employee.
        • As long as they remain an employee, they will be eligible to install and use AwesomeSauce on university-owned computers. For personal use, they can purchase a copy of the non-Enterprise version of the software, GoodGravy, from the Campus Store.
    • Former Faculty or Staff
      • Do they have a special appointment from the university, i.e. are they designated as Emeritus or Special Population by their former HR department?
      • Yes, they are listed Emeritus or Special Population.
        • For the duration of this designation, they will be eligible to install and use AwesomeSauce on both personal and university-owned computers.
      • No, they are not Emeritus or Special Population.
        • Unfortunately, they will not be eligible to use AwesomeSauce, nor are they eligible to purchase GoodGravy through the Campus Store. If they are still interested in GoodGravy, let them know they can purchase the software directly from the vendor.

    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:

    Select the user's type of affiliation:

    • 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" class="treeControls">Reset</button>
      
      </div>
    10. Finally, expand the Additional Fields section at the bottom of the document edit screen, and 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.




    Keywords:create design code troubleshooting tool branching choices options inputs selection complex conditionals css javascript js   Doc ID:66704
    Owner:Leah S.Group:KB User's Guide
    Created:2016-09-06 11:29 CDTUpdated:2018-08-10 17:09 CDT
    Sites:KB User's Guide
    Feedback:  0   0