decision-tree-questionnaire v1.0.3

React Decision Tree

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

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",
      // ...
    }
  ]
}

Accepted Parameters