API-Banking: Anamnese

Home API-Banking API-Banking: Anamnese
Description
Integration Method 1
Integration Method 2
Complete example
API Documentation

Description

With this component, you can create a psychological profiling questionnaire. You get as result the profiling-type from the user. You can use default questions or set your own.

Requirements

To use the component, you will need these third-party libraries:

• JQuery
• Mustache
• jquery.Mustache
• jquery.hashchange
• Bootstrap CSS
• Backbone.js

Integration Method 1

Integration

You will need additional scripts and stylesheets to use the component:

• The app-specific CSS rules, the default theme is included by default.
• The app-specific scripts files to get the plugin up and running

Include the stylesheets to your page:

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

The component is based on the Bootstrap markup and classes definition. You don’t need the first line, if you already have the Bootstrap stylesheet included. Just make sure that the stylesheets of our component is positioned after the Bootstrap import.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link href="https://api.niiio.me/public/common/default-theme.css" rel="stylesheet">
<link href="https://api.niiio.me/public/riskprofiling/risk-profiling.css" rel="stylesheet">

Create a container for the questionaire:

Create a new <div> container for the questionnaire inside your <body> tag. You can use the our default CSS-style by adding the class „dser-theme“ to the container.

The questionnaire will be appended to this element.

<div id="riskProfilingContainer" class="dser-theme"></div>

Asynchronous loading of required files with RequireJS

Include the required script files to your page:

• Advantage: You only need to import a few files, all required script will get loaded asynchronously through RequireJS
• Disadvantage: If you already have a script file which defines an anonoymous AMD module, then sadly this method won’t work for you.

Inlude the required javascript files:

Load the plugin scripts by adding this block at the end of the BODY section.

<script type="text/javascript" src="https://api.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/require.js"></script>

Setup and initialize the component:

Add this block right after the included script files.

<script>
    require(['riskProfiling'], function () {
        $("#riskProfilingContainer").riskProfiling({
            token: '<your-custom-api-token>'
        }).buildQuestionnaire();
    });
</script>

Please send us an email to receive your custom API token. It is required to initialize the plugin. Replace the part with your actual token.

Integration Method 2

Integration

You will need additional scripts and stylesheets to use the component:

• The app-specific CSS rules, the default theme is included by default.
• The app-specific scripts files to get the plugin up and running

Include the stylesheets to your page:

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

The component is based on the Bootstrap markup and classes definition. You don’t need the first line, if you already have the Bootstrap stylesheet included. Just make sure that the stylesheets of our component is positioned after the Bootstrap import.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://api.niiio.me/public/kommunikationsrad/css/kommunikationsrad.css">

Regular loading of script files, without RequireJS

Include the required script files to your page:

• Advantage: This method will work on most pages.
• Disadvantage: You have to include a lot more scripts.

Inlude the required javascript files:

Load the plugin scripts by adding this block at the end of the BODY section.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/jquery.hashchange/jquery.ba-hashchange.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/google_analytics/GoogleAnalyticsService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/riskprofiling/jquery.risk-profiling.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/riskprofiling/js/RiskProfilingService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/riskprofiling/js/RiskProfilingMustacheService.js"></script>

Setup and initialize the component:

Add this block right after the included script files.

<script>
   $(function(){
      $("#riskProfilingContainer").riskProfiling({
         token: '<your-custom-api-token>'
      }).buildQuestionnaire();
   });
</script>

Please send us an email to receive your custom API token. It is required to initialize the plugin. Replace the part with your actual token.

Complete example

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          crossorigin="anonymous">
    <link href="https://api.niiio.me/public/common/default-theme.css" rel="stylesheet">
    <link href="https://api.niiio.me/public/riskprofiling/risk-profiling.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="hidden-sm col-md-1 col-lg-2">
        </div>
        <div id="riskProfilingContainer" class="col-sm-12 col-md-10 col-lg-8 dser-theme">
        </div>
        <div class="hidden-sm col-md-1 col-lg-2">
        </div>
    </div>

    <script type="text/javascript" src="https://api.niiio.me/public/require-config.js"></script>
    <script type="text/javascript" src="https://api.niiio.me/public/common/require.js"></script>
    <script>
        require(['dser.riskProfiling'], function () {
            $("#riskProfilingContainer").riskProfiling({
                token: '<your-custom-api-token>'
            }).buildQuestionnaire();
        });
    </script>
</body>
</html>

API Documentation

Initialize

Please provide your custom API token on initialization, otherwise the plugin won’t work.

$(<Selector>).riskProfiling(config)

Required configuration options

Key Description
token The security-token to check if your connection is valid.

Extended and optional configuration options

Key Description Default
questionsUrl URL to the questionnaire https://api.niiio.me/riskprofiling/questions
templateUrl URL to the questionnaire-mustache-template https://api.niiio.me/public/riskprofiling/template
calculationUrl URL to the result-calculation-service https://api.niiio.me/riskprofiling/calculate
sidePictureUrl URL to the image on the right side https://api.niiio.me/public/riskprofiling/riskprofiling.jpg
abortCallback() Callback-Function which called after abort the questionnaire {}
resultCallback(result) Callback-Funktion which called after complete the questionnaire. You get the result back. {}
showResultPage Show the result page true
history The history is controlling by bookmarks in the url. If you use bookmarks in your side, then disable the history function. true

Create a questionnaire

//Create the questionnaire with the data from a server by "questionsUrl"
$(<Selector>).riskProfiling(config).buildQuestionnaire()
//Create the questionnaire by reference to the object
$(<Selector>).riskProfiling(config).buildQuestionnaireByObject(questions)

Object structure – JSON Example

{
    "questions":[{
        "questionText":"Geld ist da, um ausgegeben zu werden.",
        "questionType":"CONTROL",
        "answers":[{
            "text":"vollkommen",
            "value":0.0
        },{
            "text":"überwiegend",
            "value":0.5},{
            "text":"ein wenig",
            "value":1.0
        },{
            "text":"gar nicht",
            "value":1.5
        }]
    },{
        "questionText":"Manchmal gebe ich Geld aus, ohne über die Konsequenzen nachzudenken.",
        "questionType":"RISK",
        "answers":[{
            "text":"vollkommen",
            "value":-0.0
        },{
            "text":"überwiegend",
            "value":-0.5
        },{
            "text":"ein wenig",
            "value":-1.0
        },{
            "text":"gar nicht",
            "value":-1.5
        }]
}]
}
Key Description
questions Is an array with the questions
questionText The text from the single question
questionType There are two types of questions:

CONTROL: Is a question how good is the user controlling his money

RISK: Is a question how risky is a user

answers Is an array whit the different answers
text The text from a answer
value The weighting of an answer. This value can be positiv oder negative.

Result of the questionnaire 
The result can be taken 4 different string values:

result
SECURE The safety one user
CONTROLLED The carefully controlled user
RISKY The risky user
FOCUSED The stable focused user

Customize with themes

The theme defines main colors, font sizes and other visual gimmicks used by the plugin’s user interface. You may specify your own theme during plugin initialization.

By default the theme used is the dser-theme. It specifies:

• the main text color
• the main font
• text color, background color, hover color and border color for buttons
• text color and background color of the dialog components

You can override those rules by creating your own theme. Simply define your CSS rules, give your theme a name and bind it to the plugin. Make sure to use the respective CSS classes correctly.