My Decision Tree

# decision-tree-questionnaire

> Module to easily implement decision tree logic in a react app

Latest version **1.0.3** (published 2020-08-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install decision-tree-questionnaire
pnpm add decision-tree-questionnaire
yarn add decision-tree-questionnaire
bun add decision-tree-questionnaire
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-08-05 |
| First published | 2020-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Maia Miller |
| Maintainers | maiamiller |
| Keywords | decision tree, questionnaire, accessible, react, reactjs, json |

## Links

- npm: https://www.npmjs.com/package/decision-tree-questionnaire
- Repository: https://github.com/maia-miller/react-decision-tree
- Homepage: https://github.com/maia-miller/react-decision-tree#readme
- Issues: https://github.com/maia-miller/react-decision-tree/issues
- npm.io page: https://npm.io/package/decision-tree-questionnaire

## Dependencies (2)

- [typings](https://npm.io/package/typings.md) ^2.1.1
- [typescript](https://npm.io/package/typescript.md) ^3.9.6

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.3 (latest) — 2020-08-05
- 1.0.2 — 2020-08-05
- 1.0.1 — 2020-08-04
- 1.0.0 — 2020-08-03

## README

# React Decision Tree
<p>A simple react module to enable chained questions, where each user response leads to a <em>unique</em> follow up question, ultimately ending in a final result based on that specific pathway of answers.</p>

**===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

<p> Check out the decision tree in action here!</p>

## Usage

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

export const myComponent = () => {
    return (
        <Fragment>
            <h1>My Decision Tree</h1>

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

        </Fragment>
    );
};
```

## 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": "<p><strong>Good human!</strong> Sounds like you'll make for an excellent dog friend. <a href='/financial-help' rel='noopener noreferrer'>Click here</a> to see some photos of dogs as a treat *pat pat*</p>"
                  }
                },
                {
                  "answer": "Around the block",
                  "result": {
                    "text": "<p><strong>Good human!</strong> Sounds like you'll make for an excellent dog friend. <a href='/financial-help' rel='noopener noreferrer'>Click here</a> to see some photos of dogs as a treat *pat pat*</p>"
                  }
                },
                {
                  "answer": "At a mall",
                  "result": {
                    "text": "<p><strong>Bad human!</strong> Dogs like being outside, and dogs can't wear most of the things available at a mall anyway.</p>"
                  }
                }
              ]
            }
          },
          {
            "answer": "No",
            "result": {
              "text": "<p><strong>It looks like you don't like dogs.</strong> Dogs love you, why don't you love them back? Here is a <a href='/financial-help' rel='noopener noreferrer'>link</a> to see some images of dogs not licking you.</p>
            }
          }
        ]
      }
    },
    {
      "answer": "Cat",
      //...
    },
    {
      "answer": "Elephant",
      // ...
    },
    {
      "answer": "Penguin",
      // ...
    }
  ]
}
```
| Attribute       | Type     | Description     |
| :------------- | :----------: | -----------: |
|  **question** <br> *required* | string | Exists at every layer of the chain except for when a result is revealed |
| **answers** <br> *required* | array | An array containing all the answer options. There is no limit on the number of answer options you can include. |
| **answer** <br> *required* | string | This is the answer option for the previously listed question. |
| **subquestion** <br> *optional* | object<br> | 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** <br> *optional* | object<br> | 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** <br> *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** <br> as appears in `moreInfo` or `result`| string | -- |

## Accepted Parameters

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

---
_Source: https://npm.io/package/decision-tree-questionnaire · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._