Hi,
I should say: Yes it is possible.
I found two old examples in the forum for version 2.50/2.73.
One to insert sliders in a matrix(text) one to have a checkbox, and adapted it a bit.
Here is the javascript script
Code:
<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': 0,
'max': 10,
'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 = ['no', 'no','no','no','no'];
var sliderRightLabels = ['great', 'great', 'great', 'great', '10'];
// 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'
});
});
</script>
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify this question
var qID = {QID};
var thisQuestion = $('#question'+qID);
// Add some classes
$(thisQuestion).addClass('with-exclusive-items');
$('td.answer-item', thisQuestion).addClass('non-exclusive-item');
// Loop through the last-column cells
$('td.answer-item:last-child', thisQuestion).each(function(i) {
varThisID = $('input[type="text"]', this).attr('id');
// Add a class
$(this).removeClass('non-exclusive-item').addClass('exclusive-item');
// Hide the text input
$('td.answer-item:last-child input[type="text"]', thisQuestion).hide();
// Insert checkboxes
$(this).append('<div class="checkbox">\
<input class="checkbox" name="" id="'+varThisID+'_cbox" value="N/A" type="checkbox">\
<label for="'+varThisID+'_cbox" class="answertext inserted-label"></label>\
</div>');
});
// Listener on the checkboxes
$('.exclusive-item input[type="checkbox"]', thisQuestion).on('change', function(e) {
var thisRow = $(this).closest('tr.subquestion-list');
var thisCell = $(this).closest('td.answer-item');
if($(this).is(':checked')) {
$('input[type="text"]', thisCell).val('1');
$('.non-exclusive-item input[type="text"]', thisRow).val('');
}
else {
$('input[type="text"]', thisCell).val('');
}
// Fire Expression Manager
$('input[type="text"]', thisRow).each(function(i) {
$(this).trigger('keyup');
});
});
// Listener on the text inputs
$('.non-exclusive-item input[type="text"]', thisQuestion).on('keyup change', function(e) {
var thisRow = $(this).closest('tr.subquestion-list');
if($.trim($(this).val()) != '') {
$('.exclusive-item input[type="checkbox"]', thisRow).prop('checked',false);
$('.exclusive-item input[type="text"]', thisRow).val('');
}
// Fire Expression Manager
$('.exclusive-item input[type="text"]', thisRow).trigger('keyup');
});
// Insert some styles (these could be in template.css)
// For the LS 2.67 default template
var newStyles = '.with-exclusive-items thead th.answertext {\
text-align: center;\
}\
.with-exclusive-items .exclusive-item {\
text-align: center;\
vertical-align: middle;\
cursor: pointer;\
}\
.with-exclusive-items .checkbox {\
padding-left: 0;\
}\
.with-exclusive-items .inserted-label {\
width: 24px;\
min-height: 24px;\
padding: 0;\
}\
.with-exclusive-items .inserted-label::before {\
margin: 4px 0 0 4px;\
}\
.with-exclusive-items .inserted-label::after {\
margin: 4px 0 0 4px;\
}';
$('head').append('<style type="text/css">'+newStyles+'</style>');
});
</script>
Please, do not ask me anything about this.
I am not at all familiar with javascript.
What I do is a bit "trial and error".
You have to add some validation to avoid a setting of the slider and checking the box.
And as you know it is a bit difficult to set the column width, as this version is not based on bootstrap, but on a table with a colgroup.
But:
If there are "not used" elements, you should better ask in a previous question "Which do you use?" and then you display the slider only for "used" elements
Joffm
Topic Author
