Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

True visual analogue scales in Limesurvey?

More
9 years 2 months ago - 9 years 2 months ago #131586 by pio
Replied by pio on topic True visual analogue scales in Limesurvey?
sorry, just activated it
Attachments:
Last edit: 9 years 2 months ago by pio.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago #131617 by tpartner
Replied by tpartner on topic True visual analogue scales in Limesurvey?
Add something like this to template.css. You will need to modify "46926" to match the question ID in your live survey.

Code:
#question46926 label.slider-label {
    padding-top: 50px;
    padding-right: 50px;
}
 
#question46926 div.multinum-slider {
    margin: 80px 20px 0 20px;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
More
9 years 2 months ago #131649 by pio
Replied by pio on topic True visual analogue scales in Limesurvey?
thank you very much!
The topic has been locked.
More
7 years 10 months ago - 7 years 10 months ago #156223 by de_huig
Replied by de_huig on topic True visual analogue scales in Limesurvey?

tpartner wrote: Okay, now that I've woken up and re-read the thread, I think I understand - you're only concerned about clicking the slider bar, not dragging the handle.

Add the following to the end of template.css to convert the slider handle to a vertical bar and hide the slider callout (these styles are for the default template). Replace "QQ" with your question ID.

Code:
#questionQQ .ui-slider .ui-slider-handle {
  height:25px;
  width: 2px;
  margin-left: 0;
  top: -8px;
  background: #79B7E7 none;
  border: 0 none;
}
 
#questionQQ .slider_callout {
  display: none;
}

If you want to initially hide the slider handle, set up your survey to use JavaScript and add the following script to the source of the slider question. Again, replace "QQ" with the question ID.
Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function() {
 
    var qID = QQ;
 
    $('#question'+qID+' .ui-slider .ui-slider-handle').hide();
    $('#question'+qID+' .ui-slider').live('mouseup', function() {
      $('#question'+qID+' .ui-slider .ui-slider-handle').show();
    });
 
  });
 
</script>


Hi!
I'm not sure what the policy is on responding on old topics/questions, but I figured I should try it anyway..Here's the thing: A couple of years ago I found the quoted piece of code which was really helpful to me at the time. However, it doesn't seem to work in the 2.50 version. Am I missing something here, or what should I adjust? I would like to let people rate a short movieclip with a slider, for which the handle should only become visible at mouseclick, and for which the value(s) are hidden all the time. I did some googling on the topic, but since that wasn't really helpful I figured I should ask for your help. JavaScript is on (according to the test with an Alert). Thanks in advance!
Last edit: 7 years 10 months ago by de_huig.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 10 months ago #156228 by holch
Replied by holch on topic True visual analogue scales in Limesurvey?
Templates have changed significantly in 2.6x and old templates will most probably not work with the newer version. And many of Tpartners excellent workarounds will also not work, because the html/css code has changed quite a bit. Thus most javascript workarounds provided by Tpartner need to be adapted to the new version. And there are sooo many of those great workarounds that were developed by mainly Tpartner, no one can really keep track of them.

By the way: Bad news! Due to the experience and some flaws in the new templates, in LS 3.0 we will see another ruptur in templates. Hopefully this will be the last major change in Templating for a long time.
Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.
The following user(s) said Thank You: de_huig
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 10 months ago #156254 by tpartner
Replied by tpartner on topic True visual analogue scales in Limesurvey?
Version 2.6x uses Bootstrap sliders instead of jQuery UI sliders so, as holch points out, some workarounds may fail.

For 2.6x (and 3.x which will also use Bootstrap sliders), this script will hide the slider tooltip permanently and hide the slider handle until the slider track is clicked on.

Note: there may be issues if you allow the respondent to return to the page as there is no simple way to determine if a Bootstrap slider has never been clicked.

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $('#question{QID} .question-item').hide();
 
    $('#question{QID} input[type="text"]').each(function(i) {
      $('#question{QID} input[type="text"]').on('slideEnabled', function(e) {
        var thisRow = $(this).closest('.question-item');
        $('.slider .tooltip', thisRow).addClass('hidden');
        $('.slider .slider-handle', thisRow).hide();
 
        $('.slider', thisRow).on('slideStop', function(e) {
          $('.slider-handle', thisRow).show();
        });
 
        $(thisRow).show();
      });
    });
  });
</script>
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: de_huig
The topic has been locked.
More
7 years 10 months ago #156256 by de_huig
Replied by de_huig on topic True visual analogue scales in Limesurvey?
That's perfect! Thank you so much!
The topic has been locked.
More
4 years 11 months ago - 4 years 11 months ago #200198 by mopodendo
Replied by mopodendo on topic True visual analogue scales in Limesurvey?
Sorry for bringing this up once more.
I tried tpartner's last JS solution on LS 3.17 but it doesn't seem to work. Is there a way to achieve a hiding of the tooltip and the slider handle with this version?

To specify: If I include the code, the slider is completely hidden and no answer can be given.
Last edit: 4 years 11 months ago by mopodendo.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #200204 by tpartner
Replied by tpartner on topic True visual analogue scales in Limesurvey?
There are several code snippets in this thread. Can you please explain exactly what you wish to achieve with screenshots/mock-ups and post the code that you tried?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
4 years 11 months ago #200207 by mopodendo
Replied by mopodendo on topic True visual analogue scales in Limesurvey?
Sure!
Screenshot is the current state.
1. I would like the tooltip (black box displaying the input number) to disappear
2. Ideally, although not as inportant, the selection marker (circle) would only appear once the participant has clicked on the slider.
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $('#question{QID} .question-item').hide();
 
    $('#question{QID} input[type="text"]').each(function(i) {
      $('#question{QID} input[type="text"]').on('slideEnabled', function(e) {
        var thisRow = $(this).closest('.question-item');
        $('.slider .tooltip', thisRow).addClass('hidden');
        $('.slider .slider-handle', thisRow).hide();
 
        $('.slider', thisRow).on('slideStop', function(e) {
          $('.slider-handle', thisRow).show();
        });
 
        $(thisRow).show();
      });
    });
  });
</script>

Thanks for your help!
Attachments:
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago - 4 years 11 months ago #200218 by Joffm
Replied by Joffm on topic True visual analogue scales in Limesurvey?
Hi,
only to hide the tooltip, this should be sufficient.
Code:
.slider .tooltip.top {
  display:none;
}

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 11 months ago by Joffm.
The following user(s) said Thank You: mopodendo
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #200222 by tpartner
Replied by tpartner on topic True visual analogue scales in Limesurvey?
This script will remove the tooltips and hide the slider handle until the slider is manipulated in 3.x:

Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var qID = {QID};
    var thisQuestion = $('#question'+qID);
 
    $('input:text', thisQuestion).on('slideEnabled',function(){ 
      var thisItem = $(this).closest('li');
      var thisCode = $(thisItem).attr('id').split('X'+qID)[1];
 
      // Remove the tooltips
      $('.tooltip', thisItem).remove();
 
      // Initially hide the slider handle
      if($('input:text[id^="answer"][id$="X'+qID+thisCode+'"]', thisItem).val() == '') {
        $('.slider-handle', thisItem).hide();
      }
 
      // Listener on slider
      $(this).on('slide slideStop', function(event) {
        // Show the slider handle
        $('.slider-handle', thisItem).show();
      });
    });
    });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...9381.lss
File Size:24 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: mopodendo
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source