Answer Pad based Setups (#21, #22 & #23)
For these questions, a single select grid will be used and for global Exclusive, a checkbox question should be implemented which will capture the data as 1 in case the question is opted out. Below code will be used to implement these questions.
<radio
label="mxAnswerpadBasic"
fir="off"
optional="1"
randomize="0">
<title>Please rate the following car brands:</title>
<comment>Click to rank<div class="ketool-stage" id="ketool-stage-${this.label}"></div></comment>
<col label="c1">1</col>
<col label="c2">2</col>
<col label="c3">3</col>
<col label="c4">4</col>
<col label="c5">5</col>
<col label="c99">Don't know{@exclusive::true||width::120px@}</col>
<row label="r1">BMW</row>
<row label="r2">Mercedes</row>
<row label="r3">Tesla</row>
<row label="r4">Lexus</row>
<style name="page.head"><![CDATA[
<style>
.answers{display:none;}
#btn_continue {display: none;}
</style>
]]></style>
<style name="question.after"><![CDATA[
<div class="ketool-stage" id ="ketool-stage-${this.label}" style="margin: 0 auto;"></div>
<script type="text/javascript" src="${KEDomain}/framework.min.js"></script>
<style> .ketool-stage {
padding-top: 2%;
}
</style>
<script type="text/javascript">
if (!ketool.qDefs)
ketool.qDefs = {};
if (!ketool.toolLoader)
ketool.toolLoader = new ketool.Loader({
"baseFileURL": "${KEDomain}/",
"scriptDeps": ["fancyboxlib.js"],
"cssDeps": ["style_framework.css", "libs_fancybox.css", "ionicons.min.css", "keBrown.css"],
coreFile: "core_app.js", messages: null, // "https://au.focusvision.com/survey/selfserve/560/221003/getMsg.htm",
"messages": null,
"platformInterface": { "js": "platform_app.js", "css": "platform_style.css" }
});
ketool.qDefs["${this.label}"] = ${jsexport()};
var isTest = "${gv.isUser() and not gv.debug.respview}" === "True";
var toolSettings = {
"toolJs": "${KEDomain}/ans_pad_app.js",
"toolName": "AnswerPad",
"jsToLoad": [],
"cssToLoad": ["${KEDomain}/style_ans_pad.css"],
"baseToolPath": "",
"container": "#ketool-stage-${this.label}",
"toolCssNames": ["test1"],
"scaleType": "LMR",// LMR, TEXT, SMILEY
"toolType": "STANDARD", //STANDARD(Content from Scale), CHECKS, STARS
"bipolar": false, // BIPOLAR MODE ONLY - not mobile compatible
"globalNAtext": "None of the above",
"globalExclusive": false, // Set to true for bipolar mode
"checkmarkColor": "#E6E6E6",
"rtlMode": false,
"autoNext": true,
"cardWidth": "95px", // this will shift the layout of the headers - custom CSS will be required!
"imageBaseURL": "${KEDomain}/",
"isMobile": false,
"globalLegend": true, // Set to false for mobile mode
"leftText": "Left Scale",
"middleText": "Middle Scale",
"rightText": "Right Scale",
"showCounter": true,
"countSuffix": "completed",
"completedText": "Please click 'Continue' to move on to the next page.",
"countDelimiter": "/",
"itemsPerPage": "2",
"splitPages": false,
"pages": [2,1,1], // Split pages i.e. [2, 1, 1] - 2 items on the first page, 1 on the second, 1 on the third.
"animationSpeed": "800",
"numDecimalsTimeData": "2",
"zoomImage": "${KEDomain}/mag9.png",
"showZoom": true,
"zoomPos":"bottom-right",//"bottom-right", "top-right", "bottom-left","top-left","no-zoom"
"lazyLoadLargeImg": false,
"qid": "${this.label}",
"time_qid": "${this.label}Time",
"order_qid": "${this.label}Order",
"exclusive_qid": "${this.label}Exclusive",
"customValidation": function(q){
console.log("customValidation()",q);
return true;
}
};
ketool.toolLoader.registerSettings(toolSettings, function(info){
console.log("Questions loaded");
console.log(info.bridge.exportQuestions());
console.log(info);
info.instance.setToolValidation(toolSettings.customValidation);
info.bridge.setPageValidation(function(){
console.log("setPageValidation");
return true;
});
info.instance.on("tool_loaded", function(e){
console.log("tool_loaded", e);
if(isTest){
${initKEToggleData()}
}
setTimeout(function() {
$ (window).resize();
}, 500);
});
info.instance.on("tool_resize", function(e){
console.log("tool_resize", e);
});
info.instance.on("scale_statechange", function(e){
console.log("scale_statechange", e);
});
info.instance.on("tool_error", function(e){
console.log("tool_error", e);
});
info.instance.on("exclusive_change", function(e){
console.log("exclusive_change", e);
});
});
//END USER EDITABLE CODE
$ (document).ready(function(){
ketool.toolLoader.initLoad();
});
</script>
]]></style>
</radio>
<text
label="mxAnswerpadBasicTime"
builderHint="{"rocochoName":"radiogrid"}"
fir="off">
<title>Store Time</title>
<row label="r1">BMW</row>
<row label="r2">Mercedes</row>
<row label="r3">Tesla</row>
<row label="r4">Lexus</row>
<style name="question.after"><![CDATA[
<script type='text/javascript'>
if (ketool.qDefs)
ketool.qDefs["${this.label}"] = ${jsexport()};
</script>
]]></style>
</text>
<text
label="mxAnswerpadBasicOrder"
builderHint="{"rocochoName":"radiogrid"}"
fir="off">
<title>Store Order</title>
<row label="r1">BMW</row>
<row label="r2">Mercedes</row>
<row label="r3">Tesla</row>
<row label="r4">Lexus</row>
<style name="question.after"><![CDATA[
<script type='text/javascript'>
if (ketool.qDefs)
ketool.qDefs["${this.label}"] = ${jsexport()};
</script>
]]></style>
</text>
<checkbox
label="mxAnswerpadBasicExclusive"
builderHint="{"rocochoName":"radiogrid"}"
fir="off"
optional="1">
<title>Exclusive Option for Bipolar</title>
<row label="r1">None of the above</row>
<style name="question.after"><![CDATA[
<script type='text/javascript'>
if (ketool.qDefs)
ketool.qDefs["${this.label}"] = ${jsexport()};
</script>
]]></style>
</checkbox>
<radio
label="mxAnswerpadBasicImages"
fir="off"
optional="1"
randomize="0">
<title>Please rate the following car brands:</title>
<comment>Click to rank<div class="ketool-stage" id="ketool-stage-${this.label}"></div></comment>
<col label="c1">1</col>
<col label="c2">2</col>
<col label="c3">3</col>
<col label="c4">4</col>
<col label="c5">5</col>
<col label="c99">Don't know{@exclusive::true||width::120px@}</col>
<row label="r1">BMW{@imageURL::https://au.focusvision.com/survey/selfserve/560/221003/BMW.png@}</row>
<row label="r2">Mercedes{@imageURL::https://au.focusvision.com/survey/selfserve/560/221003/Mercedes.png@}</row>
<row label="r3">TATA Motors{@imageURL::https://au.focusvision.com/survey/selfserve/560/221003/Tata.png@}</row>
<row label="r4">Mahindra{@imageURL::https://au.focusvision.com/survey/selfserve/560/221003/Mahindra.png@}</row>
<style name="page.head"><![CDATA[
<style>
.answers{display:none;}
#btn_continue {display: none;}
</style>
]]></style>
<style name="question.after"><![CDATA[
<div class="ketool-stage" id ="ketool-stage-${this.label}" style="margin: 0 auto;"></div>
<script type="text/javascript" src="${KEDomain}/framework.min.js"></script>
<style> .ketool-stage {
padding-top: 2%;
}
</style>
<script type="text/javascript">
if (!ketool.qDefs)
ketool.qDefs = {};
if (!ketool.toolLoader)
ketool.toolLoader = new ketool.Loader({
"baseFileURL": "${KEDomain}/",
"scriptDeps": ["fancyboxlib.js"],
"cssDeps": ["style_framework.css", "libs_fancybox.css", "ionicons.min.css", "keBrown.css"],
coreFile: "core_app.js", messages: null, // "https://au.focusvision.com/survey/selfserve/560/221003/getMsg.htm",
"messages": null,
"platformInterface": { "js": "platform_app.js", "css": "platform_style.css" }
});
ketool.qDefs["${this.label}"] = ${jsexport()};
var isTest = "${gv.isUser() and not gv.debug.respview}" === "True";
var toolSettings = {
"toolJs": "${KEDomain}/ans_pad_app.js",
"toolName": "AnswerPad",
"jsToLoad": [],
"cssToLoad": ["${KEDomain}/style_ans_pad.css"],
"baseToolPath": "",
"container": "#ketool-stage-${this.label}",
"toolCssNames": ["test1"],
"scaleType": "LMR",// LMR, TEXT, SMILEY
"toolType": "STANDARD", //STANDARD(Content from Scale), CHECKS, STARS
"bipolar": false, // BIPOLAR MODE ONLY - not mobile compatible
"globalNAtext": "None of the above",
"globalExclusive": false, // Set to true for bipolar mode
"checkmarkColor": "#E6E6E6",
"rtlMode": false,
"autoNext": true,
"cardWidth": "95px", // this will shift the layout of the headers - custom CSS will be required!
"imageBaseURL": "${KEDomain}/",
"isMobile": false,
"globalLegend": true, // Set to false for mobile mode
"leftText": "Left Scale",
"middleText": "Middle Scale",
"rightText": "Right Scale",
"showCounter": true,
"countSuffix": "completed",
"completedText": "Please click 'Continue' to move on to the next page.",
"countDelimiter": "/",
"itemsPerPage": "2",
"splitPages": false,
"pages": [2,1,1], // Split pages i.e. [2, 1, 1] - 2 items on the first page, 1 on the second, 1 on the third.
"animationSpeed": "800",
"numDecimalsTimeData": "2",
"zoomImage": "${KEDomain}/mag9.png",
"showZoom": true,
"zoomPos":"bottom-right",//"bottom-right", "top-right", "bottom-left","top-left","no-zoom"
"lazyLoadLargeImg": false,
"qid": "${this.label}",
"time_qid": "${this.label}Time",
"order_qid": "${this.label}Order",
"exclusive_qid": "${this.label}Exclusive",
"customValidation": function(q){
console.log("customValidation()",q);
return true;
}
};
ketool.toolLoader.registerSettings(toolSettings, function(info){
console.log("Questions loaded");
console.log(info.bridge.exportQuestions());
console.log(info);
info.instance.setToolValidation(toolSettings.customValidation);
info.bridge.setPageValidation(function(){
console.log("setPageValidation");
return true;
});
info.instance.on("tool_loaded", function(e){
console.log("tool_loaded", e);
if(isTest){
${initKEToggleData()}
}
setTimeout(function() {
$ (window).resize();
}, 500);
});
info.instance.on("tool_resize", function(e){
console.log("tool_resize", e);
});
info.instance.on("scale_statechange", function(e){
console.log("scale_statechange", e);
});
info.instance.on("tool_error", function(e){
console.log("tool_error", e);
});
info.instance.on("exclusive_change", function(e){
console.log("exclusive_change", e);
});
});
//END USER EDITABLE CODE
$ (document).ready(function(){
ketool.toolLoader.initLoad();
});
</script>
]]></style>
</radio>
<text
label="mxAnswerpadBasicImagesTime"
builderHint="{"rocochoName":"radiogrid"}"
fir="off">
<title>Store Time</title>
<row label="r1">BMW</row>
<row label="r2">Mercedes</row>
<row label="r3">Tesla</row>
<row label="r4">Lexus</row>
<style name="question.after"><![CDATA[
<script type='text/javascript'>
if (ketool.qDefs)
ketool.qDefs["${this.label}"] = ${jsexport()};
</script>
]]></style>
</text>
<text
label="mxAnswerpadBasicImagesOrder"
builderHint="{"rocochoName":"radiogrid"}"
fir="off">
<title>Store Order</title>
<row label="r1">BMW</row>
<row label="r2">Mercedes</row>
<row label="r3">Tesla</row>
<row label="r4">Lexus</row>
<style name="question.after"><![CDATA[
<script type='text/javascript'>
if (ketool.qDefs)
ketool.qDefs["${this.label}"] = ${jsexport()};
</script>
]]></style>
</text>
<checkbox
label="mxAnswerpadBasicImagesExclusive"
builderHint="{"rocochoName":"radiogrid"}"
fir="off"
optional="1">
<title>Exclusive Option for Bipolar</title>
<row label="r1">None of the above</row>
<style name="question.after"><![CDATA[
<script type='text/javascript'>
if (ketool.qDefs)
ketool.qDefs["${this.label}"] = ${jsexport()};
</script>
]]></style>
</checkbox>
<define label="p5" builder:title="Collapsible OT List" builderHint="{"unlinked":[]}">
<row label="p5r2" groups="p5g1">Random Digit (RDD) Landline Telephone Numbers</row>
<row label="p5r3" groups="p5g1">Listed Landline Telephone Numbers</row>
<row label="p5r4" groups="p5g1">Mobile (Cell) Phone Numbers</row>
<row label="p5r14" groups="p5g1">Consumer Telephone Access Panel Samples</row>
<row label="p5r15" groups="p5g1">Consumer Online Access Panel Samples</row>
<row label="p5r16" groups="p5g1">Consumer Online (Non-Panel) Samples</row>
<row label="p5r17" groups="p5g1">Consumer Mail Panel Samples</row>
<row label="p5r18" groups="p5g1">Residential Addresses</row>
<row label="p5r19" groups="p5g1">Business Addresses</row>
<row label="p5r20" groups="p5g1">Business (B-To-B) Telephone Numbers</row>
<row label="p5r21" groups="p5g1">Business (B-To-B) Online Access Panel Samples</row>
<row label="p5r22" groups="p5g1">Healthcare Samples (Professionals)</row>
<row label="p5r5" groups="p5g2">Telephone Fieldwork</row>
<row label="p5r6" groups="p5g2">Face-To-Face Fieldwork</row>
<row label="p5r24" groups="p5g2">Social Media Data Collection (Webmining)</row>
<row label="p5r25" groups="p5g2">Online Focus Group Moderation</row>
<row label="p5r7" groups="p5g3">Cati Programming</row>
<row label="p5r23" groups="p5g3">Capi Programming</row>
<row label="p5r26" groups="p5g3">Cawi Programming</row>
<row label="p5r28" groups="p5g3">Access to DIY Programming</row>
<row label="p5r8" groups="p5g4">Translation</row>
<row label="p5r9" groups="p5g4">Coding</row>
<row label="p5r10" groups="p5g4">Dp/Tabulation Services</row>
<row label="p5r1" groups="p5g4" randomize="0">None translation, coding and analysis services {@groupExclusive::true@}</row>
<row label="p5r11" groups="p5g5">Panel Recruitment to 3rd Party Panels</row>
<row label="p5r12" groups="p5g5">Online Community Set Up and Management</row>
<row label="p5r29" groups="p5g5">Statistical Analysis Services</row>
<row label="p5r30" groups="p5g5">Executive Analysis/Reporting</row>
<row label="p5r32" groups="p5g5" open="1" openOptional="1" openSize="25" randomize="0">Other (Please specify)</row>
<row label="p5r31" groups="p5g1">None of the above{@globalExclusive::true@}</row>
<group label="p5g1" builder:axis="row" builder:default="1">Sampling</group>
<group label="p5g2" builder:axis="row">Fieldwork</group>
<group label="p5g3" builder:axis="row">Survey Programming</group>
<group label="p5g4" builder:axis="row">Translation, coding &amp; analysis</group>
<group label="p5g5" builder:axis="row">Panel recruitment</group></define>
<number
label="collapsibleOTL"
shuffle="rows"
size="25">
<title>Please select the amount you spent on each service below in the past year:</title>
<comment>Please click on any heading to see a more detailed list. (In this example the other specify is optional.) </comment>
<validate>
cnt = 0
for eachRow in this.rows:
if eachRow.ival gt 0:
cnt = cnt +1
if cnt lt 1:
error("Please choose at least 1")
</validate>
<insert source="p5"/>
<group label="g1" builder:axis="row" builder:default="1" where="none">no group</group>
<style name="page.head"><![CDATA[
<style>.answers{display:none;}#btn_continue{visibility:hidden;}</style>
]]></style>
<style name="question.after"><![CDATA[
<div class="ketool-stage" id="ketool-stage-${this.label}"></div>
<script type="text/javascript" src="${KEDomain}/framework.min.js"></script>
<script type="text/javascript">
if (!ketool.qDefs)
ketool.qDefs = {};
if (!ketool.toolLoader)
ketool.toolLoader = new ketool.Loader({
"baseFileURL": "${KEDomain}/",
"scriptDeps": ["fancyboxlib.js"],
"cssDeps": ["style_framework.css", "libs_fancybox.css", "ionicons.min.css", "keBrown.css"],
"coreFile": "core_app.js",
"messages": null,
"platformInterface": { "js": "platform_app.js", "css": "platform_style.css" }
});
ketool.qDefs["${this.label}"] = ${jsexport()};
var isTest = "${gv.isUser() and not gv.debug.respview}" === "True";
//SETTINGS AND STUFF GOES HERE
var toolSettings = {
"toolJs": "collapsible_app.js",
"toolName": "Collapsible",
"jsToLoad": [
],
"cssToLoad": [
"style_collapsible.css"
],
"baseToolPath": "${KEDomain}/",
"container": "#ketool-stage-${this.label}",
"qid": "${this.label}",
"time_qid": "${this.label}_Time",
"order_qid": "${this.label}_Order",
"imageBaseURL": "${KEDomain}/",
"minRequired": "1",
"maxAllowed": "5",
"showControls": true,
"numDecimalsTimeData": "2",
"expandButtonImage": "${KEDomain}/expand_2_4.png",
"collapseButtonImage": "${KEDomain}/collapse_2_3.png",
"scrollButtonImage": "${KEDomain}/go_up.png",
"resetButtonImage": "${KEDomain}/reset.png",
"resetButtonText": "",
"zoomButtonImage": "${KEDomain}/mag9.png",
"headerExpandImage": "${KEDomain}/chevron-down-grey.png",
"expandOnLoad": true,
"answerOptionShape": "circle",
"isRanking": false,
"forceCardMode": false,
"matchHeightByRow":true,
"keepOtherAnswers":false,
"showProgressBar": false,
"maxAllowedError": "<*ketoola*>",
"saveOtherOnDeselect": false,
"minOtherCharacter":0,
"minOtherCharacter":1,
"customValidation": function(q){
console.log("customValidation()");
return true;
},
"answerItemConfig": {
"width": "100%",
"numItemsPerRow": { "small": 1, "medium": 1, "large": 1 }
}
};
ketool.toolLoader.registerSettings(toolSettings, function(info){
//console.log("Questions loaded",info);
info.instance.setToolValidation(toolSettings.customValidation);
info.bridge.setPageValidation(function(){
console.log("setPageValidation");
return true;
});
info.instance.on("tool_loaded", function(e){
//console.log("tool_loaded", e);
if(isTest){
${initKEToggleData()}
}
});
info.instance.on("tool_resize", function(e){
//console.log("tool_resize", e);
});
info.instance.on("tool_error", function(e){
//console.log("tool_error", e);
});
info.instance.on("group_expanded", function(e){
//console.log("group_expanded", e);
});
info.instance.on("group_collapsed", function(e){
//console.log("group_collapsed", e);
});
info.instance.on("item_statechange", function(e){
//console.log("item_statechange", e);
});
info.instance.on("exclusive_change", function(e){
//console.log("exclusive_change", e);
});
});
//END USER EDITABLE CODE
$ (document).ready(function(){
ketool.toolLoader.initLoad();
/*********fix for IE 9*************/
$ ('.instruction-text:gt(0)').hide();
$ ('.question-text:gt(0)').hide();
});
</script>
]]></style>
</number>
<float
label="collapsibleOTL_Time"
shuffle="rows,groups"
shuffleBy="collapsibleOTL"
translateable="0">
<title>Data node for time data. collapsibleMulti_Time.</title>
<comment>Please select one.</comment>
<insert source="p5"/>
<group label="g1" builder:axis="row" builder:default="1" where="none">no group</group>
<style name="question.after"><![CDATA[
<script type='text/javascript'>
if (ketool.qDefs)
ketool.qDefs["${this.label}"] = ${jsexport()};
</script>
]]></style>
</float>
<number
label="collapsibleOTL_Order"
shuffle="rows,groups"
shuffleBy="collapsibleOTL"
size="2"
translateable="0">
<title>Data node for time data. collapsibleMulti_Order.</title>
<comment>Please select one.</comment>
<insert source="p5"/>
<group label="g1" builder:axis="row" builder:default="1" where="none">no group</group>
<style name="question.after"><![CDATA[
<script type='text/javascript'>
if (ketool.qDefs)
ketool.qDefs["${this.label}"] = ${jsexport()};
</script>
]]></style>
</number>
General Instructions for all ketool setups
For all ketool setup, please implement the below
<exec when="init">
KEDomain = "https://au.focusvision.com/survey/selfserve/560/221003"
project_id = gv.survey.path
def initKEToggleData():
returntext = "\n var dataToggler = jQuery('<div>For testing only - click here to expand data capturing nodes to verify the data capture during test mode.</div>');\n"
returntext += "dataToggler.addClass('dataToggle');\n"
returntext += "dataToggler.css({'text-decoration': 'underline','font-size': 'small','color': 'blue','cursor': 'pointer','margin-top': '20px'});\n"
returntext += "jQuery('.ketool-stage').last().after(dataToggler);\n"
returntext += "dataToggler.click(info.bridge.toggleDataNodes());\n"
return returntext
def initkelegacyDataToggle():
if gv.isUser() and not gv.debug.respview:
output = "<script>\n"
output += "var dataToggler = jQuery('<div>Please click here to see the data nodes for this tool.</div>');\n"
output += "dataToggler.addClass('dataToggle');\n"
output += "dataToggler.css({'text-decoration': 'underline','font-size': 'small','color': 'blue','cursor': 'pointer','margin-top': '20px'});\n"
output += "dataToggler.click(kelegacyDataToggle);\n"
output += "function kelegacyDataToggle(){ if(jQuery('.survey-page').hasClass('showkelegacyData')) jQuery('.survey-page').removeClass('showkelegacyData'); else jQuery('.survey-page').addClass('showkelegacyData'); }\n"
output += "jQuery(function(){jQuery ('.survey-buttons').before(dataToggler); })\n"
output += "</script>\n"
output += "<style>.showkelegacyData .answers,.showkelegacyData .question{display: block !important;visibility: visible !important;}</style>\n"
return output
else:
return ""
</exec>
We also have few general options in all ketool setups with function “initKEToggleData” is being called, which should not be changed, these are:
- toolJs: This option contains the name of js file for respective tool
- toolName: This option contains the name of tool
- jsToLoad: This option contains the name(s) of additional js file(s) to load for respective tool
- cssToLoad: This option contains the name(s) of css file for respective tool
- baseToolPath: This option stores the path where any of the above files are stored
- container: This contains the id for calling the div where the tool is rendered
- qid: This stores the current question label to refer
These options are optional and should only be implemented if needed:
- time_qid: This option stores the question label where the time spent on each option (in case it is needed) is stored
- order_qid: This option stores the question label where the order in which an option is answered is stored
- numDecimalsTimeData: This stores the decimal places for the data stored in time spent question
- customValidation: Can be used to specify any custom validation using js
- answerItemConfig: Have the below values which can be used to determine the appearance of the question:
- width: This option stores the width occupied by the question
- numItemsPerRow: Has 3 options below based on screen sizes:
- small: Here we can specify the number if items shown in a row (i.e. horizontally) on small screens (such as few tablets and all phones)
- medium: Here we can specify the number if items shown in a row (i.e. horizontally) on medium screens (such as few tablets and some laptops/desktops with small screen size/resolution)
- large: Here we can specify the number if items shown in a row (i.e. horizontally) on large screens (such as laptops/desktops with large screen size/resolution)
- imageBaseURL: This stores the path for all the images used in the setup (so images can just be called by their name if this is specified
For any follow-up question (including “_time”, “_order” questions) should include the below code:
<exec when="init">
<style name="question.after"><![CDATA[
<script type='text/javascript'>if (ketool.qDefs) ketool.qDefs["${this.label}"] = ${jsexport()};</script>
]]></style>
Answer Pad based Setups (#21, #22 & #23)
Below are the tool settings, row options and scale/column options for Answer Pad questions.
| Tool Settings | Use | Value Type / Syntax | Default Value / Possible Values |
|---|---|---|---|
| scaleType | Parameter to select the type of column - LMR, SMILEY, TEXT | Fixed string | Default value: LMR
Possible values: ["LMR","SMILEY",”TEXT”] |
| toolType | Parameter to select the scale type - STANDARD, STARS, CHECKS | Fixed string | Default value: STANDARD
Possible values: ["STANDARD","STARS",”CHECKS”] |
| bipolar | Boolean for triggering bipolar mode | boolean | false |
| showZoom | Zoom-in buttons appear if true. | boolean | false |
| globalNAtext | Text for global exclusive button - i.e. None of the Above | string |
|
| checkmarkColor | Color for checkmark | String (for color in hex code) | 160 |
| isMobile | Boolean to trigger mobile mode | boolean | False |
| leftText | Left column text - used in LMR mode | String |
|
| middleText | Middle column text - used in LMR mode | String |
|
| rightText | Right column text - used in LMR mode | String |
|
| showCounter | Boolean to show/hide counter | boolean | True |
| globalLegend | Boolean to show a global legend or set false to repeat for every row | boolean | False |
| globalExclusive | Triggers global exclusive button for the overall tool | string | False |
| countSuffix | Text to use in the counter section | String |
|
| completedText | Text to display when finished ranking - used when autoNext is false | string |
|
| countDelimiter | Used for separating the count numbers | string | / |
| cardWidth | Width of row label cards - use px | String (for width in px) | 60px |
| showZoom | Boolean to show zoom button on images | Boolean | false |
| zoomImage | Url to zoom button | string | Path already specified; no change needed here |
| zoomPosition | Position of the zoom button | Fixed string | Default value: bottom-right
Possible values: ["bottom-right","top-right","bottom-left","top-left"] |
| itemsPerPage | Set the number of items you want show per page | number > 0 | 2 |
| splitPages | Boolean to trigger split pages | Boolean | true |
| pages | Array that stores how the pages should be split. i.e. [1,2,1] | array |
|
| autoNext | Question should automatically continue when ranking is finished | Boolean | true |
| numDecimalsTimeData | Controls decimal places for storing time data | number > 0 | 2 |
| animationSpeed | Speed of all animations in the tool - ms | number > 0 |
|
| rtlMode | Triggers right to left mode | Boolean | false |
| lazyLoadLargeImg | Boolean to load large images before loading the tool | Boolean | true |
| exclusive_qid | Question ID for the global exclusive button | String |
|
| Row Options | Use | Value Type / Syntax | Possible Values |
|---|---|---|---|
| imageURL | Image for row option | string | Image file URL |
| rightImageURL | Image to place on right side of screen - used for bipolar mode. | string | Image file URL |
| rightImageText | Text for right image - used for bipolar mode | string |
|
| globalExclusive | Determines wether or not global exclusive button should be present | boolean |
|
| Scale/column Options | Use | Value Type / Syntax | Possible Values |
|---|---|---|---|
| exclusive | Used to determine which column should be used as exclusive for that row | boolean |
|
| width | Set the width of columns | String | Width in px, rem, em or % |
| height | Set the height of columns | String | height in px, rem, em or % |
| imageURL | Url for column image - used for smiley or custom images | String |
|