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