Drag-and-drop editor for Docassemble interviews

Overview

GraphDoc

Introduction

GraphDoc is a web-application that has been developed on behalf of the Maastricht Law & Tech Lab, which is part of Maastricht University in The Netherlands.

The goal of this application is to aid users in visually constructing Docassemble interview configuration files.

Demo

The demo is available at https://maastrichtlawtech.github.io/graphdoc/.

Example

User Interface Docassemble
ui docassemble output

The interview constructed in the above screenshot results in the following Docassemble interview configuration file:

question: Start
subquestion: 'walk or bus?'
continue button field: walk_or_bus
---
question: Question
subquestion: 'is it raining?'
field: is_raining
buttons:
  - "No"
  - "Yes"
---
question: Notice
subquestion: 'take an umbrella'
continue button field: notice_take_umbrella
---
code: |
  bus = 'bus'
  walk = 'walk'
  def get_outcome_walk_or_bus():
    walk_or_bus
    if is_raining == 'Yes':
      notice_take_umbrella
      return bus
    if is_raining == 'No':
      return walk
  outcome = get_outcome_walk_or_bus()
---
mandatory: True
question: End
subquestion: ${outcome}

Usage

Docker

The recommended method for installing GraphDoc on a server is using Docker.

First clone the repositry and navigate with the command line to the destination folder.

git clone https://github.com/maastrichtlawtech/graphdoc
cd graphdoc

Next, build the container

docker build -t graphdoc ./

Then run the container on the desired port, which is 80 by default.

docker run graphdoc --name graphdoc -p 80:80

Manual installation

To manually install GraphDoc, you are required to have atleast npm installed. It does not require a webserver, however this is recommended.

First clone the repositry and navigate with the command line to the destination folder.

git clone https://github.com/maastrichtlawtech/graphdoc
cd graphdoc

Next, install the npm dependencies and build the files using npm

npm install
npm run build

The built package is located at ./dist. This folder can be served using any webserver, like http-server:

npx http-server dist

Alternatively, the index.html file in the dist folder (dist/index.html) can be opened using a webbrowser from the file explorer.

You might also like...

Drag and drop Argo Workflows tool.

Drag and drop Argo Workflows tool.

Visual Argo Workflows Live demo The goal of this project is to make it easier for everyone on a team to construct and run their own workflows. Workflo

Dec 22, 2022

Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Demo Features Drag-n-drop for list items in the same pane and between different panes 3 modes: move block, copy block, embed block Automatic reference

Dec 26, 2022

Nested Sort is a JavaScript library which helps you to sort a nested list of items via drag and drop.

Nested Sort is a JavaScript library which helps you to sort a nested list of items via drag and drop.

Nested Sort Nested Sort is a vanilla JavaScript library, without any dependencies, which helps you to sort a nested list of items via drag and drop. U

Dec 7, 2022

🔖 A drag-and-drop form builder for Bootstrap 4.

🔖 A drag-and-drop form builder for Bootstrap 4.

Bootstrap v4 Form Builder A drag-and-drop form builder for Bootstrap 4. ❓ Get Help There are few ways to get help: Please post questions on Stack Over

Dec 22, 2022

A collection of coding challenges from interviews and websites

coding-challenges All of these folders are challenges that I've make for interviews and from tutorials, now I'll enumerate the ones that are from inte

Jul 13, 2022

It will be contain many algorithms about js for job interviews.

Algortihms with Javascript 📌 📗 TR: Bu projenin temel amacı, işe girerken yapılan mülakatlar için bizlere sunulan algoritma soruları ve çözümlerini i

Dec 3, 2022

Powerful rich text editor using Vue.js and Quill. About @quilljs editor component for @vuejs

Powerful rich text editor using Vue.js and Quill.  About @quilljs editor component for @vuejs

quill-vuejs Quill editor component for Vue. 基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。 Preview Example CDN example page Component example page Install NPM

Aug 10, 2022

Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 html editor packed with useful plugins.

Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 html editor packed with useful plugins.

CKEditor 5 for Strapi Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 packed with useful plugins. 👋 Get Started Feat

Jan 2, 2023

Triumph Tech’s Magnus Editor is a full-featured remote editor for Rock RMS.

Triumph Tech’s Magnus Editor is a full-featured remote editor for Rock RMS.

Magnus Visual Studio Code Editor for Rock RMS Triumph Tech’s Magnus Editor is a full-featured remote editor for Rock RMS. Rock RMS is an open source R

Nov 23, 2022
Comments
  • Merge of dev

    Merge of dev

    Features

    • Quick 'Yes' and 'No' buttons for the label of decision-node edges,
    • Editable variable,
    • Validaiton errors extended with custom variable options,
    • Entities within validaiton errors are clickable and nagivate to the corresponding node in the graph,
    • Generated output now contains JSON content that can be imported again,
    • Very basic import functionality for importing just the JSON part (not yet detecting comment / export boundary from interview).
    opened by eensander 0
Releases(v1.8.2)
  • v1.8.2(Jul 5, 2022)

  • v1.8.1(Jul 5, 2022)

  • v1.8.0(Jul 1, 2022)

    Features

    • Interview can be downloaded with button press
    • Downloaded interview can be imported
      • If complete interview is imported; the JSON section is extracted using the 'boundary' fields.
    Source code(tar.gz)
    Source code(zip)
  • v1.7.0(Jun 30, 2022)

  • v1.6.0(Jun 21, 2022)

    Features

    • Quick 'Yes' and 'No' buttons for the label of decision-node edges,
    • Editable variable,
    • Validaiton errors extended with custom variable options,
    • Entities within validaiton errors are clickable and nagivate to the corresponding node in the graph,
    • Generated output now contains JSON content that can be imported again,
    • Very basic import functionality for importing just the JSON part (not yet detecting comment / export boundary from interview),
    • Added license.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Jun 21, 2022)

Owner
Maastricht Law & Tech Lab
The Lab aims to offer innovative education and to build a creative community of researchers at the intersections of law, technology and data science.
Maastricht Law & Tech Lab
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and easy to use it

Digispark_Overmaster Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and

Yehia Elborma 5 Nov 14, 2022
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
Drag and drop library for two-dimensional, resizable and responsive lists

DEPRECATED This project is no longer maintained, please consider using react-grid-layout instead. GridList Drag and drop library for a two-dimensional

Hootsuite 3.6k Dec 14, 2022
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Sortable Sortable is a JavaScript library for reorderable drag-and-drop lists. Demo: http://sortablejs.github.io/Sortable/ Features Supports touch dev

SortableJS 26.1k Jan 5, 2023
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023