bpmn-questionnaire

Note: This library is in early development stage.

A library for questionnaires on BPMN 2.0.

About

• Create and embed questionnaires on BPMN 2.0 in your own website.
• Implement your own types of questions with ease.
• This library uses bpmn-js to render BPMN 2.0 diagrams.
• Create your own questionnaires with the bpmn-questionnaire Builder application.

Example

Check out an example project

Creating a questionnaire

var q = new BpmnQuestionnaire({
  container: element,
  questionnaireJson: questionnaireJson,
  types: {
    single: s
  }
});

Creating a type

Check out example types

var single = BpmnQuestionnaire.createType({
  renderQuestion: function() {
    // ...
  },
  renderResult: function() {
    // ...
  },
  checkIfValidAnswer: function() {
    // ...
  },
  checkIfRightAnswer: function() {
    // ...
  },
  addToState: {
    // ...
  }
});

Example JSON file of a questionnaire

Check out example JSON files

{  
   "name":"BPMN-Grundlagentest",
   "intro":"Bitte beantworten sie die nachfolgenden Fragen.",
   "questions":[  
      {  
         "type":"single",
         // ...
      },
      {  
         "type":"multiple",
         // ...
      },
      {
        "type":"interactive",
        // ...
      },
      // ...
   ]
}

To include a BPMN 2.0 diagram in a question add a diagram property to it.

"diagram":{  
  "url":"https://raw.githubusercontent.com/bpmn-io/bpmn-questionnaire/master/test/fixtures/bpmn/diagram-1.bpmn",
  "interactive":true,
  "singleSelect":true,
  "rightAnswers":[
     "IntermediateCatchEvent_1r9cp4a",
     "InclusiveGateway_1jd0hrf",
     "EndEvent_0diucuw",
     "IntermediateThrowEvent_03x03k5"
  ],
  "noSelect":{
     "elements":[
     ],
     "types":[
        "label",
        "participant"
     ]
  }
}

You can either provide a URL of a diagram via url or inline it via xml. Diagrams are not interactive by default. If you want your diagram to be interactive set interactive to true. Thus interaction is enabled. Add the IDs of all elements that belong to the right answer to rightAnswers. Via noSelect you can specify element IDs or types of BPMN 2.0 elements that will not be selectable. Via singleSelect you can specify if only one ore multiple elements can be selected at the same time.

Building

Install all dependencies via npm:

npm install

Execute the test suite to run the tests in the browser:

grunt auto-test

Build the project:

grunt auto-build

CSS

The library uses Bootstrap 3 for styling. You can either include Bootstrap in your application or build a namespaced version of Bootstrap:

grunt build-css

Go to localhost:9876/debug.html to inspect the tests in the browser.

License

MIT