- Posts: 48
- Thank you received: 0
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
- Topic Author
- Offline
- Senior Member
Less
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
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
Könnt ihr mir helfen?
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 2 weeks ago - 2 months 2 weeks ago #255675
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
Und dieses Hurenkind sieht auch nicht schön aus.
Joffm
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 2 weeks ago #255715
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 2 weeks ago #255737
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
"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
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 0
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.
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?
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>
Please Log in to join the conversation.
- ngolub
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 0
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 2 weeks ago #255741
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Hier ist übrigens dieses Ding.
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
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
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 0
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 : 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:
Die Tooltips für die Subquestions habe ich direkt bei jeder Subquestion so implementiert:
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
würde es funktionieren, aber ich bekomme es nicht hin.
Könntest du mir erklären, wie es funktionieren würde?
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 : 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
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 2 weeks ago #255790
by Joffm
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 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
Replied by Joffm on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Naja, das war ja der entscheidende Teil. Ohne diese funktionierte ja die Hälfte des css scriptes nicht.Die CSS-Klasse "coloured-array" hatte ich nicht hinzugefügt!
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.
Das heißt also für mich als Respondenten:ich möchte, dass der Slider Tooltip nur erscheint, wenn man mit der Maus darüberfährt
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
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 0
2 months 2 weeks ago #255896
by ngolub
Replied by ngolub on topic Implementation eines Sliders in der 2ten Skala eines Dual Arrays.
Please Log in to join the conversation.
- ngolub
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 0
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 3 days ago #257061
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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