Welcome to the LimeSurvey Community Forum

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

Search Results (Searched for: background)

  • tpartner
  • tpartner's Avatar
17 Apr 2024 18:49
My solution would be to do as Joffm suggests - load the sub-question order in a hidden (via CSS class) short-text question. On page load, if that question is found to be populated, that order is used, otherwise your randomization alogorithm kick in.

Code:
<script type="text/javascript">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
            return array;
        }
 
        // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
        // Identify some elements and define variables
        var thisQuestion = $('#question{QID}');
        var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
        var orderQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
        var orderInput = $(':text.form-control:eq(0)', orderQuestion);
        var array_res;
        var aOrder = [];
 
        // Previously set order
        if($.trim($(orderInput).val()) != '') {
            array_res = $.trim($(orderInput).val()).split(',');
        }
        // No previous order set
        else {    
            // Special codes appear after
            var afterCode = 4;
 
            //Array for K Codes
            var array_k = ["b","d","g","h","i","j","l"];
 
            //Array for N Codes
            var array_n = ["c","e","f","k","m","n"];
 
            //Array for Special K Codes
            var array_sk = [];
 
            //Array for Special N codes
            var array_sn = ["a"];
 
            //Array for super special codes
            var array_ss = ["p"];
 
            // Shuffle order of "normal" arrays
            shuffleArray(array_k);
            shuffleArray(array_n);
 
            // Slice "normal" arrays and merge second part to special codes
            array_sk = array_sk.concat(array_k.slice(afterCode));
            array_sn = array_sn.concat(array_n.slice(afterCode));
 
            // Save only first part of "normal" arrays
            array_k = array_k.slice(0, afterCode);
            array_n = array_n.slice(0, afterCode);
 
            // Shuffle special arrays
            shuffleArray(array_sk);
            shuffleArray(array_sn);
            shuffleArray(array_ss);
 
            // Combine normal and special arrays
            array_k = array_k.concat(array_sk);
            array_n = array_n.concat(array_sn);
 
            // Merge arrays in order n,k,n,k...
            array_res = mergeArrays(array_k, array_n);
 
            //Add super special array to end of result array
            array_res = array_res.concat(array_ss);
 
            // Load the hidden order input
            $(orderInput).val(array_res);
        }
 
        // Loop through the answer codes
        $.each(array_res, function(i, val) {
            // Move the answer item
            $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
        });
 
        // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
    });   
 
</script>

Sample survey:  

File Attachment:

File Name: limesurvey...3182.lss
File Size:56 KB
  • BBSR-SR5
  • BBSR-SR5's Avatar
17 Apr 2024 18:22
Hm actually, I figured it might be easier to replace the Math.random() function with a seeded random function and then use the survey number as a seed. That way it should stay constant for a user.

Though how would I access that? Right now I've plugged in Date.now()
Code:
<script type="text/javascript" data-author="BBSR-SR5 &amp; Tony Partner">
  $(document).on('ready pjax:scriptcomplete',function(){
 
 
//Define Seeded Random function
   function splitmix32(a) {
  return function() {
    a |= 0;
    a = a + 0x9e3779b9 | 0;
    let t = a ^ a >>> 16;
    t = Math.imul(t, 0x21f0aaad);
    t = t ^ t >>> 15;
    t = Math.imul(t, 0x735a2d97);
    return ((t = t ^ t >>> 15) >>> 0) / 4294967296;
  };
}
 
function shuffleArray(array) {
  const seed = Date.now();
  const random = splitmix32(seed);
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}
 
    // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
    //Identify this question
    var thisQuestion = $('#question{QID}');
    var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
    var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
 
    // Special codes appear after
        var afterCode = 4;
 
        //Array for K Codes
        var array_k = ["b","d","g","h","i","j","l"];
 
        //Array for N Codes
        var array_n = ["c","e","f","k","m","n"];
 
        //Array for Special K Codes
        var array_sk = [];
 
        //Array for Special N codes
        var array_sn = ["a"];
 
        //Array for super special codes
        var array_ss = ["o"];
 
    // Shuffle order of "normal" arrays
        shuffleArray(array_k);
        shuffleArray(array_n);
 
 
        // Slice "normal" arrays and merge second part to special codes
        array_sk = array_sk.concat(array_k.slice(afterCode));
        array_sn = array_sn.concat(array_n.slice(afterCode));
 
        // Save only first part of "normal" arrays
        array_k = array_k.slice(0, afterCode);
        array_n = array_n.slice(0, afterCode);
 
        // Shuffle special arrays
        shuffleArray(array_sk);
        shuffleArray(array_sn);
        shuffleArray(array_ss);
 
        // Combine normal and special arrays
        array_k = array_k.concat(array_sk);
        array_n = array_n.concat(array_sn);
 
        // Merge arrays in order n,k,n,k...
        var array_res = mergeArrays(array_k, array_n);
 
        //Add super special array to end of result array
        array_res = array_res.concat(array_ss);
 
 
 
 
    // Loop through the answer codes
    $.each(array_res, function(i, val) {
      // Move the answer item
      $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
    });
 
 
 
 
    // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
 
      //alert(array_res);
    //console.log(array_res);
    });
 
 
 
</script>

How would I access the participant number from the code?
  • tpartner
  • tpartner's Avatar
12 Apr 2024 14:06
This should do it:

Code:
<script type="text/javascript">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
            return array;
        }
 
        // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
        //Identify this question
        var thisQuestion = $('#question{QID}');
        var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
 
        // Special codes appear after
        var afterCode = 4;
 
        //Array for K Codes
        var array_k = ["b","d","g","h","i","j","l"];
 
        //Array for N Codes
        var array_n = ["c","e","f","k","m","n"];
 
        //Array for Special K Codes
        var array_sk = [];
 
        //Array for Special N codes
        var array_sn = ["a"];
 
        //Array for super special codes
        var array_ss = ["p"];
 
        // Shuffle order of "normal" arrays
        shuffleArray(array_k);
        shuffleArray(array_n);
 
        // Slice "normal" arrays and merge second part to special codes
        array_sk = array_sk.concat(array_k.slice(afterCode));
        array_sn = array_sn.concat(array_n.slice(afterCode));
 
        // Save only first part of "normal" arrays
        array_k = array_k.slice(0, afterCode);
        array_n = array_n.slice(0, afterCode);
 
        // Shuffle special arrays
        shuffleArray(array_sk);
        shuffleArray(array_sn);
        shuffleArray(array_ss);
 
        // Combine normal and special arrays
        array_k = array_k.concat(array_sk);
        array_n = array_n.concat(array_sn);
 
        // Merge arrays in order n,k,n,k...
        var array_res = mergeArrays(array_k, array_n);
 
        //Add super special array to end of result array
        array_res = array_res.concat(array_ss);
 
        // Loop through the answer codes
        $.each(array_res, function(i, val) {
            // Move the answer item
            $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
        });
 
        // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
 
    });  
 
</script>

Sample survey: 

File Attachment:

File Name: limesurvey...3181.lss
File Size:41 KB
  • tpartner
  • tpartner's Avatar
09 Apr 2024 16:49
Try this in custom.css:

Code:
.inserted-spacer-question .radio-item:last-child label::before {
    border-color: #CCCCCC;
    background-color: #FFFFFF;
}
 
.inserted-spacer-question .radio-item:last-child label::after {
    background-color: #CCCCCC;
}
  • BBSR-SR5
  • BBSR-SR5's Avatar
09 Apr 2024 16:32
I've got another little design adjustment I want to do.

I want to color the radio buttons in the last/non-answer column grey.

I need to adjust the class radio-item label:before for this purpose. But I'm not sure how I make sure this is only applied to the last column.
Code:
.radio-item label::before {
border: 2px solid #6E748C;
background-color: #C6C6C6;
}

In the developer mode the class is attached to this:
 

I've been trying something like this:
Code:
$(document).on('ready pjax:scriptcomplete',function(){
 
    $('.array-flexible-row.inserted-spacer-question').each(function(e) {
 
        // Identify some elements
        var thisQuestion = $(this);
        var thisTable = $('table.subquestion-list', thisQuestion);
 
        // Adjust column widths
        var spacerWidthPercent = 4;
        var labelWidth = ($('col:first', thisTable).width()/$('colgroup:first', thisTable).width())*100;
        var answerWidth = (100-labelWidth-spacerWidthPercent)/$('col:gt(0)', thisTable).length;
        $('col:gt(0)', thisTable).width(answerWidth+'%');
 
        // Insert some elements
        $('col:last', thisTable).before('<col class="inserted-spacer">');
        $('thead th:last-child, tr.ls-heading-repeat th:last-child', thisTable).before('<th class="inserted-spacer" />');
        $('tbody td.answer-item:last-child', thisTable).before('<td class="inserted-spacer" />');
        //$('col:last', thisTable).addClass('radio-item-nr');
    });
 
});
I renamed the class to radio-item-nr, so it wouldn't overwrite the radio-item class elsewhere.

But this doesn't work. I assume that's because I'm trying to attach it at the wrong point?

 
  • MariAngelesCalvo
  • MariAngelesCalvo's Avatar
08 Apr 2024 20:51
Hello, Joffm!

Now I have been able to adjust the background colours I needed. Thank you very much!
  • Joffm
  • Joffm's Avatar
08 Apr 2024 20:15 - 08 Apr 2024 20:21
When I open the webdevelopment tool
I see this (in theme "bootswatch")
 
As you see the background color is set to "maroon.

Now when you investigate the navbar you see that here the class ".bg-light" is affected
 

Adding both to the "custom.css"
 

 

Or you address the navbar and other elements directly like
Code:
.navbar {
  background-color: yellow !important;
}


to get this
 

I do not see a real issue.


And at the beginning you showed "bootswatch". But now you talk about "vanilla".
Ths is different.
As you will find out the "question-title-container" has no added class "bg-primary". So you have to set the container's background color.
Code:
.question-title-container {
  background-color: yellow !important;
}


And fruity might be different as well.
Often you have to specify it, like
.fruity .bg-light {..

So investigate and try.

Joffm
  • MariAngelesCalvo
  • MariAngelesCalvo's Avatar
08 Apr 2024 18:37
Dear Joffm,

thank's for your quick reply! But I don't think the solution has worked. I saved the code in both the "custom.css" and "theme.css" screens and it didn't change the colour of the ".navbar" or the ".navbar-brand". With F12 I have not been able to locate the colour either and the most I have been able to do is to "patch" the colour in the bar. What I managed to change was to search for "navbar" and add the code " background-color: #6b8e23; "... Do you think you could help me to know how to change the colour of the whole bar?Other alternatives that I have tried and that worked in previous versions, but in this 6.5.2 are not working:".navbar-default { background-color: #3c3c3c; }".navbar {Background-color: #6b8e23;}.navbar .navbar-brand {Colour: #6b8e23;Background-color: #6b8e23;}.navbar .navbar-brand:hover,.navbar .navbar-brand:focus {Colour: #FFFFFFFF;Background-color: #6b8e23;} "In the Vanilla theme I did manage to change the background-colour of the title of the question. I'm attaching a screenshot of what happened with the ".navbar" and the theme for what it's worth.

Thank's, again!   

File Attachment:

File Name: extends_vanilla.zip
File Size:115 KB

File Attachment:

File Name: extends_vanilla.zip
File Size:115 KB
  • Joffm
  • Joffm's Avatar
08 Apr 2024 17:39
Hi,
investigate with the webdevelopmemnt tool of your browser (F12)

To chnage the background color generally you may set the color
Code:
.bg-primary {
   background-color: maroon !important;
}
 

Joffm
 
  • MariAngelesCalvo
  • MariAngelesCalvo's Avatar
08 Apr 2024 17:08
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.5.2
Own server or LimeSurvey hosting: LimeSurvey hosting
Survey theme/template: Vanilla, Bootswatch or Fruity
==================
HI! 
I have recently updated LimeSurvey to 6.5.2 version and my theme templates are no longer usable. I need to change the background colour of the "navbar", "navbar-brand", "question.title/valid" elements (the background colour of the question text), but using the codes and actions from previous versions is not working. E.G.:

Theme editor --> Custom.css/Theme.css: ".navbar .navbar-brand { background-color: #FFFFFF }

Do you know what codes I can use to change the background colour of these elements in the "Vanilla", "bootswatch" or "fruity" themes? Where should I insert them?

Thanks for your help!

Best regards,
Mª Ángeles. 

https://drive.google.com/file/d/1--Lvvu43XRnogi7ODCFiELoyeyW8luGO/view?usp=drive_link
[img
  • Joffm
  • Joffm's Avatar
03 Apr 2024 22:30
Replied by Joffm on topic How to use Vertical Silder
Always investigate with the webdevelopment tool of your browser (F12)
Here you see what you may change.

Reverse the colors of the slider.

Like
Code:
 .fruity .slider-selection {
     background-image: linear-gradient(0deg,#f7f7f7,#f7f7f7)
}
  .slider-track-high {
    background-color: red;
}
.slider-untouched .slider-track-high {
    background-color: #f7f7f7;
}
 
  • msvallinga
  • msvallinga's Avatar
02 Apr 2024 14:46
Dear forum members,

I hope someone can help us with our problem. First some background information about our study:

1.       We use LimeSurvey Version 2.6.7 Build SondagesPro 1.7.3. We are not allowed to use plugins.
2.       We are conducting a 3 round closed Delphi survey. In the first round, participants rate 40 items on a Likert scale from 1 to 5. In the second round, we will ask participants to rate the items again (on the same likert scale) but after extra information. We also want to show them their own rating of round 1 with every item. So the survey of round 2 is a different survey then round 1. Every participant has his/her own personal token, which will be the same in survey two.

Our question is: How do we show participants in the survey of round two, their own ratings of round one, for every item?
 So in round 2, we will ask participants to rate an item on a scale of 1 to 5. Above or in front of the likert scale we want to display the score they gave in the previous round. But how can we do that without a plugin?
There have been a few threads before that have hinted that there is a way to do it without plugins, using custom token fields and expression manager, but we are still confused.

These are the threads:   Delphi Survey - LimeSurvey Forums   
 Delphi with Limesurvey - LimeSurvey Forums     
Delphi - Plugin use - LimeSurvey Forums
  

Your help is greatly appreciated, 

Kind regards,Pip, Marleen and Miranda
  • msvallinga
  • msvallinga's Avatar
25 Mar 2024 15:53 - 25 Mar 2024 17:20
Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Version 2.6.7 Build SondagesPro 1.7.3. 
Own server or LimeSurvey hosting: own server
Survey theme/template: none
==================
Dear forum members,I hope someone can help us with our problem. First some background information about our study:
1.       We use LimeSurvey Version 2.6.7 Build SondagesPro 1.7.3. We are not allowed to use plugins.
2.       We are conducting a 3 round closed Delphi survey. In the first round, participants rate 40 items on a Likert scale from 1 to 5. In the second round, we will ask participants to rate the items again (on the same likert scale) but after extra information. We also want to show them their own rating of round 1 with every item. So the survey of round 2 is a different survey then round 1. Every participant has his/her own personal token, which will be the same in survey 2.How do we show participants in the round 2 survey, their own ratings of round one for every item?There have been a few threads before that have hinted that there is a way to do it without plugins, using custom token fields and expression manager, but we are still confused.These are the threads:  Delphi Survey - LimeSurvey Forums   Delphi with Limesurvey - LimeSurvey Forums   Delphi - Plugin use - LimeSurvey Forums  Your help is greatly appreciated, Kind regards,Pip, Marleen and Miranda
  • Bti2024
  • Bti2024's Avatar
22 Mar 2024 22:56 - 22 Mar 2024 23:37
Replied by Bti2024 on topic Changing Bootstrap bouton question
Hi DenisChenu,

Thanks for your feedback.
I have added the code in the custom.css file and set mybtn in Class css of the main question (see the attached picture)  , but still doesnt change the bootstrap shape (the bold parts are the existing code) :

/******************
    User custom CSS
   



    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/* Normal */

/* body{background : #C2DAFE }*/
 8#b3c9f8

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
/*@import ".C:\Backup\Sondages\Nouveau\Siège\En cours\new\awesome-bootstrap-checkbox.css";*/


.mybtn .btn {
  padding: 26px 5px;
  line-height: 2.5;
  border-radius: 50%;
  width: 62%;
  margin-left: 19%;
  margin-top: 20px;
}.mybtn .btn-primary:active,.mybtn .btn-primary.active {   
    background-color: #76C1E2 !important;
    border-color: #76C1E2 !important;
}
.mybtn .btn-primary {
    background-color:maroon;
    border-color: #2473B9;
}
.mybtn .btn-primary:hover {
    background-color: green;
    border-color: #2473B9;
}

.btn-primary {
    background-color: #5CB9EC;
    border-color: #5CB9EC;
}
.btn-primary:hover {
    background-color: #91DEF8;
    border-color: #91DEF8;
}
 
.btn-primary:active,
.btn-primary.active {
    background-color: #91DEF8 !important;
    border-color: #91DEF8 !important;
}


I have also login with admin user but cannot see where I can set the XSS filter(please  see the screenshot).

Regards

 
  • DenisChenu
  • DenisChenu's Avatar
22 Mar 2024 10:56
Replied by DenisChenu on topic Changing Bootstrap bouton question
If you have access to theme
BEST solution :
Extend the theme and
Add
Code:
.mybtn .btn {
  padding: 26px 5px;
  line-height: 2.5;
  border-radius: 50%;
  width: 62%;
  margin-left: 19%;
  margin-top: 20px;
}.mybtn .btn-primary:active,.mybtn .btn-primary.active {   
    background-color: #76C1E2 !important;
    border-color: #76C1E2 !important;
}
.mybtn .btn-primary {
    background-color:maroon;
    border-color: #2473B9;
}
.mybtn .btn-primary:hover {
    background-color: green;
    border-color: #2473B9;
}
and any other update to custom.css

Add mybtn CSS Class on the question seetings where you need this button
Displaying 1 - 15 out of 103 results.

Lime-years ahead

Online-surveys for every purse and purpose