Schieberegler mit Option "Keine Antwort" und/oder "Ich weiss nicht"

More
2 months 5 days ago #216371 by kidim_vb
Liebe Community

Ich nutze die LimeSurvey Version 3.24.0 201013 serverbasiert.

Für gewisse Fragen meiner Umfrage möchte ich Schieberegler mit Zeitangaben von 0 bis 12 Stunden (0.25h Intervalle) verwenden. Da alle Fragen meiner Umfrage Pflichtfragen sind, möchte ich den Teilnehmenden immer noch die Option "Ich weiss nicht" und "Keine Antwort" zur Auswahl geben. Das Funktioniert überall recht gut, lediglich beim Schieberegler habe ich meine Mühe. Ein Beitrag im Forum deutet darauf hin, dass das gar nicht möglich ist: forums.limesurvey.org/forum/german-forum...zw-mit-keine-antwort . Ich habe trotzdem mal meine bevorzugten Darstellungen im beigelegten PDF zusammengestellt. Womöglich hat jemand von euch eine Idee, wie man das oder etwas Ähnliches umsetzen kann? Das Ziel wäre es, dass auch diese Schieberegler-Frage eine Pflichtfrage wird mit den Optionen "Ich weiss nicht" [8888] und "Keine Antwort" [9999].

Die entsprechende Frage habe ich auch hochgeladen.

Hat jemand von euch hierzu eine tolle Idee, wie ich das lösen könnte?

Liebe Grüsse und grosses Dankeschön bereits im Voraus!
Attachments:

Please Log in to join the conversation.

More
2 months 5 days ago - 2 months 5 days ago #216379 by jelo
Ich habe 2016 mal eine Featurerequest dazu geöffnet.
bugs.limesurvey.org/view.php?id=10856

Aktuelle Workarounds dazu sind mir leider nicht bekannt.

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Last edit: 2 months 5 days ago by jelo.

Please Log in to join the conversation.

More
2 months 5 days ago #216392 by Joffm
Tja, schwierig.
Das grundsätzliche Problem ist eben, dass der Slider auf dem Fragetyp "mehrfache numerische Eingabe" beruht. Und dort gibt es eben keine separate Option "KA".
Es gibt zwar das Plugin "checkBoxFor Text", aber eben nur für direkte Zahleingabe, wirkt also nicht beim Slider.

1. Lösung: Verabschiede dich vom Slider.
Dafür hätte ich dann diesen Vorschlag.
Matrix(Texte) mit Drop-downs und Abhängigkeit der zweiten Spalte von der ersten.
 

2. Schau Dir einmal den Thread von "PromotionSG" an.
forums.limesurvey.org/forum/german-forum...ration-schieberegler

Ich könnte mir vorstellen, dass man hier die Skala von 0 - 14 laufen lässt, Ticks nur bei 0, 12, 13,14 macht, die letzten beiden Punkte mit "WN" bzw. "KA" beschriftet.
Dann kann man auch den Tooltip entsprechend beschriften.

Das ist jetzt zunächst einmal eine sehr rohe Idee.

Joffm

PS.
Bitte weder lsq noch lsg Exporte, nur lss.
lsq/lsq Exporte sind sprachsensitiv, d.h. man kann sie nur in eine Umfrage importieren, die dieselbe Basissprache hat (schon "deutsch" und "deutsch-informal" würde in die Hose gehen).
Außerdem fehlen die systemweiten Einstellungen. Z.B. ist von Bedeutung, ob Du "Frage für Frage" oder "Gruppe für Gruppe" anzeigst.
Und als Letztes. Wir machen diese Arbeit in unserer Freizeit; daher hilf uns, indem Du uns nicht zwingst, zunächst eine neue Umfrage anzulegen (hoffentlich mit der richtigen Sprache), um Deinen Export zu importieren.
Und dann auch nicht den lss Export der gesamten Umfrage, sondern nur die relevanten Fragen. Dazu die Umfrage kopieren, und alles Überflüssige löschen.


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in to join the conversation.

More
2 months 5 days ago #216403 by Joffm
Meine "Idee" funktioniert sogar

   



Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in to join the conversation.

More
2 months 5 days ago #216407 by kidim_vb
Oh danke Joffm und bitte entschuldige, das mit dem Isq/Isg Export war mir nicht bewusst!

Deine zweite Lösung sieht toll aus! Wie hast Du das mit den 0:00 Std. hinbekommen (das hatte ich vorgängig nämlich auch schon vielfach versucht und nicht geschafft)?

Würdest Du mir von dieser Lösung allenfalls den Iss-Export zur Verfügung stellen können?

Please Log in to join the conversation.

More
2 months 5 days ago #216414 by Joffm
Es ist nur eine Anwendung des hier gezeigten scripts.
forums.limesurvey.org/forum/design-issue...to-a-question#214415

Hier ist also das modifizierte Script (0.25h soll wohl 0,25 Stunden oder auch 15 Minuten bedeuten; ab und zu muss ich spitzfindig sein )
Das ergibt dann dies.
 

Du siehst das Problem. Dadurch, dass es nun insgesamt 50 Schritte gibt, sind die Abstände ziemlich klein geworden, so dass Texte wie "weiß nicht" oder "keine Angabe nicht mehr hinpassen.
Ich habe jetzt einmal - wie in dem verlinkten Beispiel - oben eine zweite Tickleiste eingebaut. Auf die Schnelle mit zwei simplen Zeichen. Da könntest Du ja irgendwelche netten Graphiken einsetzen.
Und hier das javascript und das css, dass Du in den Fragetext (im Quellcode-Modus) einfügst.
Ich denke, es ist gut ersichtlich, wie es aufgebaut ist.
<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:    '0:00 Std.',
              1:    '0:15 Std.',
              2:    '0:30 Std.',
              3:    '0:45 Std.',
              4:    '1:00 Std.',
              5:    '1:15 Std.',
              6:    '1:30 Std.',
              7:    '1:45 Std.',
              8:    '2:00 Std.',
              9:    '2:15 Std.',
            10:    '2:30 Std.',
            11:    '2:45 Std.',
            12:    '3:00 Std.',
            13:    '3:15 Std.',
            14:    '3:30 Std.',
            15:    '3:45 Std.',
            16:    '4:00 Std.',
            17:    '4:15 Std.',
            18:    '4:30 Std.',
            19:    '4:45 Std.',
            20:    '5:00 Std.',
            21:    '5:15 Std.',
            22:    '5:30 Std.',
            23:    '5:45 Std.',
            24:    '6:00 Std.',
            25:    '6:15 Std.',
            26:    '6:30 Std.',
            27:    '6:45 Std.',
            28:    '7:00 Std.',
            29:    '7:15 Std.',
            30:    '7:30 Std.',
            31:    '7:45 Std.',
            32:    '8:00 Std.',
            33:    '8:15 Std.',
            34:    '8:30 Std.',
            35:    '8:45 Std.',
            36:    '9:00 Std.',
            37:    '9:15 Std.',
            38:    '9:30 Std.',
            39:    '9:45 Std.',
            40:    '10:00 Std.',
            41:    '10:15 Std.',
            42:    '10:30 Std.',
            43:    '10:45 Std.',
            44:    '11:00 Std.',
            45:    '11:15 Std.',
            46:    '11:30 Std.',
            47:    '11:45 Std.',
            48:    '12:00 Std.',
            49:    'weiß nicht',
            50:    'keine Angabe'
        };
 
        $('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 = [
            [0, '0:00 Std.'],
            [48, '12:00 Std.'],
            [49, ''],
            [50, ''],
        ];
        var ticksArray2 = [
            [49, '<span style="color:red;font-size:12pt;font-weight:bold">?</span>'],
            [50, '<span style="color:red;font-size:12pt;font-weight:bold">x</span>']
          ];
 
        insertSliderTicks('{QID}', ticksArray);
        insertSliderTicks2('{QID}', ticksArray2);
    });
 
/* 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: 20px;
        width: 4px;
        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>


Viel Erfolg

Joffm

PS.
Den Hinweis auf lss Export habe ich jetzt als Textbaustein.
Es ist völlig klar, dass man dies als Neuling nicht weiß.
 


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in to join the conversation.

More
2 months 5 days ago #216420 by kidim_vb
Perfekt, danke Dir!

Ich hab es hinbekommen, dass da bisschen mehr Platz ist.Habe "Ich weiss nicht" auf Zeile 60 versetzt und "Keine Antwort" auf 75.

Danke nochmals und
beste Grüsse! 
Attachments:

Please Log in to join the conversation.

More
2 months 5 days ago - 2 months 5 days ago #216435 by Joffm
Was passiert denn jetzt, wenn Du mit dem Slider über 12:00 hinaus gehst?
Springt er dann zu "weiß nicht"? Oder kann er auch dazwischen geparkt werden?
Das wäre dann ja super.

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 months 5 days ago by Joffm.

Please Log in to join the conversation.

More
2 months 5 days ago #216439 by holch
Ich bin da ja eher für "Form follows function". Der Schieberegler sieht zwar zugegebener Massen gut aus, ist aber halt nicht immer die beste Lösung.

Ich persönlich finde hier die von Joffm präsentierte Dropdown-Lösung auch aus Sicht der Teilnehmer besser und leichter zu beantworten. Ganz davon abgesehen, dass nicht klar ist, was passiert wenn man über die 12h hinausgeht und ob man die Antwort dann irgendwo im "Niemandsland" (zwischen 12h und "weiss" nicht) positionieren kann.

Spannend dürfte es beim Slider dann auch auf einem Smartphone werden. Die Praxis zeigt, dass viele Umfragen meist auf Smartphones beantwortet werden. Bei manchen Zielgruppen wirst du da schon fast bei 90%+ landen.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

More
2 months 5 days ago #216451 by kidim_vb
@Joffm: Wenn ich über 12:00h hinaus gehe, dann bleibt 12:00h bis ich zum Punkt "Ich weiss nicht" komme (s. Anhang). Dann bleibt "Ich weiss nicht" bis ich zum Punkt "Keine Antwort" komme.

@Holch: Ja, da hast Du wohl recht. Die Schieberegler sind toll, gerade deshalb, weil man visuell die Zeitangaben noch besser im Vergleich sieht. Wir müssen nun intern schauen, wie wir weiter verfahren möchten. Die Dropdown-Lösung ist auch gut!
Attachments:

Please Log in to join the conversation.

More
2 months 5 days ago #216454 by Joffm
Ja, der Tooltipp ist klar.
Das ist ja alles nur Kosmetik.
Wichtig ist aber, was als Wert gespeichert wird.
Ich denke, da wirst Du dann Werte wie "57" finden.

@holch hat natürlich Recht.
Daher auch mein erster Vorschlag.
Der Rest war dann auch eine Fingerübung für mich.

Du wolltest so etwas haben.
Beim Testen wirst Du sowieso die Ecken und Kanten bemerken.

Es ist auch eine Abwägung.
Slider kitzelt ein bisschen den Spieltrieb hervor, ein einfaches Eingabefeld mit Maske, um das Format zu erzwingen, ist schnell, einfach implementiert, aber auch "wie immer".

Jedenfalls hast jetzt verschiedene Möglichkeiten und kannst probieren und entscheiden.

Bis dann
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
2 months 3 days ago #216541 by kidim_vb
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>

Please Log in to join the conversation.

More
2 months 3 days ago #216557 by Joffm
Na, das ist doch schön.

Heißt also, Du nimmst nur einen Wert "keine Antwort"? Gut so.

Ich habe vielleicht noch eine kleine Verbesserung.
Wenn Du die Sliderskala von -1 bis 48 laufen lässt mit Anfangswert 0, hast Du eine einfache Relation zwischen abgespeichertem Wert und Stundenzahl, nämlich x / 4
Und auch einen sehr eindeutigen Wert (-1) für "keine Antwort".

Da das Tooltip-Array keine negativen Indizes zulässt, läuft dieses von 1 bis 49 und Du musst  ein offset einbauen.
Nämlich hier
            var i0=$(this).val();
            i0=Number(i0)+1;
und hier
            var i0=$(this).val();
            i0=Number(i0)+1;

Und ich habe doch noch den Text für "keine Antwort" nach oben geschrieben.
Und im css die untere Beschriftung etwas geändert
 
Nur noch so als Nachschlag.
<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)+1;
 
            $('.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)+1;
                $('.tooltip-inner-2', thisItem).html(tipTexts[i1]);
 
            });
 
        });
    });
</script> <script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        var ticksArray = [
            [0, '          0:00 Std.'],
            [48, '12:00 Std.'],
        ];
        var ticksArray2 = [
          [-1, 'keine<br />Antwort'],
          ];
 
        insertSliderTicks('{QID}', ticksArray);
        insertSliderTicks2('{QID}', ticksArray2);
    });
 
/* 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: 20px;
        width: 4px;
        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: -250%;
        width: 100px;
        margin-left: -50px;
        color: #000000;
        text-align: center; 
    }
    .inserted-tick .tick-text {
        position: absolute;
        top: 150%;
        width: 100px;
        margin-left: -20px;
        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>

 






Jetzt noch ein letzter Hinweis:
Wenn Du Code hier darstellen willst, benutze die entsprechende Taste  
Man kann auch die Syntaxhervorhebung bestimmen, indem man hinzufügt

[code type=javascript]
oder
[code type=css]


Dann viel Erfolg bei Deiner Umfrage

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in to join the conversation.

More
2 months 3 days ago #216558 by Joffm
Man soll eben nie kopieren
Muss natürlich heißen

Nämlich hier
            var i0=$(this).val();
            i0=Number(i0)+1;
und hier
            var i1=$(this).val();
            i1=Number(i1)+1;
 


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
1 month 4 weeks ago #216653 by kidim_vb
Das mit -1 als "Keine Antwort" ist ja toll. Hatte ich auch versucht, doch wie Du schreibst, lässt das Tooltip-Array keine negativen Zahlen zu, weshalb ich daran gescheitert bin. Aber ja, so scheint es gut zu klappen. Merci!

Und: Gut zu wissen das mit der Code-Darstellung - danke!

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now