- Posts: 14
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<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); } }); }); // Some clean-up styles (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-handle', thisQuestion).css({ 'top': '-4px' }); // 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 into $(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">Yes</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">No</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 (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' }); }); </script>
.column-2.radio label.read::before { display:none !important; }
<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); } }); }); // Insert slider left/right text var leftText = 'Left text'; var rightText = 'Right text'; $('td.with-slider', thisQuestion).append('<div class="left-text">'+leftText+'</div><div class="right-text">'+rightText+'</div>'); // 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">Yes</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">No</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' }); }); </script>