Have an idea?

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

Drag and Drop question

There are 4 images of animals on the left.

I am asked to create 4 boxes/containers on the right labelled as "My Favourite", "Best friend", "Not in my house" and "Too much work".

Then the respondent is to drag each animal into each of the 4 boxes, according to what he/she thinks best fits the particular animal.

Is this possible? How should this be scripted?
asked Feb 28, 2017 by Anthony Ang (485 points)
edited Mar 3, 2017 by Anthony Ang
I believe this feature (or a question example within a question library) will be included in v9.3.0.

Best you contact Zachary Anderson at zachary@sawtoothsoftware.com for more detailed information.

1 Answer

0 votes
 
Best answer
Categorization question:

https://www.sawtoothsoftware.com/support/knowledge-base/sales-questions/253-support/software-downloads/question-library/1736-library-categorization

Start by downloading the .zip from that link.  In LHS 9.3.0, open "Compose" > "Question Library", then import the .zip.  You can then add the categorization question to any survey!
answered Mar 1, 2017 by Zachary Platinum Sawtooth Software, Inc. (91,200 points)
selected Mar 7, 2017 by Anthony Ang
You are spot on Zachary. The size restrictions have you balancing on a tightrope. It's difficult to satisfy all environments and some things simply don't fit.

If you wanted to show some magic with this type of question on a mobile, you could mention the 4 buckets / categories in the question script and display only one bucket / category at a time with a button to toggle between buckets / categories. The effect of one bucket / category disappearing while another appears would look cool.
Hi Zachary, what my supervisor has in mind is the option of restricting each bucket/category to accept just one animal. In other words, pairing up of animal and category. How can this be achieved?
"categoriesMinAndMax" in the code is a setting for doing just that.  Setting that variable like this will make four categories each require exactly one item:

'categoriesMinAndMax': {
    1: [1, 1],
    2: [1, 1],
    3: [1, 1],
    4: [1, 1]
}


As for your visual changes, I put this code at the very end of the JavaScript (before "</script>") to achieve this effect:

$(document).ready(function(){
    // Resize ranked categories
    var height = parseInt($('.sortableItem').css('height'));
    $('.rankedSortable').css('height', (height + 9 * 4) + 'px');
    
    // Stack categories
    $('#[% QuestionName() %]_div .question_body').prepend('<table id="cattable"></table>');
    $('#cattable').css('border', 'none');
    for (var tr = 1; tr <= 4; tr++)
    {
        $('#cattable').append('<tr></tr>');
        $('#cattable tr:last-child').append('<td></td>');
        if (tr == 1) { $('#cattable tr:last-child').append('<td></td>'); }
    }
    $('#cattable tr:first-child td:first-child').attr('rowspan', 4).attr('valign', 'top');
    
    $('#cattable tr:nth-child(1) td:nth-child(1)').append($('.sortableContainer')[0]);
    $('#cattable tr:nth-child(1) td:nth-child(2)').append($('.sortableContainer')[1]);
    $('#cattable tr:nth-child(2) td').append($('.sortableContainer')[2]);
    $('#cattable tr:nth-child(3) td').append($('.sortableContainer')[3]);
    $('#cattable tr:nth-child(4) td').append($('.sortableContainer')[4]);
})
Hi Zachary,

Can you check https://categorization.insightiqsurvey.com.au/cgi-bin/ciwweb.pl?studyname=Categorization&task=test

I created two questions: Category (your original library script) and Pairing (1 to 1). Initially the question order is Category followed by Pairing. Somehow when the survey is run, Category is always skipped and only Pairing shows.

Then I reversed the order: Pairing followed by Category. Now both questions show but when survey is run, Category appears before Pairing (not according to the order the questions are scripted).

Also, sometimes the unsorted container is shorter than the combined height of the list items (the 4 animals) such that the third or fourth animal image extends below the bottom border of the unsorted container. This sometimes occurred and sometimes do not.  Sometimes I go away and refresh the same page at a later time and the unsorted container reverts to the right height.  I really don't understand why these occur.
To fix the container height problem, try replacing this:

$(document).ready


with this:

$(window).load


I'm not sure about your other problem.  Can you email a .ssi demonstrating the problem to zachary@sawtoothsoftware.com?
...