Numeric: Numeric Rank - Click to Rank

This article will help you create a Numeric Rank / Click to Rank exercise

Numeric Rank/Click to Rank Functionality

This code will allow you to convert a Numeric question type into a "Click to Rank" exercise. 

Click here to see an example

Instructions

1. Add a Numeric question type to your survey with all of the appropriate 
   1. See article: Add a Question: Numeric Fields
2. Add the code below to your 'ADD JAVASCRIPT'
   1. See article: Adding JavaScript and/or CSS to a Question
      

      jQuery(".cm-numeric-input").not(".cm-exclusiveResponse").addClass("inputButton");
      jQuery(".cm-numeric-input").prop("readonly", true);
      var minRank = jQuery("input[type=number]").attr("min");
      var maxRank = jQuery("input[type=number]").attr("max");
      var array = [];
      for (var i = parseInt(minRank); i <= parseInt(maxRank); i++) {
          array.push(i);
      };
      
      
      jQuery(".inputButton").each(function() {
          jQuery(this).click(function() {
              jQuery(".cm-exclusiveResponse").prop("checked", false)
              if (!jQuery(this).val() && array.length) {
                  jQuery(this).val(Math.min.apply(Math, array));
                  var minIndex = array.indexOf(Math.min.apply(Math, array));
                  if (minIndex != -1) {
                      array.splice(minIndex, 1);
                  }
              } else {
                  var rankUsed = parseInt(jQuery(this).val());
                  jQuery(this).val('');
                  if (!isNaN(rankUsed)) {
                      array.push(rankUsed);
                  }
              }
          });
      });
      
      
      jQuery(".cm-exclusiveResponse").change(function() {
          if (jQuery(this).prop("checked")) {
              console.log("DK")
              array = [];
              for (var i = parseInt(minRank); i <= parseInt(maxRank); i++) {
                  array.push(i);
              };
      
      
          }
      })
      		

3. Add the code below to your 'ADD CSS' 
   
   1. See article: Adding JavaScript and/or CSS to a Question
      

      /* DEFAULT CLICK TO RANK OPTIONS */
      input[type=number].inputButton { 
      	background-color: #f8f8f8;
      	color: #222;
      	text-align: center;
      	font-weight: bold;
      	cursor: pointer;
      	border: 1px solid #bbb;
      	border-radius: 2px;
      	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.125);
      }
      
      /* HOVER CLICK TO RANK OPTIONS */
      input[type=number].inputButton:hover { 
      	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
      	color: #222;
      	background-color: #f8f8f8;
      	border: 1px solid #DDD;
      }
      
      /* LABEL WIDTH AND FORMATTING */
      .cm-response-direction-right .cm-numeric-label-container {
      	width: 80%; 
      	padding-left: .5em;
      	padding-bottom: .5em;
      }
      
      /* VERTICALLY ALIGN INPUT BOXES */
      .cm-response-direction-left .cm-numeric-input-container, .cm-response-direction-left .cm-numeric-label-container, .cm-response-direction-right .cm-numeric-input-container, .cm-response-direction-right .cm-numeric-label-container {
      	vertical-align: middle; 
      }
      
      /* BORDER COLOR AND SIZE BETWEEN ROWS */
      .cm-response-container {
      	padding-bottom: .1em;
      	padding-top: .6em;
      	margin-bottom: .1em;
       	margin-top: .6em;
        	border-radius: 0em;
      	border-top: 0px solid #ccc; /* BORDER COLOR AND SIZE BETWEEN ROWS */
      }
      
      /* INPUT WIDTHS */
      .cm-numeric-input-container {
      	width: auto !important;
      }
      .cm-numeric-input-container, .cm-sidetext-helper {
      	WIDTH: 4REM !IMPORTANT;
      }
      .cm-numeric-input-container input[type=number] {
      	WIDTH: 4REM !IMPORTANT;
      }
      		

4. You may have to modify your question settings based on your needs. See the 2 options below. 
   1. RANK ALL items on the screen
      • Go to the overall question settings
        • In the 'VALUE RANGE', update your min to be 1 and your max to be the maximum number of responses you have in your specific question
        • Turn ON the 'ONE OF EACH' toggle
        • Make sure the 'REQUIRE ALL RESPONSES' toggle is on
   2. RANK X of Y items on the screen
      • Go to the overall question settings
        • In the 'VALUE RANGE', update your min to be 1 and your max to be the maximum number of responses to be ranked on the screen in your specific question
        • Turn ON the 'ONE OF EACH' toggle
        • Make sure the 'REQUIRE ALL RESPONSES' toggle is OFF

• NOTE
  
  • This code works as is in both V1 and V2 themes
  • Other Specify options are taken into account here as well
  • If you go backwards while testing and try to reanswer the question, it will not work. In order to get around this, you should add a logic block before the question to clear the question so you can continue as you should.