Konfiguration Schieberegler

More
2 months 1 week ago - 2 months 1 week ago #216268 by PromotionSG
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. 
Attachments:
Last edit: 2 months 1 week ago by PromotionSG.

Please Log in to join the conversation.

More
2 months 1 week ago - 2 months 1 week ago #216272 by Joffm
Replied by Joffm on topic Konfiguration Schieberegler
Schau Dir einmal dies an.
forums.limesurvey.org/forum/design-issue...icture-to-a-question

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

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
 


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

Please Log in to join the conversation.

More
2 months 1 week ago #216279 by PromotionSG
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?

Please Log in to join the conversation.

More
2 months 1 week ago #216297 by PromotionSG
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.
Attachments:

Please Log in to join the conversation.

More
2 months 1 week ago #216311 by Joffm
Replied by Joffm on topic Konfiguration Schieberegler
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
<script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        var ticksArray = [
            [1, '-7'],
            [2, '-6'],
            [3, '-5'],
            [4, '-4'],
            [5, '-3'],
            [6, '-2'],
            [7, '-1'],
            [8, '0'],
            [9, '1'],
            [10, '2'],
            [11, '3'],
            [12, '4'],
            [13, '5'],
            [14, '6'],
            [15, '7'],
        ];
        var ticksArray2 = [
            [1, '<img src="/lime3/upload/surveys/769143/images/smiley_red_401.png">'],
            [2, ''],
            [3, ''],
            [4, ''],
            [5, ''],
            [6, ''],
            [7, ''],
            [8, '<img src="/lime3/upload/surveys/769143/images/smiley_yellow_401.png">'],
            [9, ''],
            [10, ''],
            [11, ''],
            [12, ''],
            [13, ''],
            [14, ''],
            [15, '<img src="/lime3/upload/surveys/769143/images/smiley_green_401.png">'],
        ];
 
        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: 20%;
        height: 20px;
        width: 4px;
        margin-top: -5px;
        margin-left: -1px;
        background-color: #DDDDDD; 
        background-color: green; 
    }
 
    .inserted-tick2.left-0,
    .inserted-tick2.left-100,
    .inserted-tick.left-0,
    .inserted-tick.left-100 {
        background-color: transparent;
        background-color: green; 
    }
 
    .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) {
 
        .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>

(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
        var ticksArray = [
            [1, '9'],
            [2, '8'],
            [3, '7'],
            [4, '6'],
...
            [8, '2'],
            [9, '1'],
            [10, '2'],
            [11, '3'],
...
            [16, '8'],
            [17, '9']
oder
        var ticksArray = [
            [-8, '9'],
            [-7, '8'],
            [-6, '7'],
            [-5, '6'],
...
            [-1, '2'],
            [0, '1'],
            [1, '2'],
            [2, '3'],
...
            [7, '8'],
            [8, '9']

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
.slider .tooltip {display:none; }

4. Die Texte links und rechts der Skala sind ein bisschen niedrig.
Auch hier im <style>...</style> Teil
@media only screen and (min-width: 768px) {
  .slider-list .slider-left, .slider-list .slider-right {
    margin-top: 0em;
  }
}

Dann sollte das erscheinen, was ich schon gezeigt habe.

Viel Erfolg
Joffm

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


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 1 week ago #216324 by PromotionSG
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>

 
Attachments:

Please Log in to join the conversation.

More
2 months 6 days ago #216338 by PromotionSG
Ich habe es schon hinbekommen, vielen Dank!

Please Log in to join the conversation.

More
2 months 6 days ago - 2 months 6 days ago #216339 by Joffm
Replied by Joffm on topic Konfiguration Schieberegler
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


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

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now