Welcome to the LimeSurvey Community Forum

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

Card Sorting

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 9 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.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 9 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
1 year 9 months ago #229791 by KaryG
Replied by KaryG on topic Card Sorting
Thank you very much! My first proposal was just a simple array question, although I don't know how to make the header gradient.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 9 months 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
1 year 8 months ago #229872 by KaryG
Replied by KaryG on topic Card Sorting
I am very grateful for all the help you have given me! The client has been satisfied with the solution. Although he still insists that he wants each of the boxes to be a different color, is it possible to do that with this type of question?

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months 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.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months 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.

Lime-years ahead

Online-surveys for every purse and purpose