here two examples.
The script is more or less the same, but with the specific adaption. (of course - Tony's scripts)
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);
});
});
// Hide the text inputs in columns 2
$('.column-2 input[type="text"]', thisQuestion).hide();
// Define the select element (dropdown)
var select1 = '<select class="inserted-select"> \
<option value="">-- Bitte, wählen --</option> \
<option value="Europa">Europa</option> \
<option value="Afrika">Afrika</option> \
<option value="Asien">Asien</option> \
<option value="Amerika">Amerika</option> \
<option value="Australien">Australien</option> \
</select>';
// Insert the select elements into column 2
$('.answer-item.column-2').append(select1);
// Initial dropdown values in column 2 (if the question has already been answered)
$('.answer-item.column-2 input[type="text"]').each(function(i){
if($.trim($(this).val()) != '') {
$(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
}
});
// Listener on the dropdowns (insert selected values into hidden text input)
$('.inserted-select').change(function() {
var thisInput = $(this).closest('td').find('input[type="text"]');
$(thisInput).val($(this).val());
checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
});
// Insert the sliders
$('.answer-item.column-3 input[type="text"]', thisQuestion).each(function(i) {
$(this).closest('td').addClass('with-slider');
var thisValue = $(this).val();
var thisValueArr = thisValue.split(',');
var sliderValues = [];
if(thisValueArr.length > 1) {
$(thisValueArr).each(function(i) {
sliderValues.push(Number(this));
});
}
else {
sliderValues = [1, 12];
}
$(this).bootstrapSlider({
'min': 1,
'max': 12,
'step': 1,
'range': true,
'value': sliderValues,
'tooltip': 'always'
});
// Initialization stuff
if(thisValue == '') {
$(this).val('');
$(this).closest('td').find('.tooltip').hide();
}
else {
updateCallOut($(this).closest('td'));
}
});
// A function to insert months in the slider callout
function updateCallOut(el) {
var thisTooltip = $(el).find('.tooltip');
var thisValueArr = $(el).find('input[type="text"]').val().split(',');
var months = {
1: 'Januar',
2: 'Februar',
3: 'März',
4: 'April',
5: 'Mai',
6: 'Juni',
7: 'Juli',
8: 'August',
9: 'September',
10: 'Oktober',
11: 'November',
12: 'Dezember'
};
var startMonth = months[thisValueArr[0]];
var endMonth = months[thisValueArr[1]];
var callOutText = startMonth;
if(startMonth != endMonth) {
callOutText = startMonth+'-'+endMonth;
}
$('.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);
}
});
});
// Some clean-up styles (could be placed in template.css
$('select', thisQuestion).css({
'border': '2px solid #dce4ec',
'padding': '0.7em',
'border-radius': '4px'
});
$('.slider.slider-horizontal', thisQuestion).css({
'margin': '1.7em auto 1em'
});
$('.slider-handle', thisQuestion).css({
'top': '-4px'
});
});
</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': -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 = ['-5', '-5','-5','-5','-5'];
var sliderRightLabels = ['+5', '+5', '+5', '+5', '+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">Ja</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">Nein</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'
});
// Randomize the array rows
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
var tr = $('tr.subquestion-list', thisQuestion).detach().toArray();
shuffleArray(tr);
$.each(tr, function(i, el) {
$('table.subquestion-list tbody', thisQuestion).first().append(el);
});
// Fix up the row background colours
var rowIndex = 0;
$('table.subquestion-list tbody tr', thisQuestion).each(function(i){
rowIndex ++;
$(this).removeClass('array1, array2');
if(rowIndex % 2 == 0) {
$(this).addClass('array1');
}
else {
$(this).addClass('array2');
}
});
});
</script>
Topic Author
