-
RoMaier
-
-
OFFLINE
-
Fresh Lemon
-
- Posts: 10
-
Karma: 0
-
|
Hi,
can someone please help me to integrate a Jquary file in LimeSurvey? I would like to add a double Slider as question type, and I haven´t experience on how to do this. Could I add this based on the simple slider in "multiple numerical inputs"?
Thanks in advance!
Ronja
|
|
|
-
RoMaier
-
-
OFFLINE
-
Fresh Lemon
-
- Posts: 10
-
Karma: 0
-
|
Oky thanks, so I should make an extra question for each controller and connect both?
|
|
|
-
DenisChenu
-
-
OFFLINE
-
Moderator Lime
-
- Posts: 4521
- Thank you received: 472
-
Karma: 168
-
|
Hello,
Think best is to do a "multi numeric" simle question (without included slider) and use you own script to:
- Hide the LS answer
- Use slider.range from jquery jqueryui.com/slider/#range and put this in question text or answer part.
- Udate the inout.text from default LS with the slider range number ( use slide: function( event, ui ) { } to do this).
DSenis
|
|
|
-
RoMaier
-
-
OFFLINE
-
Fresh Lemon
-
- Posts: 10
-
Karma: 0
-
|
Thanks!!!
I do unfortunately not understand what you mean by 3., but so far it looks like this:
Zeitstrahl <script src="scripts/jquery/jquery-ui-1.10.1.custom.js"></script><script>
$(function() {
$( ".multinum-slider" ).slider({
range: true,
values: [ 17, 67 ]
});
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
</script>
The slider seems so, but the length is not correctly detected and the values still not stored in Ls, right?
I'm sorry if this is trivial, but I am really new here 
thanks in advance!
|
|
Last Edit: 3 months 6 days ago by DenisChenu. Reason: js tag
|
-
DenisChenu
-
-
OFFLINE
-
Moderator Lime
-
- Posts: 4521
- Thank you received: 472
-
Karma: 168
-
|
RoMaier wrote:
I'm sorry if this is trivial, but I am really new here It's not trivial.
1st : remove <script src="scripts/jquery/jquery-ui-1.10.1.custom.js"></script> LS have already jquery-ui/js
A starting script with a multi numeric question (and 2 sub question for start/end):
The QCODE is QQ
Then sub question code are START and END $("#question{QID} .subquestions-list").hide();
$("<div id='slider-range' />").insertAfter("#question{QID} .subquestions-list");
$( "#slider-range" ).slider({
range: true,
min: 17,
max: 50,
values: [ 17, 50 ],
slide: function( event, ui ) {
$( "#answer{SGQ}START" ).val( "$" + ui.values[ 0 ] );
$( "#answer{SGQ}END" ).val( "$" + ui.values[ 1 ] );
}
});
$( "#answer{SGQ}START" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) );
$( "#answer{SGQ}START" ).val( "$" + $( "#slider-range" ).slider( "values", 1 ) );
Script not tested
|
|
|
-
tpartner
-
-
OFFLINE
-
LimeSurvey Team
-
- Posts: 2948
- Thank you received: 448
-
Karma: 254
-
|
Here is a small jQuery plugin that inserts a jQuery UI range slider into a multi-numeric question and automatically populates that questions inputs with the range min and max values.
The plugin handles:
- previous answers
- slider max/min
- range min start
- range max start
- range span min
- slider step
- slider width
- record the start values
- show slider max and min
1) Add the following to the end of tamplate.js: // A jQuery plugin to display a range slider in LimeSurvey
(function( $ ){
$.fn.lsRangeSlider = function(options) {
// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
range :true,
sliderMin :0,
sliderMax :100,
rangeStartMin :'',
rangeStartMax :'',
minRangeSpan :0,
step :1,
width :250,
recordStart :false,
showMin :false,
showMax :false
}, options);
return this.each(function() {
if($(this).hasClass('numeric-multi') && $('input.text', this).length == 2) {
// Define some vars
var $this = $(this);
var qID = $(this).attr('id').split('question')[1];
var rangeMinInput = $('input.text:eq(0)', $this);
var rangeMaxInput = $('input.text:eq(1)', $this);
// Some classes for the question and sub-questions
$this.addClass('range-slider-question');
// Check for pre-existing answer
if($(rangeMinInput).val() != '' && $(rangeMinInput).val() != '') {
opts.rangeStartMin = $(rangeMinInput).val();
opts.rangeStartMax = $(rangeMaxInput).val();
}
// Insert the slider elements
$('.subquestions-list', $this).before(
'<div class="range-slider-wrapper"> \
<div class="range-slider-min"></div> \
<div id="range-slider-'+qID+'" class="range-slider" style="width:'+opts.width+'px;"> \
<div class="range-slider-callout" id="slider-callout-min-'+qID+'"></div> \
<div class="range-slider-callout" id="slider-callout-max-'+qID+'"></div> \
</div> \
<div class="range-slider-max"></div> \
<div style="clear:both;"></div> \
</div>'
);
// Show min/max if option is set
if(opts.showMax) {
$('.range-slider-max', $this).text(opts.sliderMax);
}
if(opts.showMin) {
$('.range-slider-min', $this).text(opts.sliderMin);
}
// Initiate the slider
var rangeMin;
var rangeMax;
if(opts.rangeStartMin == '' || opts.rangeStartMin < opts.sliderMin || opts.rangeStartMin > opts.rangeStartMax) {
rangeMin = opts.sliderMin+((opts.sliderMax-opts.sliderMin)*0.3333);
}
else {
rangeMin = opts.rangeStartMin;
}
if(opts.rangeStartMax == '' || opts.rangeStartMax > opts.sliderMax || opts.rangeStartMax < opts.rangeStartMin) {
rangeMax = opts.sliderMin+((opts.sliderMax-opts.sliderMin)*0.6667);
}
else {
rangeMax = opts.rangeStartMax;
}
$('#range-slider-'+qID).slider({
range: true,
min: opts.sliderMin,
max: opts.sliderMax,
values: [ rangeMin, rangeMax ],
step: opts.step,
slide: function(event, ui) {
if((ui.values[1] - ui.values[0]) < opts.minRangeSpan) {
return false; // Nothing happens if less than minRangeSpan
}
$(rangeMinInput).val(ui.values[0]);
$(rangeMaxInput).val(ui.values[1]);
$('#slider-callout-min-'+qID).text(ui.values[0]);
$('#slider-callout-max-'+qID).text(ui.values[1]);
setTimeout(function() {
$('#slider-callout-min-'+qID).css({ 'left':$('.ui-slider-handle:eq(0)', $this).position().left - $('#slider-callout-min-'+qID).outerWidth() - ($('.ui-slider-handle:eq(1)', $this).outerWidth()/2)+'px' }).show();
$('#slider-callout-max-'+qID).css({ 'left':($('.ui-slider-handle:eq(1)', $this).position().left)+($('.ui-slider-handle:eq(1)', $this).outerWidth()/2)+'px' }).show();
}, 10);
},
create: function(event, ui) {
// Initial values and positions
if($(rangeMinInput).val() != '' && $(rangeMaxInput).val() != '') { // Pre-existing answer
$('#slider-callout-min-'+qID).text(opts.rangeStartMin);
$('#slider-callout-max-'+qID).text(opts.rangeStartMax);
}
else if(opts.recordStart && opts.rangeStartMin && opts.rangeStartMin && $(rangeMinInput).val() == '' && $(rangeMaxInput).val() == '') { // Record the start value (if option is set)
$(rangeMinInput).val(opts.rangeStartMin);
$(rangeMaxInput).val(opts.rangeStartMax);
$('#slider-callout-min-'+qID).text(opts.rangeStartMin);
$('#slider-callout-max-'+qID).text(opts.rangeStartMax);
}
else {
$('.range-slider-callout', $this).hide();
}
$('#slider-callout-min-'+qID).css({ 'left':$('.ui-slider-handle:eq(0)', $this).position().left - $('#slider-callout-min-'+qID).outerWidth() - ($('.ui-slider-handle:eq(1)', $this).outerWidth()/2)+'px' });
$('#slider-callout-max-'+qID).css({ 'left':($('.ui-slider-handle:eq(1)', $this).position().left)+($('.ui-slider-handle:eq(1)', $this).outerWidth()/2)+'px' });
}
});
}
});
};
})( jQuery );
2) Add these styles to the end of template.css (they are for the default template but easily modified for others): .range-slider-question p.tip,
.range-slider-question .subquestions-list {
display: none;
}
.range-slider-wrapper {
clear: both;
margin: 10px 0;
padding-top: 20px;
}
.range-slider,
.range-slider-max,
.range-slider-min {
float: left;
position: relative;
}
.range-slider-max,
.range-slider-min {
font-size: 0.8em;
color:#666666;
line-height: 1.20;
}
.range-slider-min {
margin-right: 5px;
}
.range-slider-max {
margin-left: 5px;
}
.range-slider-question .ui-slider-handle {
top: -4px;
border-radius: 4px;
}
.range-slider-callout {
position: absolute;
top: -30px;
margin: 0;
min-width: 1.3em;
padding: 0.1em;
font-size: 0.9em;
color:#000000;
line-height: 1;
text-align: center;
background: #F8F8FF;
border: 1px solid #D2E0F2;
border-radius: 4px;
}
3) Then, add something like this to the source of your question (I think the comments explain the options adequately) <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').lsRangeSlider({
sliderMin :0, // Minimum slider value (default 0)
sliderMax :100, // Maximum slider value (default 100)
rangeStartMin :20, // Minimum range handle start value
rangeStartMax :80, // Maximum range handle start value
minRangeSpan :5, // Minimum allowed range span
step :1, // Slider increments (default 1)
width :400, // Width of slider in pixels (default 250)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show slider minimum value? (default no)
showMax :true // Show slider maximum value? (default no)
});
});
</script>
|
Last Edit: 3 months 6 days ago by tpartner.
|
-
RoMaier
-
-
OFFLINE
-
Fresh Lemon
-
- Posts: 10
-
Karma: 0
-
|
Thanks for the great answers!
@ DenisChenu
I've very often tried. The double slider is shown but the subquestions are shown as single slider, too. The values will be saved only if I move the slider of the subquestion and not, when I move my double slider. How can I link the subquestion with my slider? I couldn’t create a working script for QQ and START, END!
@ tpartner your proposal looks very great, it didn´t work in my attempt?!
|
|
|
-
DenisChenu
-
-
OFFLINE
-
Moderator Lime
-
- Posts: 4521
- Thank you received: 472
-
Karma: 168
-
|
RoMaier wrote:
@ DenisChenu
I've very often tried. The double slider is shown but the subquestions are shown as single slider, too. The values will be saved only if I move the slider of the subquestion and not, when I move my double slider. How can I link the subquestion with my slider? I couldn’t create a working script for QQ and START, END! I NEVER say use slider question type .
DON'T USE slider, but a multi numeric question type with 2 sub question The QCODE is QQ
Then sub question code are START and END
tparner or me can be contcated for professionnal service  .
|
|
|
-
tpartner
-
-
OFFLINE
-
LimeSurvey Team
-
- Posts: 2948
- Thank you received: 448
-
Karma: 254
-
|
@ tpartner your proposal looks very great, it didn´t work in my attempt?! Working survey and template attached.
Note that in this demo the text inputs are not hidden so you can see them being loaded.
|
Last Edit: 3 months 16 hours ago by tpartner.
|
|
