Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Card Sorting

More
3 years 10 months ago #221372 by RitaShen
Card Sorting was created by RitaShen
Hi there,
I have a question about the Card Sorting,
 
can we limit that each grid to only one item?
for example I have 6 items on the list, and I have 3 grid, just need choose the top 3 items to rank.

 

File Attachment:

File Name: Card_Sort.lss
File Size:23.53 KB

limesurvey version: 3.27.19

thanks
ita

Please Log in to join the conversation.

More
3 years 10 months ago #221374 by Joffm
Replied by Joffm on topic Card Sorting
Hi, Rita,
did you try this
[url] www.limesurvey.org/manual/Special:MyLang...Javascript#Q_Sorting [/url]

Reading the description it is what you would like to have

This workaround is heavily based on the Card Sorting above. It uses JavaScript to allow dragging items into "buckets" to "card sort" them with the additional twist to limit the cards per bucket. A multiple-short-text question is used with subquestions being the draggable items. The data recorded for each item is the "bucket" number that it was dropped in. "Buckets" and their limits are pre-defined in a list in the "Display" section of the question.

It's a hint. I never used it myself.

Joffm


 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: RitaShen

Please Log in to join the conversation.

More
3 years 9 months ago #221393 by holch
Replied by holch on topic Card Sorting
What you are looking for is a ranking, not card sorting. So why not use the ranking question?

Card sorting has the characteristic that you want to know how people categorize some items/words/etc. If you limit each category to 1 item, it is no card sorting anymore, in my opinion.

Your use case should be easily covered by the ranking question built into Limesurvey.
Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.

Please Log in to join the conversation.

More
3 years 9 months ago #221396 by Joffm
Replied by Joffm on topic Card Sorting
I agree. That was my first thought, too.

But I did not mention this, because Rita is an experienced user. Working with LimeSurvey for more than 5 years.
So I decided that she would like to have some variations in answering the questions, some kind of gamification to make it less boring.

And therefore it is not too bad.
 

Joffm


 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
3 years 9 months ago #221399 by holch
Replied by holch on topic Card Sorting
Yeah, I mean people can do whatever they want and find better, I just thought I mention it, because sometimes you don't see the forest because of all the trees... (to use one of our good old-fashioned German proverbs...).

And gamification: While I agree that it can be nice, I feel lately things are getting "over-gamified" sometimes and you loose a lot of time with things that could be solved / answered a lot quicker.
Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.

Please Log in to join the conversation.

More
3 years 2 months ago #229767 by tpartner
Replied by tpartner on topic Card Sorting
I don't think that's a good idea if you expect respondents using smaller mobile devices. There won't be much room for horizontal boxes.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 2 months ago - 3 years 2 months ago #229770 by Joffm
Replied by Joffm on topic Card Sorting
I agree with Tony, though this was my extension of his theme.

Some question types / question layouts are difficult to handle on small devices.
When we use some of them (like "Points of Interest", or the option to magnify images with the "highslide" library") we force the use of desktops. Otherwise screenout.
Or sometimes we use a switch and display one of two options depending on the screen width.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 2 months ago by Joffm.

Please Log in to join the conversation.

More
3 years 2 months ago #229771 by tpartner
Replied by tpartner on topic Card Sorting

...we force the use of desktops. Otherwise screenout.

Yes, in surveys requiring large tables to show lots of information for choice comparisons I sniff the screen size in the welcome message and, if too small, remove the "Next" button and display a suggestion that they return using a larger device.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 2 months ago #229775 by Joffm
Replied by Joffm on topic Card Sorting
Okay,
tomorrow I'll provide the css that changes Tony's original theme to the horizontal layout

Joffm 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
3 years 2 months ago #229781 by Joffm
Replied by Joffm on topic Card Sorting
Hi,
here is my addition to the original question theme.

According to your requirement.
But it is very different from the customer's idea.

So, add this to the question text in source code mode:
Code:
<style type="text/css">
.card-sort-question .items-start {
    width: 94%;
    max-width: 100%;
    height: auto;
    min-height:80px;
    margin-top: 8px;
    margin-left: 3%;
    border: 1px solid #666;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}
 
 
.card-sort-question .card {
    width: auto;
    min-width:80px;
    height: auto;
    margin: 5px 5px;
    padding: 4px;
    background-color: transparent;
    background-color: #5bc0de;
    color: #fcf8e3;
    border:0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
}
 
.card-sort-question .items-end-wrapper {
    float: left;
    margin-left: 3%;
    width: 94%;
    max-width: 100%;
    margin-top: 15px;
}
@media (min-width: 560px){
  .card-sort-question .items-end-wrapper {
    display: flex;
  }
}
 
.card-sort-question .items-end-inner {
    display: inline-block;
    width:100%;
    margin-right: 0.5%;
    margin-left: 0.5%;
}
 
.card-sort-question .items-end {
    min-height: 60px !important;
}
 
.card-sort-question .items-end-text {
    text-align:left;
}
.card-sort-question .items-end .card {
    margin: 5px 7px;
    color: #fcf8e3;
    background-color:#5bc0de;
}
</style>
 

I left some - not necessary - settings. So you are able to adapt to your needs more easily.
Otherwise you may have a look at the "cardsort.css".
 
  
And, though it is responsive, it doesn't work on (my) smartphones.



BTW: What you showed is much better done with a simple array where you display the gradient in an additional header.
Or with a slider.


I remember that a survey tool - commercial, expensive - contains this option, called "drag to scale".
Looks by default like this
 

Joffm

 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: tpartner

Please Log in to join the conversation.

More
3 years 2 months ago #229784 by Joffm
Replied by Joffm on topic Card Sorting
And this is a bit nearer to your image.
Without drag/drop,
But with gradient, images in (-3) and (+3) and a hovering effect.
 

Joffm

P.S. As nearly always, I only adapted a solution of Tony Partner.
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
3 years 1 month ago #229807 by Joffm
Replied by Joffm on topic Card Sorting
I used this to insert this gradient.
[url] forums.limesurvey.org/forum/can-i-do-thi...in-limesurvey#183356 [/url]
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
3 years 1 month ago #229873 by Joffm
Replied by Joffm on topic Card Sorting

he still insists that he wants each of the boxes to be a different color,

Which boxes?
Now the selected boxes have the color of the "gradiet".
What do you want?
The entire column in different colors?
The selected boxes a different color?

Send the question as lss export with your actual settings.
And show the desired result. (paint, powerpoint, draw, whatever)

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
3 years 1 month ago #229877 by Joffm
Replied by Joffm on topic Card Sorting
Hi,
this is everything I can offer without further input from your side.
  • "Gradient" header
  • Columns in same color, but a bit more smooth
  • Hovered and acrtive cells get the same color as header.

In the css you may change all colors to your needs
 

Here the - already known - script
Code:
<script type="text/javascript" charset="utf-8">
 
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
        
        // Add a question class
        thisQuestion.addClass('custom-array');
 
        // Column-specific classes
        $('table.subquestion-list tr', thisQuestion).each(function(i) {
            $('th, td', this).each(function(i) {
                $(this).addClass('column-'+i);
            });
        });
        
        // Listener on the radios
        $('input:radio', thisQuestion).on('click', function(i) {
            $(this).closest('tr').find('.active-item').removeClass('active-item');
            $(this).closest('td').addClass('active-item');
        });
    });
</script>

and the css
Code:
<style type="text/css">
 
/* set width of "gradient" header */
  .custom-array table.subquestion-list thead td,
  .custom-array table.subquestion-list thead th {
    border-bottom-width: 30px;
    border-bottom-style: solid;
  }
 
/* set colors of "gradient" header */
  .custom-array table.subquestion-list thead .column-1 { border-bottom-color: #000000; }
  .custom-array table.subquestion-list thead .column-2 { border-bottom-color: #330000; }
  .custom-array table.subquestion-list thead .column-3 { border-bottom-color: #660000; }
  .custom-array table.subquestion-list thead .column-4 { border-bottom-color: #990000; }
  .custom-array table.subquestion-list thead .column-5 { border-bottom-color: #b30000; }
  .custom-array table.subquestion-list thead .column-6 { border-bottom-color: #cc0000; }
  .custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ff0000; }

/* set colors of hovered resp. active(selected) cells */
/* Of course you can split this  to have different colors for hovered and active cells */
  .custom-array td.column-1:hover,
  .custom-array td.active-item.column-1 { background-color: #000000; opacity:1.0; }

  .custom-array td.column-2:hover,
  .custom-array td.active-item.column-2 { background-color: #330000; opacity:1.0; }

  .custom-array td.column-3:hover,
  .custom-array td.active-item.column-3 { background-color: #660000; opacity:1.0; }

  .custom-array td.column-4:hover,
  .custom-array td.active-item.column-4 { background-color: #990000; opacity:1.0; }

  .custom-array td.column-5:hover,
  .custom-array td.active-item.column-5 { background-color: #b30000; opacity:1.0; }

  .custom-array td.column-6:hover,
  .custom-array td.active-item.column-6 { background-color: #cc0000; opacity:1.0; }

  .custom-array td.column-7:hover,
  .custom-array td.active-item.column-7 { background-color: #ff0000; opacity:1.0;  }

/* set colors of normal columns */
/* The same colors as above but with an opacity of 0.4 */
  td.answer_cell_1 {    background-color: #000000; opacity:0.4; }
  td.answer_cell_2 {    background-color: #330000; opacity:0.4; }
  td.answer_cell_3 {    background-color: #660000; opacity:0.4; }
  td.answer_cell_4 {    background-color: #990000; opacity:0.4; }
  td.answer_cell_5 {    background-color: #b30000; opacity:0.4; }
  td.answer_cell_6 {    background-color: #cc0000; opacity:0.4; }
  td.answer_cell_7 {    background-color: #ff0000; opacity:0.4; }

 
/* Some other settings */
/* Vertical Alignment of header text */
  .ls-answers .ls-heading > th {
    vertical-align: top;
  }
 
/* Left Alignment of subquestion text */
  .ls-answers tbody .answertext {
    text-align: left;
  }
</style>

Best regards
Joffm



 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source