Open Decision - JavaScript Interpreter

Open Decision is an Open-Source Decision Automation System, that is optimized for legal processes. The system will be used to build a platform to provide free legal advice for consumers.

This is the JavaScript Interpreter to display decision trees generated by the Open Decision builder. For the main project, go here.

Further information about the project on www.open-decision.org

Table of content

• Getting Started
  • Embed a decision tree
  • Use your own styles
  • Disable saving
• Known Issues
• Built with
• Contributing
• License
• Links

Getting Started

Take a look at index.html in the demo folder.

Embed a decision tree

You need to to include the interpreter and JSON-logic. If you need compatibility with old browsers, use the non-ES6 version.

<script type="text/javascript" src="logic.js"></script>
<script type="text/javascript" src="../od-js-interpreter-es6.js"></script>
<script type="text/javascript" src="test.json"></script>`

The default styling currrently uses bootstrap. Load it by using:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

Let's use the demo tree for testing. At the moment, trees exported by the builder must be assigned to a variable. Click here for more information. To do so, simply open the exported .json file with any plain text editor (don't use word :D) and add "tree =" before the rest.

<script type="text/javascript" src="test.json"></script>

Now call the init-Function. There are two mandatory arguments, the first one is the variable containing the tree, the second one is the id of the div-container, where the tree will be shown.

openDecision.init (tree, "publish-div");

Use your own styles

You can also use your own styling for most of the UI elements. Just provide a object containing the classes you want to apply. Providing a custom style for an element will override the default styling completely. Don't forget to load your stylesheet in the HTML document.

let customStyles = {
  container: {
     headingContainer: "", // A div-container wrapping the heading
     questionContainer: "", // A div-container wrapping the question
     inputContainer: "", // A div-container wrapping all input elements
     controlsContainer: "", // A div-container wrapping all control elements
  },
  heading: "", // The heading where the tree name is displayed

  // Input elements
  answerButton: "btn btn-primary ml-2", // The buttons to answer a question
  answerList: "", //The select-list
  numberInput: "", // The number input field
  dateInput: "", // The date input field

  // Free text inputs (the data is saved but no logic is performed)
  freeText: {
    short: "", // A textfield to store user data
    long: "", // A textarea to store user data
    number: "", // A numberfield to store user data
  },
  controls: {
    submitButton: "btn btn-primary ml-2 mt-3", // The button to submit a list, number or date input
    restartButton: "btn btn-primary ml-2 mt-3", // The button to restart the query
    backButton: "btn btn-primary ml-2 mt-3", // The button to go back to the last question
    saveProgressButton: "btn btn-primary ml-2 mt-3", // The button to go back to the last question
    saveDataInputField: "" // Input field to load saved data
  }
};

openDecision.init (tree, "publish-div", customStyles);

You don't need to override all elements, just select the ones you want to modify.

openDecision.init (tree, "publish-div", {backButton: "hide-el", restartButton: "btn-warning"});

Disable saving

By default, the user is allowed to save her progress and continue the query later. You can disable the save function by passing 'false' as fourth argument. If you don't use custom styles, pass empty curly braces as the third argument.

openDecision.init (tree, "publish-div", {}, false);

Known Issues

• Storing trees in a variable: Before you can use a tree exported by the builder, you need to store it in a variable. Simply open the exported .json file with any plain text editor (just don't use word...) and add "tree =" before the rest. It should look like this:

tree =  {
  "header": {
    "version": 0.1,
    "build_date": "2020-04-03",
    "tree_name": "Test",
    "tree_slug": "test",
    "start_node": "begruung",
    "vars": {}
  },
  "ausprobieren": {

   ...


   }

• No validation: Currently no validation is carried out on the number input field. Will be fixed soon.

Built with

• JavaScript
• JSONlogic
• Bootstrap

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Links

• Project Website
• Join our Slack-Channel
• Documentation