Drag and Drop question

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?

Comments

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.

Answer 1

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!

Comments

Thanks Zachary. All done regarding downloading and importing into MyLibrary. I have completed some basic tests which worked fine. I also tested the exclusive option too.

Onya mate.

---

Thanks Zachary, here's the survey: https://categorization.insightiqsurvey.com.au/cgi-bin/ciwweb.pl?studyname=Categorization&task=VALUE&LOI=VALUE&member=VALUE&activity=VALUE&site=VALUE&version=VALUE&memberGuid=VALUE&hid_pagenum=1&hid_link=1&hid_javascript=1&hid_screenwidth=1600

Now, the 4 sorted containers go from left to right. Will it be possible to stack the sorted containers top to bottom to the right of the unsorted container? And also limiting the height of each sorted container just large enough to accommodate the image. Of course, this scenario is applicable only if you want to restrict one animal to each category. Otherwise, I will keep the full height sorted containers to enable all 4 animals to be dragged into the same sorted container.

---

I don't understand why if I go to https://Categorization.insightiqsurvey.com.au/login.html and uses "test" to log in

All the 4 animals appear under the central "Best Friend" category, instead of in the unsorted category.

---

Anthony, is it because you either have the TEST password set to a maximum of 1 respondent or you have ticked the "Cookies based-restart" option in your ACCESS settings.

Try a different password and you should have ALL your animals appearing in the correct bucket to the left.

If you need to test your survey multiple times using the same password, do the following ...

1/ Untick the "Cookies based-restart" check box.
2/ Set your password to a high number like "999" for the maximum respondents.

---

Thanks Paul, yes I've forgotten to set test to 9999.

I find it pretty weird. Sometimes all the 4 sorted columns appear to the right on one monitor. Sometimes, the last (4th) column is pushed to the bottom on another monitor of the same model/screen size.

I suppose this type of question cannot be conducted on mobiles as the respondents will find it to difficult to drag and drop from the unsorted container all the way down to the 4 sorted containers below?

---

Mobile surveys are fantastic for some question types but limited for others, mainly because of the screen size.

The ranking questions consist of variety (drag and drop, sorting, drop down lists, numeric input, etc.). On the larger screens, they all look great. On mobile screens, the drag and drop can look out of place, especially if you have many buckets (like the 4 you have).

In this case, you may want to go with a 4 column grid instead (column direction). Allow multiple responses in each column, turn off the "required response" feature under settings for each column and use JavaScript to deactivate a checkbox if an animal is selected in any one of the columns. It will look neat on all devices too.

---

I would love to make my library items support mobile respondents as best as possible, but there are a few that are difficult to make mobile by their very nature.  Namely, this question and the highlighter.  If someone can offer me a clever idea for how to make these questions behave on mobile, I'd be happy to implement it.

As for categories appearing on a second line, I don't have much of an artistic touch.  If people offer suggestions how to make a question better visually, I'm willing to take a shot at improving the CSS.

---

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?

---

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.