• JQuery
• Mustache
• jquery.Mustache
• jquery.hashchange
• Bootstrap CSS
• Backbone.js
• JQuery
• Mustache
• jquery.Mustache
• jquery.hashchange
• Bootstrap CSS
• Backbone.js
<!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>
Please provide your custom API token on initialization, otherwise the plugin won’t work.
$(<Selector>).riskProfiling(config)
//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)
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 }] }] }
The result can be taken 4 different string values:
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.
You will need additional scripts and stylesheets to use the component:
• The default theme for the app (CSS) is included by default.
• The app-specific scripts files to get the plugin up and running.
Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.
<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">
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.
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>
There are 2 ways to include the plugin into 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.
Load the plugin scripts by adding this block at the end of the BODY section.
<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>
Add this block right after the included script files:
<script> require(['riskProfiling'], function () { $("#riskProfilingContainer").riskProfiling({ token: '<your-custom-api-token>' }).buildQuestionnaire(); }); </script>
• Advantage: This method will work on most pages.
• Disadvantage: You have to include a lot more scripts.
Load the plugin scripts by adding this block at the end of the BODY section.
<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>
Add this block right after the included script files:
<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.