Liebe LimeSurvey- Community,

ich benutze derzeit die Version 3.25.22+210413 und erstelle für meine Promotion eine Online-Umfrage nach der AHP-Methodik (Analytic Hierachy Process), bei der Patientenpräferenzen erhoben werden sollen. Dabei soll jeweils zwischen zwei Ereignissen abgewogen werden. Die Fragen sollen mittels eines Schiebereglers beantwortet werden. 
Ziel ist ein Schieberegler mit einer Skala von 1-9 in zwei Richtungen (keine negativen Vorzeichen) nach der beigefügten Vorlage im Anhang.

Die Zahlen 2-9 und die Beschriftung "nicht-tödlicher" Herzinfarkt soll rot werden, die 1 in der Mitte schwarz bleiben. Die Zahlen 2-9 inklusive Beschriftung "nicht-tödlicher Schlaganfall" auf der rechten Seite sollen blau dargestellt werden. 

Zudem soll über den Zahlen in rot/ blau auf beiden Seiten die folgende Bedeutung stehen:

1 = gleich wichtig
3 = etwas wichtiger
5 = viel wichtiger
7 = sehr viel wichtiger
9 = extrem wichtiger

Die Zwischenstufen 2,4,6,8 sollen als Zahlen auf der Skala abgebildet, aber unbeschriftet bleiben.

Wäre eine solcher Schieberegler bei LimeSurvey umsetzbar? 

Vielen Dank im Voraus für jeden konstruktiven Umsetzungsvorschlag. 

Schau Dir einmal dies an.
[url] forums.limesurvey.org/forum/design-issue...icture-to-a-question [/url]

Schau Dir einmal dies an.
[url] forums.limesurvey.org/forum/design-issue...to-a-question#214415 [/url]

Hier findest Du tickmarks und tip Texte. Damit solltest Du etwas Ansprechendes bauen können.

Und so könnte es dann aussehen
 

Beachte aber, dass Du wegen der unterbrochenen Skala (es fehlen ja die "0" und eine "1") die gespeicherten Werte von 1 - 17 laufen. Die Anzeigen an der Skala sind ja "Augenwischerei.
Natürlich könntest Du die Skala auch von -8 - +8 laufen lassen. 
Ist aber im Endeffekt gleich; umrechnen musst Du immer.

Joffm
 

Vielen Dank für die schnelle Antwort. Die Beispielskala wäre optimal und die Vorlage würde mir tatsächlich sehr helfen.
Leider komme ich mit den javascript- und css-Vorlagen unter den angegebenen Links nicht weiter. Nach Eingabe im Quellcode erscheint bei mir immer in der Vorschau folgende Fehlermeldung:

"Fehler im Defaultwert : Diese Frage akzeptiert nur 30 Stellen einschließlich 10 Dezimalstellen."

Könnte das an meiner Version liegen?

Soweit bin ich inzwischen gekommen, komme aber jetzt leider nicht mehr weiter. Könntest Du mir vielleicht noch mit einem Tipp behilflich sein (Abstand, Beschriftung über der Skala und Farben?)

Vielen Dank vorab.

Hallo,
die Lücke beruht wohl darauf, dass Du keine fortlaufenden Indizes benutzt hast.

Da Du Deine Umfrage nicht als lss Export geschickt hast, kann ich dazu nicht mehr sagen.

Aber:
Wenn Du das im Link gezeigte Script benutzt
(hier läuft die Skala ja von 1 - 15, kommt sofort dies. Natürlich mit der entsprechenden Teilfrage.

Und die im Original-Thread erwünschten Bilder sind auch nicht vorhanden.

Das ist jetzt noch nicht, wie Du es Dir gewünscht hast.

1. Deine Skala geht nicht von -7 - +7 sondern von 9 - 1 - 9. Das sind also 17 Skalenpunkte.
Ob Du nun den Slider von 1 - 17 laufen lässt, oder von -8 - +8 ist Dir überlassen.
Die Indizes im Script müssen nur damit übereinstimmen.
Also entweder oder
2. Deine Texte(extrem wichtig", usw.) sind nicht vorhanden.
Dafür siehst Du aber, wo die Bilder eingetragen sind. 
Statt derer würden also in "ticksarray2" Deine Texte hineinkommen.
Kannst Du ja wie gewünscht stylen  <span style="color:blue">extrem wichtiger</span>

3. Da ja diese Tickmarks da sind, ist der Tooltip im Grunde überflüssig, ja, er stört sogar.
Diesen entfernst Du durch eine zusätzlich Angabe im <style>...</style> Teil
4. Die Texte links und rechts der Skala sind ein bisschen niedrig.
Auch hier im <style>...</style> Teil
Dann sollte das erscheinen, was ich schon gezeigt habe.

Viel Erfolg
Joffm

PS.
Bei Problemen schicke bitte den lss Export Deiner Umfrage.

Vielen herzlichen Dank! Ich bin vermutlich fast am Ziel, hätte aber noch eine letzte Frage zur mittigen Darstellung (Screenshot anbei).

Dazu der Code:
<script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        var ticksArray = [
            [1, '9'],
            [2, '8'],
            [3, '7'],
            [4, '6'],
            [5, '5'],
            [6, '4'],
            [7, '3'],
            [8, '2'],
            [9, '1'],
            [10, '2'],
            [11, '3'],
            [12, '4'],
            [13, '5'],
            [14, '6'],
            [15, '7'],
            [16, '8'],
            [17, '9'],
        ];
        var ticksArray2 = [
            [1, '<span style="color:blue">extrem wichtiger</span>'],
            [2, ''],
            [3, '<span style="color:blue">sehr viel wichtiger</span>'],
            [4, ''],
            [5, '<span style="color:blue">viel <br> wichtiger</span>'],
            [6, ''],
            [7, '<span style="color:blue">etwas <br> wichtiger</span>'],
            [8, ''],
            [9, '<span style="color:black">gleich <br> wichtig</span>'],
            [10, ''],
            [11, '<span style="color:red">etwas <br> wichtiger</span>'],
            [12, ''],
            [13, '<span style="color:red">viel <br> wichtiger</span>'],
            [14, ''],
            [15, '<span style="color:red">sehr viel wichtiger</span>'],
            [16, ''],
            [17, '<span style="color:red">extrem wichtiger</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)*150;
 
                // 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)*150;
 
                // 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: -50px;
        color: #000000;
        text-align: center; 
    }
 
    @media only screen and (max-width: 768px) {
 .slider-list .slider-left, .slider-list .slider-right {
    margin-top: 0em;
  }
}
        .inserted-tick.left-0 .tick-text {
            margin-left: 0px;
            text-align: left; 
        }
 
        .inserted-tick.left-100 .tick-text {
            margin-left: -100px;
            text-align: right; 
        }
  .slider .tooltip {display:none; }
    }
</style>

 

Ich habe es schon hinbekommen, vielen Dank!

Und da lässt Du mich suchen und suchen...
Wer hat denn die 150 dort hineingeschrieben?

Im Original:
var tickPercent = (tickRelativePosition/thisRange)*100;

Und bei Dir:
var tickPercent = (tickRelativePosition/thisRange)*150;

Aber gut, dass Du es selbst gefunden hast.

Viel Erfolg

Joffm