Update: Nach dem Clearing des Chaches kann ich hier wieder wie gewohnt posten.
So, wie bereits erwähnt wird der Slider nur in der ersten Reihe implementiert:
Code:
<p><strong>10. Wie wichtig sind die nachfolgenden General Management-Kompetenzen <u>bezogen auf Ihre aktuelle Führungsposition?</u></strong></p>
<script type="text/javascript" charset="utf-8">
// Script zuum Einfügen der Checkboxen anstelle der Textfelder und Einstellen der Exclusivität
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Column-specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
// Insert checkboxes
$('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-5', thisQuestion).addClass('custom-checkbox-item');
$('.custom-checkbox-item', thisQuestion).each(function(i) {
var thisID = $('input:text:eq(0)', this).attr('id');
$('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
if($('input:text:eq(0)', this).val() == 'Y') {
$('input:checkbox:eq(0)', this).prop('checked', true);
}
$(this).removeClass('text-item').addClass('checkbox-item');
$('input:text:eq(0)', this).remove();
});
// Identify exclusive items
$('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-5', thisQuestion).addClass('exclusive-item');
// Listeners for exclusive items
$('.non-exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
$(this).closest('tr.subquestion-list').find('.exclusive-item input:checkbox').prop('checked', false);
}
});
$('.non-exclusive-item input:text', thisQuestion).on('keyup change', function(e) {
if($.trim($(this).val()) != '') {
$(this).closest('tr.subquestion-list').find('.exclusive-item input:checkbox').prop('checked', false);
}
});
$('.exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
$(this).closest('tr.subquestion-list').find('.answer-item').not(thisItem).find('input:checkbox').prop('checked', false);
$(this).closest('tr.subquestion-list').find('input:text').val('');
}
});
});
</script><script type="text/javascript" data-author="Tony Partner">
// Script zum Einfügen der Slider in die 6. Spalte der Matrix
$(document).on('ready pjax:scriptcomplete',function(){
// The column to receive the sliders
var sliderColumn = 6;
var thisQuestion = $('#question{QID}');
var nextQuestion = thisQuestion.nextAll('.numeric-multi:eq(0)');
// Hide the next question
nextQuestion.hide();
//Remove the core array text inputs
$('tr[id^="javatbd"] .answer-item:nth-child('+(sliderColumn+1)+') input', thisQuestion).remove();
// Wait for the sliders to be inititialized
$('input:text', nextQuestion).on('slideEnabled',function(){
var thisItem = $(this).closest('li');
var thisItemIndex = thisItem.index();
// Move the slider and add some styling
$('tr[id^="javatbd"]:eq('+thisItemIndex+') .answer-item:nth-child('+(sliderColumn+1)+')', thisQuestion).append($('.slider-container', thisItem));
$('tr[id^="javatbd"]:eq('+thisItemIndex+') .slider-container', thisQuestion)
.removeClass('col-xs-12 col-sm-12')
.css({
'display': 'block',
'padding': '25px 10px 0 10px'
});
});
});
</script><script type="text/javascript" charset="utf-8">
// Script zum Einfügen des zusätzlichen Headers
$(document).on('ready pjax:scriptcomplete',function(){
// Insert the column categories
$('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
$('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
<td rowspan="2" colspan="1" style="border-top:0 !important;"></td>\
<th class="answer-text inserted-header" colspan="5">Zum gegenwärtigen Zeitpunkt<br/>(heute)</th>\
<th class="answer-text inserted-header" colspan="1"><em>Veränderung</em> der Bedeutung zukünftig<br/>(in 5-10 Jahren)</th>\
</tr>');
});
</script><script type="text/javascript">
// Script zum Einfügen des Zwischenzeilen
// Beachte: In dieser Matrix wird "subquestion-list" angesprochen, nicht "answers-list", wie in einer eindimensionalen Matrix
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Define the sub-heading text strings with tooltip text using the title attribute
var subHeading1 = '<strong title="Your detailed information for Leadership">Leadership</strong>';
var subHeading2 = '<strong title="Your detailed information for Academic Environment">Handeln im akademischen Umfeld</strong>';
var subHeading3 = '<strong title="Your detailed information for Political Environment">Handeln im politischen Umfeld</strong>';
var subHeading4 = '<strong title="Your detailed information for Strategic Design">Strategisches Gestaltungsvermögen</strong>';
var subHeading5 = '<strong title="Your detailed information for Business Thinking">Betriebswirtschaftliches Denken und Handeln</strong>';
var subHeading6 = '<strong title="Your detailed information for Organizational Change">Den organisatorischen Wandel gestalten</strong>';
// Find out the number of columns in the question
var columnsLength = $('tr.subquestion-list:eq(0) > *', thisQuestion).length;
// Insert the subheadings before the specific subquestions
$('tr.subquestion-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
$('tr.subquestion-list:eq(5)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');
$('tr.subquestion-list:eq(10)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading3+'</th></tr>');
$('tr.subquestion-list:eq(15)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading4+'</th></tr>');
$('tr.subquestion-list:eq(19)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading5+'</th></tr>');
$('tr.subquestion-list:eq(24)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading6+'</th></tr>');
// Fix the row classes for styling
var rowClass = 1;
$('table.subquestion-list tbody tr', thisQuestion).each(function(i) {
if($(this).hasClass('sub-header-row')) {
rowClass = 1;
} else {
rowClass++;
$(this).removeClass('array1 array2');
if(rowClass % 2 == 0) {
$(this).addClass('array2');
} else {
$(this).addClass('array1');
}
}
});
// Initialize Bootstrap tooltips
$('[data-bs-toggle="tooltip"]').tooltip();
});
</script><script type="text/javascript" charset="utf-8">
// Script zur Nummeriereung der Spalten für die individuelle Spaltenbreite
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Add a question class
thisQuestion.addClass('custom-array');
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column1-'+i);
});
});
});
</script>
<style type="text/css">/* Individuelle Sapltenbreiten */
.custom-array table.subquestion-list col {
width: auto !important;
}
.custom-array table.subquestion-list thead .column1-0 { width: 28%; }
.custom-array table.subquestion-list thead .column1-1 { width: 45%; }
.custom-array table.subquestion-list thead .column1-2 { width: 27%; }
</style>
<style type="text/css">@media (min-width: 768px) {
.col-md-8 {
flex: 0 0 auto;
flex-grow: 0;
width: 100%;
}
}
/* Teilfragentexte linksbündig */
.ls-answers tbody .answertext {
text-align: left;
}
/* Diverse Anweisungen, um den Slider zu stylen */
.slider.slider-horizontal {
width: 100%;
height: 20px;
}
.slider-handle {
background: #007894;
}
.slider-track {
background-image: linear-gradient(to bottom, #E2E2E2 ,#E2E2E2);
background-repeat: repeat-x;
box-shadow: 0;
border-radius: 10px;
position: absolute;
cursor: pointer;
}
.slider-selection {
background-image: linear-gradient(to bottom, #E2E2E2 ,#E2E2E2);
border-radius: 10px;
}
/* Change the slider handle color */
.slider-handle.min-slider-handle.round {
background-color: #007894;
border: 2px solid #007894;
}
.slider.slider-horizontal .slider-track {
height: 20px;
width: 100%;
margin-top: 0;
top: 0;
left: 0;
border-radius: 10px;
}
.slider-container {
padding: 2px 2px !important;
}
/* Tooltip des Sliders, falls er überhaupt angezeigt werden soll */
.slider .tooltip-inner {
min-width:10px;
height:auto;
padding:3px 3px;
color:#314A5B;
text-align:center;
font-weight:400;
border-radius:5px;
border: 1px solid #314A5B;
background-color:white;
font-size: 12px;
}
/* Diverse Anweisungen, um die ursprünglichen Checkboxen wie Radio-Buttons aussehen zu lassen */
.checkbox-item .ls-label-xs-visibility {
width: 18px;
height: 18px;
}
.checkbox-item label::before, .checkbox-item label::after {
border-radius: 50%;
}
.checkbox-item label::before {
border-color: black;
width:18px;
height:18px;
}
.checkbox-item input[type="checkbox"]:checked + label::after {
content:"";
background: #007894;
padding: 0;
}
#question{QID} .checkbox-item label::after {
width: 10px;
height: 10px;
left: 4px;
top: 4px;
}
.tooltip[data-bs-toggle="tooltip"] {
cursor: pointer;
}
/* Styles for your .mytooltip1 elements */
.mytooltip1 {
cursor: pointer;
font-weight: bold;
color: #007894;
}
.tooltip-inner{
min-width:500px;
height:auto;
padding:3px 8px;
color:#314A5B;
text-align:left;
font-weight:400;
border-radius:15px;
border: 1px solid #314A5B;
background-color:white;
font-size: 16px;
}
/* Farbgebung der beiden Skalen */
td.answer_cell_1,
td.answer_cell_2,
td.answer_cell_3,
td.answer_cell_4,
td.answer_cell_5,
tr.ls-header th.answertext.column1-0,
tr.ls-header th.answertext.column1-1,
tr.ls-header th.answertext.column1-2,
tr.ls-header th.answertext.column1-3,
tr.ls-header th.answertext.column1-4,
th.inserted-header.column1-1 {
background-color: rgba(232, 225, 208);
}
td.answer_cell_6,
tr.ls-header th.answertext.column1-5,
th.inserted-header.column1-2 {
background-color: rgba(211, 222, 239);
}
.sub-header-row th {
color: #96272D;
}
</style>
<style type="text/css">/* Hide the red warning message for mandatory multiple choice questions */
div.ls-question-mandatory-multiplechoice,
div.ls-question-mandatory.ls-question-mandatory-other-text-danger,
div.ls-question-mandatory.ls-question-mandatory-other,
/* Add the class for mandatory multiple numerical input questions */
div.ls-question-mandatory.ls-question-mandatory-array.text-danger {
display: none;
}
</style>
