bpmn-questionnaire

    1.1.0 • Public • Published

    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

    Install

    npm i bpmn-questionnaire

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • philippfromme