Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Does anyone have an example of how to capture survey data using Drag-and-Drop?

ANY example of drag-and-drop within SSI (version 7) would be helpful.   My goal is to allow the user to arrange the rows of a table using drag-and-drop rather than having to place a numeric rank next to each row.
asked Feb 8, 2012 by anonymous
my only suggestion is to check out javascript libraries and use one you like and capture the data in a free format question. I don't have any example to share :x
Bahadir,
Thanks for your reply.  I have found examples on various sites that do the kind of drag and dropping that I'm looking for.  However, I don't understand how to capture (in a free format question) the results of the user's drag and dropping.  
~David
Hmm,

generally the external JS libraries save the sliders value in a javascript variable... check the SSI documentation for free format help pages, there you'll find hwo to use hidden variables. these are something like
<input type="hidden" name="sample" value="your_slider_variablename_here">

as long as you define the slider question on the same page as your free format question (you can also define within the same question) you should be able to capture this in your data.
OK.  Thanks.
Hi David,

Have you created any question with drag and drop?
Yes.  I was able to find a Jquery library example of a sortable list.  Getting it to work in Sawtooh required only a little extra code/work.
I would like to use this kind of question in an upcoming survey. Would you be so kind and send me an example of question or just the code so I can modify it for my survey?

1 Answer

0 votes
--- IN THE FREE FORMAT "Variables/Question HTML" tab: ------

<input name="FREE1_NewVar" id="FREE1_NewVar" type="hidden">

<DIV class=demo style="margin-left:auto; margin-right:auto; width:70%;">
<UL id=sortable style="width:100%;">

<script type="text/javascript">

var leng = [% listlength(RankProds1) - 1 %] ;
var ListItems = [% ListLabelsArray(RankProds1) %] ;
var i=0;
for (i=0;i<=leng;i++)
{
document.write("<LI class=ui-state-default>" + ListItems[i] + "</li>");
}

</script>

</UL>
</DIV>

---- IN THE FREE FORMAT "HTML <head> TAG" (under Advanced Settings)----

<link   type="text/css"        href="[%GraphicsPath()%]/css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />   
<script type="text/javascript" src="[%GraphicsPath()%]/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="[%GraphicsPath()%]/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="[%GraphicsPath()%]/js/jquery.ui.touch-punch.js"></script>


<STYLE>
   
#sortable { list-style-type: none; margin: 0; padding: 0; width: 50%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
   
</STYLE>


<SCRIPT>
$.noConflict();   
jQuery(function() {
       
jQuery( "#sortable" ).sortable();
       
jQuery( "#sortable" ).disableSelection();
   
});
   
</SCRIPT>

--- IN THE FREE FORMAT "Custom JavaScript Verification" (under Advanced Settings) ---

    var list = document.getElementById("sortable");
    var items = list.getElementsByTagName("li");
    var itemsString = "";
    for (var i = 0; i < items.length; i++) {
        if (itemsString.length > 0) itemsString += "-";
        itemsString += items[i].innerHTML;
       }

var myObj = SSI_GetFormObject("FREE1_NewVar");
myObj.value = itemsString;

-----------------
You'll need to download all the jquery...js files listed in the  "HTML <head> TAG"   
They're not hard to find.
They need to be saved in the SSI's graphics folder.

Hope this helps.
~David
answered Mar 21, 2012 by anonymous
Thank you very much. It will take so time for me to figure the code and to modify it for my question but it is very helpfull.
Ranking Question validation with Jquery (Drag and Drop)
This code was extremely helpful! I have it up and running, but have spent the last few hours trying to figure out how to output the original list items number rather than the list item name. Right now I have it outputting a correctly ordered, comma separated, text string that contains the list item names.  Trying to figure out how to:

a) capture a string of list item numbers in dropped order (ie 3,1,2)

or

b) capture the data in the way a rank question does - I imagine this would be multiple hidden variables (FREE1_rankedfirst, _rankedsecond, etc), and would contain the number of the list item.

Is this complicated or am I making it harder than it needs to be?
UPDATE:
It seems that the list of items is completely disassociated from the SSI list numbering. So I modified the function that writes to the FREE1_NewVar to capture an added tag value. Each list member is now wrapped in <a name="1">_______</a> , with each name equal to the list number. This works great, and now returns a string of comma separated numbers in dropped order that are equal to the original lists item numbers.

    var list = document.getElementById("sortable");
    var items = list.getElementsByTagName("a");
    var itemsString = "";
    for (var i = 0; i < items.length; i++) {
        if (itemsString.length > 0) itemsString += ",";
        itemsString += items[i].name;
       }

var myObj = document.getElementById("FREE1_NewVar");
myObj.value = itemsString;

I have a select all that apply question ahead of this, which creates the list of items for the drag and drop. The issue I am running into now though is including an other-specify in that select question - as the output does not have the numerical name tag, and while it does show up in the drag and drop, it does not have a number for the function to capture when writing the string.

Any ideas?

I thought I could write an additional constructed list like so:

AIC(Q10,1,20)
Begin Unverified Perl  
 if(VALUE("Q10_21") == 1)   
 {   
    ADD("Q10OthersOnly",1);   
 }   
 if(VALUE("Q10_22") == 1)   
 {   
    ADD("Q10OthersOnly",2);   
 }
 if(VALUE("Q10_23") == 1)   
 {   
    ADD("Q10OthersOnly",3);   
 }
 End Unverified

With Q10OthersOnly being a separate predefined list made up of only the responses to the other options:

<a name="21">[% Q10_21_other %]</a>
<a name="22">[% Q10_22_other %]</a>
<a name="23">[% Q10_23_other %]</a>
Updated js files?
...