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': -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);
}
});
});
// Define the slider left/right labels
var sliderLeftLabels = ['Left text 1', 'Left text 2','Left text 3','Left text 4','Left text 5'];
var sliderRightLabels = ['Right text 1', 'Right text 2', 'Right text 3', 'Right text 4', 'Right text 5'];
// 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'
});
// 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>
