Business processes are getting increasingly more complex. To help people perform processes correctly we often resort to training or providing some type of reference material. that’s typically on the corporate intranet. Since the processes are often governed by a complex set of rules a person must read and remember all the different conditions and rules that must be applied to a process. If the process is complicated and not performed very often, the error rate goes up along with the number of support calls.
This article presents a technique that uses a jQuery function to enable process experts to create decision guide or trouble shooter by simply entering information in an HTML table using a visual web page editor. When the page is viewed, the jQuery script reads the table and presents the first question along with the options.
When a person clicks an option/answer, the script finds and presents the next question. This continues until the final answer is found. Each question is displayed below the previous question so a person can see the flow of questions and quickly take another course by skipping back to the first or any previous question.
Here is what the table might look like.
| # | Question/Heading | Options/Answer |
| 1 | What’s wrong with the printer |
|
| 2 | Does the printer make any noise? |
|
| 3 | How light is the print? |
|
| 4 | The printer needs to be replaced. Follow these procedures for requesting a replacement printer. |
The first column contains unique number from 1 to whatever is required. The second column contains the questions or a heading for a final answer. The 3rd column contains a bullet list of options for each question or the final answer. Each of the options in the bullet list has an id attribute that matches the number of the table row that’s presented when the bullet item is clicked. The HTML would be <li id=”3”>The paper is crimpled</li>. Since many visual editors allow authors to add attribute values it would not be necessary for an author to view the HTML code.
To utilize the script you need to:
- Add a link to the jQuery js file
- Copy and paste the function and css from the example page
- Add a table with id=”questions” in the table tag.
- Have an expert enter the questions and answers.
Including an “Don’t know” or “Not sure” option/answer with each question provides an opportunity to present information about how to find an answer to a question.
This electronic performance support system (EPSS) can help you to reduce process errors, improve service, and reduce support calls.
Decision Maker is great! Is is small, elegant, and easy to adapt. I was able to design my own decision tree very easily. The only drawback is that it is using the mouse hover feature, which does not work on mobile devices.
Okay, made some progress (thank you!), but the error I get now is “$ is not defined”.
Again apologies if I am missing something obvious. Tried it with the library loaded locally or the google-hosted version.
I might be being really stupid here – I’m new at all this.
I’m trying to get this working using MS Expression.
I’ve copied and pasted the HTML, the CSS and the JS. I can plonk it all on the same page, or create seperate stylesheet and .js files and link to them, but it won’t work either way. I just see all the options at once when I preview.
Laugh if you must – like I said, new at this and bumbling through – but I am dying to make this work and I’d really appreciate some help.
Ali
Pingback: Joe's noodlings. » In the spirit of the presidential elections, part I.
I assume you want to be able to return the selected answers/questions to the server for additional processing. In this case you could use hidden inputs to store each selection. In the li click event you could capture the text in the with something like qaTxt = $(this).text() and then assign it the the value of a hidden input by using an id that includes the count variable. For example $(‘#hinput’ + count).val(qaTxt). The page html would need to include enough hidden inputs for the maximum number of questions/answers. The final submit function would then return the value of the hidden inputs and you could iterate through then to extract the q/a text.
I hope this is helpful or at least triggers a better idea.
This is great, very useful.
But I need to also make a recap with the questions / answers so we can add it in a ticketing system.
I tried using radio buttons, and it is working for the tree view. But I don’t see the selected radio button.
Can you give me advice how this can be modified to work with radio buttons and text area so a recap of the selections can be made ?
Pingback: Looking for an interactive decision tree
Glad you found this useful. It’s been a big hit in the organization I work for. I’m also glad you were able to modify the code to meet your needs. Because the decision guide uses tags it will impact other tags on the page. The technique you used should work well. You can also wrap the decision guide in a container with an Id like ‘dgDiv’. Then you can change to jQuery selector to $(‘#dgDiv li’) and it will target just the tags in the div. Hope you get some good results. Thanks for sharing your experience and changes.
This code does exactly what I was looking for. Making it available saved me a lot of time and effort! Thanks so much!!! As a side note, I had to tweak the HTML, jQuery and CSS files because the site where I’m using this code uses unorganized list list items (I can’t use the HTML tags here…) to build the navigation menus.
In the HTML file containing the logic, I assigned each list item class=”qlist”.
In the jQuery code, I modified the line from:
$(‘li’).live(‘click’,function(){…
to:
$(‘li.qlist’).live(‘click’,function(){…
I also modified 3 lines in the CSS:
1.
li {
padding:0.2em;…
to:
li.qlist {
padding:0.2em;…
2.
li:hover {
cursor:pointer;…
to:
li.qlist:hover {
cursor:pointer;…
3.
.selected {
font-weight:bold;…
to:
li.selected {
font-weight:bold;…
and that got rid of the icons and mouseover behaviors affecting my navigation menus. It may not be the best or most efficient way, but it was simple and works.
Yes yes this is what I was looking for.. You are great, saved my time…
Thank you so much..
Raam
Hi,
Thanks
It is what I was looking for 
Hi,
I was just trawling through the web and came across this. Is there a way to adapt this to allow multiple selection options? Say for example, you want recommendations on what type of phone to buy and you quite like Android and iOS but would want to see a list of phones that have both operating systems.
So in effect, what I am talking about is AND and OR functions…
Your thoughts would be much appreciated.
Again, brilliant work – you have saved me a lot of time. However, i’m getting glitches with the script interfering with my other unordered list-based menus. What would be the best way to edit the script or the HTML so that it only targets my decision maker?? Any advice would be much appreciated.
Josh
The code is probably not well suited to a situation where a user has a specific quantitative need. For example, I need a 50 mm widget with a diameter of 20mm, But it may work well for a range of values like widgets with a length of more than 50mm. This code is good for a decision tree where the answer to one questions leads to more questions that may be unique to the previous question. If that’s what you are looking for you could build the decision guide in an HTML document as described in the article. Once a user has answered all the question the final results could be a link that executes a database query that returns the products that best match the needs determined by the answers to the questions in the decision tree. The nice think about using this decision tree is that a person can basically perform a boolean search, by just answering a series of questions. They don’t need to think about how to set a series of filters to return the products that may be of interest to them.
I hope this answers your question.
Josh
The code is probably not well suited to a situation where a user has a specific quantitative need. For example, I need a 50 mm widget with a diameter of 20mm, But it may work well for a range of values like widgets with a length of more than 50mm. This code is good for a decision tree where the answer to one questions leads to more questions that may be unique to the previous question. If that’s what you are looking for you could build the decision guide in an HTML document as described in the article. Once a user has answered all the question the final results could be a link that executes a database query that returns the products that best match the needs determined by the answers to the questions in the decision tree. The nice think about using this decision tree is that a person can basically perform a boolean search, by just answering a series of questions. They don’t need to think about how to set a series of filters to return the products that may be of interest to them.
I hope this answers your question.
Is it possible to integrate this with a WordPress database of products to use the questions to search for products which meet specific criteria, such as length, diameter, etc?
Thanks,
Josh