Hallo,
ich habe auch gesehen, dass da etwas schief läuft.
Da das Ganze aber in javascript gecodet ist, was ich noch weniger als die hier gebräuchliche jquery-Syntax habe ich mich nicht darum gekümmert.
Ich weiß schon, warum meine Lösungsvorschläge meistens nicht auf javascript beruhen.
Was ich allerhöchstens anbieten kann, sind zwei alte scripte (Version 2.73.1)
Vielleicht kannst Du etwas Honig daraus saugen.
Der Fragetyp ist hier jeweils "Matrix(Texte)"
1. Hier ist der Slider zwar links, aber das ist ja marginal
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
2. Textfeld, Drop-down und Range-Slider
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>
Ich weiß, oder ich bin ziemlich sicher, dass diese scripte nicht in Version 5.x. oder 6.x. laufen.
Aber sie sollen ja nur eine Idee geben, wie hier die Datenspeicherung bewerkstelligt wurde.
