- Posts: 3
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Sliders With Control Buttons
- Gino909
- Topic Author
- Offline
- New Member
Less
More
5 years 6 months ago #175629
by Gino909
Sliders With Control Buttons was created by Gino909
Hi
We search for help for a project we facing.
We need to create a survey with +/- Buttons. Therefore we found the following workaround:
manual.limesurvey.org/Workarounds:_Quest...With_Control_Buttons
We have installed the sample template and survey but it seems not working anymore.
Can someone help us in this topic? Does someone use this extension?
We are working with version 2.65
Any hint of help very appriciated
Thank you
Gino
We search for help for a project we facing.
We need to create a survey with +/- Buttons. Therefore we found the following workaround:
manual.limesurvey.org/Workarounds:_Quest...With_Control_Buttons
We have installed the sample template and survey but it seems not working anymore.
Can someone help us in this topic? Does someone use this extension?
We are working with version 2.65
Any hint of help very appriciated
Thank you
Gino
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 6 months ago #175635
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 Sliders With Control Buttons
That jQuery plugin was developed for version 2.05 which used jQuery UI sliders. The newer versions of LimeSurvey use Bootstrap sliders so a new plugin is required. If I have time, I will put something together next week.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: Gino909
The topic has been locked.
- Gino909
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
5 years 5 months ago #175669
by Gino909
Replied by Gino909 on topic Sliders With Control Buttons
Hi Tony
Thank you for your answer! That would be great if you could help us in this situation.
Please let me know! Thank you
BR, Gino
Thank you for your answer! That would be great if you could help us in this situation.
Please let me know! Thank you
BR, Gino
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 5 months ago - 5 years 5 months ago #175829
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 Sliders With Control Buttons
I can't test in 2.65 but this will work in 2.73.
1) Place this in template.js:
2) Place something like this in template.css:
3) Place something like this in the source of the question:
Here is a sample survey with all JavaScript and CSS in the source of the first question:
1) Place this in template.js:
Code:
(function( $ ){ $.fn.sliderButtons = function(options) { // The defaults, extended and modified with any passed in the function call var opts = $.extend( { downText: '-', // Text for the "down" button upText: '+', // Text for the "up" button scrolling: true, // Continuous slider movement if left mouse button held down scrollInterval: 150,// Interval (in ms) between slider movement when button is held down valuePrefix: '', // Prefix for callout valueSuffix: '' // Suffix for callout }, options); return this.each(function(i) { var thisQuestion = $(this); // Add some classes $(thisQuestion).addClass('slider-button-question'); // Insert the buttons $('.question-item', thisQuestion).append('<div class="clearfix" />\ <div class="slider-button-wrapper">\ <button type="button" class="slider-button down btn btn-md btn-primary">'+opts.downText+'</button>\ <button type="button" class="slider-button up btn btn-md btn-primary">'+opts.upText+'</button>\ </div>'); // Initial button states function handleButtonState(slider) { var thisRow = $(slider).closest('.question-item'); var thisSliderVal = $(slider).val(); var thisSliderStep = $(slider).attr('data-bs-slider-step'); var thisSliderMin = $(slider).attr('data-bs-slider-min'); var thisSliderMax = $(slider).attr('data-bs-slider-max'); $('button.slider-button', thisRow).prop('disabled', false); if (thisSliderVal == thisSliderMin) { $('button.slider-button.down', thisRow).prop('disabled', true); } if (thisSliderVal == thisSliderMax) { $('button.slider-button.up', thisRow).prop('disabled', true); } } $('input:text.form-control', thisQuestion).each(function(i) { var thisInput = $(this); $(this).on('slideEnabled', function( event, ui ) { var thisRow = $(thisInput).closest('.question-item'); handleButtonState(thisInput); if($('input.text', thisRow).val() != '') { $('.tooltip-inner', thisRow).text(opts.valuePrefix+$(thisInput).val()+opts.valueSuffix); } // Listener on sliders $(thisInput).on('slide slideStop', function( event, ui ) { handleButtonState(thisInput); }); }); }); // Function to handle button actions function handleButtons(thisButton) { var thisRow = $(thisButton).closest('.question-item'); var thisSlider = $('input:text.form-control:eq(0)', thisRow); var thisSliderStep = $(thisSlider).attr('data-bs-slider-step'); var stepDecimals = 0; if(thisSliderStep.toString().indexOf('.') >= 0) { stepDecimals = thisSliderStep.toString().split('.')[1].length; } var thisSliderVal = Number($(thisSlider).val()).toFixed(stepDecimals); var thisSliderMin = $(thisSlider).attr('data-bs-slider-min'); var thisSliderMax = $(thisSlider).attr('data-bs-slider-max'); console.log(thisSliderVal+':'+thisSliderMax); if ($(thisButton).hasClass('down') && Number(thisSliderVal) > Number(thisSliderMin)) { $(thisSlider).bootstrapSlider('setValue', Number(thisSliderVal)-Number(thisSliderStep)); } if ($(thisButton).hasClass('up') && Number(thisSliderVal) < Number(thisSliderMax)) { $(thisSlider).bootstrapSlider('setValue', Number(thisSliderVal)+Number(thisSliderStep)); } var newValue = Number($(thisSlider).val()).toFixed(stepDecimals).replace(/\./, LSvar.sLEMradix); var hiddenInput = $('input.em_sq_validation:eq(0)', thisRow); $(hiddenInput).val(newValue).trigger('change'); $('.tooltip-inner', thisRow).text(opts.valuePrefix+newValue+opts.valueSuffix); } // Scrolling if(opts.scrolling == true) { var sliderTimeout; var clicker = $('button.slider-button', thisQuestion); var count = 0; $('button.slider-button', thisQuestion).on('mousedown touchstart', function(){ var thisButton = $(this); sliderTimeout = setInterval(function(){ handleButtons(thisButton); }, opts.scrollInterval); return false; }); $(document).on('mouseup touchend', function(){ clearInterval(sliderTimeout); return false; }); $('button.slider-button', thisQuestion).mouseout(function(){ handleButtonState($(this).closest('.question-item').find('input:text.form-control')); }); } // Listener on the buttons $('button.slider-button', thisQuestion).on('click touchend', function(e) { handleButtons(this) ; handleButtonState($(this).closest('.question-item').find('input:text.form-control:eq(0)')); }); // Listener on reset buttons $('.slider-reset', thisQuestion).on( "click", function( event, ui ) { var thisReset = $(this); setTimeout(function() { handleButtonState($(thisReset).closest('.question-item').find('input:text.form-control:eq(0)')); }, 150); }); }); }; })( jQuery );
2) Place something like this in template.css:
Code:
.slider-button-question .slider-container { margin-bottom: 0; } .slider-button-question .slider-button-wrapper { margin: 0 0 0 25px; text-align: center; } .slider-button-question .slider-button-wrapper button { padding: 0 10px; margin: 0 0 0 5px; } .slider-button-question .slider-button-wrapper button:disabled { opacity:0.65; filter:alpha(opacity=65); cursor: default; } .slider-button-question .slider-reset { margin-top: 42px; }
3) Place something like this in the source of the question:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('#question{QID}').sliderButtons({ downText: 'Down', // Text for the "down" button upText: 'Up', // Text for the "up" button scrolling: true, // Continuous slider movement if left mouse button held down scrollInterval: 250, // Interval (in ms) between slider movement when button is held down valueSuffix: "%" // Suffix for callout }); }); </script>
Here is a sample survey with all JavaScript and CSS in the source of the first question:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 5 years 5 months ago by tpartner.
The following user(s) said Thank You: Gino909
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 5 months ago #175868
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 Sliders With Control Buttons
Here is a custom question theme for sliders with control buttons in LimeSurvey 3.x -
github.com/tpartner/LimeSurvey-Slider-Controls-3x
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13597
- Thank you received: 2487
5 years 5 months ago - 5 years 5 months ago #175878
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 Sliders With Control Buttons
A question Tony : why you disable hidden ?
github.com/Shnoulle/LimeSurvey-Slider-Co...eric/config.xml#L110
I understand it can not be needed, but sometime : i add a question, activate susrvey, and final user want to remove this question.
Or i add more question than needed, set hidden to show it some week after (but i can use condition).
PS : and as always : thank you for your question template
I understand it can not be needed, but sometime : i add a question, activate susrvey, and final user want to remove this question.
Or i add more question than needed, set hidden to show it some week after (but i can use condition).
PS : and as always : thank you for your question template
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.
Last edit: 5 years 5 months ago by DenisChenu.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 5 months ago - 5 years 5 months ago #175880
by tpartner
Some outstanding issues...
1) We need a better way to hide those attributes - this method smells of a hack.
2) We need an automatic path to the /assets directory for the preview image - github.com/Shnoulle/LimeSurvey-Slider-Co...meric/config.xml#L32 . I tried several relative paths without success until I ended up with what you see - ugh!
3) I am still waiting for a fix on this bug - github.com/Shnoulle/LimeSurvey-Slider-Co...eric/config.xml#L110 - so we can have language-dependent button labels, etc.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Sliders With Control Buttons
Simply because I figured if you are using this custom question, it won't be hidden. Yes, I agree that it may be used after activation (when a client changes their mind) to hide a question but I prefer relevance for that.A question Tony : why you disable hidden ?
Some outstanding issues...
1) We need a better way to hide those attributes - this method smells of a hack.
2) We need an automatic path to the /assets directory for the preview image - github.com/Shnoulle/LimeSurvey-Slider-Co...meric/config.xml#L32 . I tried several relative paths without success until I ended up with what you see - ugh!
3) I am still waiting for a fix on this bug - github.com/Shnoulle/LimeSurvey-Slider-Co...eric/config.xml#L110 - so we can have language-dependent button labels, etc.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 5 months ago by tpartner.
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13597
- Thank you received: 2487
5 years 5 months ago #175900
by DenisChenu
In my opinion : if the setting is incompatible : must be hidden, but if the setting work : don't hide it.
About other part : i start to fix some issue in question template … I think 3 is the priority.
You report the 2 other's ?
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 Sliders With Control Buttons
Yes, but it can be true for a majority of setings, question type .tpartner wrote:
Simply because I figured if you are using this custom question, it won't be hidden.A question Tony : why you disable hidden ?
In my opinion : if the setting is incompatible : must be hidden, but if the setting work : don't hide it.
About other part : i start to fix some issue in question template … I think 3 is the priority.
You report the 2 other's ?
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.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 5 months ago #175907
by tpartner
- bugs.limesurvey.org/view.php?id=14186
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Sliders With Control Buttons
Okay, I bow to your criticism - github.com/tpartner/LimeSurvey-Slider-Co...8326b9b5a6339ac86f82In my opinion : if the setting is incompatible : must be hidden, but if the setting work : don't hide it.
- bugs.limesurvey.org/view.php?id=14185You report the 2 other's ?
- bugs.limesurvey.org/view.php?id=14186
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
- Gino909
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
5 years 5 months ago #175983
by Gino909
Replied by Gino909 on topic Sliders With Control Buttons
Hi tpartner
You are a genius! :woohoo:
thank you very much for providing this solution!
Works great also with Version 2.65. We will integrate it and test it. But at first look it is doing what we need to do!
Have a nice weekend and thanks again!
You are a genius! :woohoo:
thank you very much for providing this solution!
Works great also with Version 2.65. We will integrate it and test it. But at first look it is doing what we need to do!
Have a nice weekend and thanks again!
The topic has been locked.