Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Implementation eines Sliders in der 2ten Skala eines Dual Arrays.

  • ngolub
  • ngolub's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 months 2 weeks ago #255667 by ngolub
Implementation eines Sliders in der 2ten Skala eines Dual Arrays. was created by ngolub
Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Community Edition   Version 6.4.0+231218 
Own server or LimeSurvey hosting: own server
Survey theme/template: bootstrap vanilla
==================
Hallo,

Ich habe ein Dual Array Skala in meiner Umfrage und möchte wissen, ob es möglich ist die rechts Seite, bzw. die zweite Skala in einen Slider zu umzuwandeln.
 

Hier ist der Code für mein Array
Code:
<p><strong>10. Wie wichtig sind die nachfolgenden General Management-Kompetenzen bezogen auf Ihre aktuelle Führungsposition?</strong></p>
<style type="text/css">.answertext .tooltip {
    color: black; /* Or any other color that stands out against your background */
    visibility: visible;
    display: inline; /* Or 'block', depending on your layout */
  }
  .tooltip[data-toggle="tooltip"] {
    cursor: pointer;
  }
  .tooltip:hover::after {
    content: attr(data-original-title);
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 1000;
    background-color: #f8f8f8;
    padding: 5px;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    pointer-events: none;
  }
 
/* Coloring the first set of headers with light orange */
table.subquestion-list tr th.dsheader:nth-of-type(2),
table.subquestion-list tr th:nth-child(3),
table.subquestion-list tr th:nth-child(4),
table.subquestion-list tr th:nth-child(5),
table.subquestion-list tr th:nth-child(6),
table.subquestion-list tr th:nth-child(7)  {
    background-color: rgba(255, 204, 153, 0.3); /* Light orange with transparency */
}
 
/* Coloring the second set of headers with light blue */
table.subquestion-list tr th.dsheader:nth-of-type(3),
table.subquestion-list tr th:nth-child(9),
table.subquestion-list tr th:nth-child(10),
table.subquestion-list tr th:nth-child(11),
table.subquestion-list tr th:nth-child(12),
table.subquestion-list tr th:nth-child(13),
table.subquestion-list tr th:nth-child(14) { /* Added this line to include the blue header */
    background-color: rgba(153, 204, 255, 0.3); /* Light blue with transparency */
}
 
/* Coloring the columns 3 to 7 with light orange */
table.subquestion-list tr td:nth-child(3),
table.subquestion-list tr td:nth-child(4),
table.subquestion-list tr td:nth-child(5),
table.subquestion-list tr td:nth-child(6),
table.subquestion-list tr td:nth-child(7) {
    background-color: rgba(255, 204, 153, 0.3);
}
 
/* Coloring the columns 9 to 14 with light blue */
table.subquestion-list tr td:nth-child(9),
table.subquestion-list tr td:nth-child(10),
table.subquestion-list tr td:nth-child(11),
table.subquestion-list tr td:nth-child(12),
table.subquestion-list tr td:nth-child(13),
table.subquestion-list tr td:nth-child(14) {
    background-color: rgba(153, 204, 255, 0.3);
}
 
/* Coloring the specific header with an ID with light orange */
#answer866522X20X368_0-4 {
    background-color: rgba(255, 204, 153, 0.3); /* Light orange with transparency */
}
 
/* Ensure that the header_separator class has no background color */
table.subquestion-list tr .header_separator {
    background-color: transparent !important; /* This will make it transparent and override other styles */
}
  
  div.ls-question-mandatory-array {
    display: none;
  }
</style>
<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>

Ich habe gesehen, dass es einen workaround für Slider in Dual Arrays gibt, aber bei mir hat es nicht funktioniert.

Ich habe auch den folgenden Code probiert, aber ohne Erfolg
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    // Target the second scale of question 1784 with the specified header.
    // This assumes 'subquestion' and 'answer' classes are used; these might need adjustment.
    var scaleHeader = "Veränderung der Bedeutung inskünftig (in den kommenden 5-10 Jahren)";
    var questionId = '#question1784';
    var headerExists = $(questionId + ' .answer-item.text-item .answertext').filter(function() {
        return $(this).text().trim() === scaleHeader;
    }).length > 0;
 
    if(headerExists) {
        // Assuming LimeSurvey generates a specific structure for dual scale array questions
        // Find the right table or div that contains the second scale based on the header
        var scale2Container = $(questionId + ' .answer-item.text-item').filter(function() {
            return $(this).text().trim() === scaleHeader;
        }).closest('.answers-list');
 
        // Hide the original scale 2 options
        scale2Container.find('input').closest('li').hide(); // Adjust this selector based on your actual structure
 
        // Create slider and insert it into the document
        var sliderHtml = '<div class="custom-slider-container"><input type="range" min="1" max="5" value="3" class="slider" id="customSlider1784"></div>';
        scale2Container.before(sliderHtml); // You may want to adjust the placement based on your layout
 
        // Update hidden inputs based on slider change
        $('#customSlider1784').on('input change', function() {
            var value = $(this).val();
            // Find and check the corresponding input for the second scale
            scale2Container.find('input[value="' + value + '"]').prop('checked', true);
        });
    }
});
</script>

Könnt ihr mir helfen?

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 months 2 weeks ago - 2 months 2 weeks ago #255675 by Joffm
Replied by Joffm on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Naja, Du hast ja gesehen, für welche Versionen diese workarounds waren. Den letzten, den ich kenne, gab es für 2.50/2.73

Aber jetzt einmal ehrlich. Wozu soll ein Slider bei einer 5-Punkte-Skala dienen?
Er slidet doch nicht, er hoppelt nur.

Ich persönlich sehe einen Slider als Mittel, einen Wert in einer sehr großen Range (0-100, , 0-1000) anzuzeigen.
Wobei es gar nicht auf den einzelnen Wert ankommt, ob es nun 527 oder 531 sind, sondern auf das Verhältnis der einzelnen Slider zueinander; daher auch nur als mehrfache Slider einzusetzen.

Noch eine Frage: Woher stammt das script zur Farbgebung?
Diese und auch das Tooltip-Styling erscheinen mir etwas kompliziert.

Ich habe es einmal anders gemacht
 
Code:
<script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
        $('.coloured-array.array-flexible-dual-scale').each(function(i) {
            // Assign column-specific classes
            $('table.subquestion-list tr.ls-heading:not(.groups)', this).each(function(i) {
                $('.answer-text', this).each(function(i){
                    $(this).addClass('column-'+(i+1));
                });
            });
        });
    });
</script><script type="text/javascript">
  $(document).ready(function() {
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // 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>
Code:
<style type="text/css">.tooltip[data-toggle="tooltip"] {
    cursor: pointer;
  }
 
.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;
}
 
 
    .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);}
    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);}
</style>

Und dieses Hurenkind sieht auch nicht schön aus.
 

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 months 2 weeks ago by Joffm.
The following user(s) said Thank You: ngolub

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 months 2 weeks ago #255715 by Joffm
Replied by Joffm on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Nur als kleine Fingerübung.
Es würde also mit viel "Hau-Ruck" gehen (hier ist noch kein weiteres Styling eingebaut)
 
Im Grund besteht dieses aus vielen einzelnen Fragen (in jeder Zeile eine "Textanzeige" und zwei "Slider"), die in der Horizontalen mit der Klasse ".flex-layout" und dem zugehörigen script dargestellt werden, in der Vertikalen durch die beiden Klassen "no-question" und "no-bottom" zusammengeschoben werden.

Also, nur um zu zeigen, dass man es mit nahezu "Bordmitteln" hinbekommt.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: ngolub

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 months 2 weeks ago #255737 by Joffm
Replied by Joffm on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Immer noch Spielerei an einem verregneten Tag:
 

"Gehen" tut es, aber statt einer Frage und Spalten in der Datenbank Anzahl Teilfragen * 2 hast Du jetzt 
Anzahl Teilfragen * 3 + Anzahl Subheader + 2

Jetzt kann man es natürlich zum Exzess treiben mit Styling; aber, Lass es lieber sein.

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: ngolub

Please Log in to join the conversation.

  • ngolub
  • ngolub's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 months 2 weeks ago #255738 by ngolub
Replied by ngolub on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Wow! Vielen, vielen Dank für diesen wunderbaren Code, Joffm! Den Skript für das Tooltip-Styling und die Farbgebung habe ich mir aus anderen Forenposts und durch Rumgoogeln zusammengesucht, aber deine Version ist eleganter, und die Tooltips sehen jetzt viel besser aus! Zusätzlich habe ich noch bei den Headern Farbe hinzugefügt.

 
Code:
    .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>
Ich bin auch deiner Meinung, dass ein Slider hier nicht besser ist als die 5-Punkte-Skala, aber man hat sich gewünscht, dass ich es zur Veranschaulichung implementiere.Deine Argumentation, wieso man einen Slider verwenden sollte, finde ich sehr logisch und nachvollziehbar. Danke trotzdem, dass du dir die Mühe gemacht hast zu zeigen, dass es trotzdem geht. Hast du noch das lss dazu, damit ich deine Implementierung genauer anschauen kann?

Please Log in to join the conversation.

  • ngolub
  • ngolub's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 months 2 weeks ago #255739 by ngolub
Replied by ngolub on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Danke!

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 months 2 weeks ago #255741 by Joffm
Replied by Joffm on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Hier ist übrigens dieses Ding.
 

File Attachment:

File Name: limesurvey...1144.lss
File Size:89 KB

Das Styling ist nicht besonders schön.
Man sollte mehr Klassen benutzen statt jedesmal den Code neu zu schreiben
Bei mir sind diese in der "custom.css" enthalten. 
Und es sieht in "fruity" nicht so gut aus.


Was ist dies?
th#answer866522X20X1784_0-1

Hast Du das hart gecodet?
Das tut man nicht, man benutzt die Variablen
{SID}: Survey ID
{GID}: Group ID
{QID}: Question ID
​​​​​​​{SGQ}: Zusammenfassung {SID}X{GID}X{QID}, also das was oben hart gecodet ist.

Übrigens: Hast Du auch die css-Klasse "coloured-array" eingetragen? Ich weiß nicht, ob ich es erwähnt hatte.

​​​​​​​Joffm


 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: ngolub

Please Log in to join the conversation.

  • ngolub
  • ngolub's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 months 2 weeks ago - 2 months 2 weeks ago #255781 by ngolub
Replied by ngolub on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Danke für deine Hilfe und das lss! Ich werde versuchen, das bei mir zu implementieren.Das (th#answer866522X20X1784_0-1) ist das hier:



Da ich ganz neu bei LimeSurvey bin, wusste ich nicht, dass man {SID}X{GID}X{QID} verwendet. Stattdessen habe ich versucht über den Webtool herauszufinden wie die einzelnen Komponenten heissen. Ich habe gerade den entsprechenden Abschnitt  hier gefunden. 

Die CSS-Klasse "coloured-array" hatte ich nicht hinzugefügt! CSS-Klassen waren mir auch neu, bis du die Klassen "no-bottom" und "no-question" erklärt hattest. Mittlerweile habe ich auch selbst eine erstellt und implementiert.

Ich habe noch eine Frage
[img
: Bei einer anderen Umfragefrage habe ich einen Slider, bei dem die Subquestions Tooltips haben und die Zahl auf dem Slider-Handle ebenfalls ein Tooltip ist. Als ich versuchte, die Tooltips für die Subquestions zu formatieren, wurde der Slider-Handle versehentlich mitgestaltet. Das Problem habe ich vorläufig so gelöst:

Code:
<style type="text/css">
.slider-handle {
  background-color:#2986cc;
}
 
.slider-handle.custom::before {
  color: #2986cc;
}
 
.slider.slider-untouched .slider-handle {
  background-color: transparent;
}
 
.slider.slider-untouched .slider-handle.custom::before {
  color: #bbb;
}
 
.slider-selection {
  background: #8fce00;
}
 
 
/* Styles for your .mytooltip1 elements */
.mytooltip1 {
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
  color: orange;
}
  
.mytooltip1-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;
}
  </style>
 
<script type="text/javascript">
$(document).ready(function() {
  $('.mytooltip1').on('inserted.bs.tooltip', function() {
    var tooltipId = $(this).attr('aria-describedby');
    $('#' + tooltipId + ' .tooltip-inner').addClass('mytooltip1-inner');
  }).tooltip();
});
</script>

Die Tooltips für die Subquestions habe ich direkt bei jeder Subquestion so implementiert:
Code:
<span class="mytooltip1" data-bs-toggle="tooltip" title="Zeit mit Führungsteam, individuelle Personalangelegenheiten und Konfliktlösung, Compliance und rechtliche Angelegenheiten, allgemeine Verwaltungs- und Kontrollaufgaben, Fakultätsversammlungen u.ä.">Laufende Führungsaufgaben innerhalb des eigenen Organisationsbereichs</span>

 

Jetzt möchte ich den Slider separat formatieren, bzw. ich möchte, dass der Slider Tooltip nur erscheint, wenn man mit der Maus darüberfährt. Ich dachte, mit einem Styling von
Code:
.tooltip-inner
würde es funktionieren, aber ich bekomme es nicht hin.


Könntest du mir erklären, wie es funktionieren würde?
Last edit: 2 months 2 weeks ago by ngolub.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 months 2 weeks ago #255790 by Joffm
Replied by Joffm on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.

Die CSS-Klasse "coloured-array" hatte ich nicht hinzugefügt!

Naja, das war ja der entscheidende Teil. Ohne diese funktionierte ja die Hälfte des css scriptes nicht.
Mein Fehler.

Und das Webdevelopment-Tool ist natürlich das Wichtigste überhaupt, um zu sehen, welche Klassen involviert sind und was Änderungen bewirken.
Hier ist aber die rechte Seite die Interessante. Dort siehst Du im oberen Teil die Klassen, und unten die Definition. Und hier kannst Du dann direkt Dinge ändern und auch etwas hinzufügen bzw. deaktivieren. 
Wenn es dann passt, übernimmst Du es in die Umfrage.

ich möchte, dass der Slider Tooltip nur erscheint, wenn man mit der Maus darüberfährt

Das heißt also für mich als Respondenten:
Ich soll irgendwie 100% verteilen.
Dann stelle ich meine Slider so ein, wie ich meine.
Dann wird angemeckert, dass es nicht 100% sind.
Ohne es zu wissen, streiche ich dann über ein Slider-Handle, um dort zu sehen, auf welchen Wert ich es gestellt habe?
Nee, komm.

Dann mach schon eher ein paar Ticks in Deine Slider und lass den Tooltip dort weg.
Zum Beispiel wie in meinem "Tutorial 2: Mehrfachnennungen,...", Kap. 4.1.
Hier das dort gezeigte Bild.
 





 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: ngolub

Please Log in to join the conversation.

  • ngolub
  • ngolub's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 months 2 weeks ago #255896 by ngolub
Replied by ngolub on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Du hast recht. Bin deinen Anweisungen gefolgt und habe es jetzt so implementiert:

 

 

Please Log in to join the conversation.

  • ngolub
  • ngolub's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 months 3 days ago #257057 by ngolub
Replied by ngolub on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
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-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>

 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 months 3 days ago #257061 by Joffm
Replied by Joffm on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Sieht echt gut ausd.

Das Einzige, was zu bemängeln ist: Du hast hart gecodet.
Also 
statt var thisQuestion = $('#question1784');  besser var thisQuestion = $('#question{QID}');
statt var questionBaseId = "866522X20X1784"; besser var questionBaseId = "{SGQ}"

Denn wenn ich jetzt das script einfach in eine solche Frage einkopierte, würde es nicht ablaufen, da die IDs nicht stimmen. Denn GroupID und QuestionID sind ja einfach autoincrement Zahlen, also in jeder Datenbank unterschiedlich

Daher benutze immer die  System-Variablen, die ja den aktuellen Wert enthalten. 

Alles Gute
​​​​​​​Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

Moderators: Joffm

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source