Welcome to the LimeSurvey Community Forum

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

Search Results (Searched for: removeClass)

  • Joffm
  • Joffm's Avatar
01 Aug 2024 17:20 - 01 Aug 2024 17:21
Hi,
you saw that this script is more than 9 years old and was made for a totally different version?

You may use this
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    // Call the exclude function using question ID
    excludeOpt({QID});
  });
 
  // A function to make the last option in each array row exclusive
  function excludeOpt (qID) {
 
    var thisQuestion = $('#question'+qID)
 
    // Add some classes to the checkbox cells
    $('td.checkbox-item', thisQuestion).addClass('normal-item');
    $('tr.subquestion-list', thisQuestion).each(function(i) {
    $('.normal-item:last', this).removeClass('normal-item').addClass('exlusive-item')
    });
 
    // A listener on the checkboxes
    $('input[type="checkbox"]', thisQuestion).on('change', function (event) {
      handleExclusive($(this).closest('td'));
    });
 
    function handleExclusive(thisCell) {
 
      var thisRow = $(thisCell).closest('tr');
 
      // Uncheck the appropriate boxes in a row
      if ($(thisCell).hasClass('normal-item')) {
        $('.exlusive-item input[type="checkbox"]', thisRow).prop('checked', false);
      }
      else {
        $('.normal-item input[type="checkbox"]', thisRow).prop('checked', false);
      }
 
      // Check conditions (relevance)
      $('td.checkbox-item', thisRow).each(function(i) {
        var thisValue = '';
        if($('input[type="checkbox"]', this).is(':checked')) {
          thisValue = 1;
        }
        var thisSGQA = $('input[type="checkbox"]', this).attr('id').replace(/cbox_/, '');
 
        $('input[type="hidden"]', this).attr('value', thisValue);
        fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
      });
    }
  }
</script>


To make the first column exclusive just exchange
$('.normal-item:last', this).removeClass('normal-item').addClass('exlusive-item')
by
$('.normal-item:first', this).removeClass('normal-item').addClass('exlusive-item')
Joffm
 
  • Joffm
  • Joffm's Avatar
24 Jul 2024 12:07
Hi, 
you asked this more than 2 years ago
[url] forums.limesurvey.org/forum/can-i-do-thi...upgrade-to-version-5 [/url]
You only have to adapt.



I only changed the question type to "long text", and in the script the reference from "upload-files" to "text-long". (and all other mentions of "upload" to "comment" for better readability)
Code:
<script type="text/javascript" data-author="Tony Partner">        
    $(document).on('ready pjax:scriptcomplete',function(){
         // Identify the questions
        var qArrayID = '{QID}';
        var qArray = $('#question'+qArrayID);
        var arrayLength = $('tr[id^="javatbd"]', qArray).length;
        var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
 
        // Add some classes
        qArray.addClass('array-with-comments-question');
        $(qComments).addClass('hidden');
      
        // Insert the "Upload" buttons
        $('tr[id^="javatbd"] .answer-item:last-child', qArray).each(function(i) {
            $('*', this).remove();
            $(this).append('<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#comment-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Comment</button>');
        });
      
        // Loop through the upload questions
        $(qComments).each(function(i) {
            // Create a modal
            $('body').append('<div class="modal comment-modal" id="comment-'+qArrayID+'-'+(i+1)+'" tabindex="-1" role="dialog">\
                                <div class="modal-dialog" role="document">\
                                    <div class="modal-content">\
                                        <div class="modal-header">\
                                            <h5 class="modal-title">'+$('.ls-label-question', this).html()+'Please, enter your comment</h5>\
                                        </div>\
                                        <div class="modal-body">\
                                        </div>\
                                        <div class="modal-footer">\
                                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>');
 
            // Move this question into the modal
            $('#comment-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));
            $(this).removeClass('hidden');
        });
 
        // Interrupt the Next/Submit function (to put upload questions back in the form)
        $('#ls-button-submit').on('click', function(e) {        
            $('.comment-modal .text-long').appendTo($('.group-container:eq(0)')).addClass('hidden');
        });    
    });
</script>
<style data-author="Tony Partner" type="text/css">
    .comment-modal .comment-modal.in {
        height: max-content;
    }
</style>

And for your dynamic rows?
[url] forums.limesurvey.org/forum/design-issue...ew-answer-row#216648 [/url]

Joffm
  • Matadeleo
  • Matadeleo's Avatar
16 Jul 2024 14:10 - 16 Jul 2024 14:35
Replied by Matadeleo on topic Multiple Numeric Slider - Fixing separated label
I've managed to get it somewhere by removing the pipe/second label and using the following code to manually insert them

 
Code:
// Label 1
var label1 = $('<label class="col-12 col-md-3 slider-right">Label 1</label>');
$('#javatbd{SID}X{GID}X{QID}1 .ls-slider-item-row').append(label1);
$('#label-{SID}X{GID}X{QID}1').removeClass('col-md-4').addClass('col-md-3 mb-0');
$('#javatbd{SID}X{GID}X{QID}1 .px-md-5').removeClass('col-md-8').addClass('col-md-6');
 
// Label 2
var label2 = $('<label class="col-12 col-md-3 slider-right">Label 2</label>');
$('#javatbd{SID}X{GID}X{QID}2 .ls-slider-item-row').append(label2);
$('#label-{SID}X{GID}X{QID}2').removeClass('col-md-4').addClass('col-md-3 mb-0');
$('#javatbd{SID}X{GID}X{QID}2 .px-md-5').removeClass('col-md-8').addClass('col-md-6');
 
// Label 3
var label3 = $('<label class="col-12 col-md-3 slider-right">Label 3</label>');
$('#javatbd{SID}X{GID}X{QID}3 .ls-slider-item-row').append(label3);
$('#label-{SID}X{GID}X{QID}3').removeClass('col-md-4').addClass('col-md-3 mb-0');
$('#javatbd{SID}X{GID}X{QID}3 .px-md-5').removeClass('col-md-8').addClass('col-md-6');


If anyone is familiar with the bug reporting process, can you please create a bug report for this issue
 
  • tpartner
  • tpartner's Avatar
25 Jun 2024 11:31
See here - forums.limesurvey.org/forum/search?query...artner&childforums=1

(Scroll down to "Fix up the row background colours")
  • Joffm
  • Joffm's Avatar
20 Jun 2024 17:04
Hi,
I am sure you will find the script to make the last column exclusive many times in the forum.

As I am not very familiar with javascript I just doubled the exclusive cells with classes "exlusive-item1" and "exlusive-item2"
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    // Call the exclude function using question ID
    excludeOpt({QID});
  });
 
  // A function to make the last option in each array row exclusive
  function excludeOpt (qID) {
 
    var thisQuestion = $('#question'+qID)
 
    // Add some classes to the checkbox cells
    $('td.checkbox-item', thisQuestion).addClass('normal-item');
    $('tr.subquestion-list', thisQuestion).each(function(i) {
    $('.normal-item:last', this).removeClass('normal-item').addClass('exlusive-item1')
    $('.normal-item:eq(-1)', this).removeClass('normal-item').addClass('exlusive-item2')
    });
 
    // A listener on the checkboxes
    $('input[type="checkbox"]', thisQuestion).on('change', function (event) {
      handleExclusive($(this).closest('td'));
    });
 
    function handleExclusive(thisCell) {
 
      var thisRow = $(thisCell).closest('tr');
 
      // Uncheck the appropriate boxes in a row
      if ($(thisCell).hasClass('normal-item')) {
        $('.exlusive-item1 input[type="checkbox"]', thisRow).prop('checked', false);
        $('.exlusive-item2 input[type="checkbox"]', thisRow).prop('checked', false);
      }
      else if ($(thisCell).hasClass('exlusive-item1')) {
        $('.exlusive-item2 input[type="checkbox"]', thisRow).prop('checked', false);
        $('.normal-item input[type="checkbox"]', thisRow).prop('checked', false);
      }  
      else if ($(thisCell).hasClass('exlusive-item2')) {
        $('.exlusive-item1 input[type="checkbox"]', thisRow).prop('checked', false);
        $('.normal-item input[type="checkbox"]', thisRow).prop('checked', false);
      }  
      else {
        $('.normal-item input[type="checkbox"]', thisRow).prop('checked', false);
      }
 
      // Check conditions (relevance)
      $('td.checkbox-item', thisRow).each(function(i) {
        var thisValue = '';
        if($('input[type="checkbox"]', this).is(':checked')) {
          thisValue = 1;
        }
        var thisSGQA = $('input[type="checkbox"]', this).attr('id').replace(/cbox_/, '');
 
        $('input[type="hidden"]', this).attr('value', thisValue);
        fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
      });
    }
  }
</script>

 

File Attachment:

File Name: limesurvey...32_J.lss
File Size:34 KB

Joffm
  • DenisChenu
  • DenisChenu's Avatar
30 May 2024 08:19

However, the "!" icon remains. Is it possible to hide the "!" icon?
 
Sorry, i'm unclear about where to put it :). You get it it was in tip.

Else :

1. Report the issue
2. Maybe you can such solution in custom.js

gitlab.com/SondagesPro/SurveyThemes/skel...?ref_type=heads#L103
Code:
        $(document).on("html:updated", ".em_sq_fn_validation, .em_q_fn_validation", function () {
            if ($.trim($(this).text())) {
                $(this).removeClass("hidden");
            } else {
                $(this).addClass("hidden");
            }
        });
Not tested in last version
 
  • Joffm
  • Joffm's Avatar
25 May 2024 16:52
Replied by Joffm on topic Adding NA option in slider questions
Hi,
I do not see any script in your lss.

I talk about this one that was already shown at the beginning of this thread.
Code:
<script type="text/javascript" data-author="Tony Partner">
    
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
        var filterQuestion = $(thisQuestion).nextAll('.multiple-opt:eq(0)');
 
        // Hide the filter question
        $(filterQuestion).hide();
 
        // Move the checkbox rows
        $('li.answer-item.numeric-item', thisQuestion).each(function(i) {
               $(this).after($('li.answer-item:eq(0)', filterQuestion));
        });
 
        // Some clean-up styles
        $('li.numeric-item', thisQuestion).css({
            'margin-bottom': 0,
            'min-height': 0
        })
        $('li.checkbox-item *', thisQuestion).removeClass('col-auto');
        $('li.checkbox-item', thisQuestion).removeClass('mb-1').css({
            'margin-bottom': '20px',
            'text-align': 'center'
        })
 
    });
</script>

Joffm
 
  • Sokrates_Mikesch
  • Sokrates_Mikesch's Avatar
24 May 2024 11:17 - 24 May 2024 11:18
Replied by Sokrates_Mikesch on topic Sub-Categories for Array (Numbers)
Thank you a lot! This works already pretty good! I now use the following code:
Code:
/* Teilfragentexte linksbündig */
.ls-answers tbody .answertext {
text-align: left;
}<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    // Identify this question
    var thisQuestion = $('#questionID');
 
    // Define the sub-heading text strings
    var subHeading1 = '<span style="color:blue;font-size:12pt;font-weight:bold">Kategorie A</span>';
    var subHeading2 = '<span style="color:blue;font-size:12pt;font-weight:bold">Kategorie B</span>';
    var subHeading3 = '<span style="color:blue;font-size:12pt;font-weight:bold">Weitere</span>';
 
    // Get the number of columns in the first row
    var columnsLength = $('tr.subquestion-list:eq(0) > *', thisQuestion).length;
 
    // Insert the new rows with sub-headings
    $('tr.subquestion-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
    $('tr.subquestion-list:eq(3)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');
    $('tr.subquestion-list:eq(5)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading3+'</th></tr>');
 
    // Fix up the row classes to maintain alternating row colors
    var rowClass = 1;
    $('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
        if($(this).hasClass('sub-header-row')) {
            rowClass = 1;
        } else {
            rowClass++;
            $(this).removeClass('array1 array2');
            if(rowClass % 2 == 0) {
                $(this).addClass('array2');
            } else {
                $(this).addClass('array1');
            }
        }
    });
 
    // Call the function to make the last two options in each array row exclusive
    excludeOpt('questionID');
 
    // Hide short-text questions and move them into the array
    hideAndMoveShortText();
});
 
// Eine Funktion, um die letzten zwei Optionen in jeder Array-Zeile exklusiv zu machen
function excludeOpt(questionID) {
    var thisQuestion = $('#questionID');
 
    // Fügen Sie den Checkbox-Zellen einige Klassen hinzu
    $('td.checkbox-item', thisQuestion).addClass('normal-item');
 
    // Schleife durch jede Zeile und markiere die letzten beiden Elemente als exklusiv
    $('tr.subquestion-list', thisQuestion).each(function(i) {
        var $cells = $(this).find('.checkbox-item');
        $cells.eq(-1).removeClass('normal-item').addClass('exclusive-item');
        $cells.eq(-2).removeClass('normal-item').addClass('exclusive-item');
    });
 
    // Ein Listener auf den Kontrollkästchen
    $('input[type="checkbox"]', thisQuestion).on('change', function (event) {
        handleExclusive($(this).closest('td'));
    });
}
 
// Funktion zum Ausblenden und Verschieben von Kurztextfragen
function hideAndMoveShortText() {
    // Identify the questions
    var thisQuestion = $('#questionID');
    var nextQuestion1 = $(thisQuestion).nextAll('.text-short:eq(0)');
    var nextQuestion2 = $(thisQuestion).nextAll('.text-short:eq(1)');
    var nextQuestions = $(nextQuestion1).add(nextQuestion2);
    var nextLength = nextQuestions.length;
    var sqLength = $('tr.answers-list', thisQuestion).length;
 
    // Hide the short-text questions
    $(nextQuestions).hide();
 
    // Move the hidden text inputs into the array
    for (i = 0; i < nextLength; i++) {
        var workingIndex = (sqLength - 1) - (nextLength - i) + 1; // Erhöhen Sie den Index um 1
        var nextQ = nextQuestions[i];
        var answerText = $(nextQ).find('input[type="text"]').val();
        var inputElement = '<input type="text" value="' + answerText + '" disabled>';
        $('th.answertext:eq('+workingIndex+')', thisQuestion).append(inputElement).closest('tr').addClass('otherRow');
    }
 
    // Some styling...
    $('input[type="text"]', thisQuestion).css({
        'width': '100%'
    });
}
 
function handleExclusive(thisCell) {
    var thisRow = $(thisCell).closest('tr');
 
    // Aktivieren oder deaktivieren Sie die entsprechenden Kontrollkästchen in einer Zeile
    if ($(thisCell).hasClass('normal-item')) {
        $('.exclusive-item input[type="checkbox"]', thisRow).prop('checked', false);
    } else {
        $('.normal-item input[type="checkbox"]', thisRow).prop('checked', false);
    }
 
    // Überprüfen Sie die Bedingungen (Relevanz)
    $('td.checkbox-item', thisRow).each(function(i) {
        var thisValue = '';
        if($('input[type="checkbox"]', $(this)).is(':checked')) {
            thisValue = 1;
        }
        var thisSGQA = $('input[type="checkbox"]', $(this)).attr('id').replace(/cbox_/, '');
        $('input[type="hidden"]', $(this)).attr('value', thisValue);
        fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
    });
}
</script>
<style type="text/css">/* Teilfragentexte linksbündig */
.ls-answers tbody .answertext {
text-align: left;
}
</style>[/i]

Now, is there a possibility to use the sub-category title line to also repeat the x-scale questions (trade relationship, collaboration relationship, ...)?
  • Joffm
  • Joffm's Avatar
21 May 2024 21:02
Replied by Joffm on topic Disable hyphenation?
Hi,
at first: This is not LimeSurvey related, this is browser specific.
You may read here about hyphens and ­
[url] www.w3schools.com/cssref/css3_pr_hyphens.php [/url]

and about the "white-space" property
[url] www.w3schools.com/cssref/pr_text_white-space.php [/url]

So, if you use 
Code:
span style="white-space:nowrap;">extremely<br/>likely</span><br/>0
the text will not break, only at your breakpoints.
 
As it doesn't break parts may mnot be visible


Now, what do I recommend?
1. Revise your text.
Obviously the question is something like "How likely will you recommend the following brands?"
So it is not necessary to repeat it in the scale header (you also can omit "likely")
And you should put the number into a separate line
With items like
Code:
not at all<br/>likely<br/>0
you get this


2. You can display the columns with different widths.
   

Insert this script
a. javascript
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    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);
      });
    });
  });
</script>

b. css (you may adapt the width to your needs)
Code:
<style type="text/css">
.custom-array table.subquestion-list col {
    width: auto !important;
  }
  .custom-array table.subquestion-list thead .column-0 {  width: 21%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 17%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-4 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-5 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-6 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-7 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-8 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-9 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-10 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-11 {  width: 17%; }
</style>

3. Use a separate header 
 
I admit the wording of "Not at all" has to be changed.
With this script
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
    // Insert the column categories
    $('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
    $('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
      <td rowspan="2" colspan="1" style="border-top:0 !important;"></td>\
      <th class="answer-text inserted-header" colspan="5" style="text-align:left;font-size:14pt;color:maroon;background-color:silver">unlikely to recommend</th>\
      <th class="answer-text inserted-header" colspan="6" style="text-align:right;font-size:14pt;color:maroon;background-color:silver">likely to recommend</th>\
    </tr>');
    });    
</script>
As before: Adapt to your needs (font-size, color, background,...)

4. Additionally you could use colors to explain the scale
 
Here the script
javascript:
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>

css;
Code:
<style type="text/css">
.custom-array table.subquestion-list thead td,
.custom-array table.subquestion-list thead th {
    border-bottom-width: 8px;
    border-bottom-style: solid;
}.custom-array table.subquestion-list thead .column-1 { border-bottom-color: #00A800; }
.custom-array table.subquestion-list thead .column-2 { border-bottom-color: #5AC100; }
.custom-array table.subquestion-list thead .column-3 { border-bottom-color: #9DD600; }
.custom-array table.subquestion-list thead .column-4 { border-bottom-color: #9CE400; }
.custom-array table.subquestion-list thead .column-5 { border-bottom-color: #E2EC00; }
.custom-array table.subquestion-list thead .column-6 { border-bottom-color: #ECEC00; }
.custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ECE200; }
.custom-array table.subquestion-list thead .column-8 { border-bottom-color: #E4C900; }
.custom-array table.subquestion-list thead .column-9 { border-bottom-color: #D69D00; }
.custom-array table.subquestion-list thead .column-10 { border-bottom-color: #C15A00; }
.custom-array table.subquestion-list thead .column-11 { border-bottom-color: #A80200; }.custom-array td.column-1:hover,
.custom-array td.active-item.column-1 { background-color: #00A800; }.custom-array td.column-2:hover,
.custom-array td.active-item.column-2 { background-color: #5AC100; }.custom-array td.column-3:hover,
.custom-array td.active-item.column-3 { background-color: #9DD600; }.custom-array td.column-4:hover,
.custom-array td.active-item.column-4 { background-color: #9CE400; }.custom-array td.column-5:hover,
.custom-array td.active-item.column-5 { background-color: #E2EC00; }.custom-array td.column-6:hover,
.custom-array td.active-item.column-6 { background-color: #ECEC00; }.custom-array td.column-7:hover,
.custom-array td.active-item.column-7 { background-color: #ECE200; }.custom-array td.column-8:hover,
.custom-array td.active-item.column-8 { background-color: #E4C900; }.custom-array td.column-9:hover,
.custom-array td.active-item.column-9 { background-color: #D69D00; }.custom-array td.column-10:hover,
.custom-array td.active-item.column-10 { background-color: #C15A00; }.custom-array td.column-11:hover,
.custom-array td.active-item.column-11 { background-color: #A80200; }
</style>

You see there are many options to style the question.

Joffm
  • Joffm
  • Joffm's Avatar
10 May 2024 17:15
Replied by Joffm on topic MATRIZ EXTENSA
@yuleidis,
todavia no has respondido a mis preguntas.
Por lo tanto sólo puedo mostrar los scripts utilizados.
Todos estos ya están disponibles aquí en el foro.

a. Para mostrar filas una tras otra:
Code:
<script>
$(document).ready(function() {
 
   // A function to add or remove rows of an Array (Multi Flexible)(Text) question
    function varLengthArray(qID) {
        
        if ($('#question'+qID+'').length > 0) {
            
            // The HTML content of the Add/Remove elements - modify as you wish
            var addContent = '[+] Añadir';
            var removeContent = '[-] Eliminar';
 
            // Create the Add and Remove elements &amp; insert them
            // Adjust colors by using other bootstrap classes
            // „btn-primary“, „btn-success“, „btn-info“, „btn-warning“, „btn-danger“
            var el1 = document.createElement('div');
            el1.setAttribute('id','addButton'+qID);
            el1.setAttribute('class','btn btn-success');
            document.body.appendChild(el1);
            var el2 = document.createElement('div');
            el2.setAttribute('id','removeButton'+qID);
            el2.setAttribute('class','btn btn-danger');
            document.body.appendChild(el2);
 
            // Move them to after the array
            $( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
            $( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
 
            // Insert their HTML
            $( 'div#addButton'+qID ).html( addContent );
            $( 'div#removeButton'+qID ).html( removeContent );
 
            // Style the elements - you can modify here if you wish
            $( 'div#addButton'+qID ).css({
                'margin':'10px 0 10px 10px',
                'padding':'1px',
                'text-align':'center',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });
 
            $( 'div#removeButton'+qID ).css({
                'margin':'10px 0 10px 10px',
                'padding':'1px',
                'text-align':'center',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });
 
            // Initially hide the Remove element
            $( 'div#removeButton'+qID ).hide();
 
            // Call the functions below when clicked
            $( 'div#addButton'+qID ).click(function (event) {
                addRow(qID);
            });
            $( 'div#removeButton'+qID ).click(function (event) {
                removeRow(qID);
            });
 
            // Function to add a row, also shows the Remove element and hides the
            //Add element if all rows are shown
            function addRow(qID) {
                var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
                var rowCount = $( arrayRow ).size() - 1;
                $( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
                $( 'div#removeButton'+qID ).show();
                if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' )  {
                    $( 'div#addButton'+qID ).hide();
                }
            }
 
            // Function to remove a row, also clears the contents of the removed row,
            // shows the Add element if the last row is hidden and hides the Remove
            // element if only the first row is shown
            function removeRow(qID) {
                var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
                var rowCount = $( arrayRow ).size() - 1;
                $( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
                $( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
                $( 'div#addButton'+qID ).show();
                if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' )  {
                    $( 'div#removeButton'+qID ).hide();
                }
            }
 
            // Just some initialization stuff
            var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
            var rowCount = '';
 
            // Initially hide all except first row or any rows with populated inputs
            $( arrayRow ).each(function(i) {
                if ( i > 0 ) {
                    // We also need to give the hidden rows a name cause IE doesn't
                    // recognize jQuery :visible selector consistently
                    $( this ).attr('name', 'hidden').hide();
 
                    $('input[type=text]', this).each(function(i) {
                        if ($(this).attr('value') != '') {
                            $(this).parents('tbody:eq(0)').attr('name', 'visible').show();
                            $( 'div#removeButton'+qID ).show();
                        }
                    });
                    rowCount = i;
                }
            });
        }
    }
    // Call the function with a question ID
    varLengthArray({QID});
});
</script>

b. Para mostrar columnas de diferentes anchos
Code:
 <script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    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);
      });
    });
  });
</script>
Code:
<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column-0 {  width: 5%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 20%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-4 {  width: 25%; }
  .custom-array table.subquestion-list thead .column-5 {  width: 30%; }
</style>
 


c. Para crear un menú desplegable en una columna (aquí columna con código "X003")
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects
    $('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
            <option value="1">Si</option>\
            <option value="2">No</option>\
    </select>');
 
 
   // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
     // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
   // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

d. Para crear una máscara de entrada (aquí columna con código "X001")
1. Robin Herbots
[url] github.com/RobinHerbots/Inputmask [/url]
[url] robinherbots.github.io/Inputmask/#/documentation [/url]
Code:
 <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script> <script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){ 
         $('#question{QID} .answer_cell_X001 input[type="text"]').inputmask({ regex: "([01][0-9])|([2][0-4]):([0-5][0-9])",
            'placeholder': 'hh:mm',
            'removeMaskOnSubmit': false,
            'rightAlign': false,
        });
    });
</script>

2. Igor Escobar (Opción diferente)
[url] igorescobar.github.io/jQuery-Mask-Plugin/ [/url]

e. Encabezados adicionales
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
    // Insert the column categories
    $('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
    $('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
      <td rowspan="2" colspan="1" style="border-top:0 !important;"></td>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="2">Temperatura</th>\
      <th class="answer-text inserted-header" colspan="5">Hallazgo de las canales</th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
      <th class="answer-text inserted-header" colspan="1"></th>\
    </tr>');
    });    
</script>

f. Convertir campos de texto en casillas de verificación (no exclusivo)
Code:
<script type="text/javascript" charset="utf-8">  
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
 
        // Column-specific classes
        $('tr.subquestion-list', thisQuestion).each(function(i) {
            $('th, td', this).each(function(i) {
                $(this).addClass('column-'+i);
            });
        });
        
        // Insert checkboxes
        $('.answer-item.column-7, .answer-item.column-8, .answer-item.column-9, .answer-item.column-10, .answer-item.column-11', thisQuestion).addClass('custom-checkbox-item');
        $('.custom-checkbox-item', thisQuestion).each(function(i) {
            var thisID = $('input:text:eq(0)', this).attr('id');
            $('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
            if($('input:text:eq(0)', this).val() == 'Y') {
                $('input:checkbox:eq(0)', this).prop('checked', true);
            }
            $(this).removeClass('text-item').addClass('checkbox-item');
            $('input:text:eq(0)', this).remove();
        });      
    });
</script> 

Es tu obligación transferir este cuestionario en papel a un diseño razonable para una encuesta en Internet.

Joffm
  • BBSR-SR5
  • BBSR-SR5's Avatar
24 Apr 2024 17:54 - 24 Apr 2024 19:28
I've been using this script successfully, but one weird thing is occuring. It's a longer table so I've been using repeated headers so people can see the meaning of the options even when they scroll down. For some reason in most cases it does seem to automatically sort the repeated header to the bottom of the list '(Kinda buggy, but useful behaviour for me since I rather like to have the header at the bottom of the table). But with my current script it's just vanishing.
Code:
<script type="text/javascript" data-author="BBSR-SR5">
  $(document).on('ready pjax:scriptcomplete',function(){
    
 
    //alert($('.modal-footer a').length)
    
    // Find the modal with the ID "bootstrap-alert-box-modal"
    var $modal = $('#bootstrap-alert-box-modal');
 
    // Check if the modal is found
    if ($modal.length > 0) {
        // Find the modal footer within the modal
        var $modalFooter = $modal.find('.modal-footer');
        var $anchors = $modalFooter.find('a');
 
        // Check if there are exactly two anchor elements
        if ($anchors.length === 2) {
            // Detach the anchor elements from the DOM
            var $firstAnchor = $anchors.eq(0).detach();
            var $secondAnchor = $anchors.eq(1).detach();
 
            // Reinsert the anchor elements in reverse order into the modal footer
            $modalFooter.append($secondAnchor).append($firstAnchor);
        }
    }
    
    //Change warning text
    // Define some text strings
    var originalModalText = "Eine oder mehrere Pflichtfragen sind nicht beantwortet worden. Bitte beantworten Sie diese zuerst, um fortzufahren!";
    var newModalText = "Sie haben auf dieser Seite mind. 1 Frage nicht beantwortet. Möchten Sie diese noch beantworten oder zur nächsten Seite weitergehen?";
 
    // Modify the modal text
    var modalBody = $('.modal-body p').filter(function() {
      return $.trim($(this).text()) == originalModalText;
    });
    if(modalBody.length > 0) {
      modalBody.text(newModalText);
    }
    
    
    
    //'' Randomisation Function begins here! **//
    //**********************************************//
 
   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;
        }
 
        // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = ;
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
        // Identify some elements and define variables
        var thisQuestion = $('#question{QID}');
        var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
        var orderQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
        var orderInput = $(':text.form-control:eq(0)', orderQuestion);
        var array_res;
        var aOrder = ;
        var $headerRow = $("table thead tr").clone()
    
 
        // Previously set order
        if($.trim($(orderInput).val()) != '') {
            array_res = $.trim($(orderInput).val()).split(',');
        }
        // No previous order set
        else {    
            // Special codes appear after
            var afterCode = 4;
 
            //Array for K Codes
            var array_k = ["b","d","g","h","i","j","l"];
 
            //Array for N Codes
            var array_n = ["c","e","f","k","m","n"];
 
            //Array for Special K Codes
            var array_sk = ;
 
            //Array for Special N codes
            var array_sn = ["a"];
 
            //Array for super special codes
            var array_ss = ["o"];
 
            // Shuffle order of "normal" arrays
            shuffleArray(array_k);
            shuffleArray(array_n);
 
            // Slice "normal" arrays and merge second part to special codes
            array_sk = array_sk.concat(array_k.slice(afterCode));
            array_sn = array_sn.concat(array_n.slice(afterCode));
 
            // Save only first part of "normal" arrays
            array_k = array_k.slice(0, afterCode);
            array_n = array_n.slice(0, afterCode);
 
            // Shuffle special arrays
            shuffleArray(array_sk);
            shuffleArray(array_sn);
            shuffleArray(array_ss);
 
            // Combine normal and special arrays
            array_k = array_k.concat(array_sk);
            array_n = array_n.concat(array_sn);
 
            // Merge arrays in order n,k,n,k...
            array_res = mergeArrays(array_k, array_n);
 
            //Add super special array to end of result array
            array_res = array_res.concat(array_ss);
 
            // Load the hidden order input
            $(orderInput).val(array_res);
        }
 
        // Loop through the answer codes
        $.each(array_res, function(i, val) {
            // Move the answer item
            $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
        });
    
      
 
        // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
    });   
 
 //$('tr.answers-list:eq(0)', thisQuestion).append('<tr class="header-row"></tr>');
 
</script>[/i][/i][/i][/i]

I've been trying to just copy the header and paste it to the bottom of the table, but my code doesn't work. Any ideas how to fix/do this?
  • tpartner
  • tpartner's Avatar
17 Apr 2024 18:49
My solution would be to do as Joffm suggests - load the sub-question order in a hidden (via CSS class) short-text question. On page load, if that question is found to be populated, that order is used, otherwise your randomization alogorithm kick in.

Code:
<script type="text/javascript">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        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;
        }
 
        // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
        // Identify some elements and define variables
        var thisQuestion = $('#question{QID}');
        var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
        var orderQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
        var orderInput = $(':text.form-control:eq(0)', orderQuestion);
        var array_res;
        var aOrder = [];
 
        // Previously set order
        if($.trim($(orderInput).val()) != '') {
            array_res = $.trim($(orderInput).val()).split(',');
        }
        // No previous order set
        else {    
            // Special codes appear after
            var afterCode = 4;
 
            //Array for K Codes
            var array_k = ["b","d","g","h","i","j","l"];
 
            //Array for N Codes
            var array_n = ["c","e","f","k","m","n"];
 
            //Array for Special K Codes
            var array_sk = [];
 
            //Array for Special N codes
            var array_sn = ["a"];
 
            //Array for super special codes
            var array_ss = ["p"];
 
            // Shuffle order of "normal" arrays
            shuffleArray(array_k);
            shuffleArray(array_n);
 
            // Slice "normal" arrays and merge second part to special codes
            array_sk = array_sk.concat(array_k.slice(afterCode));
            array_sn = array_sn.concat(array_n.slice(afterCode));
 
            // Save only first part of "normal" arrays
            array_k = array_k.slice(0, afterCode);
            array_n = array_n.slice(0, afterCode);
 
            // Shuffle special arrays
            shuffleArray(array_sk);
            shuffleArray(array_sn);
            shuffleArray(array_ss);
 
            // Combine normal and special arrays
            array_k = array_k.concat(array_sk);
            array_n = array_n.concat(array_sn);
 
            // Merge arrays in order n,k,n,k...
            array_res = mergeArrays(array_k, array_n);
 
            //Add super special array to end of result array
            array_res = array_res.concat(array_ss);
 
            // Load the hidden order input
            $(orderInput).val(array_res);
        }
 
        // Loop through the answer codes
        $.each(array_res, function(i, val) {
            // Move the answer item
            $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
        });
 
        // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
    });   
 
</script>

Sample survey:  

File Attachment:

File Name: limesurvey...3182.lss
File Size:56 KB
  • BBSR-SR5
  • BBSR-SR5's Avatar
17 Apr 2024 18:22
Hm actually, I figured it might be easier to replace the Math.random() function with a seeded random function and then use the survey number as a seed. That way it should stay constant for a user.

Though how would I access that? Right now I've plugged in Date.now()
Code:
<script type="text/javascript" data-author="BBSR-SR5 &amp; Tony Partner">
  $(document).on('ready pjax:scriptcomplete',function(){
 
 
//Define Seeded Random function
   function splitmix32(a) {
  return function() {
    a |= 0;
    a = a + 0x9e3779b9 | 0;
    let t = a ^ a >>> 16;
    t = Math.imul(t, 0x21f0aaad);
    t = t ^ t >>> 15;
    t = Math.imul(t, 0x735a2d97);
    return ((t = t ^ t >>> 15) >>> 0) / 4294967296;
  };
}
 
function shuffleArray(array) {
  const seed = Date.now();
  const random = splitmix32(seed);
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}
 
    // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
    //Identify this question
    var thisQuestion = $('#question{QID}');
    var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
    var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
 
    // Special codes appear after
        var afterCode = 4;
 
        //Array for K Codes
        var array_k = ["b","d","g","h","i","j","l"];
 
        //Array for N Codes
        var array_n = ["c","e","f","k","m","n"];
 
        //Array for Special K Codes
        var array_sk = [];
 
        //Array for Special N codes
        var array_sn = ["a"];
 
        //Array for super special codes
        var array_ss = ["o"];
 
    // Shuffle order of "normal" arrays
        shuffleArray(array_k);
        shuffleArray(array_n);
 
 
        // Slice "normal" arrays and merge second part to special codes
        array_sk = array_sk.concat(array_k.slice(afterCode));
        array_sn = array_sn.concat(array_n.slice(afterCode));
 
        // Save only first part of "normal" arrays
        array_k = array_k.slice(0, afterCode);
        array_n = array_n.slice(0, afterCode);
 
        // Shuffle special arrays
        shuffleArray(array_sk);
        shuffleArray(array_sn);
        shuffleArray(array_ss);
 
        // Combine normal and special arrays
        array_k = array_k.concat(array_sk);
        array_n = array_n.concat(array_sn);
 
        // Merge arrays in order n,k,n,k...
        var array_res = mergeArrays(array_k, array_n);
 
        //Add super special array to end of result array
        array_res = array_res.concat(array_ss);
 
 
 
 
    // Loop through the answer codes
    $.each(array_res, function(i, val) {
      // Move the answer item
      $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
    });
 
 
 
 
    // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
 
      //alert(array_res);
    //console.log(array_res);
    });
 
 
 
</script>

How would I access the participant number from the code?
  • tpartner
  • tpartner's Avatar
12 Apr 2024 14:06
This should do it:

Code:
<script type="text/javascript">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        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;
        }
 
        // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
        //Identify this question
        var thisQuestion = $('#question{QID}');
        var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
 
        // Special codes appear after
        var afterCode = 4;
 
        //Array for K Codes
        var array_k = ["b","d","g","h","i","j","l"];
 
        //Array for N Codes
        var array_n = ["c","e","f","k","m","n"];
 
        //Array for Special K Codes
        var array_sk = [];
 
        //Array for Special N codes
        var array_sn = ["a"];
 
        //Array for super special codes
        var array_ss = ["p"];
 
        // Shuffle order of "normal" arrays
        shuffleArray(array_k);
        shuffleArray(array_n);
 
        // Slice "normal" arrays and merge second part to special codes
        array_sk = array_sk.concat(array_k.slice(afterCode));
        array_sn = array_sn.concat(array_n.slice(afterCode));
 
        // Save only first part of "normal" arrays
        array_k = array_k.slice(0, afterCode);
        array_n = array_n.slice(0, afterCode);
 
        // Shuffle special arrays
        shuffleArray(array_sk);
        shuffleArray(array_sn);
        shuffleArray(array_ss);
 
        // Combine normal and special arrays
        array_k = array_k.concat(array_sk);
        array_n = array_n.concat(array_sn);
 
        // Merge arrays in order n,k,n,k...
        var array_res = mergeArrays(array_k, array_n);
 
        //Add super special array to end of result array
        array_res = array_res.concat(array_ss);
 
        // Loop through the answer codes
        $.each(array_res, function(i, val) {
            // Move the answer item
            $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
        });
 
        // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
 
    });  
 
</script>

Sample survey: 

File Attachment:

File Name: limesurvey...3181.lss
File Size:41 KB
  • tpartner
  • tpartner's Avatar
03 Apr 2024 16:43 - 03 Apr 2024 16:51
Replied by tpartner on topic Choice Based Max-Diff Design
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>

 
Displaying 1 - 15 out of 36 results.

Lime-years ahead

Online-surveys for every purse and purpose