A mixed qeustion type

More
4 years 6 months ago #96040 by LeibnizJenny
LeibnizJenny created the topic: A mixed qeustion type
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.

Please Log in to join the conversation.

More
4 years 5 months ago - 4 years 5 months ago #96304 by LeibnizJenny
LeibnizJenny replied the topic: A mixed qeustion type
the missing file
Attachments:
Last Edit: 4 years 5 months ago by LeibnizJenny. Reason: file missing

Please Log in to join the conversation.

More
4 years 5 months ago #96309 by DenisChenu
DenisChenu replied the 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
1 month 4 weeks ago #158877 by blocka
blocka replied the 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 :-(

Please Log in to join the conversation.

More
1 month 4 weeks ago #158886 by Joffm
Joffm replied the 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 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:
<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
Attachments:

Please Log in to join the conversation.

More
1 month 4 weeks ago #158896 by tpartner
tpartner replied the 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.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!