Welcome to the LimeSurvey Community Forum

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

A mixed qeustion type

  • LeibnizJenny
  • LeibnizJenny's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 10 months ago #96040 by LeibnizJenny
A mixed qeustion type was created by LeibnizJenny
Hello,

i want to create a new question type. my problem is i have don't know anything about programming or java and stuff.

So I need your help!

I want to have a fusioned matrix with different entry possibilities.

the first column should be a text input field. the next 3 columns should be check boxes. after that a column with a drop-down-box is needed. Thet another textfield, one checkbox and another textfield is needed.

Is this possible and when yes, how?

Please help!
For a better image I made a picture of my conception.
The topic has been locked.
  • LeibnizJenny
  • LeibnizJenny's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 9 months ago - 10 years 9 months ago #96304 by LeibnizJenny
Replied by LeibnizJenny on topic A mixed qeustion type
the missing file
Attachments:
Last edit: 10 years 9 months ago by LeibnizJenny. Reason: file missing
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 9 months ago #96309 by DenisChenu
Replied by DenisChenu on topic A mixed qeustion type
Workaround: Multiple question types in array

Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves.
Therefore LimeSurvey can't offer guarantees or support for these solutions.
If you have questions, please contact the users that, thankfully, shared their solutions with the community.


Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
More
6 years 5 months ago #158877 by blocka
Replied by blocka on topic A mixed qeustion type
Is this magical awesomeness still possible in the 2.70.0 (170921) version? I tried the LSS, but it's pretty old, and didn't work :-(
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 5 months ago #158886 by Joffm
Replied by Joffm on topic A mixed qeustion type
Hello, blocka,
here two examples.
The script is more or less the same, but with the specific adaption. (of course - Tony's scripts)

script for screenshot_1104
Code:
<script type="text/javascript" charset="utf-8">    
 
  $(document).ready(function(){  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) { 
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1));
        $(this).attr('data-column', i+1);
      });
    });
 
    // Hide the text inputs in columns 2
    $('.column-2 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Bitte, wählen --</option> \
              <option value="Europa">Europa</option> \
              <option value="Afrika">Afrika</option> \
              <option value="Asien">Asien</option> \
              <option value="Amerika">Amerika</option> \
              <option value="Australien">Australien</option> \
            </select>';
 
    // Insert the select elements into column 2
    $('.answer-item.column-2').append(select1);
 
    // Initial dropdown values in column 2 (if the question has already been answered)
    $('.answer-item.column-2 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
    // Listener on the dropdowns (insert selected values into hidden text input)
    $('.inserted-select').change(function() {
      var thisInput = $(this).closest('td').find('input[type="text"]');
      $(thisInput).val($(this).val());
      checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
    });
 
 
    // Insert the sliders
    $('.answer-item.column-3 input[type="text"]', thisQuestion).each(function(i) {
      $(this).closest('td').addClass('with-slider');
      var thisValue = $(this).val();
      var thisValueArr = thisValue.split(',');
      var sliderValues = [];
      if(thisValueArr.length > 1) {
        $(thisValueArr).each(function(i) {
          sliderValues.push(Number(this));
        }); 
      }
      else {
        sliderValues = [1, 12];
      }
 
      $(this).bootstrapSlider({
        'min': 1,
        'max': 12,
        'step': 1,
        'range': true,
        'value': sliderValues,
        'tooltip': 'always'
      });
 
      // Initialization stuff
      if(thisValue == '') {
        $(this).val('');
        $(this).closest('td').find('.tooltip').hide();
      }
      else {
        updateCallOut($(this).closest('td'));
      }
    });
 
    // A function to insert months in the slider callout
    function updateCallOut(el) {
      var thisTooltip = $(el).find('.tooltip');
      var thisValueArr = $(el).find('input[type="text"]').val().split(',');
      var months = {
        1: 'Januar', 
        2: 'Februar', 
        3: 'März', 
        4: 'April', 
        5: 'Mai', 
        6: 'Juni', 
        7: 'Juli', 
        8: 'August', 
        9: 'September', 
        10: 'Oktober', 
        11: 'November', 
        12: 'Dezember'
      };
      var startMonth = months[thisValueArr[0]];
      var endMonth = months[thisValueArr[1]];
      var callOutText = startMonth;
      if(startMonth != endMonth) {
        callOutText = startMonth+'-'+endMonth;
      }
      $('.tooltip-inner', thisTooltip).text(callOutText);
      thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
    }
 
    // Listener on sliders
    $('td.with-slider .slider').on('mousedown', function(event, ui) {
      updateCallOut($(this).closest('td'));
    });      
    $('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
      updateCallOut($(this).closest('td'));
      checkconditions($(this).val(), $(this).attr('name'), 'text');
    });
 
    // Listener on resizing (override the bootstrap callout behaviour)
    $(window).resize(function() {
      $('td.with-slider', thisQuestion).each(function(i) {
        if($('input[type="text"]', this).val() != '') {
          updateCallOut(this);
        }
      });
    });
 
    // Some clean-up styles (could be placed in template.css
    $('select', thisQuestion).css({
      'border': '2px solid #dce4ec',
      'padding': '0.7em',
      'border-radius': '4px'
    });
    $('.slider.slider-horizontal', thisQuestion).css({
      'margin': '1.7em auto 1em'
    });
    $('.slider-handle', thisQuestion).css({
      'top': '-4px'
    });
  });
</script>

script for screenshot_1105:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
 
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1));
        $(this).attr('data-column', i+1);
      });
    });
 
        // Insert the sliders
    $('.answer-item.column-1 input[type="text"]', thisQuestion).each(function(i) {
      $(this).closest('td').addClass('with-slider');
      var thisValue = $(this).val();
 
      $(this).bootstrapSlider({
        'min': -5,
        'max': 5,
        'step': 0.1,
        'range': false,
        'value': Number(thisValue),
        'tooltip': 'always'
      });
 
      // Initialization stuff
      if(thisValue == '') {
        $(this).val('');
        $(this).closest('td').find('.tooltip').hide();
      }
      else {
        updateCallOut($(this).closest('td'));
      }
    });
 
    // A function to update the slider callout
    function updateCallOut(el) {
      var thisTooltip = $(el).find('.tooltip');
      //$('.tooltip-inner', thisTooltip).text(callOutText);
      thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
    }
 
    // Listener on sliders
    $('td.with-slider .slider').on('mousedown', function(event, ui) {
      updateCallOut($(this).closest('td'));
    });      
    $('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
      updateCallOut($(this).closest('td'));
      checkconditions($(this).val(), $(this).attr('name'), 'text');
    });
 
    // Listener on resizing (override the bootstrap callout behaviour)
    $(window).resize(function() {
      $('td.with-slider', thisQuestion).each(function(i) {
        if($('input[type="text"]', this).val() != '') {
          updateCallOut(this);
        }
      });
    });
 
    // Define the slider left/right labels
    var sliderLeftLabels = ['-5', '-5','-5','-5','-5'];
    var sliderRightLabels = ['+5', '+5', '+5', '+5', '+5'];
 
    // Insert slider left/right labels
    $('td.with-slider', thisQuestion).append('<div class="left-text"></div><div class="right-text"></div>');
    $('.left-text', thisQuestion).each(function(i) {
      $(this).text(sliderLeftLabels[i]);
    });
    $('.right-text', thisQuestion).each(function(i) {
      $(this).text(sliderRightLabels[i]);
    });
 
    // Some clean-up styles for the sliders (could be placed in template.css)
    $('thead th, .answer-item.column-1', thisQuestion).css({
      'text-align': 'center'
    });
    $('.slider.slider-horizontal', thisQuestion).css({
      'margin': '1.7em auto 1em'
    });
    $('.slider-selection', thisQuestion).css({
      'background': 'transparent none',
      'box-shadow': 'none'
    });
    $('.slider-handle', thisQuestion).css({
      'top': '-4px'
    });
    $('.left-text, .right-text', thisQuestion).css({
      'margin-top': '-0.5em',
      'font-size': '90%'
    });
    $('.left-text', thisQuestion).css({
      'float': 'left'
    });
    $('.right-text', thisQuestion).css({
      'float': 'right'
    });
 
    // Hide the text inputs in columns 2
    $('.column-2 input[type="text"]', thisQuestion).hide();
 
    // Loop through all column-2 inputs
    $('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) {
      var thisID = $(this).attr('id');
      var thisValue = $(this).val();
 
      // Insert the radios
      $(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\
                    <input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
                    <label class="control-label radio-label" for="'+thisID+'-Y">Ja</label>\
                  </span>\
                  <span class="inserted-radio-wrapper">\
                    <input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
                    <label class="control-label radio-label" for="'+thisID+'-N">Nein</label>\
                  </span>');
 
      // Initial radio states
      $(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
    });
 
    // Listener on the radios
    $('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() {
      var thisInput = $(this).closest('td').find('input[type="text"]');
      $(this).closest('td').find('input[type="text"]').val($(this).val());
      checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
    });
 
    // Some clean-up styles for the radios (could be placed in template.css)
    $('thead th, .answer-item.column-2', thisQuestion).css({
      'text-align': 'center'
    });
    $('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({
      'display': 'inline-block',
      'margin': '25px 10px 0 20px'
    });
    $('.answer-item.column-2 label', thisQuestion).css({
      'padding': '0'
    });
    $('.answer-item.column-2 .radio-label', thisQuestion).css({
      'padding-left': '3px',
      'margin-right': '3px'
    });
 
    // Randomize the array rows
    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;
    }
    var tr = $('tr.subquestion-list', thisQuestion).detach().toArray();
        shuffleArray(tr);
        $.each(tr, function(i, el) {
            $('table.subquestion-list tbody', thisQuestion).first().append(el);
        });
 
    // Fix up the row background colours
    var rowIndex = 0;
    $('table.subquestion-list tbody tr', thisQuestion).each(function(i){
      rowIndex ++;
      $(this).removeClass('array1, array2');
      if(rowIndex % 2 == 0) {
        $(this).addClass('array1');
      }
      else {
        $(this).addClass('array2');
      }
    });
  });
</script>

Best regards
Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 5 months ago #158896 by tpartner
Replied by tpartner on topic A mixed qeustion type
...or, depending on the required input types, maybe Denis' "arrayTextAdapt" plugin - www.limesurvey.org/index.php?option=com_...textadapt&Itemid=729

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose