Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/catalyst/catalyst-decision-tree
https://github.com/catalyst/catalyst-decision-tree
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/catalyst/catalyst-decision-tree
- Owner: catalyst
- Created: 2020-09-02T22:55:33.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T02:14:27.000Z (about 4 years ago)
- Last Synced: 2024-10-01T16:46:59.820Z (about 1 month ago)
- Language: JavaScript
- Size: 12.1 MB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://covid19.govt.nz/business-work-and-money/financial-support/covid-19-financial-support-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
);
};
```
## 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.