Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Search Results (Searched for: removeClass)

  • percyherrera
  • percyherrera's Avatar
04 Apr 2025 01:36
Script para limpiar valores en respuesta multiple con opción "Ninguno" o "N/A" was created by percyherrera
Ayúdenos a ayudarle y rellene los siguientes campos:.
Su versión de LimeSurvey: 6.12.3
Servidor propio o LimeSurvey Cloud: LimeSurvey Cloud
Plantilla de diseño utilizada: vanilla
==================
Amigos, comparto el siguiente script que utilizo para el siguiente escenario: Imaginemos que tenemos una pregunta de tipo respuesta multiple con varios items en una columna y en el ultimo campo tenemos la opción "Ninguno" o "N/A". La idea es que si selecciono el item "Ninguno" se desmarquen los otros items y si selecciono cualquiera de los items validos se desmarque la opción "Ninguno" si estuviera seleccionada.  Esto lo he podido lograr con el siguiente script y lo comparto para usarlo en un futuro.
Espero sea de ayuda:
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 a single-column multiple choice exclusive
  function excludeOpt(qID) {
    var thisQuestion = $('#question' + qID);
 
    // Add classes to the checkbox items
    $('input[type="checkbox"]', thisQuestion).each(function(i) {
      $(this).closest('li').addClass('normal-item');
    });
 
    // Mark the last checkbox as exclusive
    $('li.normal-item:last', thisQuestion).removeClass('normal-item').addClass('exclusive-item');
 
    // A listener on the checkboxes
    $('input[type="checkbox"]', thisQuestion).on('change', function(event) {
      handleExclusive($(this).closest('li'));
    });
 
    function handleExclusive(thisItem) {
      // Uncheck the appropriate boxes
      if ($(thisItem).hasClass('normal-item')) {
        $('.exclusive-item input[type="checkbox"]', thisQuestion).prop('checked', false);
      } else {
        $('.normal-item input[type="checkbox"]', thisQuestion).prop('checked', false);
      }
 
      // Check conditions (relevance)
      $('li.checkbox-item', thisQuestion).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>
  • Joffm
  • Joffm's Avatar
19 Feb 2025 16:30 - 19 Feb 2025 19:22
Replied by Joffm on topic 5-linkert Triple scale array question with rows that can be added

However, there is still a bit mistake.

No, it is not.
As you see the script runs when the page is loaded
$(document).ready(function() { 
This means it doesn't take into account what happened before.

You have to rethink your design.

I could propose:
  • Use an array text with four columns
  • Preset the first column of row 1 and row 2 by an expression
  • Disable these two fields
  • Optionally enter a header for the "Others"
  • Show the next "Other" row, if the count of the previous row is equal to 4.






Scripts:
To enter the dropdowns you have to use a different script that takes in account the used columns (no dropdown in the first column)
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects
    $('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">Please choose...</option>\
<option value="1">very low</option>\
<option value="2">low</option>\
<option value="3">medium</option>\
<option value="4">good</option>\
<option value="5">very good</option>\
    </select>');
    $('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
 <option value="">Please choose...</option>\
<option value="1">very low</option>\
<option value="2">low</option>\
<option value="3">medium</option>\
<option value="4">good</option>\
<option value="5">very good</option>\
    </select>');  
    $('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
 <option value="">Please choose...</option>\
<option value="1">very low</option>\
<option value="2">low</option>\
<option value="3">medium</option>\
<option value="4">good</option>\
<option value="5">very good</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>


To disable the two fields
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $("#answer{SGQ}Y001_X001").prop('disabled', true);
    $("#answer{SGQ}Y002_X001").prop('disabled', true);
  });
</script>


To insert the additional header
Code:
<script type="text/javascript" charset="utf-8">        
    $(document).ready(function() {
       // Identify this question
      var thisQuestion = $('#question{QID}');
      // Define the sub-heading text strings
      var subHeading1 = '<span style="color:maroon;font-size:12pt;font-weight:bold">Others (optional)</span>';
      var columnsLength = $('tr.subquestion-list:eq(0) > *', thisQuestion).length;
        // Insert the new rows
        $('tr.subquestion-list:eq(2)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
        // Fix up the row classes
      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');
                }
            }
        });
    });
</script>


And to preset the two fields 

{Q2_Y001_X001='Employee 1'}
{Q2_Y002_X001='Employee 2'}

Joffm
 
  • tpartner
  • tpartner's Avatar
13 Jan 2025 14:45
Replied by tpartner on topic Array - multiple choice and single choice

...but was unsuccessfully able to make one of my subquestions exclusive per column.
See this post - forums.limesurvey.org/forum/can-i-do-thi...th-checkboxes#227597

If you want the last column to be exclusive, change this:
Code:
$('tr[id^="javatbd"]:first td.checkbox-item', thisQuestion).removeClass('normal-opt').addClass('exclusive-opt');

To this:
Code:
$('tr[id^="javatbd"]:last td.checkbox-item', thisQuestion).removeClass('normal-opt').addClass('exclusive-opt');
  • gerism81
  • gerism81's Avatar
27 Nov 2024 10:03
Replied by gerism81 on topic Se puede adaptar con JAVASCRIPT?
Aquí dejo el código utilizado hasta ahora que no termina de funcionar en lo relacionado con las fechas:

<script>
$(document).on('ready pjax:scriptcomplete', function () {
var thisQuestion = $('#question{QID}');
var today = new Date().toISOString().split('T')[0]; // Fecha actual en formato yyyy-mm-dd

// Limitar la fecha máxima al día actual
thisQuestion.find('input[type="date"]').attr('max', today);

// Validar que la fecha de fin no sea anterior a la de inicio
thisQuestion.find('.answer-item.answer_cell_b').on('change', function () {
var startDate = $(this).closest('tr').find('.answer-item.answer_cell_a input').val();
var endDate = $(this).val();

if (startDate && endDate && startDate > endDate) {
alert('La fecha de fin no puede ser anterior a la fecha de inicio.');
$(this).addClass('error');
} else {
$(this).removeClass('error');
}
});

// Insertar la fecha actual si "Sigue de baja" está seleccionado
$('#answerp19').on('change', function () {
if ($(this).val() === '1') { // 1: Sigue de baja
var numBaixes = parseInt($('#answerp20').val(), 10); // Número de bajas
if (!isNaN(numBaixes) && numBaixes > 0) {
var lastRow = thisQuestion.find('table tbody tr').eq(numBaixes - 1).find('.answer-item.answer_cell_b input');
lastRow.val(today); // Configura la fecha actual
lastRow.attr('readonly', true); // Hace que el campo no sea editable
lastRow.removeClass('error');
}
} else {
thisQuestion.find('input[type="date"]').attr('readonly', false); // Permite editar las fechas nuevamente
}
});

// Validación para evitar fechas duplicadas
thisQuestion.find('input[type="date"]').on('change', function () {
var dates = [];
var hasDuplicates = false;

thisQuestion.find('input[type="date"]').each(function () {
var dateVal = $(this).val();
if (dateVal) {
if (dates.includes(dateVal)) {
hasDuplicates = true;
}
dates.push(dateVal);
}
});

if (hasDuplicates) {
alert('Las fechas no pueden estar duplicadas.');
$(this).addClass('error');
} else {
$(this).removeClass('error');
}
});

// Estilo para campos con error
$('head').append('<style>.error { border-color: red; }</style>');
});
</script>
  • Joffm
  • Joffm's Avatar
13 Nov 2024 14:16 - 13 Nov 2024 14:17
Replied by Joffm on topic Clustered randomization of subquestions in array
Use your own "headers.
Code:
<script type="text/javascript" charset="utf-8">        
    $(document).ready(function() {
      // Identify this question
      var thisQuestion = $('#question{QID}');
      // Define the sub-heading text strings
      var subHeading = '<th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>';
      var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length;
       // Insert the new rows
       $('tr.answers-list:eq(1)', thisQuestion).before('<tr class="sub-header-row">'+subHeading+'</tr>');
       $('tr.answers-list:eq(2)', thisQuestion).before('<tr class="sub-header-row">'+subHeading+'</tr>');
       $('tr.answers-list:eq(3)', thisQuestion).before('<tr class="sub-header-row">'+subHeading+'</tr>');
       // For all subquestions - or however you want
       // Fix up the row classes
      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');
                }
            }
        });
    });
</script>


And some styling

Code:
<style type="text/css">
.sub-header-row {
  color: maroon;
  font-weight:bold;
  text-align: center;
  }
</style>


 

Joffm
  • Joffm
  • Joffm's Avatar
01 Aug 2024 17:20 - 01 Aug 2024 17:21
Replied by Joffm on topic Exclusive option for "Array (numbers)" / Checkbox Array - mistake in script?
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
Replied by Joffm on topic Array (Text): replace last column with comment button
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
Replied by tpartner on topic Clustered randomization of subquestions in array
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
Replied by Joffm on topic Making Columns Exclusive - Array (Numbers) (Checkbox)
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
Replied by DenisChenu on topic Regarding the "Question validation equation," is it possible to hide the TIP whe

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
Displaying 1 - 15 out of 16 results.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source