Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Search Results (Searched for: background)
- linuxhooligan
31 Oct 2023 02:07
Chartjs.org and Limesurvey was created by linuxhooligan
Please help us help you and fill where relevant:
Your LimeSurvey version: Version 5.6.43+231030
Own server or LimeSurvey hosting: vps
Survey theme/template:
==================
I wanted to insert a donut chart using Chartjs.org into LS as per this tutorial: www.w3schools.com/js/tryit.asp?filename=tryai_chartjs_doughnut
I found this reference on the forum on how to wrap the js code with $(document)... so that the rendering is fired when the whole document is loaded here: forums.limesurvey.org/forum/can-i-do-thi...e-of-chartjs-library
Here is the code that I input in a Text Display field:
<script src=" cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js ">
<script type="text/javascript">
$(document).on('ready pjax:scriptcomplete',function(){
var barColors = [
"rgba(0,0,255,1.0)",
"rgba(0,0,255,0.
",
"rgba(0,0,255,0.6)",
"rgba(0,0,255,0.4)",
"rgba(0,0,255,0.2)",
];
new Chart("myChart", {
type: "pie",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
title: {
display: true,
text: "World Wide Wine Production"
}
}
});
});
</script>
<div class="content">
<div class="wrapper" style="max-width: 800px; margin: auto"><canvas id="myChart"></canvas></div>
</div>
However, the chart doesn't render.
Does anyone have any suggestions or working examples of the use of Chratjs.org in LS 5.x?
Thanks.
Your LimeSurvey version: Version 5.6.43+231030
Own server or LimeSurvey hosting: vps
Survey theme/template:
==================
I wanted to insert a donut chart using Chartjs.org into LS as per this tutorial: www.w3schools.com/js/tryit.asp?filename=tryai_chartjs_doughnut
I found this reference on the forum on how to wrap the js code with $(document)... so that the rendering is fired when the whole document is loaded here: forums.limesurvey.org/forum/can-i-do-thi...e-of-chartjs-library
Here is the code that I input in a Text Display field:
<script src=" cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js ">
<script type="text/javascript">
$(document).on('ready pjax:scriptcomplete',function(){
var barColors = [
"rgba(0,0,255,1.0)",
"rgba(0,0,255,0.
","rgba(0,0,255,0.6)",
"rgba(0,0,255,0.4)",
"rgba(0,0,255,0.2)",
];
new Chart("myChart", {
type: "pie",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
title: {
display: true,
text: "World Wide Wine Production"
}
}
});
});
</script>
<div class="content">
<div class="wrapper" style="max-width: 800px; margin: auto"><canvas id="myChart"></canvas></div>
</div>
However, the chart doesn't render.
Does anyone have any suggestions or working examples of the use of Chratjs.org in LS 5.x?
Thanks.
- chantelanuit
27 Oct 2023 18:37
- Joffm
27 Oct 2023 16:06
Replied by Joffm on topic Fruity: Selected button color reverts to standard one (apart from the border)
Hi,
always investigate with the webdevelopment toll of your browser.
Here you see that the class of the active item is a bit different now.
So, if I use
I get (second item selected, fourth item hovered)
Was it a typo in your code that color and background-color if an active item are the same?
Joffm
always investigate with the webdevelopment toll of your browser.
Here you see that the class of the active item is a bit different now.
So, if I use
Code:
/* Normal */ .fruity .btn-primary { border-color: rgb(12,123,220) !important; color: black !important ; background-color: white !important; font-weight: bold !important; } /* Active */ .fruity .btn-check:active+.btn-primary, .fruity .btn-check:checked+.btn-primary { background-color: rgb(255,194,10) !important; color: #FFC20A !important; border-color: rgb(255,194,10) !important; } /* Normal and mouse over */ .fruity .btn-primary:hover { background-color: rgb(255,194,10) !important; color: #FFF !important; border-color: rgb(255,194,10) !important; } /* Active and move the mouse over it */ .fruity .btn-primary.active:hover { background-color: rgb(255,194,10) !important; color: #FFF !important; border-color: rgb(255,194,10) !important; }
I get (second item selected, fourth item hovered)
Was it a typo in your code that color and background-color if an active item are the same?
Joffm
- chantelanuit
26 Oct 2023 05:39
- paparicio
24 Oct 2023 12:01
- linuxhooligan
17 Oct 2023 16:18 - 17 Oct 2023 17:15
- Joffm
17 Oct 2023 12:13
Replied by Joffm on topic Change the colour of navigator boxes
Hi,
you address the buttons
#ls-button-previous and #ls-button-submit.
Like this
Don't forget to define the other states of the buttons (active, hover,...)
Joffm
you address the buttons
#ls-button-previous and #ls-button-submit.
Like this
Code:
#ls-button-previous { background-color:red; color:yellow; } #ls-button-submit { background-color:yellow; color:maroon; }
Don't forget to define the other states of the buttons (active, hover,...)
Joffm
- KatMey99
13 Oct 2023 19:37
Replied by KatMey99 on topic Array with comment field in last row
Hi Joffm,
this is very helpful. Thank you for sharing!
Unfortunately, I am still a newbie on limesurvey and haven't been able to fully adjust the code you shared.
I have gotten this far:
Unfortunately, I still have two problems:
I have attached the lss of the screenshots in the question and would be super grateful for guidance on how to adjust the code. Sorry for all the follow up questions, I am still learning...
Thank you!
this is very helpful. Thank you for sharing!
Unfortunately, I am still a newbie on limesurvey and haven't been able to fully adjust the code you shared.
I have gotten this far:
Unfortunately, I still have two problems:
- Firstly, I would need the description of the prompt of the long free text box to be in small black font, not have a blue background nor question code (it shouldn't look like a distinct question really).
- Secondly, I realised that when I add further questions to the question group, all of them are being merged together (see picture below). Hence, I need to figure out how to make sure that the array question and corresponding comment box are presented together but the other questions appear as separate.
I have attached the lss of the screenshots in the question and would be super grateful for guidance on how to adjust the code. Sorry for all the follow up questions, I am still learning...
Thank you!
- sjgarth
02 Oct 2023 23:32
- Joffm
27 Sep 2023 11:24
Replied by Joffm on topic Center the selection box on a radius and multiple question.
Hi,
Here the "image-select"
I really do not see why participants couldn't be sure to select the option the want to select.
Now, trhe version you mentiened (4.25) never existed.
There is a release 4.3.25 from Nov 4, 2020.
And because version 4.x. started a bit clumpsy there were some new release candidates of 4.4.x.
Nevertheless, the "image-select" option seems still to be broken in version 5.x.
So either you update to the actual version 6.x. where the "image-select" works.
Or you may follow this thread to create a table in the question text of an "array" question and move the radio buttons into it.
[url] forums.limesurvey.org/index.php/forum/de...swer?start=24#232590 [/url]
Here an adapted example
This code in the source code of the question
At first "the table"
The script to insert the buttons
And some css
You may adapt to your needs.
Joffm
Here the "image-select"
I really do not see why participants couldn't be sure to select the option the want to select.
Now, trhe version you mentiened (4.25) never existed.
There is a release 4.3.25 from Nov 4, 2020.
And because version 4.x. started a bit clumpsy there were some new release candidates of 4.4.x.
Nevertheless, the "image-select" option seems still to be broken in version 5.x.
So either you update to the actual version 6.x. where the "image-select" works.
Or you may follow this thread to create a table in the question text of an "array" question and move the radio buttons into it.
[url] forums.limesurvey.org/index.php/forum/de...swer?start=24#232590 [/url]
Here an adapted example
This code in the source code of the question
At first "the table"
Code:
<table align="center" border="1" cellpadding="5" cellspacing="3" class="table table-responsive" style="width:1100px"> <tbody> <tr> <td class="td0 lightgreen" colspan="6">Please, select one of the images</td> </tr> <tr style="height:80px;"> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_02.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_03.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_04.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_05.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_06.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_07.jpg" /></td> </tr> <tr style="height:80px;"> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_08.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_09.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_10.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_16.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_12.jpg" /></td> <td class="td0 center yellow"><img class="img-responsive center-block" src="https://www.myServer.de/userfiles/Hamburg-Ballett_13.jpg" /></td> </tr> </tbody> </table>
The script to insert the buttons
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Move the radios $('.question-text table:eq(0) tr:eq(1) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(0) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(1) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(2) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(3)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(3) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(4)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(4) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(1) td:eq(5)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(5) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(6) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(7) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(8) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(3)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(9) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(4)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(10) *', thisQuestion)); $('.question-text table:eq(0) tr:eq(2) td:eq(5)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(11) *', thisQuestion)); // Some classes for presentation $('.question-text table:eq(0) input:radio', thisQuestion).closest('td').addClass('answer-item radio-item text-center radio'); $('.question-text table:eq(0) .radio-item label', thisQuestion).show(); // Click event on the table cells $('.question-text table:eq(0) .radio-item', thisQuestion).on('click', function(e) { $('input:radio', this).trigger('click'); }); $('.question-text table:eq(0) input:radio', thisQuestion).on('click', function(e) { e.stopPropagation(); }); // Clean-up styles $('.answer-container', thisQuestion).hide(); $('.question-text table:eq(0) .label-text', thisQuestion).remove(); $('.question-text table:eq(0) .radio-text', thisQuestion).css({ 'cursor': 'pointer' }); $('td.radio', thisQuestion).css({ 'display': 'table-cell', 'padding': '3px' }); }); </script> <style type="text/css">/* classes to display the form */ .dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility { left: auto; margin-left: 0px; }
And some css
Code:
.td0 { text-align: left; vertical-align: middle; font-size:13px; color:black; padding-top:5px; padding-bottom:5px; border-left:0; border-right:0; } .lightgreen { background-color: mediumseagreen; } .yellow { background-color: #ffe699; } .center { text-align: center; } /* classes to change the size of radios */ .radio-item .ls-label-xs-visibility { width: 30px; height: 30px; } .radio-item label { padding-left: 25px; padding-top: 3px; } .radio-item label:before { width: 30px; height: 30px; border-color: #aaa; margin-right: 20px; } .radio-item label::after { background-color: #702000; width: 20px; height: 20px; left: 5px; top: 5px; } </style>
You may adapt to your needs.
Joffm
- tpartner
22 Sep 2023 22:46 - 22 Sep 2023 22:52
Replied by tpartner on topic Yes no button color
First, extend the theme -
manual.limesurvey.org/New_Template_Syste...S3.x/en#Theme_Editor
If using the fruity/skyline-blue variation and you want to restrict this to yes/no questions, add something like this to the end of the custom.css file:
If using the fruity/skyline-blue variation and you want to restrict this to yes/no questions, add something like this to the end of the custom.css file:
Code:
.yourThemeName div.yes-no .btn-check:checked + .btn-primary { background-color: #00A9F8; border: 1px solid #00A9F8; }
- Joffm
13 Sep 2023 13:06
Replied by Joffm on topic Views von Fragendesign anpassen
Naja, wenn es wirklich nur um so etwas geht
mit einer zusätzlichen Klasse versehen und entsprechend anpassen.
Also irgendwie so:
Alle Fragen mit der css-Klasse "design2" werden dann eben anders dargestellt.
Beispiel (nur ein bisschen Farbe und Schrift-Font)
Joffm
würde ich einfach die infrage kommenden Klassen in der "custom.css"um nur ein paar CSS Klassen oder HTML-Tags anzupassen.
mit einer zusätzlichen Klasse versehen und entsprechend anpassen.
Also irgendwie so:
Code:
.design2 .question-container, .design2 .question-title-container, .design2 .question-valid-container { background-color: lime; color: red; border-left: 20px solid yellow; font-family: Georgia; font-size:16px; } .design2 .answer-container { background-color: #ccc; font-family: Georgia; }
Alle Fragen mit der css-Klasse "design2" werden dann eben anders dargestellt.
Beispiel (nur ein bisschen Farbe und Schrift-Font)
Joffm
- holch
29 Aug 2023 15:09
- Joffm
31 Jul 2023 15:31 - 31 Jul 2023 15:40
Replied by Joffm on topic Body scheme with grid to indicate tattoo locations
Hi, there are e few solutions provided here.
1.
As you see, the coordinates are stored in the data. In a real survey you will hide this of course.
@tpartner's javascript
Up to now you can only enter one point.
You may adapt the script to be able to enter more
2.
@tpartner's plugin "interestPoints"
[url] github.com/tpartner/LimeSurvey-Image-Interest-Points-3x [/url]
This you may adapt to have only one kind of markers, not the (+) and (-)
If I remember correctly there also was a question how to enter several markers some time ago.
I think it was about places in the Netherlands.
[url] forums.limesurvey.org/index.php/forum/de...res-all-mouse-clicks [/url]
Joffm
P.S.
I hope the survey will help to develop a therapy against this skin disease.
1.
As you see, the coordinates are stored in the data. In a real survey you will hide this of course.
@tpartner's javascript
Code:
<div class="image-wrapper img-responsive center-block" style="border:2px solid #999; width: 100%;max-width: 500px; position:relative "> <img src="upload/surveys/{SID}/image/muskeln.jpg" style="border:0 none; width: 100%; height: auto;" /> </div> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify this question var thisQuestion = $('#question{QID}'); // Hide the text input - un-comment below // $('input.text', thisQuestion).hide(); // $('.ls-answers', thisQuestion).hide(); // Create the click "marker" $('.image-wrapper', thisQuestion).append('<div class="click-marker" />'); var leftVal = 0; var topVal = 0; var displayVal = 'none'; if($.trim($('input.text', thisQuestion).val()) != '') { leftVal = $.trim($('input.text', thisQuestion).val()).split(',')[0]+'%'; topVal = $.trim($('input.text', thisQuestion).val()).split(',')[1]+'%'; displayVal = 'block'; } $('.click-marker', thisQuestion).css({ 'display': displayVal, 'position': 'absolute', 'left': leftVal, 'top': topVal, 'margin': '-10px 0 0 -10px', 'width': '18px', 'height': '18px', '-moz-border-radius': '10px', '-webkit-border-radius': '10px', 'border-radius': '10px', 'background': '#0C0', 'border': '1px solid #090' }); // Click event on the image $('.image-wrapper, img', thisQuestion).on('click', function(e) { var thisWidth = $(this).width(); var thisHeight = $(this).height(); var posX = $(this).offset().left; var posY = $(this).offset().top; var xCoord = e.pageX - posX; var yCoord = e.pageY - posY; var xCoordPercent = (xCoord/thisWidth)*100; var yCoordPercent = (yCoord/thisHeight)*100; // Load the click coordinates (as relative percentages) $('input:text', thisQuestion).val(xCoordPercent.toFixed(2)+','+yCoordPercent.toFixed(2)); // Reposition the marker $('.click-marker', thisQuestion).css({ 'display': 'block', 'left': xCoordPercent+'%', 'top': yCoordPercent+'%' }); }); // Returning to the page if($('input:text', thisQuestion).val() != '') { var coords = $.trim($('input:text', thisQuestion).val()).split(','); $('.click-marker', thisQuestion).css({ 'display': 'block', 'left': coords[0]+'%', 'top': coords[1]+'%' }); } }); </script>
Up to now you can only enter one point.
You may adapt the script to be able to enter more
2.
@tpartner's plugin "interestPoints"
[url] github.com/tpartner/LimeSurvey-Image-Interest-Points-3x [/url]
This you may adapt to have only one kind of markers, not the (+) and (-)
If I remember correctly there also was a question how to enter several markers some time ago.
I think it was about places in the Netherlands.
[url] forums.limesurvey.org/index.php/forum/de...res-all-mouse-clicks [/url]
Joffm
P.S.
I hope the survey will help to develop a therapy against this skin disease.
- Joffm
27 Jul 2023 15:33 - 27 Jul 2023 15:50
Replied by Joffm on topic Results of an Self Assessment tool in Email
Well,
you try to insert your equation.
If you have a look at the answer table, you will see that here all styling is removed
In my mail I see this
Exactly what is stored in the answer table.
It's easy to insert it (something like this)
Not really tested, because there is some INSERTANS-stuff and renamed question codes (Did you import groups several times?)
And now a few words in German. I am tired to write in English without reason.
Ein paar Dinge finde ich wirklich etwas strange.
1. Wie gesagt INSERTANS. Das war schon ausgemustert, als ich 2015 zu LiimeSurvey stieß.
Jetzt benutzen wir ExpressionManager.
2. Analog in Deinen Diagrammen. ExpressionManager.
Lies dazu einmal mein "Tutorial 3: Gimmicks", Kap. 3 (im deutschen Teil, im Moment noch auf der ersten Seite)
(natürlich auch in den "Kompetenz-Tabellen)
3. Warum benutzt Du keine numerischen Codes, sondern bemühst die Assessment-Werte dazu?
Bedenke, im Datensatz wird "A1", "A2,... gespeichert. Damit kann man nicht besonders gut rechnen.
Joffm
you try to insert your equation.
If you have a look at the answer table, you will see that here all styling is removed
In my mail I see this
Exactly what is stored in the answer table.
It's easy to insert it (something like this)
Code:
<div style=" font-family: Arial, sans-serif; border: 2px solid #007BFF; border-radius: 10px; padding: 20px; background-color: #f8f9fa; color: #343a40; max-width: 600px; margin: 0 auto; "> <p>{if(UeberholenAVG>1,"Super, ","")}Sie haben <strong>{UeberholenAVG}</strong> Punkte erreicht. Das ist {if(UeberholenAVG>2,"ein Super ",if(UeberholenAVG>1,"ein tolles","kein besonders gutes"))} Ergebnis. Sie sind <strong style='color: green;'>{if(UeberholenAVG>2,"Expert",if(UeberholenAVG>1,"advanced",""))}</strong>.</p> <p>{if(UeberholenAVG>1,"Sie benötigen keine Verbesserung.","Sie sollten üben. Dies können Sie unter anderem mit diesem Buch tun: Link")}</p> <p> </p> <p>{if(Selbsteinschaetzung2 == UeberholenAVG, "Ihre Selbsteinschätzung deckt sich mit den Ergebnissen dieses Tests", if (Selbsteinschaetzung2 < UeberholenAVG, "Sie haben sich schlechter eingeschätzt, als dieser Test es aussagt", "Sie haben sich besser eingeschätzt, als der Test es gezeigt hat"))}</p> </div>
Not really tested, because there is some INSERTANS-stuff and renamed question codes (Did you import groups several times?)
And now a few words in German. I am tired to write in English without reason.
Ein paar Dinge finde ich wirklich etwas strange.
1. Wie gesagt INSERTANS. Das war schon ausgemustert, als ich 2015 zu LiimeSurvey stieß.
Jetzt benutzen wir ExpressionManager.
2. Analog in Deinen Diagrammen. ExpressionManager.
Lies dazu einmal mein "Tutorial 3: Gimmicks", Kap. 3 (im deutschen Teil, im Moment noch auf der ersten Seite)
(natürlich auch in den "Kompetenz-Tabellen)
3. Warum benutzt Du keine numerischen Codes, sondern bemühst die Assessment-Werte dazu?
Bedenke, im Datensatz wird "A1", "A2,... gespeichert. Damit kann man nicht besonders gut rechnen.
Joffm