Ich habe mich für den Schieberegler entschieden und eine gute Lösung gefunden. Das Feld "Keine Antwort" kommt nun ganz links (vor 0 Std) und trägt den Wert 0 im Hintergrund.
Bei den Schieberegler-Genauigkeit habe ich die Zahl auf 1 gesetzt, damit man beim Verschieben des Reglers keine Zwischenschritte hat. Die Testläufe sehen soweit auch gut aus.
Danke nochmals für die Hilfe!
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Define the text strings
var tipTexts = {
0: 'Keine Antwort',
1: '0:00 Std.',
2: '0:15 Std.',
3: '0:30 Std.',
4: '0:45 Std.',
5: '1:00 Std.',
6: '1:15 Std.',
7: '1:30 Std.',
8: '1:45 Std.',
9: '2:00 Std.',
10: '2:15 Std.',
11: '2:30 Std.',
12: '2:45 Std.',
13: '3:00 Std.',
14: '3:15 Std.',
15: '3:30 Std.',
16: '3:45 Std.',
17: '4:00 Std.',
18: '4:15 Std.',
19: '4:30 Std.',
20: '4:45 Std.',
21: '5:00 Std.',
22: '5:15 Std.',
23: '5:30 Std.',
24: '5:45 Std.',
25: '6:00 Std.',
26: '6:15 Std.',
27: '6:30 Std.',
28: '6:45 Std.',
29: '7:00 Std.',
30: '7:15 Std.',
31: '7:30 Std.',
32: '7:45 Std.',
33: '8:00 Std.',
34: '8:15 Std.',
35: '8:30 Std.',
36: '8:45 Std.',
37: '9:00 Std.',
38: '9:15 Std.',
39: '9:30 Std.',
40: '9:45 Std.',
41: '10:00 Std.',
42: '10:15 Std.',
43: '10:30 Std.',
44: '10:45 Std.',
45: '11:00 Std.',
46: '11:15 Std.',
47: '11:30 Std.',
48: '11:45 Std.',
49: '12:00 Std.',
};
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisItem = $(this).closest('li');
// Insert custom tooltip
$('.tooltip-inner', thisItem).addClass('tooltip-inner-1 hidden');
var i0=$(this).val();
i0=Number(i0);
$('.tooltip', thisItem).append('<div class="tooltip-inner tooltip-inner-2">'+tipTexts[i0]+'</div>');
// Listener on slider
$(this).on('slide slideStop', function(event) {
// Handle dynamic tooltip text
var i1=$(this).val();
i1=Number(i1);
$('.tooltip-inner-2', thisItem).html(tipTexts[i1]);
});
});
});
</script><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var ticksArray = [
[1, ' 0:00 Std.'],
[49, '12:00 Std.'],
];
var ticksArray2 = [
[50, '<span style="color:red;font-size:12pt;font-weight:bold">?</span>'],
[51, '<span style="color:red;font-size:12pt;font-weight:bold">x</span>']
];
insertSliderTicks('{QID}', ticksArray);
});
/* Insert Slider Tick Marks */
function insertSliderTicks(qID, ticksArray) {
var thisQuestion = $('#question'+qID);
$(thisQuestion).addClass('with-inserted-ticks');
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisSlider = $(this);
var thisItem = $(thisSlider).closest('li');
var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
var thisRange = thisMax - thisMin;
$.each(ticksArray, function(i, val) {
var tickRelativePosition = val[0] - thisMin;
var tickPercent = (tickRelativePosition/thisRange)*100;
// Insert tick marks
$('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick left-'+tickPercent+'" style="left: '+tickPercent+'%">\
<div class="tick-text">'+val[1]+'</div>\
</div>');
});
});
}
/* Insert Slider Tick Marks */
function insertSliderTicks2(qID, ticksArray2) {
var thisQuestion = $('#question'+qID);
$(thisQuestion).addClass('with-inserted-ticks');
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisSlider = $(this);
var thisItem = $(thisSlider).closest('li');
var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
var thisRange = thisMax - thisMin;
$.each(ticksArray2, function(i, val) {
var tickRelativePosition = val[0] - thisMin;
var tickPercent = (tickRelativePosition/thisRange)*100;
// Insert tick marks
$('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick2 left-'+tickPercent+'" style="left: '+tickPercent+'%">\
<div class="tick-text">'+val[1]+'</div>\
</div>');
});
});
}
</script>
<style type="text/css">/* Slider Tick Marks */
@media only screen and (min-width: 768px) {
.with-inserted-ticks .slider-container {
padding-right: 30px;
padding-left: 30px;
}
}
.with-inserted-ticks .slider-item {
margin-bottom: 50px;
}
.with-inserted-ticks .slider-container .help-block {
margin: 25px 0 0 -20px;
width: 40px;
text-align: center;
}
.with-inserted-ticks .slider-container .help-block.pull-right {
margin: 25px -20px 0 0;
}
.inserted-tick, .inserted-tick2 {
position: absolute;
top: 50%;
height: 15px;
width: 2px;
margin-top: -5px;
margin-left: -1px;
background-color: #DDDDDD;
background-color: black;
}
.inserted-tick2.left-0,
.inserted-tick2.left-100,
.inserted-tick.left-0,
.inserted-tick.left-100 {
background-color: transparent;
background-color: black;
}
.inserted-tick2 .tick-text {
position: absolute;
top: -150%;
width: 100px;
margin-left: -50px;
color: #000000;
text-align: center;
}
.inserted-tick .tick-text {
position: absolute;
top: 150%;
width: 100px;
margin-left: -50px;
color: #000000;
text-align: center;
}
.inserted-tick.left-0 .tick-text {
margin-left: 0px;
text-align: left;
}
.inserted-tick.left-100 .tick-text {
margin-left: -100px;
text-align: right;
}
}
</style>
