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:


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. (120,175 points)
selected Mar 7, 2017 by Anthony Ang
"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:

    // 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 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:


with this:


I'm not sure about your other problem.  Can you email a .ssi demonstrating the problem to zachary@sawtoothsoftware.com?
Hi does this work on image?
It should, but you may need to replace:

$('#[% QuestionName() %]_div img').load(setDimensionsAndMoveItems);

with this:

$('#[% QuestionName() %]_div img').on('load', setDimensionsAndMoveItems);

If you are on a later version of Lighthouse Studio.