You can use this handy application for decision tree javascript from github to display an visual represnetaion of the decision path for a quiz application.
https://github.com/almende/vis
This project is not maintained anymore! Please go to https://github.com/visjs
It works for me.
Here an an example quiz data:
<div id="mynetwork"></div> <script type="text/javascript"> // create an array with nodes var nodes = new vis.DataSet([ {id: 1727, label: '1727', title: 'Have you traveled recently to any Asian country? [START]', color:'green'}, {id: 114, label: '114', title: 'Have you seen a doctor about your problem?'}, {id: 551, label: '551', title: 'What is your age?'}, {id: 563, label: '563', title: 'What is your gender?'}, {id: 1660, label: '1660', title: 'Please describe your symptoms.'}, {id: 1728, label: '1728', title: 'Have you traveled recently to China?'}, {id: 1729, label: '1729', title: 'Have you been in contact with any person who has recently traveled outside the country?'}, {id: 1730, label: '1730', title: 'Corona Virus Symptoms may appear 2-14 days after exposure. Do you have fever?'}, {id: 1731, label: '1731', title: 'Do you have a cough?'}, {id: 1732, label: '1732', title: 'Do you have shortness of breath?'}, {id: 1740, label: '1740', title: 'Do you have any of these gastrointestinal symptoms? '}, {id: 1741, label: '1741', title: 'Have you recently lost your sense of taste or sense of smell?'}, ]); // create an array with edges var edges = new vis.DataSet([ {from: 114, to: 0, arrows:'to'}, {from: 114, to: 0, arrows:'to'}, {from: 551, to: 563, arrows:'to'}, {from: 563, to: 1741, arrows:'to'}, {from: 563, to: 1741, arrows:'to'}, {from: 1660, to: 1730, arrows:'to'}, {from: 1727, to: 1728, arrows:'to'}, {from: 1727, to: 1729, arrows:'to'}, {from: 1728, to: 1729, arrows:'to'}, {from: 1728, to: 1729, arrows:'to'}, {from: 1729, to: 1730, arrows:'to'}, {from: 1729, to: 1730, arrows:'to'}, {from: 1730, to: 1731, arrows:'to'}, {from: 1730, to: 1731, arrows:'to'}, {from: 1731, to: 1732, arrows:'to'}, {from: 1731, to: 1732, arrows:'to'}, {from: 1732, to: 1740, arrows:'to'}, {from: 1732, to: 1740, arrows:'to'}, {from: 1740, to: 551, arrows:'to'}, {from: 1740, to: 551, arrows:'to'}, {from: 1740, to: 551, arrows:'to'}, {from: 1740, to: 551, arrows:'to'}, {from: 1740, to: 551, arrows:'to'}, {from: 1741, to: 114, arrows:'to'}, {from: 1741, to: 114, arrows:'to'}, ]); // create a network var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { nodes : { shape: 'dot', size: 10 } }; var network = new vis.Network(container, data, options); </script>