Habe an dieser Frage weitergearbeitet und konnte jetzt den Schieberegler auf einer anderen Art und Weise implementieren:
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">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question1784');
// 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.answers-list:eq(0) > *', thisQuestion).length;
// Insert the subheadings before the specific subquestions
$('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
$('tr.answers-list:eq(5)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');
$('tr.answers-list:eq(10)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading3+'</th></tr>');
$('tr.answers-list:eq(15)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading4+'</th></tr>');
$('tr.answers-list:eq(19)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading5+'</th></tr>');
$('tr.answers-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>
document.addEventListener("DOMContentLoaded", function() {
// Target the specific question part for future importance with question ID 1903
var questionBaseId = "866522X20X1784"; // Base ID format in LimeSurvey might include the survey ID and question ID
var questionPart = "1"; // Part 2 of the dual array, indicating future importance
// Hide existing radio buttons for the second part of the question
document.querySelectorAll('input[name^="' + questionBaseId + '#"]').forEach(function(radio) {
radio.closest('td').style.display = 'none'; // Hide the table cell containing the radio button
});
// Loop through each sub-question to add a slider
document.querySelectorAll('[id^="javatbd' + questionBaseId + '"]').forEach(function(subQuestionRow) {
var subQuestionId = subQuestionRow.id.match(/\d+$/)[0]; // Extract the numeric part (sub-question ID)
// Create a new slider input
var slider = document.createElement("input");
slider.setAttribute("type", "range");
slider.setAttribute("min", "-1"); // Assuming scale starts at 1
slider.setAttribute("max", "1"); // Assuming scale ends at 3, adjust as per your scale
slider.setAttribute("value", "0"); // Default value, can be adjusted
slider.setAttribute("step", "0.1"); // Set the step interval to 0.1
slider.setAttribute("class", "future-importance-slider"); // For styling if needed
slider.setAttribute("id", questionBaseId + "_" + subQuestionId + "_slider");
// Find the cell where the slider should be placed
var sliderCell = subQuestionRow.querySelector('td:last-child');
if (sliderCell) {
// Clear the cell and append the slider to this cell
sliderCell.innerHTML = ''; // This removes any existing content, like improperly placed sliders
sliderCell.appendChild(slider); // Append the slider to the cell
}
// Update a hidden input or perform other actions when the slider value changes
slider.addEventListener("input", function() {
// Example: Update a hidden input field with the slider's value
var hiddenInput = document.querySelector('input[id="java' + questionBaseId + subQuestionId + '_' + questionPart + '"]');
if(hiddenInput) {
hiddenInput.value = this.value;
}
});
});
});
</script>
<style type="text/css">.tooltip[data-bs-toggle="tooltip"] {
cursor: pointer;
}
/* Styles for your .mytooltip1 elements */
.mytooltip1 {
cursor: pointer;
font-weight: bold;
color: #08407E;
}
.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;
}
.coloured-array.array-flexible-dual-scale .column-1 { background-color: rgba(255, 204, 153, 0.3);}
.coloured-array.array-flexible-dual-scale .column-2 { background-color: rgba(255, 204, 153, 0.3);}
.coloured-array.array-flexible-dual-scale .column-3 { background-color: rgba(255, 204, 153, 0.3);}
.coloured-array.array-flexible-dual-scale .column-4 { background-color: rgba(255, 204, 153, 0.3);}
.coloured-array.array-flexible-dual-scale .column-5 { background-color: rgba(255, 204, 153, 0.3);}
.coloured-array.array-flexible-dual-scale .column-6 { background-color: rgba(153, 204, 255, 0.3);}
.coloured-array.array-flexible-dual-scale .column-7 { background-color: rgba(153, 204, 255, 0.3);}
.coloured-array.array-flexible-dual-scale .column-8 { background-color: rgba(153, 204, 255, 0.3);}
.coloured-array.array-flexible-dual-scale .column-9 { background-color: rgba(153, 204, 255, 0.3);}
.coloured-array.array-flexible-dual-scale .column-10 { background-color: rgba(153, 204, 255, 0.3);}
th.dsheader:nth-of-type(2) { background-color: rgba(255, 204, 153, 0.3);}
th.dsheader:nth-of-type(3) { background-color: rgba(153, 204, 255, 0.3);}
td.answer_cell_1_1 { background-color: rgba(255, 204, 153, 0.3);}
td.answer_cell_1_2 { background-color: rgba(255, 204, 153, 0.3);}
td.answer_cell_1_3 { background-color: rgba(255, 204, 153, 0.3);}
td.answer_cell_1_4 { background-color: rgba(255, 204, 153, 0.3);}
td.answer_cell_1_5 { background-color: rgba(255, 204, 153, 0.3);}
td.answer_cell_2_1 { background-color: rgba(153, 204, 255, 0.3);}
td.answer_cell_2_2 { background-color: rgba(153, 204, 255, 0.3);}
td.answer_cell_2_3 { background-color: rgba(153, 204, 255, 0.3);}
td.answer_cell_2_4 { background-color: rgba(153, 204, 255, 0.3);}
td.answer_cell_2_5 { background-color: rgba(153, 204, 255, 0.3);}
th#answer866522X20X1784_0-1 { background-color: rgba(255, 204, 153, 0.3);}
th#answer866522X20X1784_0-2 { background-color: rgba(255, 204, 153, 0.3);}
th#answer866522X20X1784_0-3 { background-color: rgba(255, 204, 153, 0.3);}
th#answer866522X20X1784_0-4 { background-color: rgba(255, 204, 153, 0.3);}
th#answer866522X20X1784_0-5 { background-color: rgba(255, 204, 153, 0.3);}
th#answer866522X20X1784_1-1 { background-color: rgba(153, 204, 255, 0.3);}
th#answer866522X20X1784_1-2 { background-color: rgba(153, 204, 255, 0.3);}
th#answer866522X20X1784_1-3 { background-color: rgba(153, 204, 255, 0.3);}
th#answer866522X20X1784_1-4 { background-color: rgba(153, 204, 255, 0.3);}
th#answer866522X20X1784_1-5 { background-color: rgba(153, 204, 255, 0.3);}
</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>
<style type="text/css"><style>
/* Override the width of the columns for the sliders */
.ls-answers table .group-2 col {
width: 45% !important; /* This width should match the combined width of the other columns */
}
/* Ensure the sliders span the full width of the table cell */
.future-importance-slider {
width: 100%; /* Make sure the slider takes up the full width */
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question1784');
// 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('column-'+i);
});
});
});
</script>
<style type="text/css">.custom-array table.subquestion-list col {
width: auto !important;
}
.custom-array table.subquestion-list thead .column-0 { width: 30%; }
.custom-array table.subquestion-list thead .column-2 { width: 35%; }
.custom-array table.subquestion-list thead .column-3 { width: 5%; }
.custom-array table.subquestion-list thead .column-5 { width: 30%; }
</style>
