Numeric: Numeric Rank - Sortable Drag and Drop

This article will help you create a Left to Right Sortable Drag and Drop exercise


Left to Right Sortable Drag and Drop

This code will allow you to convert a Numeric question type into a "Left to Right Sortable Drag and Drop" exercise. 

Click here to see an example


Instructions

  1. Add a Numeric question type to your survey with all of the appropriate responses
    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
    2. Make sure to update your question number in the code below. The placeholder is 'Q1'
      jQuery(document).on('click touchstart', '.cm-other-specify', function(e) {
        e.preventDefault();
        jQuery(this).focus();
      });
      
      
      jQuery("<hr><div style='display: flex'><div style='width:48%; padding-left:10px'>Drag the items from the box on the left to the right and place them in order of preference!</div><div style='width:48%; padding-left:10px'>Drag the items here and sort them in order of preference!</div>").insertBefore(jQuery(".cm-numeric.fieldset"));
      
      
      jQuery("<div class='dropContainer'><ul id='sortable'></ul><div></div>").appendTo(jQuery(".cm-numeric.fieldset"));
      
      
      jQuery('li').each(function(){
        jQuery(this).prepend("<div class='currentRank' style='padding-right: 20px; padding-top: 7px'></div>");
      });
      
      
      jQuery(".cm-numeric-input-container").css("display", "none");
      jQuery("#sortable").addClass("sortableResponseList");
      jQuery(".cm-numeric-response-set").addClass("sortableResponseList");
      
      
      jQuery(".cm-numeric-response-set, #sortable").sortable({
        connectWith: ".sortableResponseList"
      }).disableSelection();
      
      
      setTimeout(function() {
        var boxHeight = jQuery(".cm-numeric-response-set").css("height");
        jQuery(".cm-numeric-response-set").css("height", boxHeight);
        jQuery("#sortable").css("height", boxHeight);
      }, 200);
      
      
      /* --- UPDATE QUESTION REFERENCE HERE --- */
      var prevValues = "[[Q1]]";
      var arr = prevValues.split(" ");
      
      
      var i = 1;
      while (i <= Math.max.apply(null, arr)) {
        var temp = jQuery("input[type=number][value=" + i + "]").parents("li").detach();
        jQuery("#sortable").append(temp);
        i++;
      }
      
      
      jQuery("#sortable li").each(function(index) {
        jQuery(this).find('.currentRank').html(index + 1);
      });
      
      
      jQuery("#sortable").on("sortreceive", function(event, ui) {
        if (jQuery("#sortable li").size() > jQuery('input[type=number]').prop("max")) {
          jQuery("#sortable li:last").find('.currentRank').html("");
          jQuery(this).find("input[type='number']").val("");
          var itemToRemove = jQuery("#sortable li:last").detach();
          jQuery(".cm-numeric-response-set").append(itemToRemove);
        }
      });
      
      
      jQuery(".cm-numeric-response-set").on("sortreceive", function(event, ui) {
        jQuery(".cm-numeric-response-set li").each(function() {
          jQuery(this).find('.currentRank').html("");
          jQuery(this).find("input[type='number']").val("");
        });
        
      });
      
      
      jQuery("#sortable").on("sortupdate", function(event, ui) {
        jQuery("#sortable li").each(function(index) {
          jQuery(this).find('.currentRank').html(index + 1);
          jQuery(this).find("input[type='number']").val(index + 1);
        });
      });
      
      
      jQuery(".cm-numeric-response-set, #sortable").on( "sortstart", function( event, ui ) {
      	jQuery("img[data-zoom-hover-elem]").css("visibility", "hidden")
      });
      
      
      jQuery(".cm-numeric-response-set, #sortable").on( "sortstop", function( event, ui ) {
      	jQuery("img[data-zoom-hover-elem]").css("visibility", "visible");
      	jQuery("img[data-zoom-hover-elem]").css("display", "none")
      });
      jQuery(".cm-response-group").wrapAll("<div style='width: 100%;'/>");
      
      		
  3. Add the code below to your 'ADD CSS'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      /* --------- CUSTOM --------- */
      /* hide hr break and extra help text */
      hr,
      hr + div { display: none !important; }
      
      
      /* left column */
      .cm-numeric-response-set--first-column li.ui-sortable-handle {
        border-color: #bbb;
        margin-bottom: 0.25em;
        padding: 0.75em 1em;
        -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
      }
      .cm-numeric-response-set--first-column .currentRank {
        padding: 0 !important;
      }
      .cm-response-container { margin-bottom: 0; }
      .cm-response-direction-left .cm-numeric-label-container,
      .cm-response-direction-right .cm-numeric-label-container {
        padding-top: 0;
      }
      
      
      /* right column */
      .dropContainer {
        margin-left: 2%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 100%;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
        box-sizing: border-box;
      }
      
      
      .dropContainer #sortable {
        background-color: #f8f8f8;
        border: 2px dashed #bbb;
        margin-left: 0;
        position: relative;
      }
      .dropContainer #sortable:after {
        content: "Drop Here";
        font-size: 1.5em;
        font-weight: bold;
        color: #bbb;
        text-align: center;
        display: block;
        width: 100%;
        position: absolute;
        top: 45%;
      }
      
      
      .dropContainer .cm-response-container {
        padding: 0.2em;
      }
      .dropContainer #sortable li.ui-sortable-handle {
        box-shadow: 0 1px 0 0 #000000;
        z-index: 5;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 100%;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      .dropContainer li.ui-sortable-handle .currentRank {
        padding-top:0.6em !important;
      }
      
      
      .dropContainer #sortable li .currentRank {
        width: 3.25em;
        display: inline-block;
        vertical-align: top;
      }
      .dropContainer #sortable li .cm-response-container {
        width: calc(100% - 3.25em);
        display: inline-block;
        vertical-align: top;
      }
      
      
      /* Sortable Item */
      li.ui-sortable-handle {
        position: relative;
        transform: scale(1);
        transition: transform 200ms ease;
      }
      li.ui-sortable-handle:hover {
        transform: scale(1.025);
      }
      li.ui-sortable-handle:after {
        content: "● ● ●";
        color: #666666;
        background-color:#f8f8f8;
        border-left: 1px solid #bbb;
        text-align: center;
        line-height: 0.75em;
        padding-top: 0.27em;
        position: absolute;
        right: 0;
        top: 0;
        width: 1em;
        height: 100%;
      }
      /*----------------------------*/
      .cm-numeric {
      		display: flex;
              width: 100% !important;
              height: 100% !important;
      	}
      ul{
      height:auto !important;
        min-height: 200px;
      }
      .cm-numeric-label {
          word-break: break-word;
      }
      	input[type=text] {
      		height: 24px;
      	}
      	.dropContainer .cm-numeric-label-container{
      		padding: .6em .5em !important;
      }
      	.cm-numeric-label-container {
      		display: flex !important;
            	
      	}
      	
      	.cm-numeric-label-container {
      		width: 100% !important;
      	}
      	
      	.cm-response-group {
      		width: 100%;
      	}
      	
      	.dropContainer {
      		width: 100%;
      	}
      	
      	#sortable {
      		list-style-type: none;
      		margin-left: 2%;
      		padding: 0;
      		width: 100%;
      		border: 1px solid #000000;
      		background-color: #f3fde8;
      	}
      	
      	#sortable li {
      		background-color: white;
      		border: 1px solid #000000;
      		box-shadow: 1px 1px 0 0 #000000;
      	}
      	
      	.cm-numeric-response-set li {
      		padding-left: 1.5em;
      		background-color: white;
      		border: 1px solid #000000;
      		box-shadow: 1px 1px 0 0 #000000;
      	}
      	
      	.currentRank {
      		padding: 7px 20px 0px 20px;
      	}
      	.dropContainer .cm-response-container {
      	margin-bottom: 0 !important;
            border-left: 2px solid #000000;
            border-radius: 0;
      }
      
      
      .dropContainer .ui-sortable-handle .currentRank {
      	background: #000000;
      	color: #ffffff;
      	font-weight: bold;
      	border: 1px solid #ffffff;
      	border-radius: 4px;
      }
      
      
      .ui-sortable-handle {
            cursor:move;
      }
      		
  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 OFF 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
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us