Welcome to the LimeSurvey Community Forum

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

Choice Based Max-Diff Design

More
1 year 5 months ago - 1 year 5 months ago #259787 by tpartner
If using LS 6.x and you want to disable the stacked table view of the array-by-column on mobile devices...

 

1) Place this in your custom.js file.

Code:
function maxDiff(qID, randomize, disableMobileView) {
 
        // Identify some elements
        var thisQuestion = $('#question'+qID);
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
 
        // Assign a new question class
        $(thisQuestion).addClass('max-diff-array');
 
        // Disable the mobile table view
        if(disableMobileView) {
            $(thisTable).removeClass('ls-answers').addClass('disable-mobile-view');
        }
 
        // Move the columns
        $('thead tr:eq(0)', thisTable).prepend($('thead tr:eq(0) th:eq(1)', thisTable));
        $('tr.answers-list', thisTable).each(function(i){
            $('td.answer-item:eq(0)', this).prependTo(this);
        });
 
        // Random rows
        if(randomize) {
            var rowsArr = [];
            $('tr.answers-list', thisTable).each(function(i){
                $(this).attr('data-index', i);
                rowsArr.push(i);
            });
            shuffleArray(rowsArr);
            $(rowsArr).each(function(i){
                $('tbody', thisTable).append($('tr[data-index="'+this+'"]', thisTable));
            });
        }
 
        // Prevent clicking twice in the same row
        $('input:radio', thisQuestion).on('click', function () {
 
            $('input:radio', thisQuestion).prop('disabled', false);
            $('input:radio:checked', thisQuestion).each(function(i) {
                var thisRow = $(this).closest('tr.answers-list');
                $('input:radio', thisRow).not(this).prop('disabled', true);
            });
        });    
 
        // Fix up the row classes
        var rowClass = 1;
        $('tr.answers-list', thisTable).each(function(i) {
            $(this).addClass('array'+(2-(i%2)));
        });
    }
 
    function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

2) Place this in your custom.css file.

Code:
.max-diff-array tbody th.answertext { 
    text-align: center;
    font-weight: normal;
}
 
.max-diff-array table.disable-mobile-view > tbody > tr > td {
    vertical-align: middle;
}
 
.max-diff-array table.disable-mobile-view tbody td {
    text-align: center;
}

3) Place this in the question source. Note the third parameter set to true.

Code:
<script type="text/javascript" data-author="Tony Partner">
 
    $(document).on('ready pjax:scriptcomplete',function(){
        // Call the maxDiff() function
        // Set the second parameter to true for randomized rows
        // Set the third parameter to true to disable the LS mobile table view
        maxDiff({QID}, true, true);
    });
</script>

 

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 1 year 5 months ago by tpartner.
The following user(s) said Thank You: Joffm

Please Log in to join the conversation.

More
1 year 5 months ago #259810 by rajkumar_dms
Hi,

We had change the same but it show break type of screen

Please Log in to join the conversation.

More
1 year 5 months ago - 1 year 5 months ago #259811 by tpartner
Sorry, I don't know what you are doing wrong - it works fine for me in LimeSurvey 6.x with all browsers.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 1 year 5 months ago by tpartner.

Please Log in to join the conversation.

More
1 year 5 months ago #259812 by rajkumar_dms
those things i have added in themes editor custom.css & custom.js file and last one paste in question source
I have attached the same screenshot

I have made the correctly but not working properly and is there is any other way we can fix them

Please Log in to join the conversation.

More
1 year 5 months ago #259816 by tpartner
Can you activate a test survey and give a link here?

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
1 year 5 months ago #259819 by rajkumar_dms
Here it is the link
datamatrixs.limesurvey.net/342796?lang=en

Also i need the same for all type of matrix question like 5 point ,arry etc

Please Log in to join the conversation.

More
1 year 5 months ago #259823 by tpartner
You have modified the code!!!

This line:
Code:
var thisTable = $('table.subquestion-list:eq(1)', thisQuestion);

Should be this:
Code:
var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);

 

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
1 year 5 months ago - 1 year 5 months ago #259826 by rajkumar_dms
Thanks 
It's working perfectly
Can you we adjust the left ,middle& right column for same
Last edit: 1 year 5 months ago by rajkumar_dms.

Please Log in to join the conversation.

More
1 year 5 months ago #259870 by rajkumar_dms
Hi
Please update on this

Please Log in to join the conversation.

More
1 year 4 months ago #261874 by rajkumar_dms
Hi Tony,
We are doing well

For the max-diff the data stored in reversed manner
can you please look into it

Let say A as least and C as most in the survey display page but when download the data we can see data is reversed that means A most and C as least

Please Log in to join the conversation.

More
1 year 4 months ago #261891 by Joffm
Replied by Joffm on topic Choice Based Max-Diff Design
How shall we reproduce this?

Please, always provide the lss export of your actual survey - the relevant questions.

JOffm

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

Please Log in to join the conversation.

More
1 year 4 months ago #261901 by rajkumar_dms
Thanks joffm
here the lss file for the same

Please Log in to join the conversation.

More
1 year 4 months ago #261935 by Joffm
Replied by Joffm on topic Choice Based Max-Diff Design
Hi,
please, do not send incomplete questions.
If you put some code into "custom.js" and "custom.css" you have to put it back to the question text.
The lss export does not contain this.

There was an empty answer option with code 5.



Okay.
Eveything is fine, but the headers are switched.
Change this
Code:
   $('thead tr:eq(0)', thisTable).prepend($('thead tr:eq(0) th:eq(1)', thisTable));

to
Code:
   $('thead tr:eq(0)', thisTable).prepend($('thead tr:eq(0) th:eq(0)', thisTable));

And you should center the headers

Joffm
 

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

Please Log in to join the conversation.

More
1 year 4 months ago #261957 by rajkumar_dms
Thanks Joffm,
It's working now
Can we adjust the width of the column for the same

Please Log in to join the conversation.

More
1 year 4 months ago - 1 year 4 months ago #262042 by Joffm
Replied by Joffm on topic Choice Based Max-Diff Design
Investigate with the web development tool of your browser, see which classes are affected, adapt the css.

And you may use this.
[url] forums.limesurvey.org/forum/design-issue...it-expandable#233821 [/url]

 

Attachment not found


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 year 4 months ago by Joffm.

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose