Anforderungen
Vollständiges Beispiel
API Dokumentation

Anforderungen

Um diese Komponente nutzen zu können, benötigen Sie folgende Drittanbieter-Sammlungen:

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

Vollständiges Beispiel

<!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-public.niiio.me/public/common/default-theme.css" rel="stylesheet">
    <link href="https://api-public.niiio.me/public/riskprofiling/risk-profiling.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div id="riskProfilingContainer" class="dser-theme">
        </div>
    </div>

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

API Dokumentation

Initialisieren

Bitte geben Sie Ihren Benutzerdefinierten API-Schlüssel bei der Initialisierung an damit das Plug-In funktioniert.

$(<Selector>).riskProfiling(config)

Erforderliche Konfigurationsoptionen

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

Erweiterte und optionale Konfigurationsmöglichkeiten

Key Description Default
baseUrl URL to host https://api-public.niiio.me
questionUrl URL to the questionnaire /riskprofiling/questions
templateUrl URL to the questionnaire-mustache-template /public/riskprofiling/template
infoDialogTemplateUrl URL to the info dialog mustache template /public/mustache/riskprofiling/RiskProfilingInfoTemplate.mustache
calculationUrl URL to the result-calculation-service /riskprofiling/calculate
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
buttonIcons The Array of icons for the answer Buttons [{
icon: "icon-riskprofiling-none",
value: 0
},{
icon: "icon-riskprofiling-low",
value: 0.5
},{
icon: "icon-riskprofiling-medium",
value: 1
},{
icon: "icon-riskprofiling-strong",
value: 1.5
}]
crosshairsPositions The Array for the final relative crosshairs positions [
{
key: "center",
x: 50,
y: 50
},
{
key: "secure",
x: 20,
y: 20
},{
key: "controlled",
x: 80,
y: 20
},{
key: "focused",
x: 20,
y: 80
},{
key: "risky",
x: 80,
y: 80
}]

Erstellen Sie einen Fragebogen

//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)

Objekt Struktur

JSON Beispiel

{
    "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.

Ergebnis des Fragebogens

Das Ergebnis kann 4 verschiendenen String-Werten entnommen werden:

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

Anpassung mit Themes

Das Theme definiert die wichtigsten Farben, Schriftgrößen und andere visuelle Gimmicks, die von der Benutzeroberfläche des Plugins verwendet werden. Sie können Ihr eigenes Theme im Plugin-Initialisierung angeben.

Standardmäßig wird das DSER-Theme verwendet. Es beinhaltet:
• die Haupttextfarbe
• die Hauptschriftart
• Textfarbe, Hintergrundfarbe, Hover-Farbe und Randfarben der Bedienflächen
• Textfarbe und Hintergrundfarbe des Dialogteils

Sie können diese Regeln des Themes überschreiben, indem Sie ein eigenes Theme erstellen. Definieren Sie einfach Ihre CSS-Regeln, Geben Sie Ihrem Theme einen Namen und verbinden Sie es mit dem Plugin. Stellen Sie sicher, die entsprechenden CSS-Klassen richtig zu verwenden.

Integration

Sie benötigen zusätzliche Skripte und Stylesheets, um die Komponente verwenden zu können:
• Die App-spezifischen CSS-Regeln wird das Standard-Theme erhalten.
• Die App-spezifischen Skript-Dateien, um das PlugIn zum laufen zu bekommen.

Fügen Sie die Stylesheets in Ihre Seite ein

Kopieren Sie diesen Block in den HTML-Head Ihrer Webseite. Es ist für das korrekte Darstellen dieser Komponente erforderlich.

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

Diese Komponente basiert auf dem Bootstrap Markup und deren Klassen Definition. Sie benötigen die erste Zeile nicht, im Falle dass Sie das Bootstrap Stylesheet bereits implementiert haben. Gehen Sie nur Sicher das diese Komponente nach der Importierung von Bootstrap eingesetzt wird.

Erstellen eines Containers

Erstellen Sie einen <div> Container für diese Komponente in dem <body> Bereich. Sie können unser Standard CSS-Style verwenden, indem Sie die Klasse „dser-theme“ für den Container nutzen.

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

Fügen Sie erforderliche Skriptdateien in Ihrer Seite ein

Es existieren 2 Wege um die Skriptdateien einzufügen:

Option 1: Asynchrones Laden der erforderlichen Dateien mit RequireJS

• Vorteil: Sie brauchen nur wenige Dateien implementieren, alle benötigten Skripte werden asynchron von RequireJS bezogen.
• Nachteil: Wenn Sie bereits über eine Skriptdatei verfügen, die eine anonyme AMD definiert, funktioniert diese Option leider nicht für Sie.

Implementieren der erforderlichen JavaSkript-Dateien

Laden Sie die Plugin-Skripts, indem Sie folgenden Block an das Ende des Bodys einfügen:

<script type="text/javascript" src="https://api-public.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/require.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein:

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

Option 2: Regelmäßiges Laden von Skript-Dateien, ohne RequireJS

• Vorteil: Diese Methode funktioniert auf den meisten Webseiten.
• Nachteil: Sie werden mehr Skripte einbinden müssen.

Einfügen der erforderlichen JavaSkript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/backbone/backbone-min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.ba-hashchange.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/google_analytics/GoogleAnalyticsService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/riskprofiling/jquery.risk-profiling.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/riskprofiling/js/RiskProfilingService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/riskprofiling/js/RiskProfilingMustacheService.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein:

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

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen