React Decision Tree

A simple react module to enable chained questions, where each user response leads to a unique follow up question, ultimately ending in a final result based on that specific pathway of answers.

===THIS IS STILL A WIP====

* Based off the code that was created for the NZ COVID Financial Tool
* No limit on the number of questions you can ask in a given chain
* Made with accessibility in mind
* All inputs are radio buttons
* Option to include a customizable "moreInfo" dropdown for a given question to provide additional details to your user
* Features easy to understand class names to making CSS styling easier
* Embedded HTML allows customization of the results paragraph

Check out the decision tree in action here!

Usage

``
import React, { Fragment } from "react";
import DATA from './data.json'
import { DecisionTree } from 'react-decision-tree-questionnaire';

export const myComponent = () => {
return (



My Decision Tree

data={DATA}
resultsHeader={"Based on your results..."}
/>


);
};
`

Example

Click here to see the decision tree in action!

Accepted JSON Format

Your data.json file should look like the following:

`
{
"question": "What's your favourite animal?",
"answers": [
{
"answer": "Dog",
"subquestion": {
"question": "Do you like being licked in the face?",
"answers": [
{
"answer": "Yes",
"subquestion": {
"question": "Where's the best place to walk a dog?",
"moreInfo": {
"title": "What constitutes a walk?",
"text": "Walking a dog is a shorthand to mean taking it outside to relive itself, play, run or indeed walk. Walks can be any length of time, and are expected to take place outdoors. A backyard or balcony is not considered a walk."
},
"answers": [
{
"answer": "A park",
"result": {
"text": "

Good human! Sounds like you'll make for an excellent dog friend. Click here to see some photos of dogs as a treat pat pat

"
}
},
{
"answer": "Around the block",
"result": {
"text": "

Good human! Sounds like you'll make for an excellent dog friend. Click here to see some photos of dogs as a treat pat pat

"
}
},
{
"answer": "At a mall",
"result": {
"text": "

Bad human! Dogs like being outside, and dogs can't wear most of the things available at a mall anyway.

"
}
}
]
}
},
{
"answer": "No",
"result": {
"text": "

It sounds like you might not like dogs very much. Dogs love you, why don't you love them back? Here is a link to see some images of dogs not licking you.

}
}
]
}
},
{
"answer": "Cat",
//...
},
{
"answer": "Elephant",
// ...
},
{
"answer": "Penguin",
// ...
}
]
}
`
| Attribute | Type | Description |
| :------------- | :----------: | -----------: |
| question
required | string | Exists at every layer of the chain except for when a result is revealed |
| answers
required | array | An array containing all the answer options. There is no limit on the number of answer options you can include. |
| answer
required | string | This is the answer option for the previously listed question. |
| subquestion
optional | object
| What happens after a user clicks on a given answer? Either a new question (subquestion) or a result. subquestion is an object that contains the next layer of question and answers, which repeats itself until the chain of questioning has been completed. Only one subquestion can exist at a given layer. |
| result
optional | object
| What happens after a user clicks on a given answer? Either a new question (subquestion) or a result. result is an object that takes text. text accepts HTML markup. |
| moreInfo
optional | object | To provide user with further information about the question. This reveals an accordion with a display text (title) and text when clicked open. |
| title / text
as appears in moreInfo or result`| string | -- |

Accepted Parameters

| Attribute | Type | Description |
| :------------- | :----------: | -----------: |
| data
require | JSON | As noted above |
| resultsHeader
optional | string | Suggested. The heading you would like to appear at the top of the results. This will be uniform across all results.