- Posts: 2
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
A mixed qeustion type
- LeibnizJenny
- Topic Author
- Offline
- New Member
Less
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.
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 2
- Thank you received: 0
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13907
- Thank you received: 2546
10 years 9 months ago #96309
by DenisChenu
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.
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.
- blocka
- Offline
- Platinum Member
Less
More
- Posts: 409
- Thank you received: 34
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12713
- Thank you received: 3924
6 years 5 months ago #158886
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
script for screenshot_1105:
Best regards
Joffm
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
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
6 years 5 months ago #158896
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.