For this question, a float question will be implemented and the below code will be placed into it. In case it is ranking question, the “_order” question should also be implemented.

  <float 
   label="ketoolSliderRankingNum"
   fir="off"
   optional="0"
   randomize="0"
   range="0,999"
   size="5">
    <title>How would you rate these banks?</title>
    <comment>You can drag each Banks and drop it into the number rating of your choice.</comment>
    <row label="r1">ICICI Bank</row>
    <row label="r2">HDFC Bank</row>
    <row label="r3">Bank of Baroda</row>
    <row label="r4">State Bank of India</row>
    <row label="r5">Axis Bank</row>
    <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}" style="margin-top: -30px;"></div>

    <script type="text/javascript" crossorigin="anonymous" 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",
                "Slider_libs.js",                
              "jquery-ui.min.js",
              "jquery.ui.touch-punch.min.js",     
              "Carousel_libs.js",
              "Carousel.js"
            ],
            "cssDeps": [
                "ionicons.min.css",
                "libs_fancybox.css",
                "Slider_libs.css",
              
                "style_framework.css",  
                "Carousel_libs.css",              
                "Carousel.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 = {
        //standard tool params
        "toolJs": "slider_rank.js",
        "toolName": "SliderBasedRankingApp",
        "jsToLoad": [],
        "cssToLoad": ["slider_rank.css"],
        "baseToolPath": "${KEDomain}/",
        "container": "#ketool-stage-" + getFormName(1),        
        "toolCssNames": [],
        "qid": "${this.label}",
        "time_qid": "${this.label}_Time",
        "order_qid": "${this.label}_Order",        
        "imageBaseURL": "${KEDomain}/",
        "minRequired": ${len(this.rows)},
        "maxAllowed": ${len(this.rows)},
        "numDecimalsTimeData": 2,
        //end standard tool params    
        "leftContent": "Not at all important",
        "midContent": "Fairly Important",
        "rightContent": "Very important",
        "snapping": false,
        "rtlMode": false,
        "scalePrefix": "",
        "scaleSuffix": "",
        "numDecimals": 1,      
        "showTicks": true,
        "showTickLabels": true,
        "showMidTicks": false,
        "showGrabberValue": false,
        "stickyGrabberValue": true,
        "disabled": false,
        "badValueError": "<*vre*>",
        "respectDistance": true, // If set to true, the distance between scales will be relative to the difference between the scale values. Otherwise, distance will just be equal. 
        "nonGridSetting": {
            min: 0,
            max: 10,
            increment: 0.1,
            exclusives: [{
              precode: 999,
              content: "Don't know",
              width: "100%",
              height: "40px"
            }],
        },
        "cardLayout": "carousel",
        "carouselSettings": {                
            "numCardsCarousel": 1,
            "animationSpeed": 300,
            "itemMargin": 30
        },
        "answerItemConfig": {
          "width": 150,
          "height": 90,
          "droppedWidth": 100,
          "droppedHeight": 90
        },        
        "resetSettings": {        
            content: "",
            width: "110px",
            height: "50px",
            icon: "${KEDomain}/reset_slider.svg"    
        },     
        "noUiSliderParams": {},
        "showProgressBar": false,        
        "showZoom": true,
        "zoomButtonImage": "${KEDomain}/mag9.png",
        "zoomPosition": "bottom-right",
        "sliderDropAreaHeight": 350,
        "isRanking": false,
        "duplicateError": "Please make sure you don't have any duplicate rating.",
        "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()}
            }
          });
      });
      //END USER EDITABLE CODE
      
      $ (document).ready(function(){       
        ketool.toolLoader.initLoad();

        
    });
    </script>

    <style>
      /* --- Override default Decipher styles --- */

.ketool-container .openbox-container textarea {min-width: auto !important;}
.ketool-sliderapp-horizontal.ketool-sliderapp-sbr .ketool-sliderapp-reset-holder .ketool-sliderapp-reset-button .ketool-btn-label>div {width: 100%;position: relative;top: calc(50% - 15px);}

      /* --- End Override default Decipher styles --- */
    </style>
]]></style>
  </float>

  <float 
   label="ketoolSliderRankingNum_Time"
   fir="off"
   translateable="0">
    <title>Data node for time data. ketoolSliderRankingNum_Time.</title>
    <row label="r1">ICICI Bank{@imageURL::bank_1.png||largeImageURL::bank_1_L.png||width::130px||height::170px@}</row>
    <row label="r2">HDFC Bank{@imageURL::bank_2.png||largeImageURL::bank_2_L.png||width::130px||height::170px@}</row>
    <row label="r3">Bank of Baroda{@imageURL::bank_3.png||largeImageURL::bank_3_L.png||width::130px||height::170px@}</row>
    <row label="r4">State Bank of India{@imageURL::bank_4.png||largeImageURL::bank_4_L.png||width::130px||height::170px@}</row>
    <row label="r5">Axis Bank{@imageURL::bank_5.png||largeImageURL::bank_5_L.png||width::130px||height::170px@}</row>
    <style name="question.after"><![CDATA[
<script>
        if (!ketool.qDefs)
            ketool.qDefs = {};

        ketool.qDefs["${this.label}"] = ${jsexport()};        
    </script>
]]></style>
  </float>

  <float 
   label="ketoolSliderRankingNum_Order"
   fir="off"
   translateable="0">
    <title>Data node for order data. ketoolSliderRankingNum_Time.</title>
    <row label="r1">ICICI Bank{@imageURL::bank_1.png||largeImageURL::bank_1_L.png||width::130px||height::170px@}</row>
    <row label="r2">HDFC Bank{@imageURL::bank_2.png||largeImageURL::bank_2_L.png||width::130px||height::170px@}</row>
    <row label="r3">Bank of Baroda{@imageURL::bank_3.png||largeImageURL::bank_3_L.png||width::130px||height::170px@}</row>
    <row label="r4">State Bank of India{@imageURL::bank_4.png||largeImageURL::bank_4_L.png||width::130px||height::170px@}</row>
    <row label="r5">Axis Bank{@imageURL::bank_5.png||largeImageURL::bank_5_L.png||width::130px||height::170px@}</row>
    <style name="question.after"><![CDATA[
<script>
        if (!ketool.qDefs)
            ketool.qDefs = {};

        ketool.qDefs["${this.label}"] = ${jsexport()};
    </script>
]]></style>
  </float>